Adventures in responsive design
This site is but a few days old, and I am already trying to improve the design. Oh well. The first thing on my site improvement agenda is to try to make the design “responsive”. Basically, a responsive web design is one that is able to adapt, or respond, to different browsing environments, namely, different screen resolutions (and to an extent, different pixel densities, but more on that later). This is of course, great, since then even people with really small screens can still view the site, and perhaps most importantly it negates the need for a dedicated mobile version.
The basic way to make a web design responsive is to use CSS to specify certain styles that only apply at different screen resolutions, through the use of the @media directive:
@media screen and (max-width: 980px) { }
Using these “conditional” selectors, if you like, it is possible to make elements change width or font-size, or hide themselves altogether, without the need for JavaScript. Using these selectors is quite easy: I found the hard part was designing the markup of the pages so that they could be modified easily using CSS. For example, I wanted the sidebar to become a footer at low widths (as the links on the sidebar are secondary, the breadcrumbs providing the primary navigation). However, this meant I had to ensure that the sidebar HTML was entirely after the markup of the main content.
Images within posts also caused quite a few problems, especially the floating ones. At small widths, these images tended to squash up against the sides of the content area, creating unpleasant results. If the image was too wide and the viewport too narrow, furthermore, it would simply not fit and overflow out of the content element. In the end, I simply stopped all images from floating after the viewport was below a certain width, and forced them to have max-width:100%, as suggested by Ethan Marcott on his blog.
Also interesting to note, perhaps, is that I decided to go with a fixed-width responsive design, as opposed to a fluid one like e.g. The Boston Globe website has. Instead of constantly resizing to take up all available space, there are only three widths on this site — normal, for almost all desktop monitors, “constrained”, for iPad and 800×600 monitors, and a mobile design for mobile devices, although the mobile version is fluid, because you never know quite how wide a mobile screen will be.
I didn’t have many particular issues beyond that, but on the topic of mobile devices, I found that iOS in particular was very trigger-happy in styling the input and textarea elements on my site — adding some inset shadow and border-radius to the elements that didn’t mesh very well at all with the design. In the end I managed to get rid of this by setting -webkit-appearance:none, and -webkit-border-radius:none. I also prevented zooming using the viewport meta:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
There is also a strange issue on iOS whereby the text size grows very big in landscape mode. If anybody knows why that happens, I’d like to know!
Anyway, after all that, this site is now fully responsive! Try resizing your browser window, or view it on your mobile device of choice. If you find any issues or have any comments, don’t hesitate to comment.