One of the most common questions I get over e-mail & twitter is the infamous “Do you have any good design books to suggest?” one. I wouldn’t blame those people – there is an abundance of books (even good ones) out there and it’s really difficult to read between the lines, Amazon reviews or not Amazon reviews.

Due to this, I’ve decided to mark the first week of my #p52 project with this blog post. Without further ado, here are my favourite web design books of all time, in the order I’ve read them:

1. 

   Designing with Web Standards (3rd Edition)

   By Jeffrey Zeldman

   The second version (the orange one) of this book is one of the first books I’ve been fortunate to read on web design. And believe me, it’s a hell of a starter on proper web design, and by proper I mean standards-based.

   This book is not a technical one – eventhough its second part gets into the nitty-gritty of stuff. Its value lies in the background information on standards, the definition of things like the browser wars, and the arguments pro and against standards.

   It’s a great book to read if you don’t have a clue what the heck is web standards in the first place, and an awesome book to return to when all hope withers and clients are raving on your phone about scrolling marquees and animated .gifs.

2. 

   Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition

   By Steve Krug

   What? I hear you say. Is she for real? A book from the *gasp* 2005?

   I know, 2005 feels like an eon away in web years, but believe me, those 4,5 Amazon stars are not there just for show. Krug managed to pack a great deal of insight in a lightweight and funny book you could read on a plane trip.

   Don’t Make Me Think, as Designing with Web Standards, does not focus on the technical aspect. Krug explains in simple terms why we must stop placing hurdles in front of our users (and potential clients) and demystifies some of the most common web faux pas.

   If you could only get one book on web design, this should be it. Witty and to-the-point, Don’t Make Me Think is an essential book for all designers, developers and front-end magicians.

3. 

   Transcending CSS: The Fine Art of Web Design

   By Andy Clarke

   If Designing with Web Standards was the book that got me into the whole hullaballoo, it was Transcending CSS by famous web trickster Andy Clarke that guided me to the light.

   Hyperbole? Probably. What I know is that Transcending CSS proved itself more useful than I’ve ever imagined and changed the way I wrote HTML & CSS forever. Gone are the usual code listings and “Reminder!” footnotes; Andy takes us into a wild ride around semantic code in a really, really handsome book you just love to flick through.

   If you already have a solid grasp of CSS but you need that extra something that eludes you, try this book. I guarantee you will write better code, right after you flip that last page.

4. 

   Designing the Moment: Web Interface Design Concepts in Action & Designing the Obvious: A Common Sense Approach to Web Application Design

   By Robert Hoekman Jr.

   Those two little books by Robert Hoekman Jr. were two very pleasant suprises. I really didn’t know what to expect when I bought them, but they proved really valuable and informative.

   Reading them, you’ll stumble upon concepts like kaizen and the 5S approach, while you’ll learn (using real-life examples, I always love those) how to chisel those interfaces of yours into UX masterpieces.

   If you love application design and feel you can do better in keeping your interfaces lean and mean, these two books will help a ton, I can vouch for them.

5. 

   Handcrafted CSS: More Bulletproof Web Design

   By Dan Cederholm

   This is one of my latest favs. I happen to love the way mr. Cederholm writes – he seriously makes me feel calmer, more confident and a little bit zen about web design.

   Handcrafted CSS is a pretty recent book, so expect extended coverage of all the latest and greatest CSS techniques and a thousand and one reasons why you should use them, right now. I bought the DVD version, in which mr. Cederholm offers face-to-face advice about advances in CSS design and gives real-life examples of forward thinking in web design.

   If you have any doubts concerning CSS3 techniques, if you still cling to IE6 with a vengeance and firmly believe that every design must look pixel-perfect in all browsers, do us all a favour and get this book. Like a cup of good green tea, this book will make you feel more balanced, instantly.

Disclaimer: All title links above contain my Amazon associate ID, so if you buy something by following one of the links, a little bit of shiny gratitude will come my way. Glee!

I’ve put this off for so long!

I was thinking, nah. I don’t need yet another productivity tool. I’m happy with my setup as it is. Why would I install a Firefox extension? I keep my inbox mostly empty anyway. Erm… erm…

Well, truth is, I needed it. Bad. And as times get busier, I need it (and use it) more.

