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

(more…)

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

(more…)