Designing In The Transition To A Multi-Device World

Advertisement

When I think about where we are with the Web in comparison to other media in history, pinpointing it is really hard. Is it like when the Gutenberg Press was just invented and we’re experimenting with movable type, or are we still embellishing pages and slavishly copying books by hand?

Our knowledge of building digital things changes rapidly, taking us from newborn to adult and back again every couple of years. It’s both exciting and frustrating, because just when you think you have it all figured out, it completely changes. But if you’re like me, learning something new keeps things interesting.

So, it seems pretty normal that our methods of designing and building websites are questioned every so often. The argument to ditch design apps (or to drastically minimize the time spent in them) and go straight to the browser has popped up1 a lot2 in the past few years3 and then quite recently4. It’s obvious that our digital world and, by proxy, our design process are in a state of transition. And they should be: considering design in the context of your materials and goals is always important.

I tend to shy away from prescriptive approaches. Most decisions are framed by our experience, and, as humans, we’re continually drawn to and seek out what we already believe (known as “confirmation bias5”), ignoring the rest. So, I strive to keep that in mind whenever listening to advice about how things should be done. We’re all navigating the same changing landscape here. What many designers recommend is the right answer for them and not necessarily the right answer for you, or your client. As Cameron Moll more eloquently states6:

“You know your circumstances, your users, and your personal preferences best. And if that means responsive web design — or design methodology or todo app or office chair or whatever — isn’t the right choice for you, don’t be ashamed if you find yourself wanting more, or at least wanting something else.”

That’s exactly how I feel right now. A lot of the explorations into Web design lately have been looking for the best ways to optimize7 an experience and to make it as flexible8 as possible across devices. These are important issues. But what about the design principles9 we’ve proven and iterated on through a variety of media? How can we apply what we’ve learned about design so that it can be utilized in an appropriate way to create websites in this multi-canvas world?

A New Medium With Old Roots

When we talk about designing a website today, we can’t help but mention the “What if?” challenges (or, if you’re a positive person, the opportunities) we face:

“What about embedded Web views?”

“What if the user has limited bandwidth?”

“What if JavaScript is turned off?”

“What about this awkward break point?”

It’s as if we have suddenly discovered the first medium in history that comes with limitations. We’re definitely not on an island here: Every medium has faced limitations — and continues to face them.


Typographic Design in the Digital Domain10” with Erik Spiekermann and Elliot Jay Stocks

In an interview with Elliot Jay Stocks, legendary typographer and designer Erik Spiekermann explains11 how he finds it funny that designers today complain about limitations in designing for mobile:

“The way to design is the same [between print and Web]. You give content form, and the medium is always different anyway… I remember designing the little forms for medication, the little things that go inside, and I have the same issue… Essentially, I’ve got to cram a lot of complex content into a given format, however small that may be.”

He explains that when he designed for other media, the constraints were similar. You had to ask questions about the circumstances and about which information was the most important to the audience at that moment in time, and he asked things like, “Are they really sick and trying to read this medical information?” “Are they at an airport and need to know their gate?” Spiekermann goes on to say:

“So far, they [Web designers] have been bogged down by having to look at code all the time… So, now they can actually look at the problem. That’s why I said, in a few years time — however long it may take the individuals — they’ll design for the issue at hand and not for the medium.”

We’ve seen print and Web design converging — websites with beautiful typography that are easier to read. But with all of these little connected devices, we’re in an awkward transition phase, figuring out our design process. Some methods fit this new frontier really well, while others just don’t feel right to me. Like Spiekermann, the designer in me feels like we’re still getting hung up on the medium and the limitations and letting that dictate things, rather than designing for the issue at hand.

A List Apart12
The new A List Apart13 is reminiscent of great print design.

For example, style tiles14 are a great new tool, but they are as the name indicates: styles. They can’t completely replace the layout because they do not indicate the content’s structure or balance or whether the navigation flow is right. Yet, I read about15 this kind of tool replacing the big-picture layout and design exploration all the time now.

Working on a design in small chunks feels like we’ve let the medium become the method. As a designer, you have to be able to see the forest and the trees. And the client needs to see what they are getting. We still need a holistic view of the canvas in order to solve design problems. It’s up to the designer to evaluate what form that should take.

