Mobile Design’s Wake-Up CallPreparing Websites For The Unexpected

Advertisement

Designing websites for smartphones is easy compared to retrofitting those already in place. More than that, it’s embarrassing how, almost eight years after CSS gained practical acceptance, a lack of foresight haunts those of us who write HTML.

Converting older websites to responsive design causes headaches not because small screens are difficult, but because most HTML documents were written under an assumption about screen size. Prior to the iPhone’s introduction in mid-2007, designers could rely on windows at least 700 pixels wide (if they ignored accessibility). Conventions like navigation bars, two- and three-column layout and hover effects evolved to fit the mouse-based wide-screen standard. Designers made their upper left corner logos clickable because it was expected.

Mobile devices shake old habits in two ways. Now, not only do we have small-screen iPhones, Android phones, Kindles, iPads and other mobile devices, but we’re asking websites to adapt to whichever device comes knocking. You want CNN on an xBox? It could happen. You want Smashing Magazine on a Web-enabled TV? If it’s not here, it will be soon.

Designing for future cases affects both page layout and website structure. We can’t control on which devices our digital content is viewed — rather, experienced. No amount of “best viewed with…” badges will stop people from reading and remixing what we write, paint, compose or otherwise create. Web pages don’t have to use 12- or 16-column grids, and websites don’t have to follow strict hierarchies. But getting there means facing a legacy that did.

Mobile Is Also A Content Problem

Let’s say you’re employed by a large company. Surveys indicate that many customers are more likely to visit your website with a smartphone. The large company is planning a redesign of their existing site. Your organization (or more likely you and your Web-savvy coworkers) adopts a mobile-first strategy. Yet before sketching icons, perusing responsive grids or cramming HTML5, one fact threatens to derail the redesign project. The content isn’t just ill-formatted for small screens — it’s ill-formatted for anything other than desktop browsers less than 960 pixels wide.

  • Details in large images get lost when shrunk.
  • Layouts with more than two columns of text or nested columns compress poorly on narrow screens.
  • Wider ranges of text sizes do not fit well.

Exceptions compound the problem. WYSIWYG editors added their own formatting or layout to individual pages, and over time different people updated the website their own way.

Variations on a website make it difficult to fit everything into a mobile solution.
Variations on a website make it difficult to fit everything into a mobile solution.

The more pages a website has, the more likely it has variations. One solution does not fit all variations, especially when some were intended for a specific screen. We could divide ill-fitting pages into multiple pages for mobile devices, but not without consequences.

Dividing long content into multiple pages makes information harder to reach.
Dividing long content into multiple pages makes information harder to reach.

If designers choose extra pages over long layouts, then conventional structures make information harder to reach.

As an industry, Web design has met similar challenges before. Designers who practiced table-based layout may remember how headaches up front lead to more flexible code later. This time around, we can think beyond today’s move to mobile. Responsive design bridges the gap with use-case instructions. But designers themselves can do more than respond to today’s issues. They can anticipate tomorrow’s.

To ask “what makes content mobile-friendly?” misses the point. Ask instead, “what makes content flexible?” and we address many problems at once. The ideal solution meets a few criteria.

  1. Don’t sacrifice content for a new medium.
    We don’t want to offer a watered-down version of the original website.
  2. Make it usable.
    We don’t want to simply shrink layouts. Everything from text and images to navigation and forms must be easy to use.
  3. Prevent (or at least minimize) similar problems in the future.
    Twenty years ago people questioned the need for a website. Five years ago people questioned the need for a mobile website. What will they question tomorrow?

Layouts designed for larger screens often don't easily translate to mobile screens.
Layouts designed for larger screens often don’t easily translate to mobile screens.

Smaller and more narrow, today’s mobile screens need layouts composed for their distinctive sizes. The task gets harder when each page has columns or text sizes baked in. Once we commit to changing a website — whether our goal is to optimize for mobile or another reason — we must accept that change includes choosing what to save and what to delete.

Popularity, Priority And Vitalness

