The Need for Responsive Design when Going Mobile
Mobile is the new black, especially when you’re talking about technology and Web 2.0. Everyone is going mobile; even I launched a mobile app for Jewelove two years back and a few hundred people use it without my doing any marketing at all!
Today, two years later, I have tried a lot of different things, and I know one big difference between developing for mobile and developing for a computer user: Whether you are using a Mac, a PC, a laptop or a Mini, they more or less have certain set dimensions, so they keep the same aspect ratio through all screen sizes. Although you may not realize it as a Web designer, this simplifies life a lot.
But this is not the case when you come to the mobile arena, where every phone, every OS, every model is different. God Bless iPhone, for all their models come in one standard size, but think of Android, Symbian, Samsung, Nokia, BlackBerry, Motorola (RIP), Sony—every manufacturer is a master of his or her own universe and creates a model as wildly different from its previous versions as the wildlife or maybe the insect life on this Earth.
This spells trouble when you develop for mobiles.
Whether it’s an app or a .mobi website, everything has to fit into that tiny little screen your customers look at all day. It is really tiny; I would guess my iPhone screen is about a seventh that of my laptop, and iPhone and HTC boast of some of the larger screens in the market. Think of your customers who use BlackBerry (soon-to-be RIP) and Nokia (soon-to-be-RIP too, despite Stephen Elop’s bravado).
There are three unique challenges that we face when developing for the mobile that are otherwise not encountered when developing for the PC or other similar widescreen 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 is that every manufacturer thinks he is GOD, and so he gives his phone a different screen size. Think of iPhone, BlackBerry and Nokia E71: these are just three phones with three totally different screen sizes! If you fit content into one, it will totally fall off the edges or fall short of the edges of another. It gets worse. Some manufacturers think themselves the masters of the universe, so they make every model have a different screen size! Think Nokia E71 & Nokia Lumia. This 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 two different models of Nokia!
2. Platform: iOS, Android, Windows Phone, Symbian—and these are just the popular ones. This issue only pops up in the case of apps: You have to create as many apps as the smartphones (users) you want to target. If you wanted 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. E.g. if your app is supported on Gingerbread, it may not be very well supported on phones with Honeycomb or Ice Cream Sandwich versions of Android.
3. Landscape: This is more of 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 are dialing a number) or in landscape mode, like you are 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 a simple calculator to a scientific calculator when you go from portrait to landscape.
4. Internet Speed: This is not a major issue, nowadays anyway. But remember that unless your customers are always connected to high-speed Wi-Fi, they are connected to Internet via a slow, turtle-crawling, 2G or, if you are lucky, 3G connection. Make sure your website complies.
Now, the thing about making a responsive design that really saves you time and your customers effort is that it ADAPTS. It adapts to the screen size, the way the customer is holding the device, and if you are a really savvy programmer, it even adapts to their platform, version and Internet speed!
Think of a website that really adapts to your phone’s screen, like Huffington post’s mobile website. Whether you are viewing it on the iPhone, the HTC Mega, your laptop, or your friend’s BlackBerry, it renders seamlessly. It’s a true example of responsive design on a mobile website, which adapts to your screen size, OS (it kills the flash when viewing on your iPhone or iPad) and whether you are holding your phone straight or sideways.
I hope you can now see how a responsive design might really help your customers, and in turn, you. :D
P.S.: I haven’t even covered tablets yet. I will do that in another post.
Related Posts
|
|
|
