How Much Has The Web Really Changed?

Advertisement

Responsive design is about more than just layout; it’s about designing for the Web, which means, mostly, for people with browsers. And that’s just about everything we know about the people who visit our websites: they are probably using a browser. All the rest we just don’t know.

Up until not so long ago, we used to base our designs on some rather general assumptions about screen size and input type. With the rise of devices with various screen sizes and alternative ways to interact, these assumptions have turned out to be unreliable. We need to upgrade the defaults that we use when we start designing our websites.

A Closer Look

People keep saying that the Web has changed. But has it really? Let’s take a look at all of the things that have actually changed.

Screen Sizes

In the 1990s, the Web was 640 pixels wide. In the early 2000s, it grew to 800 pixels. A few years later, we decided it should be 1024 pixels. But five years ago, all of a sudden, something strange happened. A device with a very small screen entered the market. Suddenly, our ideas about the size of the Web did not work anymore. Later on, tablets entered the market. People hold these things however they want. Today, the height of the viewport could be bigger than the width! But is that new? Not really.

Screen sizes, shown in a non-flexible medium. Photo and work by Aram Bartholl.1
Screen sizes2, shown in a non-flexible medium. (Photo and work: Aram Bartholl3)

We never really knew what size the window of our visitors would be. We just assumed it was at least the random pixel width that we felt comfortable with. These numbers were always arbitrary, and there were always people who could not see the entire website. We simply ignored them.

“Everyone Has a Mouse”

We’ve always assumed that everyone uses a mouse. Even though we knew that this was not always true, most designs completely ignored alternative ways of interacting. People who had to use a keyboard, for whatever reason, had a very hard time interacting with our websites.

But because most people did use a mouse, and because back then many designers thought that designing only for the majority was OK, we created websites that were unusable for a lot of people. And this turned out to be a growing number. Many mouseover interactions are completely dysfunctional on a touch device. Because people love these devices, and even managers and designers use them, they are harder to ignore.

“Everyone Has Broadband Internet”

Another thing we always assumed was that everyone had a super-fast Internet connection, at least as fast as our own. And if they didn’t already have it, they’d have it soon. This was again mostly true; speeds were increasing. But today, more and more people use crappy, unreliable 3G connections all the time. If you’ve ever travelled on a train in The Netherlands, you know what I mean. And if you’ve ever had to rely on the mythical “free hotel Wi-Fi,” then you know for sure that the assumption about the ever-increasing speed of our Internet connections is just not true. This is a big change in our thinking; we really should consider these users. This will have a major impact on what our designs look like.

“Everyone’s Computer Gets Faster Every Year”

It used to be true that computers would get faster and faster. If you waited half a year before buying a computer, you would get one that was twice as fast, for the same price. This was true of new desktop computers, but mobile devices have priorities other than processor speed. The most important thing for a phone, for instance, is battery life: you really don’t want to have to charge it after every phone call.

And there’s another trend: instead of creating ever-faster devices, many manufacturers are starting to sell ever-cheaper devices. Many people care about price and battery life more than about processor speed. This is also not new: what happened to your old computers? You probably sold them or gave them away. People keep using old stuff. Not everyone has the same hardware as we designers do.

“All Monitors Are Calibrated”

Well, we always knew this to be untrue, right? Only the monitors of visual professionals are calibrated. Most other monitors don’t display colors accurately, and many monitors are downright crappy. Most mobile phones that I’ve tested have pretty decent screens, until you start using them outside, in the sunshine. If you’re lucky, you can read the content, but you definitely cannot see the subtle gradients in low-contrast designs.

I haven’t even mentioned “modern” black and white screens. These, too, are not new. People have always used crappy monitors, and people with bad eyesight have always visited your websites. It’s just that more and more people are seeing a subpar color palette. Instead of buying a state of the art monitor, buying a cheap monitor and several low-end devices to test your work on might be a better investment.

All of these things are not new. In 2002, John Allsopp wrote the monumental article “A Dao of Web Design4.” People such as Jeremy Keith5 and Roger Johansson6 have written about all of these facts for years and years. And yet, somehow, we’ve always managed to actively ignore them. But we really can’t anymore. The Web actually did change in the last five years, with new devices, new browsers and many, many cool new features. We need new defaults7. The old ways of creating websites just don’t work anymore.

This Is Responsive, the excellent resource about responsive design by Brad Frost.8
This Is Responsive9, the excellent resource about responsive design by Brad Frost.

In the past few years, we’ve been actively researching new ways to deal with all of these different screen sizes. But apart from responsive design, there are many more challenges in today’s ever-growing pile of devices. We have to find new patterns of interaction: we need interfaces that work on any device. Maybe we have to reconsider that enormous photo carousel on the home page, now that we know that not everyone has a cheap and fast connection10. New defaults are emerging, and I’ve collected a few for you here.

The things in this article are not new. Many clever people have written about them in many articles and many books. But these ideas, like all good stories, have to be repeated many times so that people understand and remember them.

New Default: Activate

I initially titled this section “New Default: Touch.” But I came to realize that “touch” has a different meaning for everyone. Some people, like me, think of a single tap when we hear the word. Others think about swiping and complex gestures. That’s why I settled on the heading “New Defaults: Activate.” All devices, no matter what kind of input they offer, let the user activate something11 in some way.

