Responsive web done right

Responsive web design is the latest trend. In short, this involves supporting different client devices and screen resolutions - as well as adapting to user actions, like flipping between vertical and horizontal viewing on your touch device.

m.company.com

A common solution thus far has been to build customized mobile sites and deploy these in parallel, like m.mycompany.com. This is a cumbersome solution – redirects, missing content and duplicate links - not to mention the additional work often added to editors, developers and IT staff.

One link to rule them all

Visibility is hard – and links are more precious than ever. What if you could share your links on Twitter, in Ads and in Newsletters, and the result was adapted to the device of the visiting user? What if this would also apply to organic search results in search engines?

Fortunately - there are now solutions to solve this.

HTML 5 Media Queries

Hand in hand with responsive design, HTML 5 introduces a new feature. Media Queries enable developers to automatically change layout and appearance based on browser screen size.

16:9 Widescreen - Baker Street Inquirer
Widescreen version

4:3 Tablet - Baker Street Inquirer
4:3 Tablet version

Mobile - Baker Street Inquirer
Mobile version

See Live demo of above screen shots (external link): http://www.alistapart.com/d/responsive-web-design/ex/ex-site-mini.html

Dynamically changing layout based on screen size takes you one step further – but there are still issues with this concept. Examples are:

  • Users getting confused when layout changes based on browser size
  • Content transferred to client is not adapted (large pictures etc)
  • Requires high level of structural information in content
  • Only works in modern browsers (IE9 first Microsoft browser to support this)

Unleash the power

Enonic CMS places powerful multichannel capabilities in the hands of editors and developers. Device resolvers enable developers to serve optimized versions of your site to the visitor (whether PC, Tablet, Mobile or anything else). Thanks to structured publishing and innovative solutions like relative image sizes - Editors can write once and publish to any device, not having to think about layout. Combined with Media Queries for device orientation this creates the ultimate user experience.

Bandwidth all over again

Media Queries do not reduce the download size, it actually increases! The download size of a mobile page will be equal to that of the PC version. Enonic CMS' multichannel capabilities help reduce the total page size by up to 70%, significantly improving download time and the user experience. This is primarily achieved by serving content (like images) for the device at hand.

Put the user in the driver's seat

Users do not like living in a box - Even when controlled from the server - Enonic CMS enables end users to choose which versions of the site to watch. Here are some usage scenarios:

  • Commuters (with limited bandwidth) using the mobile site from a PC
  • Mobile users eager to see the full version of the site

The future is mobile

Mobile clients are here to stay. Globally, mobile web usage is predicted to exceed PC usage within a few years.

Rest assured – with Enonic CMS, your users get he ultimate web experience - across all devices.

Try out Enonic.com on your mobile or download Enonic CMS to test drive our multichannel support.