In creating a more responsive Web, the process of how we design, implement and manage websites is evolving. We’re slowly convincing clients to go back to embracing the lifeblood of the Web, the content16. We understand that rigid, unchanging canvases17 are not the way forward18. However, embracing change doesn’t mean moving away from what works. The following quote from Stephanie Reiger19 about progressive enhancement speaks to how I feel about ignoring proven design principles in this transition:

“We have an opportunity to make the mobile web a million times more useful and relevant than the desktop web has been. The failure of the Obama site was not in the use of new techniques like responsive design, it was in forgetting that older principles and techniques still have an important role to play in building a better web. If anything, they are more important than ever before.”

The rules of design and usability that we’ve learned and iterated on over many, many years still exist here and can’t be discounted so easily. Designing responsively doesn’t change the fundamentals. The principles of negative (i.e. white) space20 and balance still matter. Gestural interfaces don’t make Fitts’ Law irrelevant. Design is still a set of decisions21 and about solving a problem.

Knowing When To Jump

Photoshop and Sublime Text are currently a few of the popular tools being used to design websites. They were not originally intended to be used to design websites or apps, especially considering the words “Photo” and “Text” in their names. They evolved into these roles.

When we talk about designing in a browser, we’re not really in a browser, designing. We’re in a code or text editor of some kind, and previewing the work in the browser. Although it’s possible (and some Web designers find it more comfortable), I don’t think we could purely and effectively “design” in a text editor. There would be a disconnect in the flow. Right now, it might be good enough for some aspects, but designing in the browser still limits us.

I realize that one of the main reasons for going into the browser is so that the client can see how the website will really look and function. But if we shift too quickly into markup and code, then how do we push for the next iteration of HTML, CSS and JavaScript? We need to envision it first. We need to ask the design questions that push things and see whether we can deliver part of it in the markup’s current standards — or else show the makers of standards and browsers one hell of a hack that inspires them to make it possible.

Inventing on Principle22
Brett Victor shows us23 a more connected way to create with code.

Like anything, there’s a balance. Yes, the answer is, it depends24. If you jump from sketching in your favorite bloated design app, then you’ll start thinking about layout and styling, rather than tasks, architecture and goals. If you jump from a design app to the browser (and text editor) too soon, you’ll start to get hung up on matters that have more to do with quality assurance and on fixing CSS issues at breakpoints.

Knowing when each stage of design peaks and loses value in the process is important and can be identified only through experience and by the type of project. The best design will happen when we get the jump points right. This could even mean working with a few tools at once, or going back to one tool before going forward again.

Responsive Task Planning25
An example of responsive task planning, by Dennis Kardys, in Smashing Magazine’s Mobile Book26.

Let me play a bit of the devil’s advocate. If we argue that the client isn’t getting a true representation of the product with a pixel-perfect comp (because they aren’t seeing it in the browser), then shouldn’t we design only in the browser or device most used by their audience? Shouldn’t we stop showing off what we’re doing in the latest Chrome or Safari browser and show the Web to the client through “normal” people’s eyes?

Showing the client what their users see by showing the website in a common browser or device27 could also improve the client’s perception. For example, if the client is desktop-focused, and you’ve seen that they get a good amount of tablet traffic, then show them what the website looks like on an iPad Mini. If they are using the latest and greatest devices and browsers but their users typically aren’t, then showing the design rendered in an older browser or phone would truly broaden their perspective.

Designing for the most ubiquitous browsers and devices is the most honest way I can imagine to represent the Web. In 2011, there were 6 billion phone activations, 80% of which were for feature phones28. In case you aren’t following the news, the iPhone is not a feature phone. But we all know this scenario won’t happen. We live at the edge of the Web, and most Web designers and developers would rather imagine a Web with the latest browsers and smartphones — even if that’s far from the way most people experience it.

Progressive enhancement29
Design to degrade gracefully. (Slide from “Progressive Enhancement and Mobile30,” by Aaron Gustafson)

I get what folks like Brad Frost are saying31 when they talk about designers spending too much time doing the wrong thing. It’s a great point. Refining a layout too much in your favorite photo-editing app is like trying to accelerate a car in neutral. The refining stage should be done in the browser, when you’re designing the website. And — sorry to say, visual designers — that means knowing your material. Time to learn some markup and get your hands dirty!

