What are the classic articles for web professionals?

This morning I had a little discussion with Mallory and Flurin Egger about working with people who are not as good as you are, and in particular, about working with designers and clients who care about unimportant stuff. Mallory gave some examples like the designer takes a screenshot of the web page, measures text with straight ‘shop lines, requests fixes and I think the designers I’ve worked for felt they were doing the top of their jobs when measuring px/color perfection. She gave some examples of terrible advice given by the best SEO guy in The Netherlands too. I always thought things were getting better, but it appears that’s not the case everywhere yet.

Simple solution

Mallory suggested that we should edumacate our clients and the designers we work with. Which is actually something I’ve been trying to do for a while. One of the things I do is sending them articles that explain a certain problem or solution very well. The idea is that they might read some of these articles, and slowly understand the issues we have with the some of the solutions they propose. This is the very reason why I started writing the Daily Nerd: by adding a little comment to a blog post I tried to explain why an article could be of interest.

What articles?

But what articles should we send? Of course we should send them new articles that talk about the issues at hand, but I think there are some definite classics that everybody who works on the web should know. Articles like A Dao of Web Design, Web Design is 95% Typography and Responsive Web Design. So I asked for these articles on Twitter, and there were just two replies. Cyriel tweeted a great list of links which will be included at the bottom of this article, and Johan Ronsse replied with his three classics. The tweet was probably not clear enough, or it simply drowned in the river of news. So I’ll ask again in blog format:

What are the classic articles that every web professional should know by heart?

I’ll try to keep comments open on this blog post but you can also send them to me on Twitter.

Update: here’s an excellent list of links by Cyriel, which includes some modern classics as well:

