Responsive website design

Scalable responsive design for a changing web.
Don't hide your head in the sand.

ostrich.jpg

A responsive website design scales automatically to the screen size of the device being used to view it. This means a site viewed on a desktop pc with a wide screen will layout quite differently to the exact same site when viewed on a smart-phone. Images and media will either scale or crop to the smaller size and text elements will usually stack so the user can scroll to read the content.

Mobile now accounts for 30% or more of visitors on many websites

You can no longer ignore the mobile and tablet user group when creating your site. Mobile web design is here to stay. As more sites go responsive the more users expect from the websites they visit. Even though legacy layouts are still viewable on mobile they are often not as friendly to use.

Building a responsive website presents several challenges to the designer in that extra thought must be put into the layout to cater for each device size. Fortunately there are several frameworks that can be used to achieve otherwise complex layout goals. There can still be a longer development time due to the extra complexity involved in polishing each layout.

Try narrowing the window width of this site if you are viewing on a pc or mac to see a responsive design in action. Notice how the image and navigation change to accommodate the viewport.

Responsive design may even replace some mobile phone apps because it is a lightweight, flexible, lower cost, easier to maintain alternative to creating a mobile app which runs on a users smart-phone. Instead you can just bookmark the site on your phone screen to view the information. Meanwhile its all kept up to date through the website's CMS and works fine on other devices too.

Don't take my word for it here's what the mighty Google say's on the subject of responsive design.