SevenCubed - 4:32 pm on Feb 27, 2013 (gmt 0)

@bluntforce

For the past few years my concept of mobile design was simply to ensure that a desktop version displayed and functioned 100% in the same way on a mobile, and they did. But each mobile user had to pinch and zoom according to their own device. That in itself was okay because the manufacturers accounted for that.

However now, like you and many others, I'm now working with viewport size. I want the experience for a mobile user to be very good as opposed to "good enough". I'm now approaching it from a manner of having completely different stylesheets for each width whether it's in landscape or portrait mode. The strong point of it for me is setting all images in the stylesheet as a string of base64 encoded characters and being able to assign smaller sizes according to screen width. That has an added benefit of reducing HTTP requests to the server. Also, apparently it prolongs battery life for mobile devices -- something I was totally unaware of until Lucy24 posted a link to a study of that some time ago somewhere around here. Overall I just want the page to display at 100% width without a need for horizontal scrolling or and need to pinch and zoom.

In case you missed it I posted a very basic mockup of how I'm approaching it over here [webmasterworld.com...]