20 Jan 2015
SASS, as it stands, will not permit us to use a placeholder to extend a selector from inside a media query, due to scope conflicts. That’s really annoying. Let Hugo Giraudel show you a way around it.
Every so often the debate about what the ideal width to design web sites to comes around. The most recent one I read was Cameron Moll’s blog post Is it time to move beyond 960?. This debate is normally triggered by a new screen resolution becoming ‘standard’ as monitor technology improves.
First of all web designers agonised over whether to switch from designing sites for screens 640 pixels wide to the new and exciting 800 pixel width; then newer screens made 800 pixel resolution less common and many designers started designing sites optimised for a width of 960 pixels. Now people are talking about whether technology advances mean that 1080px is the new ‘best’ standard width.
In my opinion, although it would be nice and convenient for web designers to pretend that we can decide upon an unofficial standard width, the real-world truth is more complicated. The only thing that can really inform design decisions is the metric data for the site in question.
Firstly, the screen resolutions that are selling in the high street are meaningless. What do I care that 75% of all computers have screen, say, 1280 pixels wide if 80% of the people who visit my site have screen resolutions of 1024 or 800 pixels?
Secondly, screen resolutions are not a good guide anyway, especially once you start to get into the larger sizes. Why? Well, because people with larger screens tend not to use their web browser full-screen. They make use of the extra screen space by having several windows open side by side, not one window taking up the whole screen. The important information that you need is the size of the visitor’s viewport — that is the viewing area inside their browser window, excluding things like toolbars.
Viewport information is harder to come by; as far as I am aware, it is not retrieved by Google Analytics, for example. But there are ways to get it. The method I use for this site is Shaun Inman’s excellent metrics package called Mint, which uses plugins to extend its powers. One such plugin is called Real Estate and gives the actual viewport size. So if my visitor is viewing my site on a 30” monitor but is using only a 300x500 pixel browser window, Mint will show that they were only seeing a small chunk of my site, and not its vast encompassing glory. That’s dead useful, that is.
The other way to design a flexible site is to link its width to the text size that the user has chosen for their browser. Bigger text = wider site layout, a technique referred to as Elastic design. Some sort of width limitation is often advisable here also, and it should be remembered that increasing the text size does not always mean that the user has a big monitor.
One last note: the benefits of fluid and elastic design may, in turn, become redundant in the near future with developments by the browser manufacturers themselves. Page zooming techniques built into many modern browsers enlarge all elements of the page, not just the text size. This resizing method is still in its infancy and is implemented slightly different between different browsers, but it is an interesting development that web designers will be watching closely. Once the technique has been refined and perhaps standardised a little bit it might make fluid and elastic designs no longer necessary. Not yet though.
In the meantime, the golden rules are: