CSS3.2 Improved display on wide screens and mobile devices
This post follows on from “CSS3.1: The final depiction of the cards“.
Here we have adapted the styling to give an effective display on devices with widths between 300px (equivalent to a small mobile platform) to 3600px – a massive HD movie screen…
In this we are really dealing with two problems simultaneously – the screen resolution, which puts a limit on how small text and images can go before they are degraded beyond use, and the range of aspect ratios, which dictate how we lay the page out to make best use of the available screen real estate.
In the first instance we are treating this traditionally as a resolution problem, to be treated by evaluating the width of the display window in pixels, and reordering our offering accordingly. In as much as there is one, this appears to be the standard approach in the web0-design industry at the moment, and in our third iteration here, we will stick to this. In reality, however, the aspect ratio is the real issue with determining layout, and we’ll look at this again at the end of this instalment.
With very wide screens there is a problem with ‘letter boxing’; designed to display movies, the height of the screen is very much smaller than the width. For this type of display we have laid the cards out next to each other (top right – note that in reality this is the LARGEST of the three displays), and permit them to scale up to their full size of 900x600px. We tested this with an extreme case – actually using a twin head monitor system with an effective resolution of 3600x1080px, or an approximate aspect ratio of 3.5:1.
With most desktop and tablet screens the aspect ratio of the screen is about 1.5:1 – we want some spread in both width and height of the card distribution to make effective use of the space.
For narrow mobile devices we need to keep the text on the reverse of the cards legible, so the cards cannot be too small. To maximise the size of the cards in a narrow page, therefore, we stack them, as shown bottom right at near actual size. The bottom screen shot has a mouse cursor over the last card, showing that the text on the ‘reverse’ is quite readable.
Where it works
Screenshots of the design at different browser window widths are shown above right, at the top is the layout for windows greater than 1200px in width, then browsers between 1200px and 600px, and finally at the bottom is that for browsers between 600px and 300px in width.
If you view this site on a desktop browser (link below), you can have a bit of fun re-sizing your browser window* to see how the design adapts to changes in width. What you should see is a smooth change in scale of the postcards as change the width of the window. Periodically the layout will change, switching to make best use of the guessed aspect ratio.
* – Remember we are making no concessions to older browsers in this micro-site. If you are unlucky enough to be using an older browsers the postcards will have right angled corners and sit square on the page, and you’ll be stuck with just one layout (for the widest screen size).
Where it doesn’t work
To build a properly future-proofed responsive design we’ll need to tackle the display aspect ratio, rather than just guessing at this based on the width of the display window. At the moment what we do is adequate, but it only works because displays are pretty predictable. Displays where 1.5:1 aspect ratio’s equates to 3000 by 1500px are pretty few and far between BUT on one of these we’d end up with an inadequate looking page with all of our cards in a line along the top with a lot of white space below them…
For the moment this is unlikely, but the new ‘retina displays’ and similar technologies with very high pixel densities may prove to be game changers. A very high pixel density could result in the site switching to a wide screen layout, resulting in tiny, illegible cards as a border along the top of the browser window, and that will not win friends.
The new CSS3 recommendation, however, is equipped to permit us to ask about aspect ratios, so we’ll take a look at that next, to see if we can avoid the problem, and how well current browsers do this…
Articles in this series:
- Working with CSS3: the shape of the web to come the dive boat charter micro-site concept and sketch layout
- CSS3.1: The final depiction of the cards showing the basic layout of the cards. The layout here copes with displays between 300px and 1200px wide. Wider displays leave the site stranded in the centre of the page see: CSS3.1 : Dive boat charters test site v1
- THIS ARTICLE CSS3.2 Improved display on wide screens and mobile devices working with very wide displays using industry standard techniques, and looking at how we might future proof the design
