4 tips for a responsive, readable blog design
Some of you regulars (hi Mom) may have noticed a recent and long overdue facelift to this blog. It's the Build WordPress theme by Pushkraj Dole, but with major structural and aesthetic modifications. I'll explain what I did through some blog design tips for your CSS, but first, here's my user interface design mantra:
No web page should ever look less than its best on any display,
on any device, to the best of my ability.
Now, on to the tips.
Flexible-width layouts. Originally the Build theme was a fixed-width layout — that is, the CSS specified that the content should be 900px wide (content 600px, sidebar 300px). So on displays that were less than 900px wide, the original design required a horizontal scrollbar, anathema to me after 10 years of web interface design experience. We can fix this by making the layout flexible-width, which entails specifying widths using percentages instead of pixels. Pixel widths are recommended as a maximum-width so your page doesn't stretch illegibly across a big screen (I'm looking at you, Wikipedia).
On my blog layout, I have three major divs, for the header, content, and sidebar. The content div (what all the blog posts appear inside) is 70% wide with a maximum width of 760px. The sidebar is 20% wide with a maximum width of 230px. (I left 10% unspecified to leave room for padding. This is a little sloppy if you're the OCD-type designer. If things must fit together perfectly, you'd probably want to nest your padded divs into container divs so you can exercise every iota of control.) Here's how my current layout looks on a display that's just 750px wide:
Even in a small window, you can still see everything without having to scroll sideways!
Scale images. Most of my blog images are 760px wide, since that's my optimal (and widest possible) width for the content div. But in a little browser window, even with the flexible-width div, the images would be so large they'd disrupt the layout. We'll need to scale all images to shrink when they have to. Illustration of why:
We can do this with a little bit of side-wide CSS:
img {
max-width:100%;
height:auto;
}
Responsive design. It used to be that web designers' rule of thumb was to code for a minimum screen size of 800 by 600px, but now all bets are off with all the range of devices we use. The screen can be any size; the window can be any size. The iPhone 3, for instance, is 480x320. Even with a flexible-width layout, my site would suck if the content with the sidebar were squeezed into 20% of 320px. That would be like maybe two words per line in my sidebar. In this case, I like to employ responsive design.
This is a buzzword right now, for good reason. It's not just a set of code snippets — it's a different approach altogether to CSS. Web developers sometimes get around odd-sized mobile screen problem by using a separate stylesheet for each kind of device. This is a hassle, though, as any site update means multiple layouts to fix, and any popular new device means optimizing the site for that instead of a one-size-fits-all approach. Ethan Marcotte's "Responsive Web Design" article on A List Apart offers a solution: make the webpage scale and rearrange itself neatly when needed using one master stylesheet. This employs flexible-width layouts and scaled images. Example 1; example 2; example 3 is this web page itself (I've only done the bare minimum right now, but try making your browser window tiny).
To make sure mobile screens respond to your fancy new CSS, you will have to add this in your <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Otherwise, on smartphones that have very high resolution like the iPhone 4 (640px wide), the page will render very tiny and illegible.
vs.
Left: display not scaled. Right: display scaled.
N.b. Responsive design is probably best for smaller sites that display all their content regardless of device. Whereas with a museum's website, for example, a separate mobile site with pared-down info is preferable, as most use cases are people looking up hours, the address, current exhibition, etc. on their phones.
Reset CSS. Different browsers display content differently. Internet Explorer is probably the most notorious for giving designers grief, though I've heard that IE10 is supposed to be standards-compliant. In any case, I use a CSS reset. Its purpose is to give your CSS a blank slate to work with, rather than have your CSS laid atop browser defaults like what the margins around H1 headers are, etc. I recommend using Eric Meyer's Reset CSS.
I'll also give a shoutout to BrowserStack, a web app that tests your site in a live environment across different browsers in different versions. (FWIW, my blog looks awful in IE6.) It's a paid service, but I'm still on my 60 minutes of free use and I like it a lot. So far, they only have Windows OS; they are working on adding other OSs including mobile, which will be killer. For a similar service, NetRenderer has been my go-to for years to check IE, and it's free.
---
Other tips are welcome in the comments!
P.S. My top resources for user interface design stuff are A List Apart, StackOverflow, CSS Tricks, and Smashing Magazine. Rarely does a day go by when I don't also check W3C standards for HTML and CSS, and I try to validate whenever possible (spoiler alert, this site is not valid). I use oXygen to write all my code and Transmit as my FTP client. See more at my post, "The Setup."
---
Update 1/26/12: For all of my tips and expertise, this blog displays strangely on Chromium (Ubuntu browser, open source project behind Chrome). Boo! Why?