What content is worth keeping? Back up — what is content?

Traditionally “content” is the information that a website contains. But tradition also said designers could rely on windows at least 800 pixels wide.

To make digital content supple enough for mobile (and prepare for whatever comes next), a website needs focus. And to focus a website, we need to find its vital content.

“Vital” is a subjective measure of content’s usefulness to all parties concerned. It may take the form of text, images or video. It might cover many pages or just a few tweet-length sentences. But vital content is why the website exists. Content does not fill a website; a website is the stage on which designers present content.

While vital is not synonymous with popular, the two are related. Popularity is how the public ranks vital information against itself. Contrast that with priority, or which information the website’s owners consider most-to-least important. Owners may consider information important, but if end users don’t need it, it’s not vital.

The diagram for a fictitious bank website shows two questionable items, namely the staff list and the video. Each column shows how priority and popularity add up to overall importance.
The diagram for a fictitious bank website shows two questionable items, namely the staff list and the Karaoke video. Each column shows how priority and popularity add up to overall importance.

Factors that influence importance include:

  • Timeliness
    Does the information’s importance wax or wane over time? (e.g. seasonal events, latest updates, today in history, upcoming deadlines)
  • Proximity
    Does the information’s geography matter? (e.g. local sales, disasters, city or regional politics, concerts)
  • Scope
    Who does the information affect? (e.g. a circle of friends, special interests, hobbyists, the general public, veterans, newcomers)
  • Scale
    How big is the information? (e.g. width, height, duration, density)

If a bank’s annual retreat video goes viral — the one where its CEO reveals a lack of karaoke talent — then the video is popular even if the CEO is not. But the bank might place a higher priority on its low fees or savings options (certainly the CEO would.) Similarly, blogs tend to put their latest posts first, but a groundbreaking post from last month might still receive more attention than a minor post today.

Some websites — news or blogs, for example — provide vital content on the home page. But many home pages are not necessarily vital. Home pages with static content introduce a website and help people to choose which pages contain the information they want.

Importance may be subjective, but the need to prioritize is not. The bottom line is to keep information that is vital; question information that either is popular or has priority; archive and remove information that is neither.

Oddly enough, this doesn’t mean removing pages.

Tossing Out Pages And Content Blocks

When computers first gained graphical user interfaces, software engineers helped people make the transition from physical offices to digital files with the metaphor of a desktop. Folder icons represented groups of files; document icons had a dog-eared corner that’s still common long after it was no longer needed. Skeumorphic trash cans are still with us.

Likewise, Web pages were akin to pages in a book or magazine. But the analogy doesn’t fit modern websites, let alone websites for mobile devices. A page is not the smallest unit of information. Rather, websites are collections of useful or informative media which may be sorted into different screens (or sections, or blocks, or views — time will tell which term becomes popular).

The arrangement of blocks of content may change as needs vary.
The arrangement of blocks of content may change as needs vary.

Blocks of content may be arranged onto one or more pages as appropriate. Some even appear on several pages; navigation, for instance. Responsive design deals with adapting elements to their medium. The idea of “content blocks” goes further. Because each HTML document (formerly called “pages”) may contain many blocks, Web designers can use mobile devices’ limited screen sizes to their advantage.

Mobile or not, websites may be organized into hierarchies or other formats. But thinking of blocks rather than pages suggests a structure between pages. Because small screens can only show so much of a page at once, they actually reduce clutter. When spaced by gaps — visual pauses — people effectively scroll through “pages.”

Content can be spaced by gaps, or visual pauses.
Content can be spaced by gaps, or visual pauses.

Nothing says wide-screen websites can’t also organize views with space. But mobile devices’ limited viewing areas make them naturally suited to a more focused experience.

A mobile-optimized structure may result in less screens being needed to display content on mobile, compared to displaying the same content on desktop screens.
A mobile-optimized structure may result in less screens being needed to display content on mobile, compared to displaying the same content on desktop screens.

