I recently completed my first fully Responsive WordPress site for Journey Jottings. Linda Fairbairn (no relation) contacted me from Australia to ask me if I’d be interested in helping revamp her website.
Linda sells a unique product that combines a map with a journal and allows you to track your travels so that you have a unique record of your journey. She was kind enough to send me samples of some of the maps and magnets that she produces to help inform the direction of the design.
The Design
Linda had used the John Handy font on her products, so we decided that it would be nice to use it on the site as well. Fortunately, there is a Web license for this font that allowed us to use the @font-face declaration. This meant that we could use the font on many of the titles and still have it remain both accessible and easily editable.
The site is fully responsive, which means that it will stretch or shrink to fit the device that you’re viewing it on. You can test this for yourself by simply resizing the browser window or loading it up on a smartphone.
Journey Jottings title on a mobile sized viewport
Journey Jottings home page on a mobile sized viewport
The Markup
The site is constructed using as much meaningful markup as possible. For example, headers are wrapped in the <header> tag (both the full-page headers and individual article titles), multiple heading tags are wrapped together in a <hgroup> tag, navigation (both page and internal) use <nav> tags, sidebars use the <aside> tag and footers use the <footer> tag. There are also appropriate uses of rel tag attributes to link content together and the <article> and <section> tags.
If Google aren’t already taking HTML5 into account in their search algorhithms, then I’d be willing to bet that they soon will be and this should help give Linda an edge with her rankings.
Also within the markup, I used a lot of WAI ARIA role attributes to help define content areas for screenreaders and other accessibility devices. I used MicroFormats where appropriate for contact details, such as the phone number in the header. On the iPhone, this becomes a link allowing you to save the number to your contacts so that you can call Linda directly (and place an order!)
The blog index
The CSS
The site aligns to a baseline grid, whilst retaining the use of proportional sizing on all font sizes. If you overlaid a 21px line grid (like lines on a notepad) on the default font size of the site, all of the paragraph text should (depending on your browser) sit on the lines, even when interrupted by headers. If a heading is, say, 28px, then the site will recalculate the padding and line-height to make sure that the total space it takes up is a multiple of 21px.
This makes sure that any text that appears on the paragraphs following the heading return to the line, creating a solid structure for the text to hang off of. The baseline grid takes its lead from 100s of years of typography in the print industry and goes a long way to create a feeling of balance within a site.
The borders around the content area and comment forms are all created using CSS3′s border-image property. This allows the site to use fluid widths on the containers without worrying about how the borders are going to resize. Of course, there are fallbacks for older browsers that don’t support this feature (mostly Internet Explorer), but it allows those with more advanced browsers to get an enhanced experience.
The new comments form for Journey Jottings
The Development
Linda was looking for some custom functionality for the site, especially around her products. She was using the basic PayPal buttons but was looking for a way where users could select their shipping location before placing their orders so that they got charged the correct amount.
I created a custom admin page on her WordPress dashboard where she could add, edit and delete shipping locations and amounts. Then, using JavaScript and PHP Session variables, I created a modal pop up box that asks where the user would like to have their items shipped to. This box only appears once per site visit and is only triggered when the user adds something to their basket (thus not annoying users who are only interested in browsing).
Of course, I started by creating a version for those without JavaScript first, to make sure that all users can take advantage of her site, and then progressively enhanced it with the JavaScript version.
The Journey Jottings product pages
The products themselves are managed using a custom WordPress post type together with a custom taxonomy.
For the home page, I created a range of widgets that allow her to display different posts and pages depending on different criteria.
