Mobile Design is More Than a Tight Fit

mobiledesign

It’s not easy, doing the same with less. Screen sizes have steadily increased since the web was invented, and web designers have learned to use that space well. Grid systems start around 960 pixels wide and allow for unlimited depth. Space is a cheap commodity, until you go mobile.

Designing wide is easy compared to fitting into the confined space of a smartphone. Where once wide open spaces encouraged either cavalier content or vast expanses of negative space, screens measuring 320–480 pixels wide makes even two-column layouts risky.

But counting columns isn’t the hardest part of mobile web design. Nor is choosing a responsive framework, learning media queries or falling back to older browsers. The biggest challenge is deciding what stays and what goes.

The mobile experience

Websites fit into mobile devices many ways. The easiest method is also the most common: Do nothing. Minuscule text is hard to read, navigation is hard to click, and images smaller than postage stamps lose impact. It’s awful for user experience, but it requires no effort on the site owner’s part.

Another approach would create mobile editions of the primary website. Assuming content management systems allow for two sets of information, which isn’t always the case, satellite websites fall victim to the kid-gloves stance on mobile content. Specifically, smaller screens allow for less content.

People don’t visit websites on mobile devices because they want less information. More likely they want convenience. Websites manage want another sort of convenience: The kind that doesn’t require managing two sets of content, risking inconsistencies and doubling workloads to serve both mobile and non-mobile browsers.

Designers who are willing to focus one set of content know that creative opportunities come in small canvases.

Small is not new

Thinking compact is not necessarily thinking small. Other media have shown how to squeeze creativity out of tight restraints.

Business cards

business card example

Business cards perform two specific tasks: To set an impression and provide contact information in a portable medium. There’s no room for extended sales pitches or bulleted lists. To meet their ends, creative card designers take liberties with the question, “what is a card?”

Billboards

billboard example

Size isn’t the only problem. Mobile designers deal with focus, just like designers trying to reach people in motion. Because drivers pay most of their attention to driving, billboards must make an impression in an instant. Signage for pedestrians is more forgiving, but still have little time to convey a message. Creative signage tells stories with visual messages that carry dual meanings.

RSS

Concentrated messages aren’t limited to visual media. Bare-bones but portable, Really Simple Syndication strips away any hints about width, height, typeface, color, or browser compatibility. Without assumptions about where, how or when content will be used, RSS feeds may be styled and re-styled to match any situation from mobile websites to compiled apps to the iTunes Store.

Business cards, billboards, scripts and news feeds share a common mantra. Reduction doesn’t mean less or tiny. It means focused.

Concentrate the structure

It’s not easy to focus a website. Focus requires sacrifice and effort, both of which inspire the kind of creativity that no one appreciates. The first technique is to flatten a site’s structure.

generic sitemap

A typical site map like the example above depicts relationships among pages as lines between boxes. This is neither accurate (navigation bars let people jump anywhere) nor helpful (links are not content).

With traditional site maps, deciding what to merge or eliminate is tricky. That’s where Venn diagrams come in handy.

venn diagram

The example above shows relationships between types of content with overlapping ellipses. Case studies describe how products or services benefitted customers. Hence, the “case studies” circle overlaps both “products” and “services.” While customers may order individual products (indicated by an overlap), the contact page does not relate to any other type of content. It stands alone.

venn diagram, rearranged

Six ellipses doesn’t mean the site has six pages; rather, the site has six types of information or utility. A company may produce a dozen products, but each has a title, description, photo, and purchase options. Likewise, each case study tells a unique story, but all share the same problem/solution format.

To focus this site, we minimize its overlaps.

venn diagram examples

The plan above calls for merging every case study with its relevant product or service. If a study describes more than one, then it should link to the secondary services, not repeat them. The home page or products overview are likely to list every product. Rather than repeat that list with an independent shopping cart page, every product receives a “buy now” button. A new checkout page completes the order process.

Venn diagrams work on any type of site.

venn diagram

Are two pages necessary to find blog posts? The example above suggests that one page with options can do the work of two.

This technique is a guideline, not a rule, and varies per case. Home pages retain some overlaps because they often contain samples of the entire site. Above, order forms merged into products, but we created a new “checkout” page. Focus is not about reducing the number of pages. It’s about streamlining.

Use the fold

Combining content solves certain navigation problems at the expense of more complex pages. Luckily the same concept — unifying types of information — can benefit individual pages as well as site structure. The diagram below illustrates a typical news article page.

