The dominance of responsive design was established mid-2012 when Google recommended it as the best strategy for smartphone-optimized websites. However, creating great responsive experiences requires a hell of a lot more effort than just on the media front. If you think creating fancy mobile layouts is what it’s about, you’re already missing the point.
You are in fact designing a solid user experience all in response to the growing number of web-enabled devices. Take a look at just how many are in fact being introduced and manufactured each day. Still think it’s that simple?
Creating adaptive experiences is a smarter way forward, but that doesn’t mean this approach isn’t without its challenges. Here’s a short list of basic facts for the first-timers:
1. It’s not just about apps
At the start of the mobile boom, some believed apps would channel virtually all mobile activity and plenty of businesses rushed to make them. But popular as they are in some mobile markets, people still use their mobile browsers and not just for casual browsing either. Information gathering still comprises a sizeable chunk of online activity (be it mobile or desktop). A great deal of e-commerce happens in the mobile browser, not in native apps. The costs of programming and engineering also makes them the more expensive investment.
2. Don’t disable magnification
Don’t assume that using standard and fixed sizes means less trouble for your users. Disabling basic facilities like zoom make you come off as controlling, no matter how well-designed your mobile site is. Keep those controls within the rights of the users.
3. Be as compatible as possible
Kindle Fire. Galaxy Note Pro. iPhone 5. Given the raw rate of new devices coming out, the different screen sizes will really drive you crazy. Setting breakpoints at device widths is no longer the best way out. You really have to just testing on as many devices as possible for their compatibility.
4. File size and file speed
Broadband came along and practically everyone took its speed for granted. It’s not so with mobile devices. You need to get back to considering the file sizes you’re using because even someone using a 3G connection on their phone deserves to get their information quick when they can be a potential customer.
5. Never hide content
Don’t hide content just because you can’t fit it into a smaller screen. Assume your mobile users will want to do everything and sometimes even more than your desktop users.
6. Make compromises
It can be tempting to create a web page design that just automatically shrinks to a mobile view, and put that ease of development above the visual design. But don’t let technology suppress your creativity, or else all responsive sites will end up looking the same. Responsive web design is hard work, but the results are worth it, that’s why it’s so good.
7. The element of touch
Remember that anything that’s clickable and viewed on a smartphone needs to be the size of a thumb. Apple themselves recommend that the minimum acceptable size for mobile controls is 44 pixels. And don’t put links too close together, or big-thumbed users will never forgive you.
8. Don’t think in one size
Responsive design is literally a no-size-fits-all endeavor. Don’t put too much effort on the small screened devices and then ignore what happens on the big ones. The 27-inch Apple iMac has a whopping 2650 x 1440 px resolution so what more when something else comes along that has it twice as high?
9. Create a home screen icon
That little PNG can make the difference between the few minutes of loading your site to hours of finding it because it’s harder to memorize a URL.