Traditional hierarchies branch from the home page (general overview) to sub-pages (specific information). But each page stands alone. A mobile-optimized structure, however, leans towards a “taller” arrangement in addition to hierarchies. Six mobile-centric screens provides as much complexity as eight screens arranged for desktop.

Ideas such as these demonstrate the power of creating content without a specific use. In fact, the more digital media we consider, the more flexible websites become.

Moving Forward

It’s impossible to predict what tech revolution will make mobile design feel antiquated, but we can take reasonable steps to ease the transition. Remember that the goal is not just to reinvent what you have, but to see it with new eyes.

  • Delete the website’s home page.
    (After saving a copy, of course.) Nothing helps find a website’s real introductory content like removing its assumed introductory page. On which page do you find content that introduces the website’s purpose? Can that replace or be combined with the home page?
  • Practice repurposing.
    As you rework individual pages, try it in different environments — and not just other Web browsers. How does the page respond to being emailed? Does it make sense when read aloud? Can it be exported to another CMS? Can it be pasted into Microsoft Word, printed and faxed? Don’t discount ridiculous scenarios. After all, a few years ago designing for 320-pixel-wide screens was laughable.
  • Consider variations of metadata.
    Titles, for example, may be used as standalone links. Take page titles. Even if “about us” is all the visual design needs, it may be insufficient on a Google result page. “About Acme Co’s commitment to quality anvils” is more than a title: it could also double as a link with enough information to decide if the page is worth a visit.
  • Find elevator pitches.
    In each page, seek one sentence that sums up the rest of the page. If there is none, the page may need to be reworked, disseminated into other pages or eliminated altogether. For example, the page you’re reading now has two possible summary statements: the first sentences of its second and fourth paragraphs.
  • Substitute suggestions for instructions in content.
    Sometimes information is created for a particular medium. A video may work best at particular dimensions or a long text file may be broken into chapters. But there’s no guarantee that someone won’t embed the video differently than intended, or that the long text will always be read on a Kindle. Instructions say “display content this way.” Suggestions indicate “this is what I mean.” <aside> and class="alignright" are suggestions open to interpretation. style="float:right" and table width="300" are instructions. Put another way, when was the last time you favored <font> tags written into HTML over font properties in a separate CSS file?

While each medium has unique traits which designers may take advantage of (such as a website’s hyperlinks, a video’s motion and linear path, Flash’s interactive animation, an eBook’s bookmarks, a tangible book’s ability to be shared by hand), the cost of porting information between media increases the more we target a few specs on a single platform.

In years past, Web designers laid out pages according to monitors of the day. That hampers today’s move towards mobile websites. If we learn from past mistakes we’ll be better prepared for the next revolution.

(cp)

↑ Back to top

