All elements are aligned to a fluid 8-column symmetrical grid structure. All font sizes are defined in ems, according to the traditional typographic scale (8-9-10-11-12-14-16-18-21-24-36 etc.). I've also made an effort to maintain a consistent baseline even if element font size decreases or increases.
I was also planning for switching the display of content and navigation based on browser size but that'll have to wait until the next design iteration of this site.
Here are some of the articles and frameworks published during the last year or so that inspired this redesign:
- Boilerplates: HTML5 boilerplate, HTML5 mobile boilerplate, 320 and Up
- Trigger media queries with ems rather than pixels: Responsive enhancement
- Document outlines and semantics: HTML5 document outline revisited, Semantic boilerplate
- Responsive images: Fluid images
- Use IDs only for internal links and document fragments, not for styling: Don’t use IDs in CSS selectors?
- Microformats: hAtom 0.1 microformat
There are still some tweaks to be done but I figured the theme was ready to be put online. This is the fifth version of this site. The previous version was online from November 2009 until September 2011.