Bootstrap 3 for the win in responsive design

Screenshot 2014-05-19 07.51.57Have you ever downloaded a WordPress or other CMS template and hit your head against the wall trying to figure out how the styles are setup so that you can format your content? Have you ever built a template from scratch or a website and thought that there has to be some standard by which web formatting and styles should adhere. Bootstrap is about to be your best friend.

Bootstrap is a rapid responsive design development library consisting of mostly standard stylesheet elements. Bootstrap consists of a 12 column grid with standard css names that you can apply to divs. Have you ever tried to make a HTML table work just the way you want it to and nest them? It’s really painful. Bootstrap solves that with these styles.

Bootstrap Grid

The code to produce the above grid is as follows:

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

As you can see, this is not complex if you follow the row and column nomenclature.

Bootstrap elements are designed to stack as you resize your browser or as the resolution of the device changes. You can see how beneficial this is if you want the elements above to be viewable on a mobile device.

My Cardinal Rules

Like they used to say about American Express… don’t leave home without it. Well, here are my rules with responsive design.

  • Always looks for Bootstrap templates or structures before you start from scratch. Preferably look for BootStrap3.
  • If you are using a CMS, picking a Bootstrap-based template can not only save you time, but save you vast amounts of hair pulling when working with your post content.
  • Look for existing styles that do what you want in BootStrap. If you need to override them, do so in your CSS after Bootstrap’s is imported.
  • Don’t reinvent the wheel… see rule #1
  • Think mobile first before you look at supporting the desktop versions
  • When in doubt about an element… wrap it in a div. You’ll be able to deal with it better later.

Using Bootstrap is probably the biggest time saving move you can make in preparing your web application or mobile website for the real world. I’ve barely scratched the surface of what the framework can do as well. You can even import the files for Bootstrap via a CDN or import them into your project using Bower.

 

 

 

 

 

AngularJS is what HTML should have been from the start

JAngularJS-largeavascript UI development and Ajax frameworks have been pretty painful and tedious for as long as I can remember, but the past few years the constantly evolving landscape has given us new tools that make it just as simple as writing server side compiled code. We now have development tools that allow you to debug through javascript, watch variables and insert data into the debugging process and even change elements on the fly while debugging. However, the very nature of javascript and HTML combos lend themselves to be pretty messy.

Developers are constantly munging HTML and javascript together and writing javascript code inline to manipulate DOM elements. It can be a downright daunting task to go back and edit code you wrote a few months ago in frameworks like Dojo and ExtJS. I won’t even mention having to look over someone else’s code… It makes me want to shiver. It’s not always because the other person’s code is bad, it’s usually because they munged it all together in a different way than you do. This is all a reminder of the days when programmers intermingled ASP/JSP code into the same files as HTML. Luckily, on the server side, we have had Struts, Spring MVC and .NET MVC frameworks  just to name a few. These frameworks provide Model View Controller (MVC) architecture to separate presentation logic from business logic and aggregation logic. This is something that HTML and Ajax frameworks have been missing… until now.

AngularJS is just HTML and Javascript

AngularJS by Google is a really simple Javascript framework that gives you the ability to separate the parts of your web client application by concerns. Angular allows you to define clearly delineated Controller, Service and Model layers that are completely separate from the templates or HTML. In fact, it you look at an HTML template from an Angular application, it looks pretty much just like plain HTML and it fairly easy to read and understand. I will repeat, it is just HTML.

Let’s look at an example. Angular provides that most applications would be “single-page” meaning that you won’t ever transition away from the header and footer once you reach the index.html, but instead the “live area” of the page will change based on elements that you choose as you click links. Thanks to HTML 5 history mechanisms, the Url appears to change as you switch pages. This makes the application extremely fast since you aren’t loading anything but changes as you progress through the application.

Essentially, if you use Angular routing, you will map a url say /test to a controller object, this controller object will process data and pass data to the HTML partial that will be included into the live area. The controller will typically interact with one or more services. The data that is passed to the HTML partial is merely the model. This is typical MVC architecture. Now let’s see how my application is structured.

Directives

The power of Angular likes mostly in directives.  Without this functionality Angular wouldn’t be nearly as useful to anyone. Directives define functionality and are mostly uses in conjunction with an html tag. For example, I can include my header partial just by using <header-menu></header-menu> in my index.html. The directive for this functionality is defined as follows:

 