Ben Gremillion is a Web designer who solves communication problems with better design.

  1. 1

    Great article, Ben. Nice to see someone advocating no need to remove pages, but simply thinking about them differently. It seems that designing for the future is as much a technical issue as it is one of content management (or content understanding). Thanks for the post.

    0
  2. 2

    “Remember that the goal is not just to reinvent what you have, but to see it with new eyes.” Well said! Thank for the article, Ben :)

    0
  3. 3

    As a person working for a company whose 1/2 income comes from selling flash banners on our site, responsive would be such a pain that you can’t imagine. Most of the banners are priced based on the page zone – ie. how important is the page (is it the main page of a service, is it a commonly visited part of the realy huge site) and the position, how high on page= how early a user will be able to see their advertisement. I think the clients aren’t ready for the responsive design – as they would laugh if they heard that their banner will be seen on top of the page for X% of users and at the very bottom for Y% users. Any ideas would be most welcome (although my boss still thinks in “table” design).

    0
    • 4

      If your boss is selling flash banners and thinking in “table” design, it’s time to move on to a better job. I speak from experience :)

      0
      • 5

        Well, we are the Nth biggest news service in Poland so I think he knows what he is doing. The three biggest competitors (onet.pl, wp.pl, gazeta.pl) are also living mostly on selling flash advertisements. So the discussion should not be about the market bout how to either incorporate existing advertising forms into new flexible layouts, or how to convince clients to try new advertising forms.

        0
    • 6

      Isn’t a moot point? Mobile browsers don’t support flash (android has dropped support for it and adobe have stopped making it) so what does it matter if the site is responsive or not since mobile users aren’t getting the banners either way?

      If I were visiting your site on a mobile device, I would be more inclined to re-visit later on a desktop device – thus giving you revenue you would otherwise miss on – if the experience was nice on a mobile device. A bad experience gives a negative impression which is lasting.

      Check your browser stats and see how many mobile users you’re alienating by refusing (not personally, but as a business) to adopt responsive design and adapt to the mobile era.

      0
  4. 8

    Tnx! Great article!

    0
  5. 9

    This is great stuff. I am new to the industry and decided my original portfolio will be mostly made up of “responsive sites” and older sites coverted to this article’s theme. This article is a great anchor for my future references. Thank you.

    0
  6. 10

    What an amazing article.
    Reads like many years of experience and hours of research.

    I was so amused when I read the rather short and dry “…is a Web designer who solves communication problems with better design.” Fantastic :)

    0
  7. 11

    Great article as always! Thanks

    0
  8. 12

    What an awesome write up and I am very thankful for your wealth of information. As a web designer, this is something that I need to reference to and want to learn more about. We are all up against trying to keep up with the forever evolving set of devices that vary in sizes e.g. iPhone, iPad, iPad mini, etc. What’s next? It’s no longer how large your screen is, it’s now about how flexible and fluid what is you are delivering.

    Just like everything else, videos, photography, and content — banners will have to change. There is nothing wrong with having 2 distinct dimensions right? One for larger screens and the other is for when it responds to mobile phones. It’s actually more profitable that way! ;).

    I am about to buy the ebook and convincing my company to buy it as well.

    0
  9. 13

    Well written indeed and a very good lead for trying to see things a bit differently. All I do nowadays has to be super-responsive, this article gave a many ideas on how to deal with clients expectations and reality.

    0
  10. 14

    I think the article is more suited for advocate for having 2 versions of a website, mobile and desktop, instead of responsive. It’s nice and dandy that only mobile and desktops are compared but there’s a miriad of other options in between (tablets and minitablets).

    If a desktop page were to be broken into 4 mobile page into how many pages should be broken for a small tablet? The article tries to address a problem that is to be encountered by a specific segment of companies, ie. large companies, which if it were to go down this route would have imense problems on the content-management side of business. Is there any content system out there that is capable of giving content editors this flexibility? Or maybe this article sets the ground for the sales pitch of such system.

    It seems to me the design industry is forgetting that it has 2 clients, the content-provider and the content-consumer, and is only catering to the content-consumer. A previous article about the PICTURE tag was talking about having 4 images for each picture that appears on a website. Really? Is that what you tell your clients? To hire people to crop pictures for customers who will not know they are dissatisfied? Can anyone please explain me how would I, as a reader, know that the picture on a website is supposed to look different and it is not properly cropped and resized?

    0
    • 15

      I don’t see the problem as arranging pages for specific devices. Benefits from small/large editions vs. RWD varies per site. And something new will always come around — like that 27″ Lenovo tablet, which was announced after I submitted this article for review. My point is that imagining new cases prompts us to reevaluate old solutions.

      Unfortunately, no, I haven’t seen a CMS that allows this level of flexibility — although the description of NPR’s system in Karen McGrane’s book struck a chord. Such a system would let site owners create “groups” of content blocks based on scenarios (snippets for SERPs and site maps, single- vs. multi-page articles, without asides or links for focused learning, paid subscriber vs. ads, photos on the same topic but shot months apart, etc). The system would choose the appropriate group for each situation (mobile device held vertically, wide screen TV, spoken aloud, user preference, whatever comes next).

      Maybe the Content Management System would *not* double as the the Content Presentation System. Blocks-to-groups would be a many-to-many database relationship. How a CMS would detect needs on the fly… I don’t know. AJAX-savvy media queries?

      While I’m daydreaming, I’d like a UI with the clarity of Squarespace paired with the workflow of OmniPlan — and nary a WYSIWYG editor in sight. But that’s me.

      0
      • 16

        Letting the system choose the output at the same URL can ban your website from search engines. Before such a flexible CMS is created I think Google will come up with a bot that can test the website for different scenarios (set up specific user-agent and interpret javascript) and ban your website for cloaking.

        Who are the people that we invest massive resources into? People at w3c are squeezing their brains out to find a solution for the PICTURE tag so the people on iPhone 5 can see a “properly resized thumbnail”? Really?

        Assuming your day dream will come true do you imagine the resources involved? People resizing pictures like crazy, search engines so smart not to penalize website so advanced? How much electricity will be used for this dream of yours? I’m sure you can think of better ways those resources can be spent.

        0
        • 17

          Search engines: Fair point. I was placing user experience first, content management second, other concerns third. SEO is important, just not the focus of this article or the hypothetical CMS.

          Based on what I’ve read, the HTML picture element is not stable (or supported) enough for day-to-day concerns yet. Devices with hdpi displays like the iPhone and the Galaxy S3 are the minority today, but I don’t count on that being the case forever.

          Content is core to my writing, though, so last year I experimented writing multiple descriptions per post: a headline for the post, a longer title with keywords, a summary LinkedIn, a tweet, and sometimes supplemental information for my site. That conscious choice to extend my workflow cost time at first, but nowadays I regret not having the extra info if I cheat myself.

          0
    • 18

      Strange, I read the whole article as forget about versions, mobile, desktop etc. and just think about the CONTENT.

      What you seem to have forgotten is that without a content-consumer there is no work for a content-provider or designer. The customers/visitors are the most important people, and if you want to stay in business you need to satisfy their wants.

      0
  11. 19

    Thanks for this article. I made this to hang in my office to keep my head in the right place: http://flic.kr/p/dLLmrR

    0
  12. 20

    This is great, and reinforces the Cores and Paths kind of design planning that I’ve been into since reading about it on Boxes and Arrows – http://boxesandarrows.com/designing-screens-using-cores-and-paths/

    0
  13. 21

    Hey Ben,

    Nice article. Just one thought: while converting a “regular” website to a responsive one, changing the content of a page significantly is bound to lower hard-earned search rankings. Reformat content on high-ranking pages as much as you want, just don’t cut content out, is all I’m saying.

    Cheers,

    Lucky Balaraman

    0
  14. 22

    What made browsing the web on the iPhone so amazing, was the device’s ability to display the exact same layout you would get on a big screen and allowing you to navigate it through panning and zooming.

    While I do not doubt that thinking about users on smartphones is important, I strongly object to limiting the width of the layout to the width of the screen in every case. In doing that we throw out two dimensions for navigating the content (horizontal position and zoom level).

    Personally, I do not like these very long websites that give me no way of getting an overview of what is on the page, especially if I have never used them before. Possibly I am not the only one.

    I am looking forward to seeing some wide layouts that are nonetheless optimized for mobile devices.

    0
  15. 23

    I think a good follow up for Smashing to do for this article and many of its articles on responsive design would be a series on what makes Responsive Design succeed and fail. Most sites listed on the web as great responsive designs look laughably bad on a large monitor, and have very little content on each page. However, a few of them do work out (e.g. Smashing Magazine). It would be great for a designer to explain how to avoid the pitfalls that mess up most responsive designs out there in the world.

    Another good follow up would be something that helps designers/developers deal with the legitimate reasons why Jakob Nielsen has called for separate web and mobile sites. Responsive design solutions to the problems he brings up would be really helpful.

    0
  16. 24

    Amazing article….

    0
  17. 25

    Did you just re-coin a famous Men In Black quote for a web design idiom?

    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