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:
- Must be able to accommodate different image sizes without cropping
- Uses a web-font that loads fast
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.
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.
- size 50%, float left
- size 50%, float right
- size 33%, float left
- size 33%, float right
With these rules, here’s the result.