directives.directive('headerMenu', function () {
    'use strict';
    return {
    	scope: false,
		//replace: true,
		//transclude: true,
    	restrict: 'E',
        templateUrl: 'templates/partial/header.html',
        controller: 'controllers.HeaderController'
    };
});

 

The HeaderController in this instance is unnecessary although, I might want to do some inclusion of dynamic elements of the header with it. Let’s take a look at the HeaderController…

 

controllers.HeaderController = function ($scope, $cookies) {
'use strict';

function init() {

var user = $cookies.username;
$scope.username = $cookies.username;

}

$scope.searchBar = new UISearch(document.getElementById( 'sb-search' ) );
$scope.searchBar.open();
$scope.searchData = {};
$scope.searchData.advanceSearchClicked = function() {

$scope.searchData.showAdvanced = !$scope.searchData.showAdvanced;

if ($scope.searchData.showAdvanced) {
$scope.searchBar.close();
} else {
$scope.searchBar.open();

}

};

init();
};

I’m not doing anything spectacular here… but you get the idea. You can also do controllers using the routing functionality. I do this by creating a configuration.js and defining JSON data that will provide data to the routing module.

 

var routes = routes || {};

 
//Route configurations
routes["/dashboard"] =  { 
        
         controller: 'controllers.DashboardController', 
		 templateUrl: 'templates/dashboard.html', 
		 aliases: ['/dash','/dasher'],
		 searchable: false,
		 meta: {
		   title: "Dashboard",
		   description: 'This is my description'
		 }
		 
 };
 
//in application.js

...

