Now that I am feeling quite comfortable with the basic HTML5 and CSS concepts and have got the grid layout and responsive design working on the desktop, I think it is time for an extra stretch, to take the design to the next level. One area that interests me greatly is being able to design a site that looks as good on mobile and tablet as it does on a desktop. Having read about how to achieve this through media queries from Tim Kadlec’s book on Implementing Responsive Design, now is the time to try it out.
The starting point is identifying where the breakpoints are for the various devices. And that’s where the fun starts! There are rather a lot of them. So, probably best to reign it in to some of the more popular devices and those that I stand a chance of being able to test the design on. So, I will stick to iPhone and iPad (sorry all you Android devices).
The following documents how I got on with this.
A little bit of research led to me finding this resource by Stephen Gilbert for iphone and ipad media queries. I inserted these into my CSS, to change the font colours for each device as a starting point, so I could see if the media queries were being correctly triggered for each device and orientation. I also changed the float on the navigation items for the iPhone so that the menu collapse feature worked.
Additionally I added a viewport meta tag in the HTML and set the width and initial-scale to 1 as shown below, so that the pages don’t have a zoomed-out look as they would do if this has not been set.
<meta name ="viewport" content="initial-scale=1, width=device-width" />
This is because mobile and tablet devices often have the concept of a CSS pixel rather than a physical pixel, so that there are effectively two viewports – the visual viewport, which is the physical device width and the layout viewport, which is the width of the page layout. Normally, the device attempts to fit the full layout width into the device width, the result of which is a full, but tiny and unreadable page. Setting the initial scale to 1, sets the layout viewport zoom to 100%. It looks much better, but of course, you can’t see the whole page.
The media queries I added appeared worked well, but when I ran the resultant CSS through the W3C validator, it was not impressed with the -webkit-min-device-pixel-ratio, saying it was not a supported vendor extension. I had added this to differentiate between iPads with and without retina displays. So I did a little further research to find another way of doing this and found this W3C blog entry on un-prefixing webkit-min-device-pixel-ratio on the W3C site, which provided the calculation to use the standard min-resolution setting instead. A little bit of maths later and I was up and running with revised media queries, which now passed W3C CSS validation.
Did these media queries now work? No they didn’t. The result was that the media queries were not triggering at all on any mobile or tablets. I’m not sure why. But in the interest of time, I removed the min-resolution condition and all started working again.
I would like to take my design on this much further, but I know that I still had a lot to do to finish off the design for both themes. So reluctantly I have had to leave it there. I have a least proven that I can get the media queries to trigger and have successfully got the menu to collapse on the mobile. Given extra time, I would explore optimising the layout of the page for mobile, inserting additional CSS into the relevant media queries to remove the float on the aside, so it is pushed under the main article, thereby narrowing the overall page width.