Redesigning Island Trotters

As Island Trotters evolve as a travel blog, slowly finding its identity, so should its design.

After migrating the site to ModX from WordPress, the site has gone through two designs. The first was a simple static layout inspired by the book 501 Must-take Journeys; second was a two-column theme I created as a study on responsive design.

Every few months, I look at the site with fresh eyes and see glaring mistakes. The first design’s un-responsive layout looked ridiculous on mobile and its navigational menu was ugly. The second design was better. It looked great on mobile, with an intuitive menu. Unfortunately, the layout was stuck with the traditional and, IMHO, overused 2-column layout. Plus the way it handled images was far from perfect.

When Hendrix (www.audrim.com) submitted his post (Chasing the Bohol That I Knew), the problems of the second design became obvious. So I started working on a new theme with the following requirements in mind:

Single-column responsive layout

This was easily achieved by setting the wrapper's width using max-width in pixels and width in percentage. Everything else inside the wrapper (paragraphs, blockquote, videos, images, headings, etc.) is contained within these constraints.

The tricky part was creating the navigational menu. I started learning Javascript, specifically DOM manipulation, which came in handy. With simple toggle button, I was able to create a quick burger menu. It’s not yet perfect but it works. I intend to update it as much as I learn more JS tricks.

A typeface that loads fast

With free webfont services like Adobe Edge Web Fonts and Google Fonts, it’s easy to get drown on all those options. I noticed that some fonts have larger file sizes, which can significantly increase page load times. Even more so if the site’s visitors are from countries with slow internet connection. Like say, the Philippines. (Uggh!)

With this in mind, I narrowed the choices down to Open Sans, Merriweather and Roboto. Open Sans won because it works well with the site’s content - simple and human. Merriweather is good but I find it looks a bit authoritative for a travel blog. Roboto is just a bit too narrow.

Better ways to display images

Most image sizes work well by simply setting their width to fill the whole wrapper (width: 100%). Except for two types of images: ultra-wide and portraits.

Ultra-wide images when set to fit inside the content wrapper looks small. Portraits, on the other hand, take the whole screen. To overcome these limitations, I created additional classes for the images.

Ultra-wide photos overflow beyond the wrapper. This, however, only work on devices with bigger viewports. On smaller viewports, there was no way to wide images without narrowing the text areas.

Portraits were easier. I simply added four new classes for different placements and sizes.

With these rules, here’s the result.

Homepage Ultra-wide photos on Side portrait