application.config(['$routeProvider', '$locationProvider','cfg', function AppConfig($routeProvider, $locationProvider, cfg, $routeParams) {
 
     $locationProvider.html5Mode(true).hashPrefix('!');
	 
	 console.log(cfg);
	 for (var route in cfg.routes)  {
		 
		 var routeObj = cfg.routes[route];
		 
		 $routeProvider.when(route, routeObj);
		
		if (routeObj.aliases) {
		 for (var i = 0; i < routeObj.aliases.length; i++)  
			  $routeProvider.when(routeObj.aliases[i], routeObj);
		}
		 
		 
		 
	 }


...

Notice that I am using HTML 5 routing… This is essential if you want pretty urls without having #! in them. Angular will automatically interpret for browsers that don’t support the HTML 5 history mechanism.

Services
Services in Angular are just areas where we can interact with servers or complete calculation or logic that is necessary for a page or to present data. For example, you might aggregate data from two REST services in an Angular service and add it to the scope. Let’s look at an example service that does just that.

services.factory('CMS', ['$resource','cfg', function($resource, cfg) {
  return function(postId) {
    
	console.log(cfg.cmsServiceAddress);
	return { 
	
	Post: $resource(cfg.cmsServiceAddress + '/?json=get_post&id=' + postId, {id: '@id'}),
	Posts: $resource(cfg.cmsServiceAddress + '/?json=get_posts'),
	Page: $resource(cfg.cmsServiceAddress + '/?json=get_page&id=' + postId, {id: '@id'}),
	
	};
  
  };
}]);

We are are getting fancy now by using resource to automatically populate a model for us. This particular service, gets data from WordPress via the JSON API plugin. Now lets see how to use it.

 

			 CMS(postId).Page.get({id: postId}, function(p){
                           console.log('Page success, got data: ', p); 
			
			    if (p && p.status == "ok") {
					
					title = p.page.title;
					description = p.page.description;
					
					$scope.Page = p;
					$scope.Content = p.page;
					
					 } else {
	
	     				alertService.add("Error", "Failed to Load Content...");
 
  					}
			
			}, function(err){

					alertService.add("Error", "Failed to Load Content...");
    				console.log('Page error');
						  
			});
			 

Scopes are Angular’s way to pass data, in the controller we pass the data to the HTML partial via the scope… In this case, we are adding content to the page this way. Let’s see how it is used.

 

<img src=”images/loading.gif” width=”214″ height=”206″ ng-show=”showLoad == true” class=”center”></img>

</div>

<div ng-bind-html=”Content.content”></div>

I display a loading dialog until the Content is loaded and then the page is rendered replacing the image. It’s pretty simple.

You can also include data in pages from the scope using the expression syntax. {{Content.content}} would put the content directly into the page for display.

Angular’s power also lies in it’s flexibility and architecture. Regardless of who the programmer is, the application should work similar enough for anyone familiar with Angular to work on it. And it really only takes a couple days to be up and running if you have knowledge of Javascript and HTML5. CSS can be extremely helpful as well since CSS is the mechanism by which a lot of the dynamic mechanisms work.

I think AngularJS is the future of web programming. Google has backed it and now we can stop pulling our hair out while trying to code in other inferior Javascript frameworks… AngularJS is definitely the Rolls Royce of the Ajax and dynamic web frameworks. Stay tuned for future posts because I am going to be presenting more examples from the AngularJS cookbook.

 

 

Responsive UI design is awesome, but pretty painful

I just completed a template design for a responsive UI using Bootstrap 3 and AngularJS and it has been a while since I have written anything about responsive UI so I thought I would write an update. My conclusion after all these months of working on them is that you can enjoy the fruits of your labor when you are done, but it can be a pretty painful process.

The first thing I learned about developing a responsive ui is that you probably should invest in a “ready made” template if you are using a CMS tool like Joomla or WordPress or outsource to someone who does it regularly if you want to start from scratch. It is fairly time consuming even for an experienced designer and can be extremely frustrating.

The second thing I learned was to use the right tools. I started out just trying to use a text editor and a browser and I learned really quick that I needed to expedite the development process. It had been several years since I had used Dreamweaver, but it is an extremely valuable tool for responsive design. Dreamweaver will show you multiple views of your application as you develop it and give you code and CSS insight when you need it.

Chrome and Chrome extensions are extremely valuable tools for the responsive UI arsenal. Chrome Developer Tools that are built in to Chrome are your best friend. Developer tools allow you to debug javascript, inspect div elements to see where they border and what styles are affecting them and a console for debugging. Other Chrome extensions I found useful are rulers, responsive ui views, eye dropper and more. Browse the extensions on the Chrome Store to learn more.

AngularJS-largeIn another post, I am going to extol the virtues of AngularJS by Google as a development tool and framework for really advanced websites and web applications, but I will mention that if you are doing more than just developing a static responsive ui and you really want dynamic and easy Ajax functionality in your application, then AngularJS is definitely the route to go. Angular provides very simple tools to allow you to utilize Ajax services and utilize the data returned in the simplest fashion.

My UI Philosophy

As I have mentioned many times, I completely disagree with frameworks and tools that write one language from another. After many years of writing applications with JSP/JSF, Vaadin, PHP. Perl and other languages that render html, I completed disagree with their use. I believe firmly in separating the presentation from the backend. Angular not only makes this process easy but it also allows you to separate your javascript logic from your HTML presentation. Clearly defined delineations in your application make sense and they make for a fantastic design.

Mobile First

Here is another thing I learned really quick… Build your handheld application view before you move out to the tablet view and desktop views. In my last project, I started with a desktop view template and some completed pages, then I moved on to make it responsive and I had to rework those pages and just through quite a few hoops to get the UI to scale and respond correctly. Write your handheld template, then move out to tablet and get that right, then move out to desktop. Do not write a single page in one view or another until your template is set. You will definitely thank me for this later…

Bootstrap

ImageI should have mentioned Bootstrap 3 already but I guess I was saving the best for last. If you do have to design a responsive template from scratch or you are searching for a template for your web site, make sure you start with Bootstrap as a requirement. It is without a doubt an amazing framework that unifies the approach to responsive ui design. I highly recommend spending a couple hours learning about how to utilize it before you dig in. Bootstrap allows you simple “grid-based” CSS approaches to your ui design that will automate the process of creating your template.

CMS

We are no doubt at the end of the CMS era. While I have no problems with CMS-based approaches and they get you 80% of the way through development really quickly, I do think they hamstring your development work in a lot of works. That last 20% can be really difficult to achieve using a CMS. Lately, I have taken the approach that I just use Angular and pull the data from the CMS via a RESTful service with JSON. This allows for users to still input content and take an easier approach and doesn’t tie me in to a particular CMS. I also get the added benefit of not having to munge PHP or some other language into my UI code.

If you are using a CMS and don’t have the technical voltage to be able to write your own front end, then I highly recommend choosing a template based on Bootstrap itself. There are plenty of them out there. You will thank me later, I promise.

Wrapping up

I’ll have plenty of folks who will disagree with my assessment to the CMS and most likely to my assessment of page rendering technologies like JSF, but I don’t like getting tied into technologies and have to code in a box. While Bootstrap and Angular have boxes of their own I believe the boxes to be much larger by order of magnitude.

I highly recommend putting the responsive ui tools in your repertoire. You will not only be setup for the future but you’ll have a lot of fun doing it.

 

 

 

 

 

 

 

 

An Apple a day does keep the doctor away

How medical devices sensors and mobile devices are advancing healthcare

Healthcare has been hot for mobile over the past few years, even more so than any other industry. Hospitals, medical device companies and software providers have been clamoring to have an increased presence in a booming industry. The latest trend in healthcare is integrating small sensors to be able to stream live data from a patient back to another system and drive that information back to the doctor or the family of the patient. For example, you may have a family member in home health services or in a nursing home. The sensors would wirelessly feed data such as pulse, respiration, oxygen saturation and temperature back to a small device in the patient’s room or a bed that is connected to the network. From that point the data can be viewed by the doctor via their mobile device. Aside from internal medicine, mobile devices and sensors are being used to monitor your fitness, sleep and many other aspects of overall well being.

Personal Healthcare Sensors

There are already several excellent peripheral devices in the medical field for the iPhone. Withings is a leader in the consumer space. They provide a blood pressure cuff, scale and a baby monitor that you can connect to your iPhone or iPad directly and their app allows you to keep and graph historical data. The advances in bluetooth technology and Near Field Communication (NFC), in conjunction with mobile devices, has allowed these technologies to be taken one step further.

As with any emerging technology, engineers are trying to figure out ways to make sensors and monitoring work for all modes of healthcare. In some instances, the patient themselves carry a mobile phone or medical device that transmits status of sensors attached to them back to another system via wifi or cell network. If the patient falls, the accelerometer on the device itself registers the fall and an alert is sent out. This is extremely helpful in situations where you might have a parent or loved one living alone and you need to manage aspects of their healthcare.

Among popular options for the consumer are the sleep monitoring apps that attempt to determine how you are resting at night. The Sleep Cycle Alarm Clock  for your mobile device allows you to monitor patterns in your sleep to determine if you are getting that quality rest that we all need by waking you up only when you are in a higher level of sleep instead of a normal alarm clock that might wake you up abruptly from a very deep sleep.

Institutional Settings

In another way mobile sensors are making a splash in healthcare is the field is sleep. Sleep clinics are making cash hand over fist in an age where most folks are overweight and those extra pounds are increasing the likelihood of apnea and other sleeping disorders. Although the people who actually have a sleep disorder is an order of magnitude larger than the people who actually go to a sleep clinic to get tested since it usually means at least two nights of very uncomfortable sleep with sensors attached to your legs, chest and head. Again mobile sensing devices are solving the problem. Some cutting edge sleep technicians are hooking you up at night with the sensors and those sensors are transmitting to a mobile device and then the device is transmitting the data back to a server where it is monitored by the technician in another location. So imagine, you get hooked up at the clinic and then go home to a familiar environment where you can sleep better or the sleep technician comes to your home to hook you up and then leaves. The net effect is more people are comfortable seeking testing and less is being spent on sleep clinic suites. Sleep Group Solutions is one such company that offers such technology with an app called mSleepTest.

In the 1960s, when Star Trek debuted on television, the audience was amazed at how Bones could monitor his patient just by them lying on the bed or how he could use his tricorder to instantly scan the health of a patient. Although, even as advanced a concept as this way, the doctor had to be in the vicinity of the patient. The doctors of today can do much more than he dreamed of by monitoring the patient from afar using their iPhone. AirStrip is a company that specializes in monitoring vitals and cardiological condition via mobile devices. A doctor can monitor the stats of any patient with near real time accuracy from any location they choose by reading the waveforms from a patient’s sensors. At Vanderbilt University in Tennessee, similar technology is being used to alert anesthesiologists when their patients are in certain states without having to visit the operating room to check themselves. Also, at Vanderbilt, mobile apps allow for the viewing of a patient’s room by their physicians. Stryker, a medical supply company that manufactures hospital beds, is already launching an iBed that provides information about whether or not the patient is in the bed and if they need to be moved if they cannot do so themselves.

Personal Fitness

Mobile has not only taken on healthcare but the health and fitness market as well.  A new way of heart-rate monitors supporting bluetooth technology have emerged and Polar is one such company providing one. No longer do you have to buy a watch when you can buy just the bluetooth chest strap. These heart rate monitors have more applications than tracking your workouts as well. By combining this technology with mobile, the data that was once limited to the watch or your computer now can be transferred wirelessly back to another location monitor the purposes of alerting. Imagine using this technology to monitor a loved one with a heart condition. Nike has been a forerunner in the mobile World since the early stages of the iPod by integrating it with their Nike+ product to track your fitness and workouts.

What’s next?

In just 3 short years, healthcare has taken a dramatic leap forward in terms of care, but the advances haven’t changed some of the things that have been constants for many years. You still have to make an appointment, wait for the doctor, wait for laboratory work, wait for an X-Ray and then wait for the doctor again. After that you usually have to head to the pharmacy and wait some more. In the near future, eventually this process will change due to sensors. Imagine a first- come-first-serve sensor  KIOSK where you step inside and get an analysis that is recorded to your mobile device and then take that to your doctor to speed the process or a device that you purchase that measures hundreds of points about your healthcare status by just attaching the device. Think about it like the OnBoard Diagnostics tool that your dealer uses when he services your car and the error codes it throws when it finds a problem. Healthcare wish lists aside, we are already heading into a fantastic beginning to healthcare technology.

Your mobile strategy should facilitate business over advertising it

Everyone is thinking about what they want to do with their mobile strategy these days. Most of the bleeding edge strategy in the arena is coming from the advertising/marketing side of the corporate house though instead of IT. Marketing gurus consider a mobile strategy to be akin to a web site. Just another way to expand your business and get your name out there to the masses. While they are correct, the mistake comes when the comparison is made between the effort to create a static content web site as opposed to the effort to create a functioning mobile application.

Most web sites are just static HTML pages. I like to say “marketing fluff”. They serve a great purpose by legitimizing your business and showing the general public that you are more than a few guys at a kitchen table dreaming up ideas. From a programming perspective, static web content is simple. Most programmers don’t even consider it actual code. A mobile app differs from a static web site in that it should provide users with functionality instead of eye candy. For example, you may accept orders through your mobile app, do estimations or load data from a server to keep the content fresh. All of this is functionality that requires deeper programming expertise than static HTML content. For example, on iPhone and iPads, you need an Objective C programmer and in the Android world you need a Java programmer. Objective C and Java are far more complex than HTML and are true programming languages. So, while the cutting edge thinking in mobile is done in marketing, the implementation of the app fall more into the domain of IT.

Some companies have more than static web sites out there. Take Wal-Mart for example, Wal-Mart is a traditional brick and mortar institution but has a web site that allows you to shop at home. This type of functional web site might have been designed by a marketing department but the functionality was delegated to programmers at some point. The same principal applied to the Wal-Mart web site applies to their mobile app. It facilitate their business first and advertises it second. But if you download the app, you’ll notice that it simplifies the functionality that the web site offers. The main functionality is there to shop but some of the more detailed functions are not present. Another principle of mobile development is to keep it extremely simple. Do not try to put all of your bells and whistles from the web site into the mobile app.

Usability and design are extremely important in a functional web site and they are equally important in your mobile app. It’s probably a good thing if your marketing department is leading the charge for your mobile app. This means that usually graphic designers and usability experts are working on the design and intend to hand it off to programmers for implementation. This strategy works very well and usually results in a fantastic mobile experience for the end user.

Now that I have given you a little background on the differences between a mobile app and a static web site, I would be remiss not to mention cost. Cost is the biggest issue I see when someone starts talking a mobile app. In their mind, they equate the mobile app back to marketing expenses and the cost of their “static” web site. “I paid $10,000 for my web site, so I was going to budget 75% of that for my mobile app” is something I hear quite often. Now, let’s look back at what I have said before. The static content web site took one designer to implement doing just straight HTML. Now you need a designer plus a programmer and let’s face it, designers are no less talented than programmers but programmers are more expensive, usually by another 50-100% more depending on the experience level. So based on this, you can logically deduce that your expense for your mobile app should be around 150% more than it cost to do your web site. So if you spent $10,000 for your web site, I would off the cuff estimate that your mobile app is going to be in the ballpark of $20-25,000. Now keep in mind that there are a lot of variables at play here and take my estimate with a grain of salt. I’m not saying you can’t do a mobile app for 75% of your web site costs but I am going to say with 100% accuracy that if you go that route, you won’t be happy with what you get from a functionality perspective.

I want to throw out another thing I see people rationalizing in their heads. It’s a smartphone, therefore it’s smaller, so it must be cheaper to develop for and take less code. It takes the same amount of code to do a task on the server as it does doing the same task on a smartphone 99.9% of the time. Another mistake I see people make with relation to cost is forgetting the cost of the backend support. You want your mobile app to update from the server to get fresh content and you also want it to store that data and work if the user is without access to an internet connection. This adds great amounts of complexity and multiplies the cost of the project. For one, it takes a greater level of programming expertise to integrate with services and cache/store data for offline use than just simply creating a self contained mobile app. This expertise comes at an increased cost in terms of the resource and the time of the project.

All, this being said, I want to just put a few tips out there to help you evaluate your mobile strategy so that you can make an informed decision when you get to that point.

  • Don’t do a mobile app for the sake of doing a mobile app
  • Make sure that you can’t just get by with a mobile web site strategy instead native mobile functionality
  • Remember the cost will be greater than you expect always
  • Remember that you need a programmer and a designer at least
  • Keep the functionality simpler than your web site
  • Try to plan to feed the app from the same data sources as your web site
  • Do not use an advertising firm to write your mobile app. This is the greatest advice I can give. By all means, contract them to design it and create mockups, but have it reviewed and implemented by an experienced mobile developer or architect. Most advertising firms outsource the implementation to a contractor anyway.
  • Do not exclude your IT organization from your strategy. IT and marketing should collaborate on mobile strategy

 

 

 

 

External Tablet keyboards are not necessary

To me the keyboard of a computer comes as natural as wearing a belt with my jeans. It just seems like they should go hand in hand, but reality all I need is likely tighter jeans at the waist to eliminate the need for said belt.

Something I have noticed since the dawn of the iPad for business is that employees of companies who are not power users are more comfortable with using an iPad over a Laptop. It’s not just that, but most of them are also comfortable without using an external keyboard and don’t really complain that they don’t have one. Within a few days, they are using the virtual keyboard like a boss. This is much harder for those of us who have used a keyboard for years. We whine like a baby who just had our favorite pacifier taken away.

I am convinced that the external keyboard should go away and I am also convinced that the virtual keyboard can become just as productive. To prove my point, I have written this post with just my virtual keyboard. I have used my Marware case to have the iPad angled in a position that represents a keyboard angle so that everything aligns into the correct placements so
I won’t aggravate any tendinitis in my wrists. I have used this setup for simple things before but never for something as long as a blog post before. To my surprise, after a few little mishaps along the way, I am using the keyboard just as well as I use an external one.

We all know the old idiom that states you can’t teach an old dog new tricks. While the idiom itself itself is not true, it speaks to the stubbornness of beings to accept change. I admit that I thought it was not possible to get accustom to the keyboard because of the physical limitations, but as it turns out, the limitations are purely mental. It’s more about breaking habits, much like the habits we had to break when we went from typewriters to keyboards, for those of you who actually are old enough to have used a typewriter that is.

I’ve also noticed something quite amazing about the younger generation of kids using tablets and smartphones. They don’t feel the need for an external keyboard. The main demographics for external keyboard purchases for iPad are middle to later age men who have used a computer for many years. Middle-aged women are also more adaptive to the virtual keyboards and don’t feel the necessity to have an external one as much as men do.

An external keyboard also defeats the purpose of the tablet as well. Tablets were meant to be a tween device that bridges smartphones to computers, but as it turns out, tablets are just replacing both in many cases. Adding a external keyboard to a tablet makes it more like a laptop, which makes the perception and usage of a tablet klunky because the tendency of users is to try to mimic habits they have from the computer, leading to a poor tablet experience.

I see that external keyboards are here to stay, at least until a younger generation comes up through the ranks and more traditional PC users retire or adapt and while companies are making a nice profit by selling them, they will always be out there.

My suggestion is to give the virtual keyboard one week. Just try to go tabula rasa and see how well you do. Remember that you have been using a keyboard for 10-20 years in some cases and you didn’t learn to use it overnight.

How do you handle mobile security?

There’s been lot of hubbub related to mobile security over the past year and how to accomplish it. The biggest reason that this is an issue is that most companies are opting to allow their employees to connect their mobile devices to their corporate networks instead of providing them with a device. While this is a great cost cutter and it gives you a happier, more productive employee, it begs the question of how to handle security when you don’t control the device. Larger corporate networks that are supplying the mobile device are using Mobile Device Management solutions to solve the problem for them. Much in the way that a domain policy controls PCs, the MDM controls the iPad or iPhone. Still the security issues of the personal devices are still out there, but it’s not as big a deal as you might think.

At the present time I am writing this, I will say that I do not believe that it is possible to secure an Android device owned by an individual in any manner that would meet any type of rigid security requirements. Android users are usually more technically savvy and they tend to unlock and root their phones and when you couple that with the ability of applications to have services running in the background and the larger issue of malware, it’s just not safe right now. Hopefully, this will change in the near future as Google addresses security on the platform. BlackBerry is an almost perfect example of security, although data communication goes back to Blackberry servers and when they go down, everyone is a sitting around twiddling their thumbs.

iOS on iPhone or iPad is a much better example of a secure platform due to the closed architecture and the limitations Apple imposes on the applications that run on the platform. Please note that we are not talking about jailbroken iPhones.  Myself, I usually insert a bit of code in my apps that prevents my apps from running on jailbroken devices. iOS apps run sandboxed so that another app cannot interact with the app or it’s data. iOS app data is also encrypted with data protection so long as the passcode or passphrase is set and providing the developer didn’t make some cardinal sins with regards to how they are storing the data.

By far the biggest offense made by developers is forgetting the sensitivity of the data they are managing. Often security is the last thing on a mobile developer’s mind as they have their blinders set on creating the perfect user experience. Even worse, lack of experience in securing data is also another factor in most newer developers. Dealing with financial data and healthcare data all my career data has made security one of the foremost things at the top of my mind when I do a mobile project.

So let’s look at some ways that can give you piece of mind with regards to securing personal mobile devices.

  • Secure your app with a User name and password that authenticates to the server.
  • Don’t store any personal data onto the device file system (This is rarely an answer as your app most likely needs to run sans connection)
  • Have the user establish a lock code for your app that you then store inside the keychain
  • Make the user responsible for security breaches that are a result of negligence.

By far one of the easiest things to do is the latter. Most of the time, the user of the device is your internal employee and by making them responsible for the lost device, you can prevent a lot of silly mishaps that could have been prevented by some accountability.

An iOS device is far more secure than a Windows PC… Let me repeat that if you didn’t catch it. An iOS device is far more secure than a Windows PC. The reason for this are pretty simple.

  • Instances of malware, viruses and such are virtually nonexistent on iOS platform (yes, this is still true)
  • iOS is a closed source system. Open Source is a wonderful thing when you are building software but an open system is a different animal entirely. Think of it like you just build a tank and then you publicly posted the blueprints of said tank for the enemy to analyze and look for weaknesses at their leisure.
  • iOS Apps are sandboxed and cannot access data of another app
  • iOS users tend to have their data encrypted without knowing it because they have set a passphrase or unlock code

Of course, whether or not you allow employees to user their personal devices at work is a judgment call you have to make based on the type of business you are in. A good strategy for solving the contention is to write logic into the app that doesn’t allow local storage of data for a personal device. So basically, without a secure connection to the server, the app would be useless and devices provided by the enterprise would have the additional feature of being able to store data encrypted locally. There are many options, but remember it is unforgivable to have a data security violation because you were careless in the application and monitoring of security policies with regards to mobile devices.