With a mouse, it’s a click; with a touch device, it’s a tap; on a keyboard, it’s the “Enter” key. There are ways to activate things by voice, and by waving your arms in the air. And many devices offer more than one way to interact. The only thing that all of these devices have in common is the action of activating. Most of them are capable of doing many other things, too, but all of them can activate stuff.

Only recently have we really started thinking about alternative methods of user input. We used to assume that everyone uses a mouse. Hiding content and showing it on mouseover was considered to be a decent design pattern. And it used to work for most people — until all of these wonderful touch devices entered the market. What should a device without a mouse do when content can be revealed only with a mouse? Different devices have different solutions. Let’s look at a simple drop-down menu.

You can find a live example of this navigation pattern right here.12
See a live example of this navigation pattern13.

When you hover over a menu item, a submenu appears. But apart from hovering over an item, you can also simply click on it to follow the link. Now, what should happen when you tap on the item with a touch device? Should the submenus appear, or should the link activate? Or both? Or should something else happen? On iOS, something else happens. The first time you tap a link like that, the submenu appears; in other words, the hover event fires. You have to tap a second time to actually follow the link. This is confusing, and not many people will tap a second time. On Android, the submenu appears and the link is followed simultaneously. I don’t have to explain to you that this is confusing.

It’s very well possible to think of complex solutions14 whereby you define different interactions for different input devices. But the better solution, I think, is to make sure that the default interaction, the activate event, just works for everybody. If you really need to, you could choose to enhance this default experience for certain users.

For instance, if you are certain that someone is using a mouse, you could enable some mouseover interactions. Or if you’re sure that someone has fat fingers, you could make small buttons a bit bigger. But only do so in addition to the default activate interaction, and only if there’s no doubt about it, and only if the enhancement would really make things better. Those are quite a few ifs, and some of them, such as the mouse usage, are very hard to detect15 — especially on devices that offer more than one way to interact, such as a laptop with an optional mouse, touch pad, camera, microphone, keyboard and touchscreen. Give it some serious thought. Do you really need to optimize for a mouse?

New Default: Small Screens

Growing is easy. Most things grow. Babies grow, trees grow, curious minds grow. They don’t grow by themselves, but you don’t need much energy to make things bigger. This is just what things do when they live. While shrinking things is definitely possible, it’s also much harder. You could, for instance, compress a car to a fraction of its original size. A compressed car does have a certain aesthetic appeal to it, but it is definitely not as useful as it was before. The same goes for websites. Shrinking a desktop website does not always result in a pleasant experience on a small screen.

Trees grow on their own, cars are less usefull when they shrink.
Cedro di Versailles16 by Italian artist Giuseppe Penone clearly shows that things grow. On the other hand, the work Papalote Goliad17 by American artist John Chamberlain shows that shrinking can be aesthetically appealing but may result in less useful results.

To build a responsive website that works on all kinds of screens, designing for a small screen first is easiest. It forces you to focus on what’s really important: if it doesn’t fit in this small square, it is probably not terribly important. It forces you to think better about hierarchy, about the right order of components on the page.

The same principle that we follow for interactions — whereby we design the activate event first and enhance it later — applies to graphic design. We should start designing the things that we know everyone will see. That’s the content. No matter how big or small a screen is and no matter how minimal the feature set of a browser, it will be able to show letters. Because this is about the only thing we know for certain — since color is absent on most Kindles, most of the latest CSS doesn’t work on old browsers, and layout is of minor importance on small screens — starting with the text is logical.

I wrote an in-depth article about defining breakpoints on the basis of typography18, so I won’t repeat every detail here. But the basic idea is that you start by designing the relationship between the different font sizes. Almost everyone, no matter what device they have, will be able to see this. When the typography is done, you would start designing the layout for bigger screens; you can think of this as an enhancement for people with bigger screens. And after that, when the different layouts are done, you could add the paint. And by paint, I mean color, gradients, borders, etc.

I’ve presented this as a very strict way of working; in real life, of course, things are not as rigid. I’m not talking about “activate only” or “small screen only.” When I say to start with typography, I don’t mean that you aren’t allowed to think about paint at the same time. Rather, I’m trying to find the things that all of these different devices, with all of their different screen sizes and all of their different features, have in common. It just seems logical to first design this shared core thoroughly. The strange thing is that this core is often overlooked: Web professionals tend to view their own creations with top-of-the-line devices with up-to-date browsers. They see only the enhancements. The shared core with the basic experience is often invisible.

New Default: Content

The way we designed our websites until recently was by putting a header with the logo and navigation at the top, putting the subnavigation on the left, putting some widgets on the right, and putting the footer at the bottom. When all of that was done, we’d cram the content into the little space that was left in the middle. All of the things we created first — the navigation, the widgets, the footer — they all helped the visitor to leave the page. But the visitor probably wanted to be there! That was weird. It was as if we were not so confident in our own content and tried our best to come up with something else that our guests might like.

But rather than pollute the page with all kinds of links to get people out of there, we should really focus on that thing in the middle. Make sure it works. Make sure it looks good. Make sure it’s readable. Make sure people will understand it and find it useful. Perhaps even delight them with it!