I think we need to separate the way we explore our designs from how we present them to others. Just as showing experimental CSS in the latest browser isn’t being true to the design when showing it to a client, the same goes for showing a beautiful layout with a pixel-perfect “painting.” We have to be honest about what we show clients and stop making design promises that we can’t deliver on.

Watching Movies On Your Hand

Other industries are going through changes, too. Consider the film industry. It used to have it made: movie theaters set up with a huge screen and THX sound system, the audience sitting in comfortable chairs, in near total darkness. The entire experience was perfectly controlled.

The filmmaker knew that they only had to deliver a compelling story or a Brangelina32 butt shot to get people in the door. Now that has all changed. I can’t imagine how a movie director feels when they see someone watching their movie in a loud airport on a screen the size of their hand… Well, maybe I can:


David Lynch’s iPhone rant33. (Some profanity, so use headphones.)

Some filmmakers are dragging their feet, claiming that this is cannibalizing their per-seat theater profits. However, some have decided to embrace this new ecosystem and give audiences the option to watch movies how they want. Actor and indie filmmaker Ed Burns is one of them34, saying:

“You know, I think you have to be a realist in the way that, no musician wants anyone to listen to their music on an MP3 file going through a small set of tinny headphones. They’d much prefer that we all listen to it on a big sound system on an LP. But, you know, that’s over. And I think a similar thing has happened with the movie business.”

My lawyer gave me a great argument, because I was even resistant to it. He goes, if we go theatrical on this film, you’re going to open up in New York and L.A. Think about what happens if we go out on Video On Demand (VOD) and iTunes. You’re going to be in over 50 million living rooms. And the minute I heard that, I knew, OK, this needs to be embraced.

Great (Unknown) Expectations

The best part about designing for an unknown future is that it allows us to ask clients what is really important. It forces clients to look critically at their content. It forces them to look for ways to simplify how they present themselves to customers. Simplicity isn’t simple35, but it’s the path we must take in refining our own design process in order to help clients shift their mindset. A convoluted process will continue to yield undesirable results.

Responsive Wireframing36
Ed Merritt and Paul Boag give us a glimpse into how we might wireframe a responsive canvas.37

We will still need to work in a mixture of static canvases for certain kinds of projects, especially complex Web applications. There is no way we could properly examine a problem if we can’t explore it first. If we visualize a solution only in small pieces, we’d be ignoring the big picture. If we jump too soon into markup or delay looking at it in the browser or on a device, we’d be missing something.

If anything, building for all of these different devices shows us that we need to work better with developers and clients. Without these relationships and mutual respect, it all falls apart. It can’t be dictated or dominated by any of these roles.

Artifact Conference38
The Artifact Conference39 focuses on helping designers adapt to a multi-device world.

Learning who the client is and which artifacts they will understand best is key. I’ve learned that educating clients with things such as responsive patterns really helps them grasp the scope of the challenge here. As Dan Mall says40, it’s about building an expectation and delivering on that:

“A responsive design process is like a scandal. You’ve gotta preemptively control the conversation. If your client wants to have conversations like this, it likely means you didn’t do a good job of setting expectations.”

Great communication up front has always been the way to make a project succeed. Now it’s more important than ever. The design process is shifting. For a designer, the best approach going forward is to find a way to put the problem first. Design from the content out, and find the best jump points to tools that fit the goal.

Until we get a real Web design application41 we’ll have to continue to determine these jump points as best we can. In the meantime, continue offering approaches and tools to the community42, and embrace and improve on the ones presented to you. This will help us to continue designing a better Web.

(al)

