This set of Tumblr and WordPress themes were coded to scale for 4 screen sizes – 320px, 480px, 768px, and 1024px, and above – using a single set of templates. The varying layouts being achieved via @media queires.

The layout for the two larger sizes is 3 column, while the 2 narrower sizes are linearised, with each column stacking up below the next. For the 2 narrowest sizes the menus items were made a uniform full screen width. The number of items is a row was also reduced as screen width came reduced. So features were also substituted. Slide out layers became visible beside or below images. I was not convinced that the 3 column solution was best for the 768px layout. The reason choosing 3 column was that, on Tumblr especially, the sidebar content is likely to be very long and the body copy very short. It would be useful to review how the layout at that screen size look once the blogs are full of actual content.

Support for older versions of Internet Explorer was via a dedicated jQuery file and style sheet. The principle function of the jQuery being to do the work of the CSS3 selectors which those older versions of IE do not support.

jQuery was also used to provide slide out panels and apply styles to the last items in rows as the widths changed. This was at first achieved via media queries and CSS3 selectors. However, using jQuery to do some maths allows the last items to be found whatever the width.

The differences in the layouts between the Tumblr and the WordPress theme is due to the differences in the features and functionality of the two platforms. At the time of writing, Tumblr has a feature set that is very limited compared to WordPress. Consequently, while it was possible to implement pretty much all of the required features in WordPress, the Tumblr theme was much simplified.