Once you’re done with the content, you can start to ask yourself whether this content needs a header. Or a logo. Or subnavigation. Does it need navigation at all? And does it really need all of those widgets? The answer to that last question is “No.” I’ve never understood what those widgets are for. I have never seen a useful widget. I have never seen a widget that’s better than white space.

A typical news site with more attention for widgets versus the complete focus on the content on Medium.
Compare a typical news website’s attention to widgets with Medium19’s complete focus on content.

By starting with the content first, you can come up with some very interesting solutions. For instance, does the logo really need to be at the top20 of every page? It could very well go in the footer on many websites; such as in digital style guides or on pages for registered users. Many links that we used to put in the subnavigation might work better in relevant spots in the main content.

For instance, the option to add extra luggage to a flight booking might be most effective right there in the overview of the flight, instead of in the middle of a list of links somewhere on the left of the page. And when looking at the hierarchy of a page, does the main navigation look more important than the main content? Most of the time it shouldn’t be, and I usually consider the navigation to be footer content. A simple “skip” link at the top of the page could either take the visitor to the navigation or fetch the navigation and show it at the top of the page.

In this era of responsive Web design, we need many new clever solutions. As we’ve seen here, our old defaults don’t work anymore. We need to reconsider how we work with interaction, how we approach design and how we shape our content. But we need to think about one other very important thing, and that is where our content comes from.

New Default: The API

Luke Wroblewski wrote a fantastic article about designing an application for the command line first21, and then enhancing it for different needs. This is not just a nerdy idea, but a very practical idea, too. If you are able to design and develop your own application, you could test the functionality relatively easily before even starting to think about what it will look like on different devices. This requires designers to work with developers to design a feature that at first works only from the command line. If the feature does not work as expected, then you merely have to change the API, rather than also a bunch of visual designs. Once the API works as you want it to, enhancing it for all of the devices and screen sizes that you want to support becomes easier.

Most of the time, you wouldn’t design the entire API of the application that you’re building. Most companies would choose a content management system (CMS) of sorts or a specialized tool to help them achieve what they want to do. I’ve always been amazed that CMSes are so often chosen only by technical people and business people. This causes many problems during the design process.

Developers and business people have different goals than designers. Developers want stuff that is easy to develop on. Business people want stuff that’s cheap. But designers want to make the best and most beautiful things possible. These goals can easily conflict.

I’m not saying that designers alone should choose the system, but they should definitely be a part of the decision-making process. I’m convinced that the selection of CMSes will improve. And I’m convinced that CMS makers will start to improve their products once designers get involved. Right now, all CMSes I know of deliver hostile cruft unless you tweak them extensively.

But it works the other way around, too. If designers are involved in the selection process, they will have a say in the choice of tool and will understand how it works, what’s possible, what’s easy and what’s hard. This will result in designs that are based in part on the tool, not just on imagination. This is an important part of the design process that has not yet been optimized. Right now, the command line and the systems that deliver the content we design for are the domain of the developers, and designers have nothing to do with them. That is a pity. Just as you would want to take advantage of the knowledge of developers in the design process, you would want to take advantage of the knowledge of designers in the development process.

Progressive Enhancement

If you review the sections above, you’ll see that what I’ve described is nothing other than progressive enhancement. You start with the content, then design the content and optimize it for different screen sizes and devices, and after that you can further optimize for very specific features such as mouse usage and fat fingers. Many Web developers build websites according to this principle. They transform the beautiful Photoshop documents that they receive into all of the different layers described above.

This can work out fine if the developer has a good sense of design and a delicate attention to detail. But if they don’t — which is often the case — this can easily result in crappy usability and ugly details. I’m not saying that designers shouldn’t use Photoshop anymore. If that’s your tool, go ahead and use it. But do remember that you’re designing the layers of the Web, not the layers in Photoshop. There’s much more to the Web than a single beautiful image. People will see our creations in innumerable ways22. We design for all of these people — remember that. We don’t just design for the CEO with a laptop. We also design for the people on the train and the people with “free hotel Wi-Fi.”

Tools

I’ve mentioned Photoshop a few times because it’s still widely misused for designing websites. One reason we have a hard time with progressive enhancement in the design process is due to a lack of good Web design tools. The tools we use are built to wow; they mostly help you to create the “paint,” not to design the core. Fortunately, more tools are popping up with very specific functions in the design process. These are micro-tools such as the International Measure Slider23, which helps you to define breakpoints in your grid; tools such as Gridset24, which helps you to create grids for different screen sizes; and excellent tools25 that help you26 to define typography27. By incorporating these tools into our design workflow, we might start making better stuff.

Conclusion

The Web has always been a weird, borderless, flexible medium. In the last couple of years, we’ve started to realize that designing for this medium is fundamentally different from the design work we’ve done previously. The fixed dimensions and the singular ways of interacting that formed the basis of all types of media that we’ve worked with for centuries just don’t work on the Web. This truly is a unique medium.

We have to find new defaults, new starting points for our design process. I’ve explained some of these new defaults here, but of course there are many more. The way we work with forms, for instance, could probably use a whole series of articles by itself. Some new starting points are well established by now, but I’m sure many more will be invented in the near future. I am curious to hear about new patterns and new defaults that you have discovered and have used successfully in your projects.

