I decided to ask some of my favorite nerds to send me a list of classic articles and books that every web professional should know. Here's the list of links to books that Jenifer Hanen of the wonderful Black Phoebe Blog sent me. This is the first part. A second post with her favorite articles will follow — Vasilis
Since Vasilis asked to compile a list of Classical Web Design / Development links and books that influenced me, I give you a chronological version here. Books first, as books should always be first, and then the web links. ;o)
Books, brought to you by the internet miracle known as "Amazon: Your Orders (history)":
Art Center's design theorist Peter Lunenfeld's foray into essays on digital, design, and the web. Excellent. May have had a case of the suck fairy since 2001, but the principles are still applicable.
Peter has also kindly proved some pdf downloads
Before the words "social media" and "web 2.0" and "rich web" were uttered, Derek Powazek wrote a great book on how to Design for Community. It is the type of book that re-reminds you what you know deep in your core about what you should be doing for your site / app, but need to actually think out and design explicitly for.
A cogent defense of the open web, open ideas, and open law made by Stanford law professor and EEF activist Lawerence Lessig. We need the open web now more than ever. 2005 is calling and we need to stand up now.
Need I say any more here? Dave ripped open the infinite possibilities of what we ALL could do with CSS and then with the encouragement of Molly Holzschlag wrote a book about it.
Back before you started bowing down to Steve Jobs' iPhone, Matt and Gary were writing on how we should be designing and developing interactions for mobile. Still a thoughtful book.
The book that helped me unlock, safely with out major disaster, PHP and MYSQL and create a dynamic website. Sounds like old news, but this was a very practical book.
Much like Derek Powazek, Spiekermann re-reminds you of the stuff you learned in design school (or teaches you the first time) of the core of typography - the theory, practice, asthetics, and design thereof in a away that is both lighthearted and deep down. If you only pay attention to one book on my list, get this one and then download the pdfs of Veen and Lunenfeld for the first few chapters.
O.M.G. I LOVED THIS BOOK. Jürgen, aka Mobile Lenin, blew open the doors of mobile app prototyping for me with this book. Python + Mobile + my beloved Nokia N95 = The best possible thing to happen to me in 2008. (Other than the photo tour in India and participating in an excellent UX / Social / Mobile workshop in Helsinki). What I wouldn't give for ALL contemporary mobile devices to have Python as one of the main stack programming languages on their OSes.
2009 - 2013
I won't go into my forays between 2006 and 2011 into Django, Google App Engine, Ruby on Rails, Android, PHP's OOP / Pear, Qt / QML, and other fabulous Open Source worlds. Since other folks have already covered 2010 - 2013 in these lists, I will leave those years be. Except…
I will give a shout out to Maximilliano Firtman's Programming the Mobile Web from 2010, before the Responsive Web upswing, Maximilliano was encouraging us all to the right thing.
Very happy to see that SVG is finally, after all these years, really taking off. Nathan Ford tweeted last week:
Explain to me how SVG is not *the* web format. And I wonder indeed. It is wonderful. In this post Chris Coyier shows us how we can use an SVG shape as a template in order to create clickable, non-rectangular shapes. I imagine people are as excited about this as we were with sliding doors when we discovered CSS.
Some people talk about web vs native. Other people, like Anne van Kesteren, talk about
changing the world so that the operating system is the browser and its app market the web. An excellent idea.
Maybe someone could use this brilliant little tool to create a generic plugin that works on all CMSes. It should hide the publish button when there's too much bullshit in the text.
In a small post I asked people to send me the classic articles that every web professional should know. Some unfortunate wording I triggered a few people to write so excellent, lengthy comments about accessibility and webdesign. This turned this boring article into an excellent long read.
It's important for professionals to understand and use the correct terms. In this post Tantek Çelik explains what a class attribute is, what a class attribute value is, what class selectors are, and why it's important to use the correct word for the thing you're talking about.
It's very easy to prevent iOS from zooming in on form elements once you understand why it zooms in. It zooms in because your font is too small. Once you use a font-size that's big enough (which is 16px or more), this behaviour is gone. Which makes sense, now that you know it.
A good website consists of many layers. Front-end developers create and stack these layers in order to make a site work on as many devices as possible. But somehow, visual designers only look at the very last layer. In this post I argue that every layer should be designed by someone who's not visually impaired. And in the comments we conclude that designers and developers really need to start learning from each other.
I decided to ask some well respected nerds to send me a list of classic articles that every web professional should know. Here's the list of links and the descriptions that Cyriel sent me.
This ALA article was probably one of the first I've read when I was transitioning from being a hobbyist tinkerer to a professional designer and developer. It currently might be 13 years old but it's closing words still resonate today: "The journey begins by letting go of control, and becoming flexible."
This article by Paul Robert Lloyd basically can be seen as John Allsopp's "Dao of Web Design" reimagined for the web out there today. Like the original Dao highly recommended reading.
Ethan Marcotte managed to turn everything we know about web design upside down and inspire us to look at the web from a whole different point of view. While "A Dao of Web Design" laid down the foundation to think flexible, Responsive Web Design adds a whole layer on top of it; Websites have the ability to take any shape or form they want, they can be experienced on any device and any platform and we need to address this within the process in which we design and build experiences.
Luke Wroblewski followed up on Ethan's article shortly after by showing an approach to web design which does not only allow your work to be seen on every device we own today or in the future, but which also addresses the need for making razorsharp decisions on content; to make sure we only include the things that really matter.
While it is a quite difficult subject, typography matters. And in the responsive world we know today flexible, fluid typography really matters. Trent Walton has written a wonderful introduction on making type look great on any device and any platform.
Another great article by Trent Walton which will make you think about the ways in which content gets arranged, and rearranged, on the web as we know it today.
Since our work is getting more and more complex, we should stop thinking in pages and start thinking in systems and components. Brad Frost has created a very nice methodology to break down a website in components, which is heavily inspired by chemistry fundamentals.
Our profession as designers of digital products is increasingly getting more and more interesting (I hate the word difficult), especially regarding the contexts in which our work is being used.
Cennydd Bowles has defined a great looking set of guidelines addressing every context which could affect your work. He also did a great talk on the same subject on several conferences, this years edition of Mobilism being one of them.
Personally I think this essay by Frank Chimero is one of the most important ones on our profession published in the last few months. The conclusion deserves to be read over and over again, the fact that what the screen wants should match what we want, that technology should not be something which happens to you but something to be used by you. And most of all that due to obsessing about wealth, power and informtion gathering things are starting to suck and we seriously need to consider addressing this.
Oh, and before I forget to mention it: the whole story also features some amazing design work.
Since this is a extremely important matter, and a subject which is also very dear to me, here are two more articles touching the same subject of "suckiness". Anil Dash discusses the web we lost and ways to get it back.
In April in 2000(!) John Allsopp published this classic article about webdesign. In it he tells us that you can not control the user's browser. Instead we should embrace the idea that maybe complete control is not necessarily a good thing. Many, many great articles and books about the nature of the web are based on the principles that are so well explained in this one. It's more than 13 years old now, but it's still relevant. Everybody who works for the web must know it by heart.
When this article was published it caused quite a row in the webdesign world. Some of the issues with web typography are outdated — fortunately — but the main subject of the article, the fact that good typography is the basis of every well designed website, still stands strong. Definitely one of the classic articles about modern webdesign, written by Oliver Reichenstein in 2006(!). Be sure to read the articles he links to at the bottom too.
A great classic article about doing good usability research. In this case Jared Spool tells about finding out that people do not like to register. Removing the step to register or to login resulted in an enormous growth. It's a great example of why good user research is so important.
Mark Boulton explains that the old design principles we used for paper don't translate one on one to the web. A grid system on the web is not based on the size of the canvas, it should be based on the content. Ecxellent read.
In this brilliant, beautiful essay Frank Chimero tries to answer this question:
What does it mean to natively design for screens? Everybody who creates stuff for the web should read this. And then read it again. And again.
Good typography is the basis of your visual web design. Layout only works on big screens, colour is invisible on black and white screens and on smoked & tarred Dell laptops. But good typography works on almost every browser on almost every device. Here's an excellent tool that will help you choose a good typographic base.
We always thought that our network connections would get faster every year. And this was true(ish) while we consumed the web from home and from the office. But from the moment we decided we need the internet while we're on the road, this wasn't true anymore: everybody who's travelled on a train in The Netherlands, or everyone who's ever stayed in a hotel with Free Wifi knows that our networks are not something that can be trusted. This knowledge *should* have a huge impact on our designs. Hence this new movement called Offline First. Now we need another movement called Crappy Hardware First, since more and more people start buying and using cheap phones with browsers.
Instead of adding shape and color to our content, we force our content into shape and colour, argues Rik Schennink. He thinks that websites will be better if we start with writing the HTML our content needs, and then design that content. And I think I agree with him. Of course it's not all black and white, and design is not just about shaping and colouring content, but I'm sure our websites would be better if we started with HTML instead of a pixel editor.
When I think about perfection, I think about something that looks amazing in every detail. But is this the correct definition for the word 'perfection' on the web? I don't think so. On the web, perfection is about much more.
If you do like swear words this site is an excellent example you can use to show that in principle the web is about words, and not necessarily about blingbling.
If you don't like swear words this site is an excellent example you can use to show that in principle the web is about words, and not necessarily about blingbling.