Introducing The Theme Machine Responsive

After building a lot of sites in Orchard CMS using "The Theme Machine" that ships with Orchard as a starting point and exploring the current responsive themes in the gallery I saw a need for a more robust responsive solution that would work across any device (JS enabled) right out-of-the-box, including navigation. The Theme Machine Responsive is a fully responsive version of that theme and is built to work with the existing widget structure and tiered navigation.

Features

Flexible Margins and Padding:

"The Theme Machine Responsive" utilizes percentage and em based margins and padding over pixels for fully flexible/relative margins and padding relative to device viewport width and font size. This was done by converting most of the existing site margins and padding to percentage and em's instead of the default pixels. On occasion I decided to leave the pixel based margins/padding for dynamic content like zones since maintaining consistent percentages for margins/padding is relative to the container/sibling elements.

Lots of Breakpoints

Using a mobile first CSS approach, I started with a base styling that would apply to all devices, then gradually added additional styling as the viewport size increased. The following breakpoints are included:

Base

The base styling for all devices and viewports. Everything is built to stack with no columns or floats. Navigation is also stacked and collapsed using JavaScript.

Mobile Portrait: @media only screen and (min-width: 320px)

For most mobile devices in portrait, this breakpoint is stubbed out in the CSS but not used as most devices will fall into the base CSS category and no changes will be needed here.

Mobile Landscape: @media only screen and (min-width: 480px)

Mobile devices in landscape orientation. Minor modifications were made but generally this would be the same layout as the base CSS category.

Small Tablet: @media only screen and (min-width: 600px)

This breakpoint comes in handy for small tablets like many e-readers. Minor modifications to branding and navigation were made at this breakpoint.

Medium Tablet Portrait: @media only screen and (min-width: 768px)

Columns are now floated, the main navigation has resorted back to the default "The Theme Machine" styling, and everything pretty much resembles a flexible column full width layout.

Medium Tablet Landscape / Laptop: @media only screen and (min-width: 1024px)

Here I added a max-width CSS property to keep the content contained to a max size. Remove this if you still want a full width layout.

Desktop: @media only screen and (min-width: 1280px)

Stubbed out for larger desktop monitors but no changes made to CSS.

Widescreen: @media only screen and (min-width: 1400px)

For TV's or really large monitors I increased the font-size on body as well as the max-width for the main wrapper.

Printers: @media print

Default styling for printing.

*Note

You may want to add breakpoints for retina devices (iOS) and include larger images. Also you may want to only include images sized for each device within the specific breakpoints and not first in the base styling so they are only downloaded once for their specific device size.

Responsive Navigation

One of the biggest problems with responsive design is dealing with multi-level navigation. Although the solution implemented in this theme won't work for everyone I believe it is a good strategy for most cases up to three levels of navigation deep. Using jQuery I collapsed the navigation for small breakpoints (below 768px) and added a button to expand/collapse the block level navigation. Also all sub levels are indented/color coded for distinction from sub levels. One thing to note is that the button was created using <span> tags for the "three lines" and then styled with CSS. You could optionally switch this out with an image (I recommend an SVG image) if you desire but this way you can change any colors with just the CSS.

Adjusted Layout for Mobile and Tablet

In addition to the responsive navigation, I took the liberty of duplicating the main navigation and placing it in the footer for a better UX when a user has scrolled to the end of a page and wants to navigate somewhere new without scrolling back to the top. You could replace this with a "back to top" link or similar if you desire. I also moved the "first aside" from above the main content (in stacked mobile views) to just below it as this <aside> would generally be less important than the main content (as the term "aside" implies) and makes sense to come after the main content area on a smaller device.  Both of these layout changes are located in ResponsiveChanges.js if you would like to modify/remove them.

Better CSS Reset

Taking a page from various sources across the internet (HTML5 BP, Normalize.css, 1140 Grid system) I added various defaults for HTML5 elements and embedded content.

Mobile Friendly Meta and Legacy Fallback for Older Browsers

For this we added some handy <meta> elements to optimize content for various mobile devices (once again thanks to HTML5 BP folks) as well as some handy <html> conditionals for legacy IE access. We added html5shiv and Respond.js, handy polyfills for HTML5 support and media queries. (Not all media queries are supported with Respond.js so take a look at their docs). Finally, I included apple touch icons with correct sizing using the Orchard CMS logo.

Summary

I hope this will be a good starting point for any developer that wants to create a flexible, fully responsive website that maintains most of the original "The Theme Machine" base styling while providing a nice default responsive layout and navigation.


No Comments