What’s GTDInbox, you ask? A simple Firefox extension, NOT. It’s an over-bloated piece of productivity pr0n that will transform your GMail inbox from an arid desert to a place David Allen would call home.

I don’t use all of its numerous features. But these things made me install it at home and at work:

• The ability to easily compose a personal e-mail, as a means to add a task / reminder for yourself, right there in your inbox. I used to do that all the time, but I don’t anymore because I use less mundane stuff to take care of my todos and reminders. But still, it’s great functionality.
• One-click mark as finished / archive of an e-mail. Enough said. I used to click, select relevant label from labels menu, then press ‘Archive’. Hardly a fun way to get done with tasks e-mails.
• The ability to pre-label e-mails, before sending them. So useful.
• When you mark e-mails as pending or as action, they don’t have to be marked as unread to have their count shown next to their status label. Essential.
• It made me transform my GMail inbox from an empty, normal inbox to what it needs to be nowadays: a work dashboard. It helps my keep my inbox to zero (not a difficult task, I assure you) and it keeps me from forgetting stuff and adding everywhere those ambiguous stars.

So GTDInbox it is. Even if I don’t use like, 70% of its features.

I’ve reviewed mr. Hoekman’s Designing the Obvious book in the past – I must say I’m somehow biased, since I enjoy too much the way he writes. His books are simple and easy to follow and much focused – something that is a bit rare in the “Web Design” shelf, take my word for that.

“Designing the Moment: Web Interface Design Concepts in Action” (as its full title goes) is no different. In this, mr. Hoekman touches most current web design aspects (or problems) and presents his take on how to design in a more effective but simpler manner.

Tag clouds, video players, forms, even the almighty (and common as hell) blog design gets tossed into Hoekman’s blender and gets out leaner and meaner. I agree with most of his points but not with all – that’s the beauty of it all, it’s like having a normal conversation with a fellow web designer, discussing the practical matters at hand. I like practical.

I can’t say if I like DtM or DtO best – they’re two different takes on the same problem. What I really liked in this was the fact that practical examples were given everywhere throughout the book. Did I say I love practical?

It’s simple, it’s short, and if you’re concerned about the best way to design things, it might get a special place in your bookplace. Give it a try.

Panic announced the 1.5 version of Coda yesterday, making a (kinda) huge leap from 1.1. The new version is full of good stuff for your favourite sexy powerhouse editor, including:

• Built-in version control. Yeah, you read that right. Commit, update and checkout to your heart’s content, all through Coda.
• Local multi-file search & replace. Amen.
• Custom books. Now you can add your own resources, complete with book cover image and all.
• Improved clips. You can now organize your clips in groups, as well as import and export them.
• You can now identify between local and remote copies of the same file at a glance, using the relevant icons.
• The almighty Sites are now sortable.
• A new action has been added, named “Reverse publish”, which allows you to download remote files to your local copy.

After hours I managed to set up version control with Coda, but mainly because I never sat down to do it properly, plus I had some permissions issues (as always).

The changes Coda 1.5 brings are all more than welcome, refreshing my idea of it quite a bit. Go Panic!

coda, panic, coda 1.5

It’s quite a long time that I’ve read Designing the Obvious by Robert Hoekman, Jr., but I never managed to write a proper review for this little gem of web design books. I think now is the time for proper credit.

DtO is a very pleasant and easy to read and use web design book, while at the same time is tons useful. The writing is simple and very pleasant, enriched with proper screenshots and relative images to avoid eye strain. The very size of the book is quite small – it’s not meant to be a bible, more of a handbook full of good advice.

It explores real-life web applications and sites to give you solid advice on information architecture, feature creep and simplicity in design. The book is relatively new and the examples are very current – so no stress there.

The author also establishes what I like to call the GTD methodology of design, calling it 5S. The 5S stands for five Japanese words starting from S, which are… Uhm, I think I shouldn’t spoil your fun.

What I really enjoyed were the Interface Surgery sections, where real-life problems met their solutions in a deductive way. Very useful indeed.

All in all, it’s a no-nonsense book that does everything that’s supposed to – and maybe a little more. I think it deserves a place somewhere in your web design / development shelf. It’s well worth its money.

designing the obvious, robert hoekman jr