(al)

Footnotes

  1. 1 http://datenform.de/graphic-arrays-eng.html
  2. 2 http://datenform.de/graphic-arrays-eng.html
  3. 3 https://secure.flickr.com/photos/bartholl/8509306685/in/set-72157632865293922
  4. 4 http://alistapart.com/articles/dao
  5. 5 http://adactio.com/
  6. 6 http://www.456bereastreet.com/
  7. 7 http://adactio.com/journal/4867/
  8. 8 http://bradfrost.github.io/this-is-responsive/index.html
  9. 9 http://bradfrost.github.io/this-is-responsive/index.html
  10. 10 https://twitter.com/stephanierieger/status/322779301776879617
  11. 11 http://cennydd.co.uk/2013/not-click-not-tap-select
  12. 12 http://dabblet.com/gist/5450762
  13. 13 http://dabblet.com/gist/5450762
  14. 14 http://www.html5rocks.com/en/mobile/touchandmouse/
  15. 15 https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/
  16. 16 http://en.wikipedia.org/wiki/File:Giuseppe_Penone_The_Hidden_Life_Within.jpg
  17. 17 https://secure.flickr.com/photos/paul_lowry/6038723573/
  18. 18 http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/
  19. 19 https://medium.com/
  20. 20 http://nerd.vasilis.nl/where-should-the-logo-be/
  21. 21 https://bagcheck.com/blog/8-bagchecking-in-the-command-line
  22. 22 http://nerd.vasilis.nl/we-need-more-artists-on-the-web/
  23. 23 http://nerd.vasilis.nl/code/measure-help/
  24. 24 https://gridsetapp.com/
  25. 25 http://lamb.cc/typograph/
  26. 26 http://modularscale.com/
  27. 27 http://typecast.com/

↑ Back to topShare on Twitter

Vasilis van Gemert is the Principal Front-end Developer at Mirabeau in The Netherlands and a board member of Fronteers. His aim is to close the gap between design and (front-end) development. He believes the excess of knowledge he has can be better used by others, by more creative and smarter people. You can follow him on Twitter.