blog example

While this layout may work fine on a wide-screen desktop or laptop computer, smartphones have a problem.

mobile vs. desktop

Borrowing from newspaper nomenclature, the “fold” marks the bottom of what is initially visible to a reader. But the fold is not a barrier so much as the length allowed for introduction. On touchscreen devices, visitors intuitively know they can scroll a web page with a flick of their finger. That means designers can use the fold to their advantage.

First, recalling the spirit of using Venn diagrams, we combine related types of information.

compacted layout

Excess navigation, usually the first sacrifice, and teasers to other articles are either merged or removed. Metadata fits into the white space around it. Whether ads, content, or the site title and navigation go on top reflects the designer’s priorities.

Pages rearranged into stacks of content are surprisingly useful when we abandon the concept of a page.

using the fold

Above, elements of the news page are rearranged into one vertical stack. Conceptually, the smartphone’s browser becomes a window into which the user fits each block. It’s not that the screen is smaller, but that visitors see only less of a page at any given time than usual.

Rethinking navigation bars

Mobile has some designers reinventing — not just rearranging — traditional elements altogether. Beyond building a better mousetrap, they ask why do we need a mousetrap?

An emerging trend in mobile design deals with long lists of links that help people maneuver a site. Navigation bars are out; pages and panels are in. Increasingly, responsive sites move navigation to its own page or drop-down menu. Tapping an icon, conventionally three horizontal bars, reveals a clickable link list or site structure.

navigation icon examples

Above, five websites utilize the three-bar ☰ navicon, with and without explanation. Tapping that icon reveals navigation that often overrides the page. It works because lets the visitor choose when to show or hide the links.

Oddly, Starbuck’s icon included a hover state. But maybe that’s not so odd. Mobile design means designing information for many use cases, not favoring mobile over desktop browsers.

The cut

Trimming excess information is great for mobile websites and desktop websites alike. But it’s not always easy. Usual development processes aim to create something from nothing:

  1. Plan: Define the goals, audience, responsibilities, measure of success, etc.
  2. Design: Create visuals, write copy, develop mockups and so forth.
  3. Build: HTML, CSS, jQuery, Dojo, PHP, .NET, CMS, (insert your favorite geeky acronyms here).
  4. Test: In browsers, against use cases, etc.
  5. Deploy: Upload to the live server and inebriate, preferably in that order.

It’s counterintuitive, but adding focus to the process means reducing even as you create.

  1. Plan
  2. Design
  3. Reconsider: Consolidate redundancies, ask, how else could we do this?
  4. Build
  5. Test
  6. Edit: Examine each part of the site. If you take it out, does it still work?
  7. Test again: Great, you removed parts. Did you go overboard?
  8. Deploy

It’s not about cutting to cut or dumbing down a site for one audience over another. It’s designing information that works in more situations than one expects.

  • Help people make informed decisions. A paragraph of descriptive text, for example, may not always accompany titles. Titles alone should give people the right keywords to decide which to tap. Image thumbnails should balance between showing what the whole image is while being readable itself.
  • Practice repurposing. As you create or edit pages, posts, images, or other media, see what it looks like in a different environment. Like testing in different browsers, how does a design respond to different circumstances? Does it work in mobile browsers? Desktop browsers? Emails? Can it be read aloud? Can it be pasted into Microsoft Word, printed and faxed? Don’t discount ridiculous scenarios. They’re excellent practice, and not long ago web pages didn’t appear on mobile phones. Where will your site appear next?
  • Remove the home page. Don’t fret, you can put it back later. Nothing helps find a site’s priorities like losing its assumed introduction. Which page(s) best encapsulate the site’s goals? If any of them could stand in for the home page, then what does it contribute to the site?
  • Repeat that experiment with every page, article or chunk of content. If you removed it, what would substitute? If the answer is “nothing,” then it’s essential. If the home page disappears and the “what we do” page works just as well, then rework them until each becomes essential… or delete one altogether.

In short, get to the point. In any modern medium, space and attention are too valuable not to use well.

Ben Gremillion

Ben Gremillion started playing with pixels in the mid-1980s and building websites circa 1997. When not hiking or stargazing, he crafts HTML and CSS, spends a lot of time debugging PHP and MySQL, ponders the details of user experience, and injects bits of personality into staid websites. He blogs about his lessons learned in web design at benthinkin.net.

Comments

Comments are closed.