Skip to content

Responsive web design for adventure travel blog

I designed and developed a responsive, WordPress-driven blog as a personal project for documenting my various surf and paddle boarding adventures.

surftide-responsive-website-01

Overview

I've been writing a blog for almost 10 years. As part of a recent redesign and effort to separate personal writing from business, I wanted to develop a specific site for blogging about travelling, surfing etc.

Surftide was previously responsive, but I wanted to port it to Twitter Bootstrap and combine the responsive front end framework with some clever server-side scripting to further optimise the experience. The result is a pretty slick and usable site with content accessible across multiple devices.

There are some further optimisations that I want to include at some point that will cut out any redundant code and reduce the page weight, but that's another post.

For more information about RESS: Responsive Design + Server Side Components) check out the article from Luke W.

Select screenshots

Desktop view of an article page template showing the main content area on the left hand side and the typical blog style related information on the right.
Tablet and mobile view of the article page showing how the content collapses on a single column layout.
Mobile view of the article page. The site uses server-side scripting and front-end responsive design (RESS) to serve up page elements optimised to the device.