Comments

    • Mallory
    • #

    “about working with people who are not as good as you are, and in particular, about working with designers and clients who care about unimportant stuff.”

    I can’t design my way out of a hat– anything I make myself looks worse than Craig’s List. So it’s not about people “not as good” as I am. It’s about people in an entirely different profession, while the discussion wondered/complained/mentioned that designers are the starting point of a web page, rather than content/HTML/whatever.

    And for “unimportant”: I find usability, accessibility, and function more important than shiny, form, and ‘sphere. But clients find the latter very important. The latter group is what sells a company to a client. “Good-looking” is specifically requested, especially if a laptop is going to be sitting on a table at a Beurs/Expo showing the web component of the client company (this is why a recent project has a silly inaccessible carousel on the home page).

    I dunno about classics everyone should know, but if a visually-oriented non-web person is going to be designing a website entirely in an image editing program and expecting that to pretty much become a site unscathed, then they’d better read:

    Steve Krug’s Don’t Make Me Think

    Jakob Nielsen’s Alert Box stuff

    Baymard Institute blog posts

    UXMatters stuff

    Right now the only people who can voice their frustration with bad web design choices are the nerdiest of nerds making neat stuff like http://tabcloseddidntread.com/ and http://shouldiuseacarousel.com/

    (carousels are a great example: who wants them? Clients. Who puts them in the design right off the bat? Designers. Who has to code them? The monkeys. Who doesn’t read them and hates them? Users (who will also always say, when shown a pretty carousel somewhere else and asked what they *think*, “oh that looks really nice, professional”… another example of Watch What Users Do, Not What Users Say). http://www.nngroup.com/articles/auto-forwarding/

    The two sites I just listed above are another example of the Echo Chamber. Who looks at those sites? Other web developers. Who understands what they mean? Fellow web developers. Who doesn’t see them? CEOs. Clients. Designers.

    It’s not the content. We have the content. It’s getting it to the right people. I can’t send this stuff to anyone: I’m a ranty minimum-wage code monkey. They don’t believe me when I say there are users who use the keyboard to navigate the web! The content has to come from high-up code-and-design ninja-samurai superstars, preferably ones who’ve worked at some big name like Apple or were a top designer somewhere before going into coding or usability. Those people have cred. Good designers keep up in their profession and they have design-ey stuff they read, like we have our stuff we read.

    • Gertjan
    • #

    Two random thoughts, more focussed on Mallory’s comment, than the actual article (beware, this is coming from a designer):

    “designers are the starting point of a web page, rather than content/HTML/whatever.”

    Do you have any idea how hard is is for designers to retrieve actual content to design something with? We spoiled our clients when we showed them Lorem Ipsum.

    “I find usability, accessibility, and function more important than shiny, form, and ‘sphere. ”

    I’m getting really tired of people – especially technical webworkers who experience the internet probably a little bit different than the rest of the world – who speak with dedain about visual design. For example that motherswearing website that spoilt my twitter timeline last week. Or that old quotation “design is nog how it looks, but how it works, etc”. It’s simply not (always) true. Visual design is not ‘just’ eye candy. It has great impact on how users experience a webpage. That’s why design is build on three pilars: functionality, aesthetics & user experience. And for ‘Nike Better World’ the User Experience is in a totally other category than for ‘Craigslist’.

    So sometimes large background images, 10 different custom fonts, parallax scrolling, etc – for a small kind of user and thus ignoring people with screenreaders – can be a perfect viable design solution.

    it just depends.

  1. I’ve been thinking about this a lot and feel kind of sad I can’t come up with anything that makes more sense than the links mentioned above.

    Either I’m forgetting lots of great stuff, or we just don’t have that much industry-changing articles floating around.

    The Don’t Make Me Think book by Steve Krug is a very good addition. And I’d say add Jeffrey Zeldman’s Designing With Web Standards book as well for the widespread change it introduced in our industry in the early 00’s.

    But that’s a pretty short list, I know.

    To be continued…

  2. I don’t think the discussion should revolve around designers v.s. developers or design v.s. function or even design v.s. usability.

    First off I really admire the way Vasilis is trying to make the web a better place and I really see the problems Mallory faces every day.

    That said I don’t think there is any other way than to work together. And that’s the key factor here. All this discussion about designers “not getting it” and web-nerds “wanting to do things right” is not really productive. My point is that most of the times we cannot build a website alone and we have to rely on others to work on a piece of the puzzle. If we do this in silo’s and approach each other with hostility we won’t be going anywhere and it will only result in resentment. If we however set goals together we can do so much and we’re all happy about it. Don’t get me wrong: sometimes we have to build a crappy carrousel, even as a team sometimes you just can’t win and that’s actually a good thing. Because once you realize what battles to pick you have also start to consider what is actually important instead of going to work every day with a feeling of “this all sucks”.

    I know the stuff I’m preaching here can be a bit utopian for some of us, but heck it doesn’t hurt to try! When I started out in the “business” I faced exactly the same problems and I’ve found that voicing my opinions and actually showing people the benefits of “doing things right” helped a lot. Fact is that even though I work with a lot of professionals on really big projects these days, I still encounter the odd weird assumption or request. And even today I won’t win every argument and that’s fine with me as long as we had a respectfull discussion and there is a sound underlying reason to do something.

    As to the education part: I do think it helps if there is a mutual understanding of how things should be and it really helps to talk to people and show them how stuff could be made better. There are two caveats though: do not waste your time trying to teach people who don’t want to learn and try to avoid them in future projects, it’s just not worth it. And yes I know this is easy for me to say with having great clients and big projects but still I don’t think the frustration is worth it. The second thing is that while I really think having a list of “must read” articles is a great starting point, it can also be perceived as condescending. How would you feel if someone basically told you “go back to school and read this big-ass list of articles and books” when you’ve been doing this work for years? The only point I want to make with this statement is that we should be considarate when telling someone to broaden his/her horizon.

    To end with a positive note, I think the web is really going forward in this regard. Discussions like these with people from all over the “webworker” spectrum are helping a lot! The web is a truly amazing place and I think we are lucky to have people around us that actually want to help with the problems others have in the profession.

  3. Warning: long comment coming up.

    I’ve been thinking about this too, there’s is my list which is essentially:

    1. The Dao of web design –> understand for what it is, a new medium, in which things are adaptable

    2. Web design is 95% typography: focus on typography because people actually read stuff online. Main point: make your paragraph type 16px+ please.

    3. The $300 million dollar button: I put this in because it relates to UX: web design is actually a form of interface design, and the right order of things, copywriting etc. (interface flow) really matters.

    I chose these articles because they have been very important in my “formation” as a web designer (now more of a user interface designer).

    The topics are adaptability, typography and usability.

    However, there are many more topics. Sometimes they are not directly related to web design but they come back to it.

    For example, Joel Spolsky’s writing (e.g. figuring out what your company is all about) has been very important. His writing is about software and more specifically the business of software. A lot of web design projects are secretly software projects with builds and versioning and deciding what to rewrite when – what should be modular etc. – this is [a lightweight form of] software engineering.

    Related to this is Rands which is mostly about working together, the office environment, managers vs. employees, leading teams, transitions to management etc. Does this have to do with web design? Not directly but any webdesigner who ever worked in an agency can relate to this and maybe they help to become a better designer. Because part of design is all about communicating your ideas.

    There are psychology concepts like gestalt (related – Fitt’s law) which are super important to understand.

    Some of what you need to know is just graphic design. There are the basics like color and contrast and how to use them. In this aspects “The Non Designer’s Design Book” (don’t judge a book by it’s cover) is a good introduction if you know nothing.

    Then there is the “advanced level” of graphic design, for example understanding grid systems – there is a great book by Joseph Muller Brockmann about this. However, for a web worker it might make more sense to read Mark Boulton’s take on grid systems (on his blog and he has a book about web design too).

    And if you get that part you can go on to read about data design. There are the Tufte books like “Envisioning information” and “The Visual Display of quantitative Information”. Like the Brockman book about grids this is all a bit hardcore.

    You can maybe get more out of the A Practical Guide to Designing with Data book. And when you like that, go read Tufte and Stephen Few :]

    I started talking about books but almost all of these books have articles online with about the same content. You just have to go out of your way to look for them.

    So to recap, the first three subjects were adaptability, typography and usability. But the next topics are the business of software, working together, psychology, graphic design, data visualisation.

    Now I could go on about front-end, abstraction levels in coding, understanding computers (web performance), photography, illustration, iconography, … the list of topics is endless. I can only conclude that a good webdesigner is — as Jelle puts it — T-shaped

  4. @Thomas and also Vasilis,

    But what does it mean that you can’t come up with industry-changing articles? Is it bad or is it good? I think it is probably more good then bad. Other wise the industry had to change a lot the whole time. And that’s hard to follow.

    If I look at education, a lot of schools are based on books and documents of people who lived a long time ago. Maria Montessori, Helen Parkhurst (Dalton schools), Freinet, you name it. I think that it is something of all industries that there are just a few important articles and books that changed something. Probably for the better, because when a great book change something, the people who adopt it can make it better and fine tune it. I believe that then an industry is getting better.

    • Mallory
    • #

    Gertjan:
    quote: ”
    “designers are the starting point of a web page, rather than content/HTML/whatever.”

    Do you have any idea how hard is is for designers to retrieve actual content to design something with? We spoiled our clients when we showed them Lorem Ipsum.”

    The discussion I was referring to was more the article that started the twitter discussion: https://twitter.com/vasilis/status/404891475424870400

    And despite not being a designer, because I’m the HTML monkey, I too get asked to Bacon-ipsum stuff, because that’s someone’s idea of a wire-frame (no, we don’t actually do wire frames, but sometimes we call things wire frames because it sounds cool).

    NOBODY can get the content first. Every. Single. Company. Wants to write in some content *after* there’s already a design. If I could have commented on Rik’s site (something was screwy with Disqus), I would have said that: we can’t go *back* to sites being content-first/HTML-first/whatever, because in almost all cases, it never was. Zeldman and friends may have turned legions of web developers towards the light, but it rarely changed real web sites.

    More importantly, I don’t think anyone blames designers for making things this way. They are certainly not the *cause* of the current photoshop->HTML->backend way of doing things (though sometimes the comps promise amazing things).

    While typing my first comment here, I also had in the back of my mind the Fronteers talk by Harry Roberts http://fronteers.nl/congres/2013/sessions#better-quality-code
    It’s not much different than the articles Wolfr_ was mentioning above. Somewhere there’s a fantastic place where all this stuff matters. With real vakmanschaap. And people can argue design points and test on real humans, and make a nice printout of increased conversions/RIO to show at the next board meeting, and it’s a job well done and the world is a better place. Well, after a big bowl of ice cream, some dark chocolate and some whiskey, I too can go to sleep and dream about that stuff.

    quote:”I’m getting really tired of people – especially technical webworkers who experience the internet probably a little bit different than the rest of the world – who speak with disdain about visual design.”

    While a few technical people complain about slow/broken pretty stuff, the fact of the matter is that it’s very few of us making the complaints: the majority of the world using the web constantly praises beauty and design (and Nike sites making the news for instance) and if the few of us can’t whine under our breaths here on a nerdy Nerd page for nerds or other webby-devvy pages, well, there’s like only .00001% of the web with such content. It’s pretty easy to avoid the disdain you hear (I think). You’re part of the majority (? maybe) and most of what you hear is probably positive– and as I said, it’s certainly what clients are asking for (plus some SEO voodoo).

    I only hear complaints when wallowing with fellow low-end devs, you know, we go to run-down bars and cry into our beers and cheap vodkas, commiserate, and then stagger home smelling pretty bad. Sometimes it leaks out a bit, like on Twitter, but we’re also easily blockable there too.
    Sometimes I have to reply when someone living in the Better Web World thinks things are getting better, though. Things got a lot better for a select group. But it didn’t change the fact that if I want to get bus times, I’m obliged to download a large background image of happy-looking people using the OV in a way I can certainly envy but usually don’t experience myself. At FronteersConf I was told it’s because visitors aren’t coming for bus times; they’re coming for a … I think it was called a “travel partner” or something. I’m not sure, is my perception from being a technical webworker? Probably. But it makes me post comments on dev-pages sometimes.

    The Nike site? I never visited, I’m not a Nike person, but heard about it; it sounds like a whole other realm than ginormous-closeups-of-models-faces-on-9292.nl. Nike isn’t really about e-commerce selling shoes, is it? It’s more about the name Nike, selling NIKE, and doesn’t that practically *require* a metric shit-ton of Javascript and multi-MB high-res photos and the über-best of every design idea one can possibly think of? Well… yeah. It’s practically necessary. They would be FAIL if they didn’t. And because they are a big client who gets scrutinised in the media and can hire the best, it can be done well. Best of both worlds. Design. Function. Puppies!

    I said sfeer was important to clients and is what makes a site sell. The problem isn’t the sfeer! The problem is only when sfeer>functionality, fights with it. That’s what I was poo-pooing. Again, there aren’t really so many of us doing it anyway.

    Ideally, sfeer would be a PART of functionality (which is pretty much what you said:
    quote: “So sometimes large background images, 10 different custom fonts, parallax scrolling, etc […] can be a perfect viable design solution. It just depends.”).

    Flurin said, quote “All this discussion about designers “not getting it” and web-nerds “wanting to do things right” is not really productive.”

    It’s not productive, no. For me, it just keeps me from breaking something over my head, nothing more.

    Look, the Zeldman stuff is over 10 years old. I actually don’t see a widening divide between “designers” and “developers”. Just a small consistent one like you get between two people working different professions on the same project.

    I’m seeing a widening divide between the kinds of people who are into all this material like Vasilis’ articles and Wolfr_’s list along with the designers who work with developers like them… and those of us making the majority of practical, often small to medium-scale websites. Someone (Flurin?) said it may come across as condescending to push this material in front of other people, and that may be so, but I suspect the majority response will be pretty much the same as the majority response to whining about WCAG and standards and blah blah: general disinterest. I can’t blame people for being people and not being interested in design and Ul minutae, but that’s maybe the core of the original problem mentioned in the post by Rik. Is it solvable? I dunno.

    But if that’s the problem, you can write a million excellent industry-changing articles, without changing the industry outside the largest clients.

    • Gertjan
    • #

    @Matt i read Chris Coyier’s article. The assumption is that accessibility is very important, and that everyone, everywhere has to be able to view the content of your website. I doubt that. This has never been the case. Not in print (who can afford to buy a really expensive coffeetable book), not when you make an iOS app (because you need an iOS device to view it).

    Some say accessibility is one of the key spirits of the internet. But isn’t that an quite nostalgic, overly romantic view on the internet?

    • Gertjan
    • #

    And to answer the question about classic articles/books: I’m reading http://www.fabrique.nl/getagile/ at the moment, and even if it tells nothing new or revolutionary, it reminds me constantly of the fact that we (designers, developers, clients) have to keep communication to each other, give the other insight in our proces, ask each other advice, etc. if we really want to create beautiful, elegant, accessible & perhaps revolutionary websites.

    We have to leave our islands en start réally working together.

    That’s the lesson I learned last year.

  5. Agreed, Gertjan. The business case and/or concept of the product dictate who the target audience is. The accessibility of the product follows that.

    • Vasilis
    • #

    @Gertjan: I disagree with what you say. It’s true that books and iOS apps are not accessible to everyone. But they are not the web, they’re fundamentally different. The fact that nothing else is universally accessible doesn’t mean that *the web* shouldn’t be accessible. It is one of the basic principles of the web (not of the internet, the web) that it can be used by everyone.

    But the fact that we can create stuff that’s accessible to everyone doesn’t mean we can only create bare bones HTML sites. Websites don’t have to look and behave the same for everyone, remember?

    • Mallory
    • #

    quote: “The assumption is that accessibility is very important, and that everyone, everywhere has to be able to view the content of your website”

    Everyone? Everywhere? All websites? Wow. Ye Gods strike me down, for I am definitely unworthy.

    /* dramatic scene fresh from one of those New Zealand anti-drinking-and-driving ads*/
    That moment when, after the tragic unforeseen accident/out-of-nowhere disease, when you realise that, yes of course, your life or that of a loved one is changed forever and of course you can’t just keep doing many things you used to do (cue the tragic Lifetime Channel violins and wee crying orphans), you expected that, but now also…

    -you can’t even do simple banking. Feeling like a retard and a baby, you ask your kids to do it for you. Sad panda.

    -or click that damn button on Spotify. There’s text there…why won’t it click???!?? You’re must just not be good enough to use the interwebs. Quit now.

    -or communicate with your friends and share experiences with them via silly social media junk (with your other activities suddenly limited, you realise how much more this started to matter). But, who *needs* crap like facebook anyway? Waste of time, you should be sitting alone in the dark instead and wait for relatives to visit you in pity.

    …all because you were unlucky enough to need the service provided by a web site (a web site. Not a staircase to the moon or some fantastically expensive and amazing life-saving rocket-surgeon-created Service From Ze Future!!! just a web site) whose developer just didn’t think it mattered. He was feeling kinda meh that day, and was more than a little overwhelmed by a large angry crowd of flag-waving screeching WCAG harpies who demanded absolute perfection for every single user EVAR in the whole existence of the human race who might maybe visit that website!

    That horrible, crappy moment. /*end drama*/

    Obviously all hyperbole, but here are the points:
    1. don’t let crazed WCAG standardistas cow you into the false “it must be absolutely perfect for absolutely everybody even that mountain shepherd in TimBukTu without an internet connection otherwise you are EVIL and you should feel guilty!!!!” idea. Don’t listen to it. It’s false and it’s probably one of the bigger reasons simple easy accessibility techniques aren’t part of regular websites. Just take a reasonable look, and do what you can. Karl Groves has written a few blogposts now about how this all-or-nothing idea is actually rather toxic, and certainly isn’t helping developers.

    2. It’s not about playing Crysis on an Atari. Don’t worry about building a staircase to the freaking moon or curing the ‘beetus. You’re getting 80+% of all the a11y junk done simply by being a little choosy with your HTML elements (should I put onclick on a span or use a button?), taking a quick run with keyboard (you reached everything? You saw where you were? mission-fucking-accomplished), and not doing the silly stuff we’ve been told not to do for over 10 years like using images to hold text and then no alt, blah blah. You already build that way so it’s not like it costs you your firstborn or anything.

    If it’s clickable, it has text. Text too fugly? positioning some text offscreen can’t possibly cost more than a single line of code if you’re using one of those fancy trendy everybody’s-doing-it CSS OOP SS CCCSSS CS ASS preprocessor thingamajigies.

    Stupid little things.

    3. The user doesn’t have to be the blind, deaf, cerebral-palsied dyslexic autist who only speaks Martian. Changing “click on the green button” to “Click on the ‘Completed’ button” so the Mark Zuckerbergs can use it is accessibility too. It’s not a waste of your time, and you just let 1 out of every 8 males (I think it was) not have to think about what to click on (Don’t Make Me Think). Is it a small thing? Yes. Is it important? Well, yes. Not save-the-queen important, but it matters.

    4. “But I’m just building a site that lets wealthy urban Internet-savvy 18-24 year olds with hipster glasses collect tweets, not old people file their taxes!!” It’s not the “importance” of the site, or even the “target audience”. It’s just people, and even the narrowest target audience will have someone, somewhere not using the speakers so their oppressed office cube-mates don’t murder them so it’s effectively as if they’re deaf, without it meaning anything about “but I’m not building it for deaf people”. What tiny change can make the big difference, and why is the assumption always “there only one of them”? How is it not awesome when the wheelchair ramp that never gets used by any wheelchairs helps moms wheel their kid strollers or the UPS guy get deliveries easier into the door without him needing to curse the world and bitch about his poor back?

    So then it could be
    /* way less dramatic scene and far, far too sappy for my tastes*/

    That moment when, as your arthritic hands shake uncertainly above the keyboard and you squint at the screen through your trifocals, you realise that you have the control to make the text a bit bigger all by yourself, and you don’t have to spend a few minutes trying to click several tiny, itty bitty little checkboxes because the tab key Just Works, and the labels have for attributes so you could also just click the much-larger label text.

    You rejoice, finish filling in that stupid form so you can get those gardening supplies delivered straight to your home, and go outside to the backyard to watch your grandkids make mud pies. You’re older, but still a capable human being. You just ordered stuff from the interwebs, and you didn’t really think twice about it. It just happened.

    That moment you forgot about. /*end drama*/

    ^^ that’s accessibility

    • Gertjan
    • #

    @mallory wow, thats a lot of text. I’ll read it thoroughly. But now i have a Designers/Developers/Clients meetup to organise :-)

    • Gertjan
    • #

    @vasilis I started my webdesign career because of this website: http://yugop.com/ver2/

    2004, Flash (warning), not very accessible.

    Still I think we need these kind of cutting edge webexperiments (remember: 2004!) to bring the web to a new level.

    And of course, that wouldn’t work well for HealthCare.gov or a banking site.

    • Mallory
    • #

    It’s those experimental sites where new things are tried and boundaries kicked in the groin that ultimately advance the health/gov/bank/pr0n sites. Once a new technique establishes a new colony within the webdev hive mind, someone has to spend time thinking about “how do we make this work, more, better, and accessible?” …something they wouldn’t otherwise do.

    And for example, there’s a push in the standards communities to make dialogs a built-in of the browser rather than everyone writing several pages worth of Javascript just to imitate the lowly, innately accessible alert().

  6. @mallory: That was quite the essay you wrote there about accessibility!

    Enjoyed it tremendously but it didn’t have much to do with your initial gripes, right? :)

    At the end of the day you should always see what is possible. And you’re right: I don’t think “perfect” exists, not on the web, not anywhere. What I do think exists is an approximation of perfection but the trouble with that it it’s so very specific to each and every person that you can never satisfy each and everyone. However when we broaden the general understanding of the web in every “webworker” I think we can get closer to the perfection together!

    • Mallory
    • #

    @flurin, quote: “…but it didn’t have much to do with your initial gripes, right? :)”

    It had some to do with it. Instead of working with the designer (maybe mostly because how our company, and many companies are set up, the developer doesn’t *work with* the designer, but is given a design and told to code it?), I have to sneak in all the accessibility stuff. Dirty work.

    So… maybe the solution isn’t writing industry-changing articles. Maybe it’s just changing how the bulk of the industry works. Again, the top-elite-big-names already did– the Boston Globe got everyone excited the way ESPN did when it was one of the first non-artsy non-MyWebSite sites to switch to CSS… but CSS trickled down and mostly (not entirely!) replaced table layouts. And even CEO’s talk about “repsponsive” even if they’re not entirely sure what that means (“something about also an iThing app?”).

    If, as Rik proposes, we need to change the
    photoshop->HTML->backend
    (not counting BEM, which for larger organisations changes this, but only for practicality reasons rather than a burning religious conviction about content-first)
    then maybe that’s where the focus should go instead of articles sent to individuals? Something to make it “normal” to have website concepts begun by a combination of a graphics person and a code person, together?

    • Gertjan
    • #

    @Mallory “Something to make it “normal” to have website concepts begun by a combination of a graphics person and a code person, together?”

    Like in the early days, where in ad agencies, Copywriter & Art Director formed a team. Text + Image in symbiosis.