With an ever growing range of devices connecting to the internet and a variety of screen sizes and form factors (e.g. mobile, tablet, netbook laptop and desktop) there’s more pressure than ever to create websites that work well and look great no matter what device they’re being viewed on.

In the past most websites have been developed based on fixed layouts, and while a common screen width of 1024px has been considered a relatively safe size to use for websites, it doesn’t work well on small mobile screens and can lead to sites looking a little lost on larger desktop screens.  The traditional method for dealing with this has been to create two separate properties, where one experience is optimized for mobile and the other for desktop – however this means that two websites have to be maintained, increasing the cost of development and maintenance. It also ignores the multitude of devices that now sit between mobile and the desktop – for example the iPad.

Responsive design, on the other hand, is an approach that web designers and developers take to adapt the layout of a site to enable small and large screen devices to share the same code base and content without the need of separate website properties. Through responsive design you only need to develop one codebase for all of your users, no matter what device they use.

When implementing a responsive design designers and developers use a number of techniques:

• Fluid layout allows the layout of page elements to grow or shrink to pre-determined maximum or minimum widths, therefore accommodating a width range in which the browser can adapt the layout.
• Media queries allow you to specify which style sheet to use when a desired width has been reach or detected.
• Viewport informs mobile browsers that the site is optimized for mobile viewing and to render the page at the devices width and or height.

By combining these elements it’s now possible to deliver optimized experiences for end users without multiple web properties and within a single codebase.

While the development of HTML has brought these techniques to the fore front, they’ve been around in their own right much longer. Fluid layouts have been used for many years, Media Queries are specified in the CSS3 specification, and viewport are supported by many existing mobile browsers.

Want to see a great example of responsive design in action? Load http://www.hiltonmovers.com on a desktop browser then start shrinking the size of your browser window to replicate viewing the site on a smaller device – you’ll see the site adapt as the browser window gets smaller. Alternatively just load the site on your mobile or tablet device to see how it adapts!

 

That is pretty darn cool!!!

My Naples Website – Will Lees