Improving Responsive Web Design With RESS

On average, more than one in three visitors to your website is using a mobile device. In the past year alone, mobile usage has increased by more than 20%. So how do we cater for this market?

Separate Mobile Websites

If your time, budget and sanity aren't important, you can build separate sites for mobile and desktop users. Content can be repackaged and streamlined for the device. Unfortunately…

1. The days of either desktop or mobile are long gone. There is a huge variety of devices with differing screen sizes, pixel densities, processing speeds, network capabilities and HTML5 features. And few of us consider wearables yet! Would two or three sites to cater for every eventually? Ideally, you need dozens.
2. Identifying the user's device is difficult. User-agent strings are notoriously tricky to parse and won't tell you anything about the screen dimensions, network speed or other features.
3. You normally require separate URLs for each site, e.g. www.site.com and m.site.com. Users can end up on the wrong site for their device and, if you're not careful, search engines will penalize you for duplicate content.
4. Managing one website is tough. You now need to build and deploy several sites and ensure they're updated concurrently. Perhaps your developers will survive the ordeal but will content editors cope with multiple assets which target different views?

That said, separate sites remains an attractive option for companies such as Amazon and eBay since it offers a targeted experience.

Responsive Web Design

Alternatively, designers and developers can use designs which respond to the browser's viewport dimensions (typically, the whole screen on smaller devices). Using a mobile-first approach, the site implements a default linear layout perhaps with smaller text and menus accessed from hamburger icons. As the dimensions increase, the design can be re-flowed to show additional columns, larger fonts, more spacing, always-visible menus etc.

RWD solves many issues encountered with separate views. We have a single site with one set of content which can respond to an infinite variety of screen sizes. Unfortunately…

Continue reading %Improving Responsive Web Design With RESS%

by Craig Buckler via SitePoint