Footnotes

  1. 1 http://24ways.org/2009/make-your-mockup-in-markup/
  2. 2 http://blog.teamtreehouse.com/responsive-web-design-in-the-browser-part-1-kill-photoshop
  3. 3 http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups
  4. 4 http://bradfrostweb.com/blog/post/the-post-psd-era/
  5. 5 http://youarenotsosmart.com/2010/06/23/confirmation-bias/
  6. 6 http://cameronmoll.tumblr.com/post/41195501273/rwd-wanting-more
  7. 7 http://adactio.com/journal/5439/
  8. 8 http://trentwalton.com/2013/01/07/flexible-foundations/
  9. 9 http://principles.adactio.com/
  10. 10 http://www.youtube.com/embed/SG0Ou07IDhQ?feature=player_detailpage
  11. 11 http://www.youtube.com/watch?v=SG0Ou07IDhQ
  12. 12 http://alistapart.com/article/a-list-apart-relaunches-new-features-new-design
  13. 13 http://alistapart.com/article/a-list-apart-relaunches-new-features-new-design
  14. 14 http://styletil.es/
  15. 15 http://www.webdesignerdepot.com/2013/01/the-new-rules-of-the-responsive-web/
  16. 16 http://alistapart.com/article/future-ready-content
  17. 17 http://www.markboulton.co.uk/journal/a-richer-canvas
  18. 18 http://www.lukew.com/ff/entry.asp?1407
  19. 19 http://stephanierieger.com/a-plea-for-progressive-enhancement/
  20. 20 http://www.getfinch.com/2010/01/a_negative_view_of_white_space/
  21. 21 http://rebekah.quora.com/Design-Quora-Web2-0-Expo-Presentation
  22. 22 http://vimeo.com/36579366
  23. 23 http://vimeo.com/36579366
  24. 24 http://globalmoxie.com/blog/mobile-web-responsive-design.shtml
  25. 25 http://www.smashingmagazine.com/2012/12/12/the-new-mobile-book-is-here/
  26. 26 http://www.smashingmagazine.com/2012/12/12/the-new-mobile-book-is-here/
  27. 27 http://stephanierieger.com/a-plea-for-progressive-enhancement/
  28. 28 http://www.slideshare.net/AaronGustafson/progressive-enhancement-mobile
  29. 29 http://de.slideshare.net/AaronGustafson/progressive-enhancement-mobile
  30. 30 http://www.slideshare.net/AaronGustafson/progressive-enhancement-mobile
  31. 31 http://bradfrostweb.com/blog/post/the-post-psd-era/
  32. 32 http://en.wikipedia.org/wiki/Brangelina
  33. 33 http://www.youtube.com/embed/BcNLEwf2pOw
  34. 34 http://www.wbur.org/npr/165186996/independent-movies-embrace-on-demand-platforms
  35. 35 http://www.getfinch.com/2012/04/simplicity-isnt-simple/
  36. 36 http://boagworld.com/dev/wireframing-responsive-sites/
  37. 37 http://boagworld.com/dev/wireframing-responsive-sites/
  38. 38 http://www.smashingmagazine.com/wp-content/uploads/2013/02/artifact.jpg
  39. 39 http://artifactconf.com/
  40. 40 http://danielmall.com/articles/the-post-psd-era/
  41. 41 http://v4.jasonsantamaria.com/articles/a-real-web-design-application/
  42. 42 http://artifactconf.com/

↑ Back to topShare on Twitter

Francisco Inchauste is an interaction designer at Universal Mind, helping clients create great Web experiences. He regularly contributes to Web design blogs, magazines, and books. He recently served as Editor of Smashing Magazine’s UX Design section. You can connect with him on Twitter, or read more on his blog.

