This website is now responsive! I am happy with what I’ve managed to do, it was fairly simple but good to learn the techniques and increase my knowledge of CSS3 media queries. Responsive web design is something I’m really interested in at the moment, like fitting pieces of a puzzle together, and very satisfying when you get it right!
You can see how my website changes with different screen widths at Responsive.is (a very useful web tool) here: responsive.is/allatsee.com. Toggle between devices using the top bar on that page. Of course, you can always just resize your normal browser screen too.
The percentage widths of the left and right columns change as the browser size decreases, and at a certain point the whole layout switches to one column only. Before this weekend I’d been setting my CSS breakpoints to specific sizes to match iPad/iPhone etc., but I read an interesting article about just looking at when the design looks right and wrong and setting those dimensions as your breakpoints. It definitely makes sense to me, especially as the range of dimensions of different devices from Apple, Samsung et al. gets wider.
The breakpoints I’ve used for my website are:
- 0-440px – a one column layout with the menu separated on to two centred lines.
- 440-690px – a one column layout still, the menu joins up to one line to prevent wasting space on the page.
- 690px – 960px – a two column layout, main content takes up 65% of screen width, right sidebar 35%.
- 960px and above – a two column layout, main content takes up 60% of screen width, right sidebar 30%. The max-width of the page is set at 1024px, after that it centres itself in any extra space.
So, as you can see, these breakpoints are not really specific to any device. I just looked at the design as I changed the browser size and said to myself “Does this layout still look right? Yes, so no breakpoint. [increase/decrease screen size] Does this layout still look right? No, so I’ll insert a breakpoint at this width and change the layout so that it does look right.”
I also started using LESS this weekend – could definitely save me some time in the future! Love the idea of setting variables and functions instead of having to write the same CSS over and over again. Where has this been all my life?