Advertising
  1. 1

    Just nitpicking.. but the funny thing is Nu.nl (in the screenshot) is one of the most read news sites in the country. Even with it’s old layout they have a killer app and remain consistent and understandable to all age ranges. Medium may look better but it’s also feels empty and desolate. On second thought: is it even a new site? It’s just a blog right? Well that seems comparing apples with oranges to me.

    19
    • 2

      Vasilis van Gemert

      May 6, 2013 7:18 pm

      Hi “Me”, you’re right in a way. It’s comparing apples to oranges if you look at it from a business perspective. For Nu, the widgets are the content because the widgets are what brings in the money. That’s why the focus is on the widgets. In a way they did exactly what I advise everybody to do: think well about the content before you simply start with a header, a navigation and some widgets. In their case, a header navigation and some widgets was the best design choice. Could be.

      From a user’s point of view things are different though. People don’t visit Nu for the widgets, they visit it for the news articles. If the site was designed for users in the first place, this was probably not the best design.

      I picked it as a simple illustration of an ‘old’ design, not as a case study. It’s probably not the best example, you’re right about that, but it does illustrate what a site with a header, a navigation, widgets and a footer looks like.

      1
      • 3

        Dave Linabury

        May 8, 2013 5:30 pm

        I was thinking the same thing. I knew where you were headed Vasilis, but felt that Medium isn’t a good analogy as it’s a site for invite-only well-written essays (and not just a blog) and only has to answer to Ev. NU has to answer to shareholders, advertisers and IT. I’d bet half the widgets on NU are “Hey, the CMS can do feature X. Do ya want that?” “Sure! Cool!” and the other half are sponsored links and features that advertisers have requested.

        BTW, “hostile cruft” is my favorite new phrase!

        1
  2. 4

    I like the section “EVERYONE’S COMPUTER GETS FASTER EVERY YEAR”. It makes a great point – that’s really not the case anymore. Excellent article.

    9
  3. 6

    Daniel Schwarz

    May 6, 2013 4:22 pm

    I agree, Chris. Very thought-out, this must have taken hours and hours of research. Many of these articles have statistics taken from other sites, so I can’t remember the last time anybody ever redid the research (aside from W3schools). One thing to note is your audience, and I can’t express the importance of scripts such as Google Analytics for researching your audience. One of the biggest problems designers face, and always have, is designing for Internet Explorer, but in my case (with http://airwalk-design.com), only a very small percentage (7%) actually use IE, but of course, on a website not design-related, this might not be the case. IOS seems even more of an importance than IE these days. The more users that use tablet devices obviously calls for more responsive design, but that might be something more related to social media platforms. Like Vasilis said, the web is unique now, every website is like a snowflake. Not just in terms of design, or concept, but the audience it receives and the way it’s promoted.

    Just some thoughts!

    -Danny.

    Edit: one thing I forgot to mention, about the logo. Yes, I do think it should be at the top of every page. Maybe this is just me, but I always assume that the logo links back to the homepage, and it’s frustrating when it doesn’t, especially if the website has no other means of reverting back to home (without typing in the URL).

    7
    • 7

      Vasilis van Gemert

      May 6, 2013 8:11 pm

      Hi Daniel, thanks for your comment. You say many different things, I’ll just pick one thing to answer to, if you don’t mind (-: And that’s the placement of the logo. You could be right that on some sites a clickable logo makes sense. But it’s just a pattern we use on the web without really thinking about it. In mobile apps for instance, you’ll never see a logo at the top of the page. I’m not saying that this is a better pattern for every site, I just say it is a something we could consider.

      And small favor I ask from everybody who reads these two comments: please don’t attribute me as the source for the quote “the web is unique now, every website is like a snowflake”, I never said that, Daniel did (-:

      2
  4. 8

    Excellent article indeed, thank you very much for sharing your thoughts and insights. I too feel most constricted by the limitations of CMSes that “have to be used” or rather the extensive work that is neccessary just to strip it down. Currently I need to design an all-new intranet on a SharePoint platform and it is nothing short of a nightmare…

    1
    • 9

      Vasilis van Gemert

      May 6, 2013 7:28 pm

      Hi Apu, thanks for your comment. I understand your frustration, but I think it works both ways. I am convinced that designers should be part of the decision process when comparing CMSes, for two reasons. They can influence the decision in a positive way *and* they understand the CMS better when it’s chosen, even if it’s not their first choice.
      As for SharePoint, that’s easy. You don’t design SharePoint. You can change some colours, add a logo and that’s it. That’s not designing, it’s called styling. If they want to do more, your client picked the wrong system for the job.

      4
  5. 10

    Great article, but I have to say that I can’t fully agree with this point:

    “I have never seen a widget that’s better than white space.”

    I understand where you are coming from – often times, website completely over use widgets and in general the sidebar area. That being said, I think you should first define widget because it is a very general term. There are useful widgets, and when placed thoughtfully there are widgets which can and do positively influence the experience a visitor may have to some websites.

    Additionally and unfortunately, there are often times requirements, financial or otherwise, that must be met for many websites to exist. Often times a newsletter sign up or an advertisement is the very reason a given website is able to exist. Not that I, or that I expect anybody else, to be happy about this.

    3
    • 11

      Vasilis van Gemert

      May 6, 2013 7:54 pm

      Hi Joel, glad you mentioned it, somebody had to disagree with it, it is a very bold statement (-:
      From a user’s perspective I think the statement is correct. Most, if not all widgets try to distract my attention from the content I came for. But I do understand the use of some widgets as a business goal.

      I think we’re saying the same thing though. Instead of filling your white-space with random functionality you should think carefully about the placement of all essential content. If a widget is part of that essential content, by all means, show it to your visitors. But it could very well be that it won’t be placed in the classic ‘sidebar’.

      3
      • 12

        Michael Greenwood

        May 6, 2013 9:10 pm

        I agree that the whole of a web page should work together with individual parts working like cogs in a machine. Heatmaps will show us what works and what doesn’t and heuristics that we can design to will guide us in our designs. Good quality user testing and task driven fault finding can help us to improve on our websites in an iterative fashion.

        What about the side banner ads with animated gifs which distract us? They are a necessary aspect of monetising a website for certain business models.

        1
  6. 13

    I understand the reason for and am able to put into practice responsive layouts, but I’m so sick of this trend. Smashing Magazine is absolutely obsessed with this topic.

    0
    • 14

      Vasilis van Gemert

      May 7, 2013 10:17 am

      Good to hear you know how to create good, responsive websites based on content and progressive enhancement. Since you’ve read enough about this topic, I’m curious to hear what topics you’re interested in. Unfortunately, your comment doesn’t really make that clear.

      3
  7. 15

    This was one of the most inspiring and useful articles i’ve read so far. It will take quite a time to step through all these references, i guess it’s worth it.

    Much thanks.

    2
  8. 17

    Michael Greenwood

    May 6, 2013 9:06 pm

    Could you elaborate a bit more about why you think Photoshop is often misused in design please?

    3
    • 18

      Vasilis van Gemert

      May 7, 2013 10:35 am

      Photoshop is an excellent photo-editor. But a website is no photo. A website has no fixed size, Photoshop has no way to work with fluid sizes. Websites are interactive, there’s no interactivity in Photoshop, no hover-states, no focus-states, no media-queries. The typographic tools are definitely not the best and they work in a way that is unrelated to how typography works on the web.
      Photoshop templates are static, they will look the same for everybody. The web looks different to everybody. Photoshop templates will usually only show the most amazing state. This is misleading and it often causes clients and designers to be disappointed with the end result. There are many more reasons why it’s not a good tool for web design. Stephen Hay explains it brilliantly in his book The Responsive Workflow. You should read it if you’re interested in this stuff.
      Now, I’m not saying you should never use Photoshop. You could use it to create graphics, or to sketch. But it’s not the right tool to create templates with.

      4
      • 19

        So would you say you are a proponent of design in the browser?

        I have been finding it easier over the last year or two to quickly come up with a style guide in Photoshop and then to immediately start designing in the browser. It helps me get my head around the responsive aspect much more quickly.

        There are responsive problems I run into with the browser that I would have never considered in a graphics editor. I would rather run into those problems right away instead of much later down the road, especially if a client has signed off on a design that will have be changed once the responsive design problem surfaces.

        2
        • 20

          Vasilis van Gemert

          May 7, 2013 4:14 pm

          I see it exactly as you say it, Ashenkase. If you like sketching in a photo-editor, be my guest. If you like to sketch with pencil and paper, that’s great too. But be sure to move to the browser as soon as possible so you start solving *browser issues* instead of *photoshop issues*.

          0
      • 21

        Given the last news about Fireworks, what do you think the best tool for web design?

        1
        • 22

          Vasilis van Gemert

          May 7, 2013 7:38 pm

          I think the browser is the best tool for designing the web, unfortunately. All tools I know ignore too many of the uncertainties of the web to be called web design tools. They’re great to sketch, but not sufficient to design. There is definitely room for innovation here.

          1
          • 23

            You’re right. I’m thinking this way too.
            But I’m a developer. It’s easy for me to write some css or html.
            I know a lot of web designers that have been working with tools like Photoshop for a long time. They don’t understand css. And many of them don’t want to learn it, because they think that it’s my job to convert their ‘design images’ to code.
            I understand that good web designers probably should write css as well, but sometimes it requires paradigm shift that is too difficult to make.

            Moreover, I like to code frontend (as well as backend). css3 features amaze me.
            But I wouldn’t be a good web designer, because I think differently.
            So, would there be place for developers like me that like to construct html, write css themselves?

            4
          • 24

            @scarfacedeb (somehow I can´t reply on your comment directly :( )

            About the Web-Designers that don´t know how to code:
            I would go a step further and say that today you need to combine Web-Design and Front-End-Development. I´m in an easy position, because I can do both and I have to agree, designing in Photoshop is far from a good workflow when talking about responsive design and fluid layouts. The Web-Designers I work with (who don´t know how to do easy html/css stuff) create horrible designs, not necessarily in terms of the look, but in terms of structure and their way of thinking. That makes it really hard to bring it into the browser later on.

            That´s just my opinion :)

            1
  9. 25

    Great article. Being someone who almost exclusively uses the keyboard for my navigation and UI experience, I never understood the mantra of “everyone uses a mouse, so let’s design for a mouse.” I’m not included in that group of “everyone”, so my interface is immediately broken. My designs always implement coherent keyboard and mouse interfaces, and within the past 2 years I have adapted to touch devices given the propensity for sites I go to on my phone to break their own navigation and render the site completely useless, as mentioned in the article.

    A little thought, proper html structure and javascript event handling, and care to create fallbacks such that the site is accessible even when javascript is broken or images are not shown just adds that special bit of presentation that may just retain and delight viewers on all platforms.

    Also, I truly share your love for the elegance of white/transparent space. Thanks for the post.

    2
    • 26

      Vasilis van Gemert

      May 7, 2013 10:39 am

      Thanks for your kind comment, Eric. I completely agree with your thought on proper HTML structure and JavaScript event handling. I left those things out on purpose since I wanted this article to be understandable for people who don’t know code too.

      0
  10. 27

    Nice article. I love the call to action regarding the tools we use. There should be a conference, a meeting at Camp David, something where we shape up the software we use. I think much of the fragmentation in designs stem from this issue. Sometimes, I feel like I’m hammering a nail with a glue gun. Things can get a little sticky…

    3
    • 28

      Vasilis van Gemert

      May 7, 2013 10:43 am

      Hi John, I completely agree and I’d love to attend this conference! Be sure to invite me when you’ve organised it (-:
      The issue is, of course, that you don’t know a glue gun is a crappy tool for the job until you’ve tried a hammer. People stick to their old tools and they don’t try hammers. It could also be they don’t exist yet…

      2
  11. 29

    I really enjoyed reading your article. A lot of points that you have mentioned just make sense to me. Thx man.

    1
  12. 30

    Very nice article, Vasilis van Gemert!

    0
  13. 31

    Great article!
    “We don’t just design for the CEO with a laptop. We also design for the people on the train and the people with “free hotel Wi-Fi.””
    I had to quote that one. So many people misunderstand the all point about Web Design. I believe in performance and content oriented websites, while some other web designers are just focusing on making Responsive websites to only impress their boss. Let’s all focus on the user: any user at any moment using any device anywhere.

    1
    • 32

      Vasilis van Gemert

      May 7, 2013 10:50 am

      Hi Steven, thanks for your comment. I actually like that quote too (-:
      I think it’s a bit more subtle than designing for the user only though. You design for the users *and* for the business simultaneously, not for one or the other. This means that sometimes you have to make a suboptimal decision for one of them. Paul Boag wrote a great book about this subject, with the provocative title Client Centric Web Design

      0
  14. 33

    Manish Salunke

    May 7, 2013 9:45 am

    Great! thank you for sharing with us.

    0
  15. 34

    Andy Kinsey - Redstar

    May 7, 2013 11:22 am

    Super post, I think something we need to get away from is the idea of “pc first” or “mobile first” design we need to move on and realise that everyone has every size device, and if they don’t their friend does! We need to concentrate on a great experience across the board, even if that means sniffing things like line speed so you can offer an awesome experience over a 2g network

    1
    • 35

      Vasilis van Gemert

      May 7, 2013 3:40 pm

      Hi Andy. The sections of this article were originally called “activate first”, “small screen first”, etc. I changed them because some people somehow interpret the word “first” as the word “only”. But it’s not used in that way. That’s why I changed the headings. Starting with a small screen makes sense, but not thinking at all about all the other possible screens doesn’t make any sense. So yes, we need to concentrate on all the possible experiences, the exciting ones as well as the low-end ones.
      Unfortunately, some things are a bit harder, if not impossible, to detect than others. Mouse usage is one of them, line speed is another one.

      0
  16. 36

    Great article. As a web developer, your article gave me the current web design trends.

    But recently I’ve been puzzled by the issue of if we still do the “graceful degradation”.

    Given that the JavaScript are ubiquitous and the client side rendering frameworks like “backbone.js” are very popular, we are moving toward fat clients.

    In this case, the web server side only delivers HTML as templates, plus the JSON (it’s a data format, think a chunk of data) data. It is the client side that assembles the real HTML dynamically based on the templates and JSON data. It won’t work without JavaScript.

    Cookies are also needed in most cases, since lots of web frameworks use cookies to save session data. The session data used to be stored on the server side, but now in cookie. This way the web site is scalable by adding any number of web servers.

    By “graceful degradation”, browsers are able to disable JavaScript and Cookies. But given the current trends of using them so broadly, is it the time to make them part of the New Default now ?

    0
    • 37

      Vasilis van Gemert

      May 7, 2013 7:44 pm

      I guess for some applications the ‘fat client’ method you describe is a valid choice, but it’s not a choice I, personally, would normally make. I’m a big proponent of progressive enhancement and I think that even complex applications can be built this way. The layers of the web, as described in the article, apply to app that run in the browser too.

      0
  17. 38

    great and timely article!
    now it’s time to have some practical solutions concerning described issues.

    0
  18. 39

    Dominor Novus

    May 7, 2013 5:47 pm

    The article is insightful though what I’ve enjoyed the most is the author’s effort in responding to almost all comments.

    The author’s perspective on Photoshop’s role in web design is interesting. I conjure a cross between the likes of Firebug and Photoshop.

    0
    • 40

      Vasilis van Gemert

      May 7, 2013 7:51 pm

      Thank you very much for noticing my efforts to respond, Dominor Novus! I’m not sure what a good web design tool would look like exactly. But it has to support real content, good typography (with fallbacks), and a flexible canvas. It should be as weird as the web, not as fixed as paper.

      1
  19. 41

    Excellent write up!
    I’d love for you to do a take on the “other front end”. One thing is for those who get the big picture – the designers, developers, strategists et al – at the other end of the spectrum are people stabbing at their CMS creating content, who spend time with MS word, email editors, and whatnot. I expect in a few years when the “youngsters” move away from their blogs and FB-lives, they’ll have a more natural understanding of the web, but for now this is a real challenge.

    0
    • 42

      Vasilis van Gemert

      May 8, 2013 10:36 am

      Hi BK. I think this is an issue that CMS vendors should solve. Right now the admin area of most CMSes doesn’t force content editors to think about structure, they give them tools to think about how things look instead. But how things look is a design issue, not a concern for content editors. The problem with these WYSIWYG tools is that people *will* focus on the looks instead of the structure if they can.

      I’m not sure why CMS-vendors don’t solve this issue and keep selling WYSIWYG as a tool instead of a bug. Until they do I’d recommend using a markdown plugin and teaching it to your content editors.

      1
  20. 43

    I can’t believe you didn’t mention televisions once. Computer monitors are constantly getting larger and larger. More and more television content and movies are being viewed through the internet instead of cable/broadcast. More and more devices like Mac mini, Apple TV with airplay, Roku, Xbox browsing, or native tv/computers are becoming standard. I can’t see any scenario where these two don’t ultimately become one in the same or why they shouldn’t. I wouldn’t doubt if the tv/computer shift is even larger than the phone/computer shift you’re talking about that has been going on the last five years or whenever the iphone first came out.

    Though designing websites viewed on a big screen on the opposite side of the room will probably require the same simplicity as designing for small phones. Even on a 70″ tv that 12pt font will be pretty small from across the room.

    2
    • 44

      Vasilis van Gemert

      May 8, 2013 10:04 am

      Good point, Alan. Maybe I should have mentioned TV among all the possible devices. It’s definitely being used more and more for web consumption and it would be nice to see more research in this field. It’s probably a bit different than many of us might think, as you pointed out: a 50 inch Samsung TV on the other side of the room looks as big as a Samsung Nexus S at an arms distance, as Bruce Lawson shows in this picture – https://secure.flickr.com/photos/bruce-lawson/6714342003/

      0
      • 45

        I think that is a good thing too, that the proportions will at least be on a similar scale and will be easier designing for the two.

        0
  21. 46

    I agree (for the most part) with the perspective on Photoshop’s current role in web design. What are your thoughts on Sketch 2? I have been contemplating the switch from photoshop (and Illustrator for that matter).

    Would be curious to hear thoughts from anyone that made the switch over.

    0
    • 47

      Vasilis van Gemert

      May 8, 2013 10:45 am

      I don’t have any experience with this tool, Mike. But I’m very curious to hear about experiences, and see some results too.

      0
  22. 48

    Smashingmagazine is the worst offender in a lot of these areas. It’s responsive in design but has too much turbulence and too many break-points that have all been used for evil. You have to relearn the UI at each break-point due to poor responsive design planning. Widgets galore litter the page just for the sake of cramming more junk you don’t need and will never activate into the wrapper. The cherry on top is the small font size.

    Smashing magazine could learn a thing or two from Medium.

    0
    • 49

      That’s what responsive design is, different UI optimizations to best fit the the viewport in hand. SM does a great job of keeping consistency throughout. Besides the Ads (which make SM possible) I don’t see a problem with the rest of the widgets.

      1
  23. 50

    Yunus KALDIRIM

    May 10, 2013 7:47 pm

    Great article that I have ever read at smashingmag. I’m really agree with your nice findings. Thanks.

    0
  24. 51

    What about retina displays? Its great if you have some javascript or however you detect – if brower size 1000px wide = then do this – if browser size 250px wide = do this – But a retina display will show up as a huge resolution like your are looking at a big screen and then display the full website, when you are really just looking at a tiny ipad or iphone screen. What then?

    0
  25. 52

    Most websites designed mobile first are terrible on even decent sized desktop monitors. The pages are mostly wasted space, you click through way too many links to find anything, and the graphics look like they are designed for children. I’ve seen nonprofits’ websites where the home pages are so devoid of content that shows they actually do anything with peoples’ donations.

    Responsive design is still young. Hopefully, it will evolve to the point that designs will be optimized for desktops and for mobile devices, using CSS to handle the transitions rather than trying to focus on one or the other.

    Another concern is moving or omitting navigation elements on some pages. Unless you have confirmed it with user testing, you should be careful. Changing page structure in different parts of a site or violating general website conventions can be extremely confusing for people.

    0
  26. 53

    Suresh Tekwani

    May 20, 2013 9:28 pm

    Marvellous. Thankz.!

    0
  27. 54

    I really forgot some of the things that made the old internet, well the internet to me back then! It really has gone some pretty major changes in a short period of time

    0
  28. 55

    I can’t wait to see what wearable devices is going to do to the schools of thought on design. We can make assumptions but there aren’t enough data (devices and users with them) to know anything yet. Perhaps it’s a sign of age, but I dread the possible coming onslaught of people trying to surf Reddit and Amazon with something the size of a Timex.

    0
  29. 56

    Thanks for this interesting and thought provoking article. My biggest concern is how anyone (e.g. small businesses and anyone else cash strapped) is going to be able to afford all of this.

    Sometimes I think the web was more democratic and accessible to everyone back in the more simple days (the 1990s). I understand that you can’t fight change but the work levels required to produce a ‘perfect’ responsive website are soon going to make (good) web design only available to the very wealthy.

    I’ve been producing quality websites for small businesses for many years but I’m seriously thinking of dropping out to apply my skills to my own projects. The complexity of modern design is pricing people out of the web. And that’s a big shame, surely against the original objectives envisaged by Tim Berners-Lee?

    0
  30. 57

    SCREEN SIZES should include resolution, the retina display is wrecking havoc on old websites.

    Sean
    seancoyne.org

    0
  31. 58

    Great write up on how web design is ever changing towards the responsive multi- screen user. I just did a write up myself on a high level of what responsive design entails, so for those wondering or looking to learn more give it a read.

    http://www.academicads.ca/education/what-is-responsive-web-design/

    1
  32. 59

    Very informative article. Thanks for sharing

    0
  33. 60

    Great article. I’ve recently been researching on the modern view of web development as a “proactive approach” versus the conventional view of web programming as a “defensive approach”. This points out some major aspects on the way we have to move from following what, I think is the norm. Its scary to innovate and people are generally opposed to a new way of doing things.. at first. Flowery content is all good but the objective is more imperative.

    0
  34. 61

    “Instead of buying a state of the art monitor, buying a cheap monitor and several low-end devices to test your work on might be a better investment.”

    I disagree. You should always design on a calibrated monitor that can display the colors the way you meant them to be. If you design on (not for) a crappy monitor, you’re basically colorblinding yourself. So if another crappy monitor comes along that has a totally different kind of crapness, your design will go from bad to worse.

    Conclusion: not all crappy monitors are the same kind of crappy!

    0
  35. 62

    Well, I can certainly appreciate what you’re saying. Nothing’s for certain in web design, but this didn’t help… (Neither does HTML5 being so incompatible with older browsers for the record.) I have always believed that the slogan of a certain software distribution website is correct, “Newer is not always better”, and as such have always believed that backwards compatibility is a foundation principle that is overlooked far more often than it should be. This includes designing for smaller, simpler screens and also includes designing for low-bandwidth. (Many people in rural areas still rely on DIALUP because they still don’t have access to high-speed or 3G service!) In the end though, still the same questions only now the importance of how to deal with them is amplified…

    0
  36. 63

    i think something we can all agree on is , wherever your coding ultimately the best place to test is on a browser. Preferably : Chrome :-)

    when you can check out my website and have a look at the portfolio, we are based in South Africa http://eawebdesignlab.co.za/

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top