The responsive design movement: A fluid transition from website to mobile

0 Responses

Most clients these days will broach the topic of having a mobile site.  With the market share in mobile browsers increasing there is a definite need for becoming mobile and making the transition from website to mobile browser.

According to GlobalStats in January 2011 the proportion of Desktop to Mobile devices was 95.7% to 4.3%.  At first glance this may not seem like a lot of mobile devices, but on a global scale the numbers are enough to pay attention to, especially when at the start of 2010 the proportion was desktop, 98.4% to mobile 1.6%.  This large jump in only one year and the number of increasing mobile devices overall is sure to play a big part in making clients want their websites to be apart of the mobile arena. The statistics can be viewed here: http://gs.statcounter.com/ – mobile_vs_desktop-ww-monthly-201001-201104

Here is a nice infographic on the size of the mobile market:

Here is also another nice infographic titled, ‘The Geosocial Universe”:

RESPONSIVE WEB DESIGN: IS IT THE BEE’S KNEES?

One of the latest hot topics in mobile web design is an approach called responsive web design.  Coined by Ethan Marcotte, he has written an article about the approach titled ‘Responsive Web Design‘.  It is increasingly difficult for web developers to account for the different platforms, creating a dedicated site for each mobile platform is unreasonable and can seem like an impossible task.  The responsive web design approach looks at making websites more fluid by creating flexible grids, layouts and images with intelligent use of CSS media queries.

This works by creating fluid grids, resizable images and creating smart mark-up where needed. Looking at Ethan Marcotte’s ‘Responsive Web Design‘, we can see how this is a fantastic way for sites to be more adaptive in the mobile environment, growing and shrinking to fit the resolution of what ever device is viewing the site.

Here are some examples of websites that do this effectively:

The only problem is that all the content and elements are still downloaded as the full size on mobile devices, making the page load much slower on mobile devices than a dedicated mobile site.  Work-arounds, such as hiding images, still account for downloads, as noted by Jason Grigsby on Cloud Four Blog.  The ‘responsive approach’ is not an entirely perfect solution as a website to mobile approach.

SO WHAT NOW? BUILD MOBILE SITES FOR EVERY DEVICE!?

So the responsive web design approach isn’t the perfect answer.  However designing in a fluid approach is still a good method and designers and developers should be thinking in a more modular way even if it isn’t implemented with media queries.  As it creates a smoother flowing design and does make for good design practise for different desktop resolutions.

Creating dedicated style sheets can be another way to go.   Most of the styles can remain the same but use things like floats, heights and width changes.  The main style sheet can still dictate all the other main structural elements such main wrappers, content, nav, footer and so on.

WHAT ABOUT MEDIA QUERIES?

Since CSS 2.1 we can utilise some media types, such as screen, print, handheld, projection and speech to name a few.  These weren’t altogether taken advantage of and so as a part of CSS3, media queries were created, allowing us to target certain device classes and examine the physical characteristics of the device rendering the site. CSS3 also addresses functions like orientation, min-device-width, device-width and others.  Ethan Marcotte has a great article on responsive web design and within it a section called ‘Meet the media query’ that addresses the subject of media queries more thoroughly.

TAKE DESIGN INTO CONSIDERATION

So putting all the hub-bub aside from style sheets and media queries, what about design? When designing for the responsive movement we need to take into account the scalability of images when viewed on all types of devices and the way we structure the site.  Using grids makes the transition into a fluid site much easier.  With the structure of a grid in place we can be assured that a design will be planned more easily for a fluid approach.  Once the design is built we can look at building in a much smarter way to allow for growth or contraction. Here is another previous article I wrote on designing with grids, if you need a hand understanding them: http://www.designer-daily.com/the-use-of-grids-in-website-design-6639

The issue with fluid images and using things such as CSS max-width or other CSS techniques is that essentially the image is still downloaded at the full size and that it would sit at full resolution on smaller devices and use up precious download and time.

These are fine solutions for style but should be used in conjunction with other techniques such as resolution dependant asset management via javascript or loading up different assets by reading user agent strings on the server-side.

SO WHERE DO I GO FROM HERE?

The movement seems to be a bit hit and miss, with some people loving it and some hating it.  So where does that leave us?  We can only take into consideration the elements that we need to cover, so if a client does need the site to be mobile and viewable on all devices then perhaps we have to use this technique and just allow the users to download the content, or we could build a dedicated app for a specific device.  All in all I think designers should be thinking about fluid designing and how their design is growing or contracting with the multitude of devices out there today.