Redesigning Camiguin Guide
I created Camiguin Guide about 4 years ago with a goal of serving info-guide to potential tourists. Over the past 2 years, the site only received some minor design and content updates. I just couldn't find the time and energy needed.
Two weeks ago, I decided to redesign the site. The goal was to make it readable on mobile devices, which according to Google Analytics makes up 40% of the site's visitor. The site sees between 150 to 200 unique visitors a day. Not much but good enough for a really small niche.
Before diving into the design, I started by listing requirements. The list soon grew into something that's potentially time-consuming. Seeing that I only have a few hours a week to spend on this project, I trimmed the list to just these two important points:
- Readability. As mentioned in my post regarding viewport units, I love Medium.com. It's just a great website for reading. I have to find a way to incorporate it to Camiguin Guide.
- Responsive. There's no reason to ignore 40% anymore.
The first task is selecting a new set of fonts. There were a lot of options available but I stick to my serif/sans-serif combo. The logo and headers are set to Noto serif, while the rest are set to Helvetica, Arial, sans-serif stack. This font combination is nothing fancy but it's very readable.
My lack of training on typography forced me to trust something universal. Line-heights for texts on a paragraph where set to 160%, following the Golden Ratio. The sizes, on the other hand, are all set to taste.
Making the site responsive was surprisingly easy. This is the third time I worked with responsive web design, the first being Named and the second Unnamed.
It was easy for two reasons. First, the site has a really simple & straighforward layout. Second, I decided to use only two media queries, targeting the devices used to visit the site.
I suck at picking the right color so I used what's available at Flat UI Colors for the stronger sections - branding, navigation & links. The rest are, again, set to test.
It took me roughly 6 hours to complete the the design as it is now. I will need to spend a couple more to clean-up and tweak it. This involves testing the site on several devices. So far, I've only tested it on a Win 7 desktop (1366 x 768) and the Nexus 4.
There's also the issue of content. The site has really thin content, majority of which are blog updates. I expect the reworking of the articles to take months as I need to spend a few days in Camiguin to write new guides and take much-needed photos.