320 And Up: Responsive Mobile Development

0 +1
in Web Development

by Sage

It’s always been true that web and print

are different media, but this cliché has become especially relevant lately with the advent of mobile phones, tablets, and other non-conventional ways of accessing and viewing websites. Mobile browsers now represent over 6% of worldwide web traffic—an amount of users designers and developers can no longer ignore.

Responsive Website Design

Designers and developers, however, have a wider range of screen resolutions than ever to cater to: from 320px-wide phones to 2560px iMacs, with tablets, netbooks, laptops, and legacy desktop monitors in between. What’s more, capabilities vary widely on these devices: users might be viewing your site from a late ‘90s Palm Pilot, or they could be on the latest Android phone. Combine this with regular software updates (each iPhone update, for example, comes with a new version of Webkit) and predicting which platforms support a given set of features is basically a guessing game. How do you make your site render appropriately on a pay-as-you-go Nokia phone, a Windows smartphone, an iPad, an 800×600 cathode ray tube desktop monitor, a new Macbook Pro, and a glossy 27-inch monitor?

Lately, a number of frameworks purporting to make mobile development easier have sprouted up: Less Framework, which adapts its grid-based layout based on monitor size; HTML5 Boilerplate Mobile, by the HTML5 Boilerplate team; and the paid Sencha Touch, which specializes in mobile web apps.

However, the most interesting concept I’ve seen for a mobile framework is 320 And Up, which advocates designing first for 320px displays and then adding styles for progressively larger screen sizes (up to 1382px wide). 320 And Up includes a simple reset stylesheet, then adds assets and layout styles only as needed based on screen size, increasing loading speed on all platforms and devices. Based on both HTML5 Boilerplate and Less Framework, it falls under the movement towards responsive web design, which advocates using fluid layouts to cater easily to any possible resolution.

320 And Up is an interesting concept which I expect to gain traction as mobile browsers, tablets, and netbooks all grab greater market share: fluid, responsive layouts make sites and their content more available and more visible to all users. The extra time required is minimal once developers adjust to the concept of a fluid layout—even with pixel-based content management systems, such as WordPress. Finally, responsive mobile design allows clients and developers to avoid developing iPhone/Android/Blackberry apps when they can just specify how their site will display in all phones with a given resolution—saving business owners money.