Designing interfaces and UI patterns

A couple of resources I’ve been enjoying recently:

Designing Interfaces: Patterns for Effective Interaction Design by Jenifer Tidwell

UI Patterns and Techniques website

As they say: no need to reinvent the wheel!

Advertisements

Mobile Web Design book

One thing that I’d like to explore more is delivering Web content to mobile Web-enabled devices, such as my Mobile Windows-loaded phone.  This book Mobile Web Design by Cameron Moll might just help.

Here’s the blurb from the site:

A web standards approach for delivering content beyond the desktop.

Much has been written about mobile devices. Plenty has been written about developing websites for the so-called “standards era” of the web. However, little has been written about the two colliding. This [book] aims to fill that void.

Transcending CSS

Transcending CSS

A review by Gareth J M Saunders

Transcending CSS: the fine art of web design by Andy Clarke is one of the best books about cascading style sheets (CSS) that I’ve read in a long time.

As a designer Andy Clarke has produced a book that’s far from the hundreds of other dull books on CSS which are packed full of dry code examples and pages and pages of text. This is a beautiful and colourful book, filled with hundreds of images, that takes a real-life approach to designing sites and writing accessible HTML and CSS code.

While this book isn’t aimed at beginners, it assumes that you have at least a good, working knowledge of XHTML and CSS, it is very easily read and if you’re looking to get into modern CSS layout methods then this book could be an inspirational introduction to the subject. Because of the design of the book it’s also more accessible than Jeffrey Zeldman‘s excellent Designing with Web Standards, now in its second edition.

The book is organized into four main sections:

  1. Discovery
  2. Process
  3. Inspiration
  4. Transcendence

Discovery

In the first part of his book Andy Clarke introduces us to what he calls Transcendent CSS, that is code that looks to the future, building on current web standards to create accessible, cross-browser-compatible websites, rather than relying on outdated layout methods such as non-semantic tables.

He argues for web standards, acknowledges that not all browsers display the same design, advocates that web designers use all available CSS selectors and semantic code, use CSS3 where possible to look to the future, avoid using hacks and filters, and to use JavaScript and the DOM to plug any gaps in CSS.

One particularly useful exercise is where he takes real-life examples and shows how he would present these in XHTML, in a section entitled “translating meaning into markup”. His examples include a horse race, marathon runners, a taxi rank, books on a shelf, and a museum display of mediaeval helmets.

Process

Having set the scene over the first 100 pages (lots of pretty pictures on the way, so don’t worry!) Clarke explores a usable process for designing with web standards. It’s quite a good introduction to certain elements of information architecture, such as wireframing/grey-boxing and usability.

Taking the example of a design for Cookr! (his made-up recipe website) he adds mark-up to the design to show you how to best mark-up and organize the XHTML and CSS code. It’s a very visual and practical approach which is strengthened by excellent explanations of what he’s doing and why.

Inspiration

In the third part of the book Clarke moves away from code and gives us an insight into where he finds inspiration for website designs. And it’s not just from other websites but newspapers, magazines, buildings, streets … anywhere really.

This section offers a good introduction to grid and layout theory, and his advice about keeping a scrapbook of inspiration examples is really helpful, either a real scrapbook or something online like Flickr. He finishes off the section exploring why design is more than just creating attractive visuals.

Transcendence

In the final section Clarke brings it all together in some practical examples of how to take particular designs and mark them up using semantic XHTML and CSS. Of particular note is his extensive and creative use of lists for marking up particular content.

This section has the best explanation of relative and absolute positioning that I’ve read in any book on CSS. It’s really worth buying it just for that.

He finishes off the section with a look ahead to what CSS3 has to offer. I’m looking forward especially to the :nth-child pseudo-class which will make creating zebra-stripes on tables easy (currently available via hand-coding and jQuery), multiple background images for elements, and multicolumn layouts (currently available in Firefox via the -moz identifier).

Conclusion

I found this a really inspiring book which got the balance between code theory and practical design application right. I’d certainly recommend it to anyone who’s looking to improve their CSS coding or simply wanting inspiration about how to take their CSS to the next level.

Available on Amazon UK.

Learning jQuery

Learning jQuery book cover

Did you get anything exciting and geeky for Christmas? I got a copy of Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques by Jonathan Chaffer and Karl Swedberg (Packt Publishing, 2007).

jQuery is an open-source JavaScript library that makes adding cross-browser compatible effects to your website really simple.

It’s written in such a way that it makes it really easy for web designers (rather than being aimed simply at experienced JavaScript code monkeys) to understand and write as most of its concepts are borrowed from the structure of HTML and CSS.

Example

Here’s a quick example: say you have a table of data to which you wish to apply a striping-effect to alternate rows. All odd rows you wish to display with a pale yellow background, all even rows with a pale blue background.

The traditional, coding-by-hand HTML method you’d manually have to add a class to each table row. If you were then to add a new row in the middle of the table you’d then have to again manually re-edit the code in each and every row.

You could, of course, write a PHP or JavaScript solution, but that would take quite a while, particularly if your 1337 g33k 5killz aren’t up-to-scratch or are in a hurry to get the job done.

jQuery offers the following solution:

  1. Download the jQuery library (about 14 KB compressed) and link it to your HTML document
  2. Write a new JavaScript file containing your striping code and link it to your HTML document
  3. Create new classes in your CSS file for styling the .odd and .even rows.

Here’s the jQuery code you’d need:

$(document).ready(function() {
$('tr:odd').addClass('odd');
$('tr:even').addClass('even');
});

Four lines of code is all it takes, and it’s almost self-explanatory too.

The code says:

  1. Wait until the DOM is ready then execute the code
  2. Then add class=”odd” to all odd table rows
  3. Add class=”even” to all even table rows

The book

The book is very easy to read, taking everything step-by-step and arranged in a very logical and easy to follow way.

Chapter 1 introduces the reader to jQuery

Chapter 2 covers selectors, the building-blocks of a jQuery function

Chapter 3 looks at events: when to start your jQuery code (e.g. on page load, when you click a link, etc.)

Chapter 4 examines Effects, e.g. fading in and out

Chapter 5 covers DOM manipulation: how to change your page on command

Chapter 6 promises to make your website buzzword-compliant with AJAX

The following chapters cover table manipulation, enhancing forms, shufflers and rotators, and extending the built-in functionality of jQuery with plug-ins.

You can see the book examples in action at http://book.learningjquery.com.

I can’t wait to get started and incorporate some of these techniques into my websites.

(Gareth J M Saunders)