GIFBUILDER can’t actually read your headertext so there’s no way it can determine when to use multiple lines by itself (at least, not without making weird cuts in the middle of your words). Therefore, we need to tell GIFBUILDER when to break the line.

Since we only use one H1 tag per seo, this snippet modifies the second header layout.

# Start overriding the second header layout.
lib.stdheader.10.2 >
lib.stdheader.10.2 = COA
lib.stdheader.10.2 {
  # Wrap the whole header
  wrap = <div>|</div>
  10 = IMAGE
  10 {
     # Wrap the first line
     wrap = <div>|</div>
     file = GIFBUILDER
     file {
        XY = [10.w] + 4, [10.h] + 8
        backColor = #FFFFFF
        10 = TEXT
        10 {
           text.field = header
           # Set the fontfile and font-properties.
           fontFile = fileadmin/fonts/customfont.ttf
           fontSize = 22
           fontColor = #000000
           offset = 0,18
           # Select the first line of our sentence.
           text.listNum = 0
           # Here we determine the break, in this case a pipe (|).
           text.listNum.splitChar = |
        }
     }
  }
  # Check if the second line is there...
  20 = COA
  20.if {
     value.field = header
     isTrue.cObject = TEXT
     isTrue.cObject.field = header
     # The second line starts after the pipe
     isTrue.cObject.listNum.splitChar = |
     # Now use the second line of our sentence
     isTrue.cObject.listNum = 1
  }
  # If the second line is there, use the same markup
  20.10 < .10
  20.10 {
     file {
        10.text.listNum = 1
        10.text.listNum.splitChar = |
     }
  }
}

Just to be clear: A header with two lines would now be like:
This is a very long header which will | be displayed over two lines.

Result:

The pipe will be the place where you split the header. Ofcourse, all the font properties used in the first line are also available in the second line, so play all you like with different fonts and markup on every other line.

Neuro Web Design is a very easy to read psychology book which deals with questions like: Why do people decide to buy a product online? and Why do they trust the information a website provides? The book describes how the human brain works and how information and design is stored in our brain. It teaches you how to get peoples attention on a website without them even knowing you’re doing it. This book is really interesting when you want to know how the unconscious brain works and how you can activate it. After you read this book you know how to design a website which will attract the attention of people because you triggered that unconscious part.

Quote from the website of the book on which I totally agree: “You will learn the unconscious reasons for people’s actions, how emotions affect decisions, and how to apply the principles of persuasion to design web sites that encourage users to click. Neuro Web Design is scientific, yet you’ll find it accessible and easy to read”

I suggest you just read the book. You can finish it in half a day and you’ll be surprised by the content and how easy it is to implement these things.

#1: Don’t Make Me Think by Steve Krug

Wonderful book, a must read for everyone in web design. The book covers most of the usability fields and is plain and simple to read. Steve uses mostly common sense to argue usability problems and gives you a fresh look on things. I suggest you read this book when you’re new on usability or you just want a book that’s easy written with some humour along the way. Steve’s tips are really useful in everyday’s work!

201 pages, 2005

I rate this book 5/5

#2: Web Usability Handbook by Mark Pearrow

This book is much more detailed than Steve’s and therefore a lot harder to read. Mark goes into detail about every step in the usability process, from basic usability facts to a detailed plan on how to setup a testinglab. This book is definitely useful when you want to do some usability testing yourself, but with a decent (big) budget. The book is complete but also rough to get through.

352 pages, 2006

I rate this book 4/5