Photo by Carlos Torres on Unsplash.
I've created a new fluid, responsive, mobile first/one web skin for akikoo.org (I'm hesitating to call it a design). Anyway, here it is.
My goal was to target smartphones, tablets, netbooks and desktops with the same codebase by responsively enhancing the site with CSS3 Media Queries and some JavaScript. All users get reset, typography and colour declarations. Width and float declarations are added only if larger viewport is detected, using four resolution breakpoints.
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.
Finally, some extra nice-to-have (but not core) content is lazy loaded with JavaScript. This means that you'll see Platform info, Credits and Elsewhere content only if you have JavaScript enabled and your viewport is larger than 48em/768px.
What about Internet Explorer? I thought you'd ask that. Internet Explorer lower than 9 get Andy Clarke's excellent Universal IE6 stylesheet. You see, on this site I can't be bothered to patch dead browsers (at work I do though). Also, if you have JavaScript enabled in IE lower than 9, you'll be prompted to install Chrome Frame. Done.
For icons, I'm using Vector social media icons. I'm using ARIA landmark roles for styling, referenced with CSS attribute selectors. Another solution I'm using here is Sticky footer. It works nicely.
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
- CSS3 Media Queries: Hardboiled CSS3 Media Queries, Revisit Hardboiled CSS3 Media Queries, CSS Media Queries & Using Available Space, Combining media queries and JavaScript, Rethinking the Mobile Web, CSS Media Query for Mobile is Fool’s Gold, Using Media Queries in the Real World
- Trigger media queries with ems rather than pixels: Responsive enhancement
- Document outlines and semantics: HTML5 document outline revisited, Semantic boilerplate
- JavaScript should not be relied on for layout: Using HTML5 semantic elements today, HTML5 Right Here, Right Now
- 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.