Flightless Bird Theme

Flightless Bird Theme

Created by

Published on

Updated on

Tags

I am fond of penguins and decided to illustrate one as the mascot for this theme. The design itself is intended to only be used on my portfolio site.

I carved out some free time to make a new WordPress theme to try new techniques. There are several effects I liked from Have It Your Way that I brought over but, for this new theme, I wanted to focus on responsive design through CSS3 and Scalable Vector Graphics (SVG) to improve appearance and accessibility on as many devices as possible.

Highlights

  • Responsive design
  • Scalable Vector Graphics
  • HTML5 Boilerplate foundation
  • Styling includes CSS3
  • jQuery interactivity
  • Schema.org microformat

Responsive design

The layout is fluid and designed to dynamically optimize the interface for cellphones, tablets, and computers. I targeted cellphones as < 600px, tablets < 1024px, and computers > 1024px. I felt those are good resolutions for this site considering how many large graphics and interface elements there are. Narrow this window to see the layout change.

Wireframe

Wireframe

Scalable Vector Graphics

An extension of the ideas behind responsive design, I used vector images (.svg) for interface elements. It’s more efficient to use this sort of image because it looks good at all resolutions rather than maintaing several raster versions of the same picture at increasing sizes—let alone the CSS to swap them in and out.

HTML5 Boilerplate

It’s safe to assume that, for the time being, we’re in a transition from old markup and styling standards to new ones. For that reason, the usefulness of the HTML5 Boilerplate in helping to prop up old browsers cannot be underestimated.

CSS3

This and HTML5 are probably a foregone conclusion given their adoption by modern browsers.

For this theme media queries are a must. Presentationally, I feel I was tasteful with CSS3-things like rounded corners, drop shadows, and transitions.

On that last one, I am pleased that simple transitions can now be kept in CSS rather than a separate script. For example, In Have it your way I used a transition for the main navigation that I really liked. So I brought it back!

Animation

Animation of main nav reveal

jQuery

I wrote a few lines of jQuery to handle a few presentation things that CSS wasn’t capable of: the parallax effect for computer users on the homepage, showing/hiding main navigation for cellphone browsers, and showing/hiding tab box content.

I also modified a Google Analytics script to register events—like when users download freebies or select embed code.

Schema.org microformat

Microformats are supposed to boost SEO. When it comes to accurate search engine results and page views I do not believe there is such a thing as going overboard so I’ve included them in as many places as I can justify with this theme.

Schema.org has some good documentation though there are a few rough places where better writing or examples could improve my understanding. Overall I think it’s a good and accessible meta language for adding further semantics to HTML5 markup.