The Need for Responsive Design when going Mobile

Mobile is the new black. Especially, when you talk of technology & web 2.0
Everyone is going mobile, even I launched a mobile app for Jewelove 2 years back & a few 100 people use it, without me doing any marketing at all!

Today, 2 years later, I have tried a lot of different things, & I know one big difference when developing for mobile & when developing for a computer user. Whether you are using a MAC, a PC, a Laptop or a Mini, more o less they have at least a certain dimension & they come in all sizes as long as they are wide. Although as a web-designer you may not realize it, but it simplifies life, a lot.

But this is not the case when you come to the mobile arena, every phone, every OS, every model is different. God Bless iPhone, for all their models come in 1 standard size, but think of android phone, symbian phones, Apple, Samsung, Nokia, Blackberry, Motorola (RIP), Sony, every manufacturer is a master of his or her own universe & creates a model as widely different from its previous versions as the wildlife or maybe the insect life on this Earth.

That spells Trouble when you develop for the mobile.

Whether an app or a .mobi website, everything has to fit into that tiny little screen your customers look at the whole day. It is really tiny, I guess my iPhone screen is about a seventh that of my laptop & iphone & htc boast of some of the larger screens in the market, think of your customers who use Blackberry (soon-to-be RIP) & Nokia (soon-to-be-RIP too, despite Stephen Elop's bravado).

There are 3 unique challenges that we face when develop for the mobile that are otherwise not encountered when developing for the PC or other similar wide platforms.

1. Screen size : As I mentioned above, the screen sizes of mobiles are very small. After all, the customer has to fit that thing into his pocket. But that is not the real challenge, the bigger challenge every manufacturer thinks he is GOD & gives his phone a different screen size. Think of iPhone, Blackberry & Nokia E71, those are just 3 phones with 3 totally different screen sizes! If you fit content into one, it totally fall off the edges or falls short the edges of another.
   It gets worse. Some manufacturers think themselves the masters of the universe, they make every model have a different screen size! Think Nokia E71 & Nokia Lumia. That means even if you were targeting people with just Nokia phones (though I have no idea why would you do that), your website or app would end up looking completely different on 2 different models of Nokia!
   
2. Platform : iOS, Android, Windows Phone, Symbian, & these are just the popular ones. This issue props up only in case of apps, you have to create as many apps as the smartphones (users) you want to target. If you want to target just Apple customers, only building an iPhone app would suffice. But the moment you move on to Android, things get tricky, very tricky. Mostly because apps supported on one version of Android may not be supported so well on another. eg. If your app supported Gingerbread, it may not very well be supported on phones with Honeycomb or Icecream versions of Android.
3. Landscape : This is more a blessing in disguise. On most phones, The dimensions of the effective screen change depending on whether the phone is being held in Portrait mode (like when you were dialling a number) or in landscape mode, like you were playing Angry Birds. You don't need to, but you may want to use it to provide an enhanced version of your app or website in the landscape mode, like the Calculator app on iPhone, which goes from simple calculator to Scientific Calculator when you go from Portrait hold to holding it wide-landscape.
4. Internet Speed : Not a major issue, nowadays anyway. But remember unless your customers are always connected to hi-speed wifi, they are connected to internet via a slow, turtle crawling, 2G or, if you are lucky, 3G connection. Make sure your website complies.

Now, where making a responsive design really saves you (time) & your customers effort, is that it ADAPTS. It adapts to the screen size, the way the customer is holding the device, & if you are a really savvy programmer, even their platform, version & the internet speed!

Think of a website that really adapts to your phone screen, like Huffington post's mobile website, whether you are viewing it on the iPhone, the HTC megascreen, your laptop or your friend's blackberry, it renders seamlessly. A true example of Responsive Design mobile website, which adapts to your screen size, os (it kills the flash when viewing on your iphone or ipad) & whether you are holding your phone straight or sideways.

I hope you can now see how a responsive design might really help your customers, & in turn you. :D

P.S. : This is when I haven't even covered tablets yet, will do that in another post.\

Happy Mobiling!