Advertising
  1. 1

    Great thoughts. One quick question: Where did you find that responsive task planning chart? I have the Mobile Book and its update and can’t find it in there. I’d love to use this graphic to help explain the process to folks.

    0
    • 2

      Francisco Inchauste

      February 14, 2013 3:08 pm

      Well, I had the pleasure of working with Dennis (the author) on that chapter, and so I had access to a few diagrams that were edited out. Maybe we can convince him to do a post sharing some of those :)

      5
  2. 3

    Demetri Stamatopoulos

    February 13, 2013 6:38 pm

    As an Art Director I tend to read a lot of design-related articles, in an effort to both broaden my horizons, as well as to take the pulse of the industry. However, informative or well-written as an article might be, I rarely find myself moved to comment on one. Perhaps it’s an allergic reaction to the constant saturation of social media, or perhaps I simply agree or disagree with what I’ve read and don’t feel the need to add, “Me too!” or, “Not really!” Whatever the case, this time I felt a comment was both deserved and needed.

    Francisco, you’ve offered something here that goes beyond a simple article; you’ve offered insight, supported it thoroughly, and given the reader much to consider. I won’t go through point-by-point, as I feel there isn’t a single section that deserves more praise than another. I’ll simply say thank you, and please continue to offer us quality of this sort. It’s thought-provoking and inspiring.

    7
    • 4

      Francisco Inchauste

      February 14, 2013 2:55 pm

      Thanks, Demetri. I am glad you connected with the article. It is something that I’ve felt strongly about for a while now.

      0
  3. 5

    An interesting and insightful article! Thanks. :-D

    0
  4. 6

    Excellent article, Francisco – it’s as if you’ve taken the words out of our mouths.

    To dare summarise such a well thought out article, it would be “Every situation is different.”

    We’ve all lapped up the wonderful ideas and concepts behind responsive design and they’ve served us well to a point, but there’s always been the nagging doubt about how to apply the same principals to more complicated layouts.

    A few years back, I was working at a company where the project manager refused to let his web designers go near a line of code. His take was that it could destroy their creative process if they saw a barrier they could not break through.

    “Leave it to the coders, you just design what you think works”

    Designers that can code well, are a rarity – there’s some merit in this approach.

    4
    • 7

      Francisco Inchauste

      February 14, 2013 2:58 pm

      Yes, we’re all learning from each experience and getting better at this. It’s important not to forget the purpose of design.

      1
  5. 8

    As a developer, I always wanted to solve everyday problems for the users of my systems.

    I never really understood why the world of “design” is so full of aesthetic excellence: I’m afraid but I don’t care how great your latest twitter / facebook redesign concept looks like, as it’s unreadeable.

    I only recently began to understand, that the greatest typography designers of the 21st century weren’t like those kids on Behance, but were deeply intruged by the situations their prospective readers might read their material.

    Perhaps the age of “flat design”, which is arguably a revival of the Swiss International Style, brings us closer to our problems once again.

    To me, design is about problem solving: it’s not about the problems of my clients, it’s about the problems of my users, and sometimes the difference is really-really-really huge.

    To me, design is about understanding a problem, making sure that it’s real, and working against it, step-by-step, hitting each of its facets, building a solution which countercompletes it.

    Once I wrote on a paper:

    “Elegance is minimalism in beauty. An elegant solution is nothing more, nor less, than the exact counterpart of the problem it is to solve. Design is the process to reach that solution”

    Nicely written article, perhaps the most insightful I’ve ever read here.

    -1
    • 9

      Francisco Inchauste

      February 14, 2013 3:04 pm

      I agree that design is about problem solving. Unfortunately, I think the term “flat design” is a poorly defined style that is quickly becoming the latest trendy aesthetic.

      Thank you for your kind words, Adam!

      2
  6. 10

    Great article! I’m currently refining my project process, so I can relate to this.

    0
  7. 11

    Wise words, bright perspective: “Design from the content out, and find the best jump points to tools that fit the goal.”
    Quite an article. Good job!

    -1
  8. 12

    An excellent, thought-provoking article. I’ll be sharing it.

    One issue I keep encountering with articles about moving the medium forward, however, is the assumption of the “All-In-One”. The designer who not only designs but also codes, project-manages, and manages client expectations. In all my time in the industry I’ve rarely encountered any of these, particularly in working for larger companies. And yet, that’s where a lot of us work.

    Often the clients expectations are managed by project managers who (hopefully) have some understanding of how building the web actually works (but not always). It would be great if we all excelled at both code and design, but in many cases, it’s more about making a partnership work. The example I like best is in Scott McCloud’s Understanding Comics, where he describes the artist and the writer, each an expert in their own field, needing to bridge the gap between them in order to create. And yet this is how most comics are created, many of them great — and, how many (if not most) web sites are created, as a collaboration between designer and coder, each supporting the other’s strengths and weaknesses.

    I don’t think it’s always necessary for a designer to know how to write code, as much as it’s necessary to understand how code works and what it can do. Similarly, it’s important for coders to understand the principles of design, even if that coder will never actually design a site.

    0
  9. 13

    Excellent thoughts here. To me, great design is clear design. That split second when someone first looks at a design is so important. Shaping that impression is key and crucial. It will determine whether a viewer bounces away or stays on a site an extra second to ultimately create a conversion. Within a blink of an eye, a person begins learning how to navigate a design. They determine if they like a design, if they have made a personal connection with a site – and after that very brief moment, they begin to engage the design by picking up the phone and calling, adding to cart, or even casting a ballot.

    @ryanbrackett

    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