Last week marked the one year “anniversary” of this website. I have thoroughly enjoyed writing on my favourite sport and am very humbled with the support and feedback I’ve gotten from you, the readers. Thank you. To commemorate this, I had three things planned for the week
I believe I’ve written some of my best material over the last week and launched the podcast, but the website design update slipped to this week. This was mainly to a problem I was having displaying this website on Android phones. I didn’t want to launch it uncooked, just for the sake of launching it. With some help, I managed to fix the problem so I can unveil the update today.
The design strongly follows the style and philosophy behind the the website – minimalism, simplicity and a focus on the content.
I’ve always designed the website with the you, the reader, in mind. The typography and design was set with the aim of producing an ideal “reading environment”. The RSS feed which gives you instant updates to articles being posted is non-truncated, without any annoying “click to visit the site and read more” comments. There are no ads. It’s all about the content.
Whilst I was very happy with the design of the website until now, it had two major shortcomings, which are addressed with this update:
- An ineffective homepage
- No mobile/tablet interface
It was an aim of mine to make my website as fluid as possible. So the homepage didn’t contain any show stopping “click to read more”. The article in it’s entirety was presented at the home page and you didn’t even have to click the article title to read.
Such a system is heavily employed since it generates more pageviews out of the readers for the website For me, pageviews are absolutely not important, readers are. I’d much rather have half the page views and double the readers.
So why have I implemented a system that I initially showed a dislike to? Whilst there are no “click to read more” tags, I’ve now moved to show just a pre-defined except from the article on the home page. There are very good reasons for this.
The “home” page is a landing page for the content on a website. It’s effectiveness lies in giving you the best exposure to the content produced. It’s not really a page where all of the content should lie. Why? Because every article you write pushes the one you wrote earlier down. Readers then need to scroll all the way down to access prior content. The longer the article, the worse it is as the more it pushes older content down. I’m sure you’ll agree that I have a habit of writing long, analytical articles. So this meant every long article I wrote pushed the earlier one I did further down the home page. l was showcasing only my most recent work and strongly neglecting all the hard work before hand. I work hard to make every new article better than the one before but it sure feels like I’m shooting the efforts of my past in the metaphorical foot.
So I decided to implement a home page which would showcase gracefully more of my work, at a glace. This new system is much better because now just from the home page you can peruse my articles and chose to read the one that interest you, not just the most recent one presented.
Now that I could kind of break away from that “full post” system, I could make the home page more elegant. Thus I enabled a “featured picture” for every article on the right that gives you a visual representation of it’s content.
In my opinion, the home page has never looked better. I can also say the same about the article reading page, which now has better typography than before, uniform across all platforms. Speaking of platforms…
Mobile & Tablet interface
One of the biggest notes of feedback I got was a lack of a dedicated mobile or iPad view. I personally never liked a gimmicky interface that mimicked faux buttons from an iPhone or iPad. However, my analytics showed that up to 30% of my traffic was from mobile devices. Something better needed to be done.
This new design style utilizes the latest web technologies to be “responsive”. A responsive design is one that scales to the size of the viewing window. Try it yourself, make this window on your computer really tiny and you’ll see the mobile view! It features beautiful typography that looks great on an iPhone or any mobile smartphone. Here’s how it looks on the iPhone. No sideways scrolling at all.
The same goes for any mobile tablets or netbooks. No matter what screen size, you shouldn’t have any sideways scrolling trying to best fit the content.
- Translation. – there is a dedicated translation button in the sidebar, active for for both navigational elements and content.
- Improved Speed – The website loads faster than ever before.
- Optimisation for “Retina” displays of the iPhone 4, iPad 3 & the new MacBook Pro.
- Much better font rendering on Internet Explorer and upcoming Windows 8 Metro browser.
Hope you all like this new design and the website upgrades. It’s a big change but hopefully you agree, a good one. I’d love to hear your comments on it below.