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.
Personally, I don't think the web is in competition with native, whatever that is. So we don't really have to compete. Of course we should take a look at what wonderful stuff can be done, and nick the better ideas, but I don't think we're really competing. Bruce Lawson on the other hand does think we do, and he explains why (and he explains it very well) in this brilliant, brilliant presentation. Hilarious, fantastic, and very informative. You should definitely watch it. A fantastic closing talk of a fantastic Fronteers 2013.
This is a topic that designers and coders will mostly disagree on, but Harry Roberts has some good arguments, and some excellent examples that might convince at least some designers. He argues that in order to create a fantastic user experience, some design choices have to be altered if it results in bad code. Very interesting topic, with lots of great examples of how teams should work together. Important topic!
FirefoxOS is not just a cheap phone, it's much more than that. Its aim is not to conquer the world, or to compete with the other big phones, but it wants to make sure that the web and mobile is for everyone, not just for the wealthy few. Sergi Mansilla gave this fantastic presentation about why this is very, very important.
A big part of creating a website is, unfortunately, rewriting parts of it. If you like rewriting part of your site, don't watch this presentation. If you don't, then be sure to listen to Garann Means explain how to avoid it.
Typography is an important part of webdesign. So it's good to understand how typefaces are made. Lucas de Groot shows us how much work it takes to create a good typeface in this hilarious but at the same time very interesting presentation.
Performance was mostly about reducing HTTP-requiests and reducing file size. Since we use more and more transitions and animations in our work, and since scrolling is an essential part of the design and the interaction, we need to understand how we can optimise these things. Paul Lewis explains. This is the next level of performance. Brilliant stuff!
Yet another presentation about performance, by Alex MacCaw. Not much news in it, the regular stuff. People who don't know much about performance and who want to start with it could benefit from watching it.
Frontenders are a vital part of the design process, says Robert-Jan Verkade, which means that we have to behave ourselves as a professional part of a team, and not as a clique. An unpleasant message for some, a very welcome one for others. This was probably the most talked about presentation on Fronteers 2013. It definitely had the most beautiful slides. By far.
Layout is still pretty hard to do with CSS. But luckily for us, flexbox can be used on more and more browsers. It is a bit different to what we're used to, but Zoe Mickley Gillenwater explains it all.
The undisputable Caesar of performance, mister Steve Souders did the brilliant opening keynote on Fronteers 2013. And yes, it was about performance. About how we can speed things up before any data reaches the browser. Fantastic stuff.
Loading scripts, how hard can it be? You add a few script tags to your HTML and you're done, right? Jake Archibald shows us that there's a bit more to loading scripts than just that. It's much like King Sisyphus really. Excellent, and funny, read as always. You'll be smarter when you're done.
I think the best argument in favor of progressive enhancement is, as Stephen Carver writes:
We need to acknowledge the reality of less capable browsers and devices—now and in the future, especially the and in the future part. More and more crappy devices enter the market. Things must work on these things too.
You should test your website on all kinds of browsers, all kinds of devices, but also, definitely, on all kinds of network speeds. Here are some simple tools for simple network speed testing.
We always assumed that all computers will always get faster. But recently we see ever cheaper devices on the market. Stephanie Rieger wonders what will happen once these devices are *free*. Will the way we use them change completely? Interesting little article.
A very nice article about using CSS to print documents by Hans Christian Reini. Many clever and wonderful techniques are shown, which *almost* makes me want to improve my print stylesheets. (And I very mych like the warning at the top of the article with the message that the article is 217 days old!)
If you want to switch from *pixel design* to *webdesign* (previously called *responsive design*), where do you start. Here's an excellent article by Trent Walton about all the things to consider, and all the things you should probably change. Very good read for visual designers who have a hard time getting used to the flexible nature of the web.
I think the HTML5 document outline is brilliant. In theory, you can select any section with its subsections from any page, and paste it into another document, and the outline just works. This is so much better than the h1-h6 that older versions of HTML had to offer. Unfortunately, no browsers really support the new sectioning elements. The advice is, thus, to use the new sectioning elements *together with* the old H1-H6 elements. Yes, it will break in current browsers once you copy a section into some other document, but it will be magically fixed once they fix it. So use both.
Frank Chimero is brilliant, and he gives us the chance to get a small glimpse of his brilliant mind in this fantastic presentation he gave to a very, very lucky group of students. Absolutely beautiful stuff in here. Every creative person should scroll through this page.
A truly mindblowing presentation (with excellent Dutch notes) about working with maps on the web by Bramus van Damme. Not just about working with Google maps, but also about things like GRS80, WGS84, the reference ellipsoid, the mercator puzzle, and much much more. Absolutely brilliant.
A pretty interesting interview with three designers about the use of grids on the (responsive) web. Mosly with very interesting insights, but some rather silly answers too, sometimes. Be sure to read all the answers by Nathan Ford, he really understands this stuff.
Here's a nice and simple example of how you can create *sparkicons*,
a small, inline icon with additional link meta data to describe either the content and/or the behaviour when the user clicks the link.
Tyler Sticka created a *spreadsheet* with all the styleguides, builerplates and pattern libraries he could find, and plotted them to all the features he could imagine. Very, very useful!
An excellent post by Remy Sharp in which he explains when there is no need to use jQuery in your projects. And when it is a good idea to use it.
Last week I lost my passport, traveled to two European cities anyway and talked about how easy web design is on two fantastic conferences. Here's a small post about my adventures.
This is a pretty good beginners guide to visual design by Daniel Higginbotham. It talks about things like information structure, alignment, size, gestalt, and much more.