We’re all just trying to work this out

The title of this entry comes from a post by Mark Boulton on the state of Responsive Web Design (RWD) in today's web design/development landscape. It was in response to another post by Luke Jones (I'll let you follow the links from Mark's post) which was bemoaning the use of RWD techniques (or at least the way some people have been using them). It all sparked a major ding-dong in the comments and quite a lot if became more about people's egos and how others perceive 'major players' in the community to be, rather than about the actual topic at hand. I got bored pretty quickly of the original debate but found this statement by Mark to be particularly relevant to my situation with this site for which I decided to step into RWD territory myself:

Responsive Web Design is REALLY NEW and NOBODY knows how to do it properly/right/appropriately yet! We’re all just experimenting. And THAT’S FINE!

If the approach is deemed to be appropriate, then there is no reason why it can’t be done. If people do it on their own blogs, because they want to experiment, then that’s fine. It really is.

We’re all just trying to work this out.

This site is my first foray into RWD, although I've been aware of the techniques behind it, and have been reading articles about it for some time. I was always waiting for the right project to come along which would give me the chance to test it out. Invariably when it comes to trying out new web technologies, personal projects are the best place for it, and so it wasn't until I had a personal playground of my own, that I decided to give it a go.

Part of the RWD equation is using layouts with fluid or flexible widths. I'd actually already done that with Tyssen Design which has a hybrid liquid-elastic layout which means it adjusts to both the user's text size setting and browser window, so that wasn't really new. The new part came with using media queries to dynamically adjust certain parts of the layout depending on your screen size. Originally, people were using media queries to serve different style rules to people browsing on devices with smaller screens, but lately people have been saying that you should be thinking about the mobile experience first, as it forces you to focus more on the content, and then use meqia queries to adapt the layout for people with larger screens. So essentially, the other way around.

As this site is essentially just a single column, the media queries aren't really doing too much work. All they're doing for people on larger screens is moving the main navigation over to the side and adding some icons, and on the archive page the links to articles appear alonside the names of the month rather than underneath them. Other than that they just adjust the width a bit to make sure that more screen is taken up with text on smaller browser windows.

Mobile testing

Screenshots of the site as viewed in Mobilizer (iPhone 4 and HTC Evo), and Opera Mobile Emulator (HTC Desire)

At the moment, my mobile test suite consists of an Ipod Touch with Mobile Safari and Opera Mini, an HTC Desire with the built-in Webkit browser, and Opera Mobile Emulator, and just recently, the very impressive Mobilizer (gotta love the synchronisation of pages between devices — click a link on one and they all automatically update), running on my laptop. And I'm happy to say that the site checks out relatively well in all of them.

A few issues I ran into:

  • Opera Mini and Emulator weren't applying the gradient on the red bar at the top of the page (I'd forgotten to specify a fallback background-color); this wasn't a problem on the desktop browser. Opera have just released Opera Mobile 11.1 and Mini 6.1 in the last few days which now have gradient support, so that issue should be fixed without the fallback background-color.
  • I added a textured background-image to the page combined with a gradient that went from transparent to solid white for which I used multiple background-images. I noticed that in Opera on the desktop, that the page would load with the multiple background-images showing fine but then a split second later the areas outside the central column (i.e. the body element) would change to all white. It took me a while to figure out that the change was being caused by javascript kicking in and the culprit turned out to be jQuery 1.6.1. Dropping back to jQuery 1.4.3 fixed it. This problem only appeared apparent in Opera, so I'm inclined to think it's an Opera bug rather than a problem with jQuery.
  • Opera Mini also seems to have a problem (seems to be a pattern emerging here) with the icons which are included using the CSS content and clip properties, getting their clipping/positioning a bit wrong. The desktop version of Opera and mobile emulator don't have this problem.

But that's about it which I was quite pleasantly surprised about. Working with essentially a single column layout problably helps because there's less variables to have to consider at different screen sizes.

Vertical rhythm

I have to say, that I found this part of the building out of the site, getting everything to line up along a baseline grid, the hardest part! I mean it's not just the maths involved, but the fact you have to do those calculations for line-height, margin and padding every time you add different elements to the mix. Change a font size and you have to recalculate; want to create spacing between elements and you have to recalculate, change the dimensions of the screen so elements end up in different places and you have to recalculate.

I found this part of the building out of the site, getting everything to line up along a baseline grid, the hardest part!

So yeah, there's a lot more extra thought that goes into working with a baseline grid. I've read from others who have written about their experiences of working with vertical rhythm and baseline grid that it's like anything new when you first start working with it - it takes a while for you to get used to, and I'm hoping that'll be the case for me too.

But one thing I can't quite get my head around, and I'm hoping someone with more experience at using a baseline grid while working with responsive design might be able to answer for me is, how do you deal with images? Images that float to left or right and have text flowing underneath them are fine, because the bottom of the paragraph that contains the image is still dictating the spacing between it and the paragraph that follows. But if you include an image between two blocks of text that fills 100% of the containing element, unless the height of your image is made up of units of your default baseline grid (i.e. if your grid is 24px high, your image would be 24, 48, 72 pixels high etc.), it's going to throw out the positioning of all the content that follows it relative to your grid.

Now you could make sure that you size all your images so that they fit exactly into your grid (although I'm pretty sure that would be a restriction that would be hard to work with), but if you use img { max-width: 100% } in your CSS so that your images scale with your responsive design, then all your careful image cropping will go out the window the moment someone resizes their browser. So how do you do it? Is it even possible to combine a completely responsive design that includes variable sized images with a baseline grid? If anyone has any answers to those questions, I'd love to hear.