EDIT: Mr. Rosenfeld was kind enough to offer a discount code for all Sugarenia.com readers: with the code SUGARENIA you get -10% while purchasing any of their books. Now is the time to get them, guys!

At first, I was kinda hesitant to go on and buy such a niche book – after all, what’s so exciting about coding and designing web forms?

Wrong.

Mr. Wroblewski’s book taught me that web forms are all kinds of designer fun, and this is not a euphemism. It’s just what the author says:

Forms make or break the most crucial online interactions: checkout, registration, and any task requiring information entry.

Imagine how many times you decided not to join a service just because of its scary registration form – or how many times you’ve mistakenly filled in your credit card number to a checkout form that didn’t support multiple formats of input.

Get the point?

Web Form Design is a simple, well-written book: it seems to have borrowed the blogging way of stating facts, and this is a good thing: simple, coherent writing, to-the-point explanations and the ubiquitous “Best Practices” list of points in the end of each chapter strike a chord: it’s a specialized blog turned book! That’s not too bad, is it?

Web Form Design by Luke Wroblewski is a book highly recommended for interface designers, both on web and more traditional media. It can help everyone that wants to improve her skills in laying out inputs and textareas, and make you feel good too in the meanwhile.

You surprised me, mr. Wroblewski. Pleasantly, I might say. I think I’ll get Site Seeing too.

luke wroblewski, web form design, site seeing

You know, after all these years online, I’ve realized I’m the traditional type. When I find something interesting online, say a nice article on typography or an inspirational CSS snippet, I don’t del.icio.us it or whatever: I want to save it somewhere in my computer and keep it away from all the bad Server Errors and Bandwidth Exceeded messages.

That, and the fact that I amass a huge amount of information over the day, led me to use some kind of PIM (Personal Information Manager) to keep it all in order. So far, I’ve used Yojimbo, Soho Notes and Together. But Together wins.

Why?

1.  I love the ability of dragging and dropping stuff to a shelf on the edge of the screen, instantly saving them. All three apps offer this kind of functionality, but I found that Together approach suited me better. Yojimbo is the worst in this aspect, I think, I remember not being able to import images directly to my library, which well, sucks.
   

   Dragging ‘n’ dropping to save notes in Together

2. Soho Notes is so, so bloated. It is full of features I never use (Contact Manager anyone?). It sure does what I want (and a ton more), but it was so sloooooooow after a while. Plus, it uses OpenBase. I mean come on. When I installed Leopard, I had forgotten to make a backup of my notes library, and I was looking for it for about two weeks. Seriously.
   

   Soho Notes: too much bloat

3. Together is intuitive, plus I love its Portrait Preview pane. It supports nested folders, tags, smart folders, all kinds of notes and snippets, and it’s very lightweight and fast to boot.
   

   A sample window of Together, me likes

If you’re in the lookout for a nice, simple and effective PIM application which support .Mac syncing, download Together and give it a chance. It’ll make your life easier and far more orderly.

together, soho notes, PIM

If you read my blog even a little, you’ll probably have guess by now my unhealthy obsession with the 37Signals way of thinking, working and doing. To be frank, this wasn’t always the case.

When I first approached a 37S product, namely Backpack, I signed up for a free account and used it for about a half hour. Then I dropped it. Smacked it, to be precise. I was in the “trying-every-app-that-moves” era, so I didn’t like it, because it was too restricting, it was lacking features, it was too simple and yada yada. Or so I thought.

After a few months I decided to give Backpack a second chance. It had matured, it had collected raving reviews, it was holding a high rank among the GTD crowd, so I succumbed. Then I found out, in my surprise, that Backpack works, after all.

Just give it time. Sure, it seems to lack features. And Ruby on Rails can be laggy at times. But it has found a niche in my digital life that no other online tool has managed to fill.

Interesting links that pop into my screen while at work and need some “private” time: Backpack Inbox for later. Work todo lists and notes and drafts and mockups and files I want to share, @Work. Stuff that I wanna buy someday, an image gallery @Shopping. Blogs posts and drafts and ideas, @Blog.

A sample Backpack page

It’s a terrific tool for the day-to-day digital notetaking, while the new multi-user features that were recently added make it a solid small company Intranet solution, with calendars, whiteboards, shared editing.

