Self-challenge: redesign WordPress site

Written on 4 January 2012, 11:28pm

Tagged with: , ,

In March 2008 I started a small WordPress site, targeted for the Romanian audience, where me or some friends of mine were posting things that made us laugh throughout the day. The main goal of this website is mostly to have an online playground, allowing me to have a better perspective of the online media and the associated challenges.

For monetizing the website, I used (in the increasing order of revenues) Google Ads, a Romanian online store referral mechanism and a banner linking to my hosting company. The latter allowed me to have access to a server with a dedicated IP, unlimited bandwidth, space and number of hosted site. All in all, I can say that the website made enough revenue to cover its own expenses.

For the user traffic, August 2011 was the best month, with a number of 65.000 unique users and 185.000 page views. The website saw a redesign in the beginning of 2010 (WordPress theme update), and other small improvements/additions were performed since then.

To finish with the statistics, I will add that at the moment, the website contains almost 5000 posts and 400 comments (averaging to a considerable 100 posts/month or a little over 3 posts per day).

The reasons for the redesign

Enough with the presentation, now details about my self-challenge: the website redesign.
I first thought about this aspect last month, while reading Smashing Magazine’s article Clear Indications That It’s Time To Redesign. Let’s browse through the 5 indicators telling me if it’s the case to redesign or not:

  • It’s Been More Than 12 Months Since Your Last Refresh – Yes
  • The Tech/UX “Debt” List Is Longer Than Your Forearm – Yes
  • It Just “Looks” Old – Not quite (in my opinion 🙂 )
  • Your Users Tell You It’s Time – No
  • Metrics Are Down – Not quite – December 2011 is in top 5 overall

So, only 2/5 indicators tell that I should redesign. This means there is no pressure, and I can take it easy. It’s true, the first indicator tells me that the redesign is long overdue (last redesign was 2 years ago). I entirely agree with the principle behind it: The redesign will breathe life into the brand and show your user base, the press, your investors and staff that you’re committed to keeping the experience fresh and top of mind. But in my defense, I will add that every now and then I added something fresh in the design: a holidays greeting, removing one of the biggest ads and other small but important improvements.

The most important reason why I want to perform the redesign is that I want to put in practice some of the things that I learned over the last 12 months. The web has changed, and HTML5, responsive design or mobile first are no longer fancy buzzwords, but the reality.

In the next post, I will outline the main goals of the redesign. They are too many and I think they deserve a separate post.

Code highlighter: expand on mouse over

Written on 30 December 2011, 11:03am

Tagged with: , ,

Inspired by the article A Design Is Only As Deep As It Is Usable featured in the e-book Modern Web Design & Development – I decided to make the blocks of code on this WordPress-powered blog expandable on mouse over. As you will see soon, unfortunately this is not an easy job.

1. Syntax Highlighting

Let’s get back a little. When it comes to syntax highlighting, you have 2 main options:

  1. Alex Gorbatchev’s SyntaxHighlighter
  2. GeSHi – Generic Syntax Highlighter

They both support ColdFusion syntax, and they are both featured in WordPress plugins. Because of the better functionalities, ease of use and because it simply looks better, when I started this blog I decided to use the SyntaxHighlighter – by installing the SyntaxHighlighter Evolved WordPress plugin. This allowed me to simply add ColdFusion code by simply wrapping the code in [ cf ] ...[ /cf ] markers. I solved the long lines problem by using the ‘wrap long lines’ option, as shown below:

2. Expand the code


Designing for emotion

Written on 26 December 2011, 12:40am

Tagged with: , ,

I just finished reading Designing for Emotion written by Aarron Walter from A Book Apart, and I am quite impressed with the things I learned. I quickly want to note some ideas that left in my head after reading the book’s 7 chapters.

1. What is it? What are the advantages?

There are 2 main considerations before anything (and the author of the book correctly repeats them several times throughout the book):

  1. Design always comes after content. This means that quality content is always required. Carefully considered content and well-executed design work in concert.
  2. Emotional design comes after the standard design. The emotional design does not have to interfere with the base layers of the users hierarchy of needs: functionality, reliability and usablility.

What does it mean to design for emotion?
In a phrase, it means to engage your audience emotionally; and to do that you must let your brand’s personality show. Humans want to connect with real people.

The advantages of the emotional design:
1. it turns users into loyal users, even fanatics
2. the users end up by trusting the website/product/application, and they will be more likely to forgive any possible errors/mistakes
3. if done right, emotional design can eliminate the marketing costs. The audience will end up by doing the marketing for you, using the holy grail of the advertising world: the word of mouth.

2. Important ideas

And now quickly noting the other ideas of the book, and how they related to other opinions I came across lately:
Maslow’s Hierarchy of needs (physiological, safety, love, esteem, self-actualization) can be remapped for for user interfaces: functional, reliable, usable, pleasurable.
Baby face bias: humans are hard-wired to love babies, and with them – any cute face resembling the face of a newborn.

The takeaway here is not to make your website cuter. With a little consideration you’ll discover that behind every design principle is a connection to human nature and our emotional instincts. (Ex: the golden ratio in Twitter’s design)
-Designing for emotion – Chapter 1