Thing is, I don’t think I ever fell in love with this product. I never had an infatuation that faded after time (I tend to do that a lot with applications, both online and offline). My Backpack love grew after quite some time of working with it, so I don’t see us getting a divorce anytime soon.

It’s not only the finished product, it’s the 37S way of thinking: declutter, simplicity, straightforward are some of the words that pop in your mind while using its products, be it Backpack, Basecamp or Highrise.

Give Backpack a try.

P.S. The Backpack links above are affiliate, but what I wrote are my true feelings on this product.

37signals, backpack, basecamp, highrise

These days, Newspond.com is all the rage in link exchanging cycles – it’s a new, Digg-like tool that looks sexy as hell and twice as sleek.

Since it’s a relatively quiet Friday night, I decided to try it, but my workday won’t leave me behind: the critic eye is here again. I just realised I’m better in pointing out other people errors than correcting my own. But that’s enough food for another post.

So if you want to check a longish, kinda detailed design review a la Sugar, by all means keep on reading.

Frontpage

At first look, Newspond.com is a really sexy looking web application, with a slight touch of animation here and there. But by looking at it a bit closer you’ll see the difference: Newspond looks so much like a desktop app (correctly, a Mac OS X app) that it hurts. It’s not bad, it’s not bad at all, at least for Apple fans.

Aw come on, that’s pure Apple design genius there!

Its colour scheme is low-profile, following the dark bluish grays way, quite a safe path to walk when designing news exchange tools. It’s kinda heavy on imagery, featuring glossies and gradients almost everywhere, but its structure is simple and solid and since it follows the well-known Digg model, works.

On the downside, I think that Newspond hurts a bit the sub-1280×1024 people: in 1024×768 pixels, only two or three news are shown, due to the ample use of white space and box elements.

Newspond.com on (theoretical) 1024×768

Another remark is that there’s no clear purpose or tagline of what the site actually does in a prominent position. Sure, there are two strings used for that, but this is redundant, plus one of them is shaped like a tip-of-the-day or help element – at first I thought it’d display usage tips every time I reload, but it does not.

Double taglines are redundant – note the help icon next to the upper one

I stumbled upon that “buoyancy rating” too, not being a native english speaker (as *gasp!* many people on the webs) I had just the slightest of ideas of what this means; wouldn’t a simpler and less… buoyant word sound more appropriate for that?

What does ‘buoyancy’ mean anyway?

And that’s a tiny, but I dislike the hover colour used on the categories links, shown on the right of the news; I don’t think it matches well the purpose of hover-ity (that is, to show in some way that the mouse is over something actionable – without depending solely to colour).

Registration

You can register in Newspond.com by clicking on the prominent yellow button found on the frontpage sidebar or on the subtler one found in the footer. Registration is really easy as only a username, password and e-mail are needed, no confirmation e-mails or anything, kudos for that. It also features a sexy way to show if your username is available or your password is good enough using beautiful animations and pretty icons.

What baffled me though was the header of the registration page : “Create New User”. Ahem? Isn’t that reserved for cases like, adding users to a project in a project management app or something? Why not follow the frontpage convention and use “Create New Account” in the first place?

Registration: short, sweet, sexy and mysteriously headlined

Upon registration, the system does not prompt me to login, but instead offers a link to the frontpage, which is unchanged since registration. This is bad, because you leave the user wondering: OK, I registered, now what’s the difference? The registered user options should be highlighted somehow to better explain the point of the whole procedure.

I seriously dislike the subtle login link on the header – I didn’t see the other one under the registration button (because I have already registered anyway) so I tried to login by clicking on it, thinking it’d be a link of some sort. Alas, the “login” string is not clickable, so you have to click on the tiny icon next to it to open a glossy login form. Bad, bad bad: tiny clicking area, not linking the verb to the actual action, mystery meat navigation, me hates.

I hate it when strings at forms are not labels

Speaking of mystery meat navigation, one of my pet peeves with this site is the icons (often tiny) used everywhere instead of strings: what’s wrong with simple phrases as “Logout”? Check out the logout button below:

The logout icon – where’s the text?

Seriously, in my humble opinion it’s really bad practice to use obscure icons to link to important stuff like login, logout, account settings and the like. They should really work on that.

Commenting

One of the strongest design elements of Newspond.com lies here: the tree-structured replies. They’re sexy, they’re fun to click at, they’re some fresh thing in comment trees and I like them.

The almighty comment tree of Newspond

I could do without all the bumpy animation effects though, a subtle underline or change of background-color or both would be sufficient. Fortunately, Newspond.com people offer users the chance to disable cutesy animations altogether at their account settings.

Upon opening one of the comments to check it, I realized two things. First, there is no expand all/collapse all option. Call me elitist, but on my nice big 24” screen I’d like an option to see all the comments at once, which makes keeping track of the whole conversation a whole easier.

Second, even if there’s an option to jump directly to the root (first) comment, there’s no option to go to the parent comment, so you have to scan the list and find it for yourself. This may sound trivial for short comments, but for longish comments that require scrolling to get to the list it’ll quickly become tiring.

Conclusion

Overall, I like Newspond.com, I think it’s a refreshing change from the same ole boring digg clones as it brings an air of app freshness to the web. Since I like it, I decided to point out some of its most obvious flaws, just because I love pointing out other people flaws.

I should become a consultant or something.

newspond, digg, web design

Back in the days where I had a PC conquering most of my tiny desk (uhm, that is like, 2 days ago), I had to switch between the desk and my bed all the time while using my Macbook.

Mom wants to play some silly exploding balls game in PC – Sugar must transfer to the bed. Sis wants to check out the latest news from the greek blogsphere – whoosh, there goes Sugar to the bed, grabbing pillows, amassing cables and being as grumpy as always.

I had two main itches with that: first, I have to gather all my cables and go, second, the Macbook is too hot for my thighs and didn’t facilitate prolonged use. The first I solved by buying a Logitech cordless mouse and eliminating a cord, leaving only the power cord. The other, I solved by buying myself a (pricey) iLap.

iLap is a fine product by rain design, a nice laptop stand that makes your gem stand as much as it needs to, thus avoiding neck and wrist strain. It comes with a great little pillow to use while you have your laptop on your, well, lap. It already boasted some raving reviews, so I decided to give it a go.

The sleek surface of an iLap

Needless to say, shipping such a thing in Greece costs like, double its price. I can never understand how the shipping costs can be so high – other companies offer like, 10$ shipping (which is moderately acceptable), why rain design has to charge us an insane 47$ for bringing iLaps to Greece?

So I turned to ole, trusty eBay. After monitoring all the european eBay sites for a while, I found a german auction for a total of 70 euros (which is still pricey as hell, but one has to do what she has to do). So I bought it.

It arrived almost a week later, in a nifty box which looked very much like the Macbook box, but smaller. In it you can find the stand, all sleek and aluminum, as well as its pillow and some nice pads for the bottom of your Macbook, to avoid scratching the iLap. Nifty.

The iLap schwag

The stand itself is really nice – quite light to facilitate travel and very pretty. It has an adjustable stand that is used to lever your laptop, bringing it to a quite comfortable height that allows you to work without squinting or bending your neck. Eventhough it’s small, I still haven’t taken it with me while travelling, thinking that it’s an overkill, but then again, you couldn’t find many stands more compact than that, so it may work for you frequent travellers.

Oh noes! I feel exposed…

The little black pillow is a piece of luxury, all velvet-y and black, with a nice silver lining, reminiscent of old couches. It’s perfect for resting your wrists after hours of writing, but because of its fabric and colour, it attracts dust like honey attracts flies, or, well, other insects.

Now that I won’t have to use my Macbook at bed that much, I still have it lying on the iLap on my desk. It’s manufactured in such a way that doesn’t damages furniture or your legs, while its aluminum coating does a pretty good job of funneling the heat outside of your machine.

iLap + Macbook on my desk

It’s simpler and more elegant than other, cheaper stands, not offering bells and whistles like fans or USB ports. Still, it’s a lovely stand, perfect for Macbooks and Powerbooks, pretty much “in” the whole Apple spirit: simple, just works, elegant design, kinda pricey.

So if you wanna get (even more) hipper and avoid burns on your thighs (I know I still have the mark of a Macbook burn I got on my left thigh during the summer – comment enough and I’ll post pics on flickr), get an iLap, it’s well worth its money. If you live in an exotic country like Greece, where things are pricey and shipping twice as much, try and get some off eBay, just beware of imitations.

ilap, rain design, macbook, laptop stand