Skip navigation
Help

Jeremy Keith

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.
Original author: 
(author unknown)

Jeremy Keith notes that what happens between the breakpoints is just as important as the breakpoints themselves—perhaps even more so. While I agree with this, we do have to start somewhere. In a way, this part of the process reminds me of storyboarding, or creating animation keyframes, with the in-between frames being developed later. We’re going to do that here.

Major breakpoints are conditions that, when met, trigger major changes in your design. A major breakpoint might be, for example, where your entire layout must change from two columns to four.

Let’s say you’ve chosen three basic design directions from your thumbnails. Think about what your major breakpoints will look like (Figure 7.6). And here’s the key: try to come up with as few major breakpoints as possible. That might sound crazy, since we’re talking about responsive design. After all, we have media queries, so let’s use about 12 of them, right? No! If a linear layout works for every screen and is appropriate for your particular concept, then there’s no need for different layouts. In that case, simply describe what will happen when the screen gets larger. Will everything generally stay the same, with changes only to font size, line height and margins? If so, sketch those. For these variations, make thumbnails first, explore some options, and then move on to larger, more detailed sketches. Use your breakpoint graph as a guide at first and make sketches according to the breakpoints you’ve estimated on your graph.

When thinking about major breakpoints, remember to think about device classes. If you’re thinking about smartphones, tablets, laptops/desktops, TVs, and game consoles, for example, you’re heading in the right direction. If you’re thinking in terms of brand names and specific operating systems, you’re on the wrong track. The idea is to think in terms of general device classifications and, sometimes, device capabilities. Capabilities are more important when designing web applications, since you should be thinking about what screens will look like both with and without any particular capability.

Rough sketches of major breakpoints can help you determine:

Rough sketches are more detailed than thumbnails, but they shouldn’t take a long time to create. In a short period, you should have a sketch of each major breakpoint for each of your chosen designs. This should be enough to decide on one of the designs.

  • Whether or not more major breakpoints are needed
  • Which design choice will be the most labor intensive; you might opt for a design that will better fit within time and budget constraints
  • Whether or not a particular device class has been neglected or needs further consideration
  • What technologies you’ll need to develop the design responsively


Figure 7.6: Most websites need very few major breakpoints.

Minor breakpoints are conditions that, when met, trigger small changes in your design. An example would be moving form labels from above text fields to the left of those fields, while the rest of the design remains the same.

So where and when will you sketch minor breakpoints? In the browser, when you do your web-based mockup. You’ll find out why and how in the next chapter. In the meantime, simply focus on making sketches of the state of your web pages or app screens at the major breakpoints of each design.

At this point, don’t worry too much if you notice that the initial breakpoints on your breakpoint graph simply won’t do. Those were just a starting point, and you’re free to revise your estimate based on your sketches. You might even decide that you need an extra breakpoint for a given design and record that in sketch form; you can add that breakpoint to your graph. This is a cycle of discovery, learning, and revision.

Think about your content while sketching

While sketching, you’ll certainly be thinking about the way things should look. My experience is that much UI sketching of this type revolves around the layout of elements on the screen. I’ve found it useful to keep thinking about the content while sketching, and to consider what will happen to the content in various situations. When designing responsively, it can be useful to consider how you’ll handle the following content in particular:

  • Text
  • Navigation
  • Tables

Oh, sure, there are many more things to consider, and you’ll end up creating your own list of “things to do some extra thinking about” as the project progresses. For now, let’s take a look at the items listed above.

Text

Before you say, “Hey, wait a minute, didn’t you just tell me that I didn’t have to draw text while sketching?” hear me out. While sketching, there are a couple of text-related issues you’ll need to tackle: column width and text size, both of which are relevant in proportion to the screen and the other elements on the page.

Column width is fairly obvious, but it can be difficult to estimate how wide a column will be with actual text. In this case, sketching on a device might give you a better idea of the actual space you have to work with. Another method I’ve used is just to make a simple HTML page that contains only text, and load that into a device’s browser (or even an emulator, which while not optimal still gives a more realistic impression than lines on paper). When the text seems too large or too small, you can adjust the font size accordingly. Once it seems right, you’ll be able to make your sketches a bit more realistic.

Note: Distinguish between touchability and clickability. Many designers, myself included, have made the mistake of refining links for people who click on them using a mouse, or even via the keyboard, without considering how touchable these links are for people on touch devices.

Think about the size of links—not only the text size, but also the amount of space around them. Both of these factors play a role in the touchability or clickability of links (and buttons): large links and buttons are easier targets, but slightly smaller links with plenty of space around them can work just as well. That said, there’s a decent chance that no matter what you choose to sketch, you’ll end up making changes again when you create your mockups.

This is the great thing about sketching that I can’t repeat often enough: you’re going to refine your design in the browser anyway, so the speed with which you can try things out when sketching means you won’t have to do detail work more than once (unless your client has changes, but we all know that never happens).

Navigation

Navigation is another poster child for sketching on actual devices. The size issues are the same as with links, but there’s a lot more thinking to do in terms of the design of navigation for various devices, which means navigation might change significantly at each major breakpoint.

Think back to Bryan Rieger’s practice of designing in text first, and ponder what you would do before the very first breakpoint if you had only plain HTML and CSS at your disposal—in other words, if you had no JavaScript. That means no, you can’t have your menu collapsed at the top of the screen and have it drop down when someone touches it. If you have your menu at the top, it’s in its expanded form and takes up all the vertical space it normally would.

This is a controversial enough subject, with even accessibility gurus in disagreement: JavaScript, after all, is currently considered an “accessibility supported” technology. But this isn’t necessarily about accessibility. It’s about thinking about what happens when a browser lacks JavaScript support, or if the JavaScript available on the device is different than what you’d expect. Your content will be presented in a certain way before JavaScript does its thing with it, no matter what the browser. So why not think about what that initial state will be?

In the chapter on wireframes, I talked about my preferred pattern for navigation on the smallest screens: keep it near the bottom of the screen and place a link to that navigation near the top of the screen. JavaScript, when available and working as expected, can move that navigation up to the top and create the drop-down menu on the fly.

But a pattern is not design law, so how you choose to handle the smallest screens will depend on your project. If I had only a few links in my navigation, I might very well put the menu at the top from the very start, and there it would stay at every breakpoint.

Remember that JavaScript and CSS let you do a lot of rearranging of stuff on the screen. That knowledge should empower you to safely design a great page with plain HTML and use JavaScript and CSS to spice it up any way you like. This is the essence of progressive enhancement.

Tables

Tables! Oh, the bane of the responsive designer (or wait, is that images? Or video? Or layout? Ahem). Tables are tough to deal with on small screens. I’d love to tell you I have all the answers, but instead I have more questions. Hopefully, these will lead you to a solution. It’s good to think about these while you’re sketching.

First of all, what types of tables will you be dealing with? Narrow? Wide? Numerical? Textual? Your content inventory should give you enough information to answer these simple questions. Once you’ve considered those, try to categorize the types of tables you have into something like the following classes (Figure 7.7):

  • Small-screen-friendly tables, which you’ll probably leave as they are, because they’re small enough and will work fine on most small screens.
  • Blockable tables, which you can alter with CSS so that each row in the table functions visually as a block item in a list (Figure 7.8).
  • Chartable tables, which contain numerical data that can be transformed into a chart, graph, or other visualization that will take up less space on a small screen.
  • Difficult tables, which are hard enough to deal with that you’ll need to come up with a different plan for them, sometimes even on a case-by-case basis. These are our enemies, but unfortunately, are the friends of our clients, who all love Microsoft Excel. Oh well.


Figure 7.7: There are several different types of tables, and different ways of dealing with them on small screens. (Sources: mobilism.nl and eu-verantwoording.nl)


Figure 7.8: One way of dealing with small screen tables is to treat each row as a block.

Thinking again in terms of progressive enhancement, the base design should probably just include the whole table, which means that the user will have to scroll horizontally to see the whole thing in many cases. On top of this, we can employ CSS and JavaScript, when they’re available, to do some magic for us. Blockable and chartable tables can be blocked with CSS and charted with JavaScript. Plenty of designers and developers have experimented with many different options for tables, from simply making the table itself scrollable to exchanging columns and rows.

The fun part is that what you do on small screens isn’t necessarily what you’ll do on larger screens. That’s why now—when all you have to do is sketch and it won’t take much time—is the time to think about the changes you’ll be making at each breakpoint.

What to do if you get stuck

Every designer gets stuck at some point. It’s no big deal unless you treat it like one. There are countless ways to deal with it, from asking yourself what if questions (“What if it weren’t a table, but a list?” is what I asked myself before “blockifying” the attendees table for the Mobilism site) to the cliché taking a shower, which you hopefully do on a regular basis anyway. The reason this chapter focuses so much on sketching is because the act of drawing itself can actually stimulate your brain to come up with more ideas, provided you push it hard enough by sketching past your comfort zone of first-come ideas.

If your problem is that you’re stuck creatively, there are many inspiring books and resources to get your creative engine started during the bitter cold of designer’s block. Although there are plenty of resources on design and creativity itself (try such classics as Edward de Bono’s Lateral Thinking), the greatest inspiration can come from sources outside the realm of design.1 Trying to combine things that normally aren’t combined can lead to surprising results. It’s a simple little trick, but I’ve often used Brian Eno and Peter Schmidt’s Oblique Strategies to force me to take a different approach.2 Worst case, it’s a lot of fun. Best case, you’ve got a great idea!

If your problem is that you’re not sure how to handle something in the context of responsive design, there’s no harm in researching how others have solved problems like yours. Just be sure to use your creativity and tailor any ideas you might find to your own situation; after all, you’re a designer. At the time of this writing I find Brad Frost’s This Is Responsive to be one of the most exhaustive collections of responsive design patterns and resources available.3 You can spend hours going through there and you’ll certainly come across something that will get you unstuck.

Excerpted from Responsive Design Workflow by Stephen Hay. Copyright © 2013.
Used with permission of Pearson Education, Inc. and New Riders.

0
Your rating: None

User-centered design has served the digital community well. So well, in fact, that I’m worried its dominance may actually be limiting our field.

The terms “user experience design” (UX) and “user-centered design” (UCD) are often used interchangeably. But there’s an important distinction.

UX design is the discipline: what we do. Precise definition is elusive, but most attempts focus on experience as an explicit design objective.

User-centered design is a process: how we do it. Again the specifics vary, but usually form shades of the same hue:

  • Research. Immerse yourself in your users’ worlds to understand what they do and why they do it.
  • Sketch ideas that address these learned needs.
  • Prototype the most promising ideas to evaluate them more accurately.
  • Iterate through testing, repeating steps as required.

Other design processes

UCD is the dominant design approach within UX, so pervasive that some UX designers behold it as the Platonic ideal of design. Deviation from the UCD faith is even met with derision. A naive recruiter whose job specs aren’t explicit about direct user contact soon learns not to reoffend.

But other design processes are available. Jared Spool’s article 5 Design Decision Styles explores alternatives to UCD, including:

  • Self design, aka “scratching your own itch.” The designer acts as a surrogate for the audience. It’s convenient and quick, but clearly only reliable in narrow circumstances.
  • Genius design. Genius design has no first-hand research phase. To anticipate user behavior, the designer draws upon stockpiled experience, imaginative analogy, and psychological fundamentals.
  • Activity-focused design. Here, the designer addresses users’ primary tasks rather than any underlying needs. Tasks are derived a priori, from a logical interpretation of the domain, rather than from research.1

It seems arbitrary to regard these alternative design processes as inferior substitutes. Surely other modes can fulfill the broad UX mandate of creating experiences?

Weaknesses of UCD

UCD’s ascendancy deserves historical context. Its success came largely as an antidote to what preceded: the Wild West of the early web, dominated by Hey-This-Looks-Cool hackery. UCD offered rigor (or at least the perception of rigor; see Scientism below) that helped the immature web refocus on its audience. But that phase is long past, and the more experience I earn, the more flaws I see in UCD’s finery.

Heaviness

UCD simply takes longer than genius or self design. Clients typically identify research as the culprit, meaning the research phase is usually targeted when time is short. The UX industry has countered this variously through client education, seeking shortcuts, or by slipping research in without formal consent. But—whisper it quietly—some design research is wasted effort. For research to be valuable, it must:

  • be free from sampling or cognitive biases;
  • address issues that are central to the product;
  • offer genuinely new insight; and
  • be used to forge new ideas, not to validate predetermined decisions.

In these circumstances UCD is unparalleled, enabling breakthroughs other modes can’t. But I think UCD advocates overstate how often these planets align. I argue that genius design and iteration will often achieve better results in the same time.

Someone with experience as not only a designer but also as an attentive user has built up an unconscious repertoire of patterns and approaches that suit various contexts. As this library grows, it frees the designer from the need to research every problem.

The UX industry appears to acknowledge the relevance of genius design by its adoption of the expert review—a tool that epitomizes the approach—but often feels it has to prop this review up with user validation. It’s hard to escape the thought that the primary function of this redundancy is to retain the appearance of neutrality.

Negation of style

Among the UX community’s favorite quotes of late:

“[Good design] dissolves in behavior.” —Naoto Fukosawa
“The best interface is no interface.” —various
“Great design is invisible.” —various

At first glance, these are elegant statements of aesthetic intent: the user should never notice the designer’s influence. This “disappearing designer” motif holds self-sacrificial appeal, and for many interactions it’s great advice. I don’t want my tax forms to bear any trademark flourishes. However, when we extend this line of thought to its logical conclusions, these quotes start to look like mere slogans.

By negating the idea of a designer’s influence, we also negate the idea of style within the UX discipline. We’re saying that, done properly, it should be impossible to tell one UX designer’s work from another’s. There should be no signature elements, no philosophical movements, no overarching tenets except that of transparency.

The commoditization of designers that this idea suggests is troubling. Moreover, style is crucial for a creative discipline’s evolution. The best writers and architects—whose work, just like UX design, has function and engenders experience—have unmistakable styles. Throughout history, daring work from iconoclasts has sparked entire movements, and thus transformed creative practice. The transition between the Neoclassical and Modernist architectural eras, for example, wasn’t simply a case of replacing Doric columns with perpendicular glass. It was a total reframing of architecture and its values. Modernity usurped antiquity.

Is our form of functional art any different? In a system that deprecates style, is there room for a designer to pioneer entirely new approaches?2 If not, are we happy with the resultant ideological homogeneity?

Of course our designs must put users first. But there is never just a single way to meet user goals. Instead of trying to deprecate style, we should embrace it as a way to drive our practice forward and lend personality to the things we make. In a marketplace of bewildering clutter, products with a damn opinion are by far the most interesting.

Scientism

Given its academic influences, it’s not surprising that UCD has been sold as a science. Empiricism runs through its discourse, to the unfortunate extent that the UX industry often oversells the certainty it can offer.

Scientism—akin to Colbert’s “truthiness”—is the veneer of science where little scientific validity exists. While UCD is methodical, it is manifestly not scientific. There can never be a universal truth to design. Solutions applied in one context may fail magnificently in another, and the few governing principles (Fitts’s Law, the Gestalt principles, and affordance, say) give at best partial guidance. Some supposed laws, such as the “magical number 7±2” persist in ill-informed fringes of UX, despite being largely rebutted.

While researchers and designers can learn plenty from the scientific method, design simply does not yield to scientific analysis in the way its scientistic proponents wish.

To treat design as a science is to retreat to the illusory safety of numbers, where designers are mostly seen as agents of skewing the odds in your favor. This can start a race to the bottom as design gets less and less leeway. Weak leaders overtest in lieu of trusting designers to make decisions: it’s just a small step from there to the infamous forty-one shades of blue.

Imbalance

Finally, I’m concerned about the mindset that UCD can instill in its practitioners.

It’s unsurprising that a user-centered process can skew inexperienced designers’ loyalties away from business priorities. Some claim that this serves as counterweight to the business-first leanings of other employees. The argument strikes me as infantile. When a designer adopts simplistic, reductive arguments that ignore business reality, it undermines him. It limits his potential influence. Only the well-rounded designer who can fight for what’s right while accommodating business reality will be seen as a true leader.

What next?

I don’t expect UCD’s pre-eminence to change. Nor do I think it necessarily should. But a design community is most healthy when it shares a respectful variety of opinions. I don’t see that in the UX industry today, and I hope we can begin to appreciate the value of alternative design approaches.

The designers who will stand out in future will be those who are familiar with many modes of design. These designers may have a favorite, of course—and UCD is an excellent candidate—but they also have the versatility to draw on other processes when suitable. Perhaps they will even pioneer new approaches to add to our toolkits.

0
Your rating: None

Sir Tim Berners-Lee, inventor of the web, is credited with making hyperlinks blue, a decision he appears to have reached at random. But although accessibility may not have been on Sir Tim’s mind at the time, the color choice was a happy one, according to Joe Clark:

Red and green are the colours most affected by colour-vision deficiency.  Almost no one has a blue deficiency. Accordingly, nearly everyone can see blue, or, more accurately, almost everyone can distinguish blue as a colour different from others. It was pure good luck that the default colour of hyperlinks is blue with underlining.
Joe Clark, Building Accessible Websites

0
Your rating: None

As I started building the HTML templates for ALA v5, I tried to be as thoughtful as I could about the patterns I chose, especially for markup that was going to become part of the content of the magazine. Something I thought important to nail down was a useful and meaningful pattern for marking up blockquotes.

In the previous ALA, we used a long-standing pattern that’s been a convention since early in the the XHTML days:

<blockquote>
     <p>It is the unofficial force—the Baker Street irregulars.</p>
     <p>— <cite>Sherlock Holmes, Sign of Four</cite></p>
</blockquote>

Since we’re all HTML5 all the time these days, there are a couple problems with this:

  1. We were using the cite tag as a style hook to distinguish the quote from the attribution, but this no longer holds up as the specification for cite now specifies that people are not legitimate subjects for a citation — only “works” can be cited (books, articles, etc).
  2. That having been said, the citation doesn’t belong inside the blockquote anyway; according to the specification, the only content that can live inside a blockquote is the text being quoted.

I’d also like to get rid of the emdash — it’s pure ornamentation, and I’d rather it not be in my content.

Ok, no problem. Here’s what we could do instead:

<blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
<p class="quote-citation">Sherlock Holmes, Sign of Four</p>

This is valid HTML5, and the quote-citation class gives me a hook to insert an emdash (or whatever we like) via CSS:

p.quote-citation::before {
     content: "— ";
}

But: We have a semantic problem. There’s nothing meaningful, other than proximity, to tell us (or machines) that the p tag that follows the blockquote should be considered part of the same content (the class isn’t sufficient, according to the spec, and without the quote, the citation becomes a non-sequitur). So, we went looking for a semantic element to wrap this pattern in, and for a few reasons, we arrived at figure:

<figure class="quote">
     <blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
     <figcaption>Sherlock Holmes, <cite>Sign of Four</figcaption>
</figure>

Not only does the spec for figure perfectly align with our needs, it even comes with the convenient figcaption element; a perfect container for our citation. I’ve given the figure a class because there are other kinds of figures — images, tables, etc etc. There are other details from the spec that we could have adopted (such as the optional cite attribute for the blockquote), but I wanted to keeps things simple for the folks marking up our articles.

(You can see part of the conversation we had about all this in this gist; it’s often smart — and fun — to take an idea to its fullest extreme before reigning yourself in.)

So, here they are, the official ALA blockquote patterns. A lot of thought for what might be a small detail, but in thinking about these things now we’re doing our best to ensure that our content is future-friendly, and not just our templates.

0
Your rating: None

You have five minutes while waiting for a friend to meet you for lunch, so you find yourself shopping for a new pair of shoes. When your friend arrives, you put the phone away, but leave the web page open to help you remember what you found when you get home.

While you’re at work, you read a restaurant review for a new place you think sounds tasty. Come dinnertime, you grab your phone to pull up the address and location.

One night on your tablet, you’re browsing articles for a report you’re writing at work. Back at your desk the next day, you struggle in vain to remember what you searched for to find those articles. Why can’t you find them again?

Sound familiar? If you’re like most people, it probably does. Research from Google (PDF) shows that 90 percent of people start a task using one device, then pick it up later on another device—most commonly, people start a task on smartphone, and then complete it on the desktop. As you might expect, people regularly do this kind of device switching for the most common activities, like browsing the internet (81 percent) or social networking (72 percent). Certain categories like retail (67 percent), financial services (46 percent), and travel (43 percent) also seem to support this kind of sequential use of different devices.

Dual-screen or multi-screen use of devices gets a lot of attention, but we tend to focus on simultaneous usage—say, using tablets or smartphones while watching TV. Publishers, advertisers, and social networks are all actively trying to figure out how to deliver a good experience to users as they shift their attention between two screens at the same time. Sequential usage is every bit as common, but we rarely acknowledge this behavior or try to optimize for this experience.

When people start a task on one device and then complete it on another, they don’t want different content or less content, tailored for the device. They want the same content, presented so they can find it, navigate it, and read it. They imagine that their devices are different-sized windows on the same content, not entirely different containers.

What should we do to provide a good experience for users who want to complete the same task across more than one device?

Content parity

Let’s make device-switching the final nail in the coffin for the argument that mobile websites should offer a subset of the content on the “real” website. Everyone’s had the frustrating experience of trying to find content they’ve seen on the desktop that isn’t accessible from a phone. But the reverse is also a problem: users who start a task from a smartphone during a bit of free time shouldn’t be cut off from options they’d find back at their desktop.

Consistent navigation labels

When picking up a task on a second device, about half of users say they navigate directly to the website to find the desired information again. Users who are trying to locate the same information across a mobile site (or app) and a desktop site can’t rely on the same visual and spatial cues to help them find what they’re looking for. As much as possible, make it easy for them by keeping navigation categories and hierarchy exactly the same. There aren’t that many cases where we truly need to provide different navigation options on mobile. Most desktop navigation systems have been extensively tested—we know those categories and labels work, so keep them consistent.

Consistent search

About 60 percent of users say they’d use search to continue a task on another device. Businesses wondering whether “mobile SEO” is necessary should keep in mind that user tasks and goals don’t necessarily change based on the device—in fact, it’s often the identical user searching for the exact information that very same day. It’s frustrating to get totally different results from different devices when you know what you’re looking for.

Handy tools

Users have taught themselves tricks to make their transition between devices go more smoothly—about half of users report that they send themselves a link. Sites that don’t offer consistent URLs are guaranteed to frustrate users, sending them off on a quest to figure out where that link lives. Responsive design would solve this problem, but so would tools that explicitly allow users to save their progress when logged in, or email a link to the desktop or mobile version of a page.

Improved analytics

Mobile analytics is still in the dark ages. Tracking users between devices is challenging—or impossible—which means businesses don’t have a clear picture of how this kind of multi-device usage is affecting their sales. While true multi-channel analytics may be a ways off, organizations can’t afford to ignore this behavior. Don’t wait for more data to “prove” that customers are moving between devices to complete a task. Customers are already doing it.

It’s time to stop imagining that smartphones, tablets, and desktops are containers that each hold their own content, optimized for a particular browsing or reading experience. Users don’t think of it that way. Instead, users imagine that each device is its own window onto the web.

0
Your rating: None

Vexing Viewports

“The Web is Agreement.” Jeremy Keith’s eloquent statement neatly summarizes the balance that makes it possible for us to build amazing things. Each week, new devices appear with varying screen sizes, pixel densities, input types, and more. As developers and designers, we agree to use standards to mark up, style, and program what we create. Browser makers in turn agree to support those standards and set defaults appropriately, so we can hold up our end of the deal.

This agreement has never been more important.

That’s why it always hurts when a device or browser maker does something that goes against our agreement. Especially when they’re a very visible and trusted friend of the web—like Apple.

You see, Apple’s newest tablet, the iPad Mini, creates a vexing situation: Its device-width viewport tag defaults to the same values as Apple’s original iPad (768x1024 pixels), even though the Mini's screen is physically 40 percent smaller. That means every button, graphic, link, and line of text on a web page on the iPad Mini appears tiny—even when we try to do the right thing and build flexible, multi-device experiences.

Two iPads, one too small.

But Cupertino isn’t the only culprit out there. This is a problem that’s been brewing since we started using the viewport—and it has to do with not just pixels, but our own practices as well. Let’s take a step back and understand what’s really causing today’s woes—and what all of us need to do about it.

The trouble with pixels

Today’s viewport woes can be traced right back to pixels—yes, those tiny elements we work with every day.

The first pixel challenge is quantity. The more pixels in the display, the more information can be displayed. But as these are physical pixels whose number can’t be altered after the fact, a second factor comes into play: the screen’s physical size.

Imagine two two-inch-wide displays (about the width of the iPhone), as shown below.

Two devices, each with a two-inch-wide display. The one on the right, at 640x960, would pack four times as many pixels into the same space as the 320x480 screen on left.

The first is 320x480 pixels, the second 640x960. This gives the second display four times as many pixels as the first, but fits all of them into the same physical space. This smaller pixel size results in content that is also smaller—making it crisper, but much harder to read as well.

This is exactly what happened on the Nokia E60. In 2005, most mobile phone displays were about an inch and quarter wide, with an average of 176 pixels in that width. But the E60, which sported a “huge” 352x416-pixel display, crammed twice the number of pixels into a similar amount of space. The result: A gorgeous, crisp—but often hard-to-read—display.

The E60 also introduced a now-familiar problem: how users would manage to surf “big” sites on a tiny device. Nokia’s solution was a new browser, the Mini Map. This browser behaved similarly to today’s smartphone browsers by first rendering the full-sized page, then scaling it to fit the available screen size. Superimposed onto this rendering was a transparent red box that could be repositioned using the device’s joystick. Clicking the joystick would zoom the content indicated within the box.

Enter viewports

Mini Map was probably one of the first commercial uses of a dynamic viewport—a construct designed to dynamically change the size or scale of the visible screen area in order to improve the user experience. But it was far from the last.

In 2007, Apple released the iPhone, a much larger device than the E60, but one with a similar problem. Even on a “huge” two-inch display, surfing the “real web” on an iPhone meant loading large pages onto a small device. Apple chose to solve this problem through a series of carefully orchestrated enhancements.

The first was the creation of a virtual viewport similar to the one Nokia designed for Mini Map. When encountering desktop websites, the browser would render them at their full size (based on a default canvas width of 960 pixels). It would then scale them down to fit the two-inch display. Users could interact with the page to scroll and zoom in on areas of their choice.

Apple didn’t stop there. It also developed a new viewport meta tag. Sites not using the tag would be rendered using the default, legacy-web viewport of 980 pixels. But developers who opted to use the tag could declare the viewport for their sites, including setting the width to the all-important device-width value. This value tells the browser, “please pick a width that fits this specific device’s screen best.”

Other mobile browser vendors were quick to follow Apple’s lead. Nowadays just about every mobile browser supports the viewport meta tag, including the device-width value. This provides us with an even playing field: It respects the efforts of those who take the time to adapt sites for the multi-device web, while those who haven’t yet made this transition still receive a “good-enough” default experience.

Mini problems

The value device and browser vendors assign to device-width is directly related to that device’s physical dimensions. Physically smaller devices need a smaller device-width value (which will result in larger content). Set a value that’s too large, and most content will be too small to comfortably read.

And that’s why Apple’s iPad Mini has a vexing viewport. It uses the same 768-pixel device-width as the regular iPad, even though its physical size is much smaller. One would expect to see a device-width more in line with those of similarly sized tablets like the BlackBerry PlayBook or second-generation Samsung Galaxy 7″—around 500 to 600 pixels, as shown in this chart.

Because of this device-width, web pages appear 27 percent smaller on the iPad Mini than they do on the Google Nexus 7 (calculated based on the relative size of device pixels)—all because Apple decided to describe the device’s viewport as 768 pixels.

Solving for content size

One of the first places this causes problems is in text: More pixels in a smaller space means that fonts sized in pixels will look correspondingly dinky.

Of course, many of us aren’t sizing in pixels anymore—we’re using relative dimensional elements like ems, right? Only, that doesn’t quite solve the problem this time.

When we use ems, we imply a certain trust that the browser’s baseline font size at the default zoom level—1em or 100 percent in unit parlance—is sane and readable. But that’s not always the case. The browser’s baseline font-size value (1em) roughly equates to a 16-pixel square. This ratio serves as a ligament that binds absolute and relative units, but it can vary from browser to browser.

On the iPad Mini, font-size at baseline is precisely 16 pixels. That may have worked fine when fewer pixels were packed into our screens, but on a dense display with an improperly defined viewport, that’s going to be uncomfortably small.

Not all browsers toe the 1:16 em-to-pixel line, though. The Kindle Touch’s browser, for example, has a high-density viewport, but adapts by using a 1:20 ratio, kicking the default font size up a few pixels for readability.

This might not fix all of iPad Mini’s viewport problems, but at least the content would be legible.

Three seven-inch tablets. Note the difference in rendering.

So why did Apple do this?

To understand why Apple would release a product with such a vexing viewport, we don’t have to look further than our own habits.

In the wake of the iPad’s initial release, web folk worldwide scrambled to adapt sites to look good on the new tablets. Somewhere along the way many of us collectively settled upon pixel-based notions of tablet-ness, and those notions often resulted in fixed, 1024x768-pixel layouts precisely targeted at these devices.

Were Apple to decrease the device-width value for the iPad Mini on account of its smaller physical size, it would guarantee a second scramble as existing tablet-adapted sites assuming a 1024x768 viewport suddenly looked unexpectedly wretched on the new device.

The responsibility here goes two ways. Browser makers need to provide reliable baselines of viewport and text sizing, yes. But we as implementers also need to stop grasping for pixel-perfect control over our layouts (the “control” is an illusion, anyway).

A way forward

The only way for us to move forward is together. As developers and designers, we need to hold up our end of the bargain and be mindful of how we do our work—and that means letting go of the notion of pixel precision once and for all. We need to earn the trust of browser makers so they hear us out when things just frankly aren’t right. We hope this article illustrates we’re trying to do the right thing. We hope browser makers acknowledge that and follow suit.

Standards and consistency are more important now than ever before. Please let browser makers and device manufacturers, like Apple, know that we rely on consistent and reliable decisions about default viewports and their zooming. We’re willing to hold up our end of the agreement, and we need them with us.

Let’s move into the future—together.

RSS readers: Don't forget to join the discussion!

0
Your rating: None

We talk a lot here at A List Apart about designing for the future. About being thoughtful, accessible, forward-thinking, and compassionate. About building a web that serves more of us, more fully.

And yet, when it comes to building our own communities—the events and conferences in which we learn new skills and discuss new ideas—we’ve spent precious little time designing with this inclusivity in mind. We accept conference lineups loaded with white men because “we couldn’t find any other qualified speakers,” or “all the women we asked said no.” We host bro-tastic hackathons fueled by beer-serving babes. Sometimes, we even give straight-up harassment and vitriol a place at the podium.

This isn’t good enough.

If the web’s ideal is universality, as Sir Tim Berners-Lee says, then shouldn’t this be the driving principle behind our own communities and organizations as well? If we want a web that works for everyone, then don’t we need a web profession that reflects just as much diversity? After all, the best way to understand the audiences we design for is to know those audiences. And the best way to know people is to have them, with all their differences of perspective and background—and, yes, age and gender and race and language, too—right alongside us.

“But I don’t want to exclude anyone,” you might be thinking. “I’m not trying to keep women or people of color or those from different backgrounds out of the spotlight.” I’m sure that’s true. Yet our community is far from diverse: According to the 2011 findings from our very own Survey for People Who Make Websites, just 18 percent of you are likely to be women, and even fewer of you are non-white. Add in the fact that women, people of color, and those from outside the U.S. are all much more likely to perceive bias in their careers, and it starts to get pretty hard to pretend everything’s OK. In fact, sexism at “geek” events is so prevalent, there’s a whole wiki devoted to cataloging known incidents.

However you participate in the web community—organizing conferences, holding hack nights, publishing articles, hosting meetups, or simply attending events—you have the power to do something about this, and in turn bring the web closer to its ideals. And it’s not as hard as you might think.

We have the tools

The web’s ability to connect people, facilitate understanding, and amplify ideas has enabled us to build incredible things. It’s also given us a wealth of lessons in how to design thriving, thoughtful communities. Lessons it’s time we turn toward ourselves—toward reaching this more personal, more intimate goal.

What can we learn from designing online communities, social systems like Flickr and Facebook? I propose four key skills: setting expectations, making it easy to report abuse, fostering diverse participation, and avoiding blaming our users.

Set expectations for behavior

The right tone of voice can turn someone’s confusion into trust, skepticism into optimism, boredom into curiosity. The wrong tone of voice can turn someone’s interest into annoyance, anticipation into disappointment, frustration into full-on anger.

—MailChimp’s Voice & Tone guide

Online communities are fertile ground for misunderstandings. Without the benefit of nonverbal cues like nods, smiles, motions, and postures, we misinterpret sarcasm. Our jokes fall flat. Our feelings get hurt. So what do we do when building these communities, besides writing up explicit terms of service? We set implicit expectations.

Implicit expectations include the voice and tone of an interface—from the signup forms to the welcome messages, the email reminders to the error notifications. Design, too: Typography, color, and layout choices all influence how a user sees an experience, and help her form an impression of not just what the site is, but how it feels, and how she’s expected to behave there. With every bit of content you communicate, you’re modeling the discourse you expect from others.

In addition to having explicit rules of conduct (and training your volunteers to enforce them), you can also create these types of implicit expectations in IRL. In fact, if you organize events, you already have models for behavior: the people who take the stage. Placed on a platform, both literally and figuratively, your speakers’ and organizers’ behavior and actions become your event’s norm. Their tone becomes your audience’s tone.

It’s your job to make sure it’s the right one.

If you’re in charge, talk with presenters, organizers, and volunteers about the expectations you want to set. Remind them that their actions are on display, and will reverberate across the event. Empower them to model the sorts of behavior you want to see, and be explicit about what’s inappropriate—like slides that objectify women or statements that marginalize non-U.S. attendees.

If you’ve picked the right speakers, this won’t impose on their creativity one bit.

Provide easy-to-navigate outlets to report abuse

Imagine a 14-year-old girl logging onto Facebook to find that she’s been called a slut and tagged in obscene photos by a classmate intent on ruining her reputation. She’s got enough on her plate without having to also wrangle with an interface that makes it hard to stop the harassment, right? So Facebook offers the option to delete any item posted to your page, right alongside the post—and to block a user and report abuse, just by visiting that user’s profile.

Now think about the last conference you attended. If you’d been harassed, would you have known where to go for help? Would you have had a clear outlet to voice concerns? Or would you have been @-messaging a generic conference avatar, unsure who was on the other end? Sidling up to a harried registration desk to discuss your grievances in public?

Would you have said anything at all?

I didn’t. A couple years back, I was propositioned by an employee of the company organizing the conference—a much-older man who was also a vendor for my then-employer. We’d had drinks with another colleague of mine, where we’d made mundane cocktail talk about business and spouses. We said goodnight, and approximately two seconds after he knew I’d be alone, he sent me a demanding, aggressive text message—one that assumed I’d already consented to a liaison. I was disgusted and furious, but unsure what to do: He was my main contact at his company, and knew the owner of mine well. The prospect of explaining all this over and over to people I wasn’t sure would understand seemed like a further humiliation waiting to happen.

So I let it go. And I spent months feeling ashamed of myself for it.

No event organizer wants attendees—especially those dropping hundreds or thousands of dollars on a conference pass—to feel this way. But if you’re in charge, you’ve got to do more than want. You’ve got to plan, and you’ve got to make it clear to the people attending that there’s an outlet for their concerns—before they have any.

Hearing about inappropriate behavior is difficult, sure. But no matter how awkward it is for you, I promise it’s much worse for the person who’s been made to feel uncomfortable or unsafe, who’s trying to hold it together while telling you, and who’s scared you’ll just write it off.

Don’t let that happen. If you organize events, name a person or provide a place—virtual or physical. Promise confidentiality. And publish this on your website or in your collateral, right from the start. You don’t need to make it scary—just include a simple note reminding attendees that everyone should feel welcome, and if they don’t, there’s a place to go and a person who’ll listen.

If you volunteer or speak at events, make a point to ask about policies for harassment or inappropriate behavior: Does the event have any? What are they? Raising the question may be all that’s needed to get an organizer thinking about these issues.

Whatever you do, don’t you make it a burden for someone to figure out how to tell you they’ve been harassed. If you do, many of them never will.

Foster diversity to foster longevity

Back in 2010, when Twitter first started suggesting people for users to follow, it made a rookie mistake: recommending the same people to everyone, all the time. This created a dynamic where “the rich got richer,” as Heather Champ, who’s known for her work building communities like Flickr, has noted. In other words, it made a few big names even bigger (Bieber, anyone?), but it failed to foster deeper connections or build robust communities. Over time, Twitter realized this wasn’t working and responded with major updates designed to give users more varied, relevant suggestions.

As we design community events, it’s important to ask the same thing: Are we just allowing the same people to keynote each year? Are we creating a divide between the haves and the have-nots—those with all the speaking experience, and those with none? If so, which people are we leaving behind? What value could they bring, what new connections could they build across our community, if we amplified their voices instead? What is our industry not learning, where is our industry stagnating, because we’re inviting the same cast to perform the same show each night?

Sameness is boring. It’s predictable. It’s stale.

Perhaps worst of all, it’ll only sell tickets or entertain audiences for so long. The best events feel fresh and different each time—they bring forth a variety of voices, tell a range of stories, and share a breadth of perspectives. They shift and adapt—just like the web.

As an attendee, you might argue that you want to see polished speakers and big names. There’s nothing wrong with that, and it’s normal to seek out lineups that have a few. But how many times have you looked at a speaker roster and thought, “man, that guy’s at everything”?

The best events avoid this sort of speaker fatigue by mixing in fresh faces and ideas—and that requires actively looking for new voices. If you’re recruiting talent, ask past speakers whom they’ve been reading recently. Trawl Twitter for interesting blog posts hashtagged to your field. Invite longtime attendees to submit a talk. Consider whether women might be declining your invitation to speak for reasons you hadn’t considered, and address those, too.

A star-studded speaker roster might generate buzz, but a diverse lineup adds texture, depth, and color. It adds richness and fullness. Done well, it makes people remember how your event changed the way they think and feel—not just which internet celebrity gave the keynote.

Don’t blame your users

Users aren’t perfect: They’re busy. They’re distracted. They’re human.

When we design for humans, we know we need to be forgiving. We know that when they need help, we can’t talk down to them. We know they deserve respect, understanding, and compassion.

Perhaps most of all, we know that when they fail, it’s our job to get better.

The same is true in person. Every time you make an excuse for a bad experience—“It was just for fun. I don’t know why you’re so offended,” or “We’re not trying to exclude anyone…you must be imagining things!”—you’re blaming your user. You’re making it his problem, not yours.

I’ve felt like this, too. Recently, I was accosted by a conference organizer at an official event happy hour. He had always come on a bit strong—too many cheek kisses, too much touching, too-tight hugs, too everything—but I’d always ignored it, figuring he wasn’t worth getting worked up about.

I was wrong. This time, when I questioned something he’d said in his talk that I considered divisive, things turned a very different direction. He screamed at me, in public, pointing his finger and advancing on me aggressively. I kept reiterating that I wasn’t sure why he was so upset, but the yelling continued for what felt like an eternity. I finally told him that the way he was talking to me was inappropriate, that I needed to be treated with respect, and that if he continued, I wouldn’t speak to him anymore.

I’d gone from someone he thought he could paw at to someone he thought he could scream at, and the combination left me shaken. I felt degraded. I felt humiliated.

But most of all, when trying to talk to people about what had happened, I felt marginalized. “He was probably drunk!” some folks said. “Oh, you just got him agitated! You know how he is,” I was told.

Whether or not I’d said something controversial doesn’t really matter. Disagreement and discussion aren’t the problem. His response was abusive and inappropriate, if not overtly sexist, and excusing his bad behavior made it my fault: If I’d just avoided him while he was drinking, just not asked a question, just not gotten him so “worked up,” then this wouldn’t have happened.

You know how condescending, blame-ridden error messages—like “FAILURE. FILL OUT ALL FIELDS CORRECTLY”—frustrate the hell out of users? It’s no different here. Blaming someone who’s been treated poorly is taking what’s already an alienating, isolating experience and deepening it. It’s making them feel incompetent and ashamed.

It’s like the lite version of telling someone she shouldn’t have been wearing a short skirt if she didn’t want to be groped. And it’s a problem you can fight, even if you’re just an attendee, by taking a stand against bad behavior—one that puts the blame squarely on the person who’s really responsible.

It’s up to us

I don’t pretend my experiences are tragic. I wasn’t terrorized or physically assaulted. My life goes on.

But my stories also aren’t unique. I could regale you with hours of anecdotes from friends and colleagues—mostly women, but not all—who’ve poured their time and love and attention into preparing presentations and articles, only to be humiliated or marginalized. People who’ve chosen not to talk about their piss-poor experiences for fear of being retaliated against. People who’ve stopped attending events or speaking up, because it’s just too damn hard to keep smiling while feeling left out, degraded, or attacked. Instead of outing others, though, I’ve told you my own stories. Stories I wish I didn’t have. Stories I wasn’t sure I’d ever share.

I’m sharing them now because I believe we have the power to improve things.

We already know how to make design choices that support inclusivity, set expectations for users, and model the interactions we want. There’s no excuse not to fix this—and, in fact, there’s a real danger in not trying.

We’ve spent two decades talking about a web that’s inclusive and flexible. We’ve devoted countless hours to creating spaces where conversations and relationships can thrive. The longer we tolerate a community that excludes others, the more we, as an industry, are defined by exclusion—and the further away we remain from the universality we’ve worked so hard to build.

0
Your rating: None

Creating custom icon font files with Icomoon. Image: Screenshot/Webmonkey.

Responsive images means getting high-quality, bandwidth-friendly images to the right screens. Currently that’s not nearly as simple as it sounds, but there’s a responsive images web standard in the works and plenty of smart developers working on the problem.

Implicit in the responsive images discussion is that the images in question are photographic images. For graphics, solid-color images and icons there are already better solutions, namely, either SVG or icon fonts.

Icon fonts in particular have been getting a lot of attention lately and for good reason — they make an easy, lightweight way to serve up resolution-independent images that look good on any screen. Indeed in most cases icon fonts can replace your old image sprites (though you can keep your sprites around for older browsers). And don’t forget icon fonts are fonts, so any CSS effect that works on text will work on your symbols.

There are dozens of great icon font sets available that you can just drop into your projects. Pictos, Glyphish and Symbolset are just a few popular options. There are high-quality free icon sets as well, but it’s also easy to create your own font file from any vector image you have.

Turning your vector files into icon fonts means you can serve your RSS, social icons and perhaps even your logo all from the same custom font file (or even straight from your stylesheet with base-64 encoded data). What’s more, when you roll your own, you can include only those icons you need, further reducing file size.

I’ve been using the OS X application Glyphs to package up icon sets, but, as developer Jeremy Keith recently highlighted in a blog post, there are a number of great (and free) online services that can turn your icons into font packs. Assuming you don’t need all the font editing features found in desktop apps like Glyphs, web services like IcoMoon will work great.

To create your custom collection IcoMoon has dozens of icon fonts to choose from (some free, some not), as well as an option to convert your own graphics. Once you have your set assembled the app will spit out the whole collection as single font file ready to use on your site. You can even get the resulting font base-64 encoded so you can avoid the extra HTTP request.

For more info on how and why to use icon fonts check out the nice overview on the Pictos blog, Chris Coyer’s Icon Fonts are Awesome, developer Trent Walton’s icon font write up and Jenn Lukas’ series on icon fonts.

0
Your rating: None

We are pleased to present you with this excerpt from Chapter 1 of Content Strategy for Mobile by Karen McGrane, now available from A Book Apart. —Ed.

When we talk about how to create products and services for mobile, the conversation tends to focus on design and development challenges. How does our design aesthetic change when we’re dealing with a smaller (or higher-resolution) screen? How do we employ (and teach) new gestural interactions that take advantage of touchscreen capabilities? How (and who) will write the code for all these different platforms—and how will we maintain all of them?

Great questions, every one. But focusing just on the design and development questions leaves out one important subject: how are we going to get our content to render appropriately on mobile devices?

The good news is that the answer to this question will help you, regardless of operating system, device capabilities, or screen resolution. If you take the time to figure out the right way to get your content out there, you’ll have the freedom (and the flexibility) to get it everywhere. You can go back to thinking about the right design and development approaches for each platform, because you’ll already have a reusable base of content to work from.

The bad news is that this isn’t a superficial problem. Solving it isn’t something you can do in isolation, by sandboxing off a subset of your content in a stripped-down mobile website or app. The solution requires you to look closely at your content management system, your editorial workflow, even your organizational structure. You may need different tools, different processes, different ways of communicating.

Don’t despair. There’s even better news at the end of this rainbow. By taking the time now to examine your content and structure it for maximum flexibility and reuse, you’ll be (better) prepared the next time a new gadget rolls around. You’ll have cleared out all the dead wood, by pruning outdated, badly written, and irrelevant content, which means all your users will have a better experience. You’ll have revised and updated your processes and tools for managing and maintaining content, which means all the content you create in every channel—print, desktop, mobile, TV, social—will be more closely governed.

Mobile is not the “lite” version

It looks like you're on a train. Would you like me to show you the insultingly simplified mobile site?

—Cennydd Bowles (http://bkaprt.com/csm/15)

If people want to do something on the internet, they will want to do it using their mobile device. Period.

The boundaries between “desktop tasks” and “mobile tasks” are fluid, driven as much by the device’s convenience as they are by the ease of the task. Have you ever tried to quickly look up a bit of information from your tablet, simply because you’re too lazy to walk over to your computer? Typed in a lengthy email on your BlackBerry while sitting at your desk, temporarily forgetting your keyboard exists? Discovered that the process to book a ticket from your mobile was easier than using the desktop (looking at you, Amtrak!) because all the extra clutter was stripped away?

Have you noticed that the device you choose for a given activity does not necessarily imply your context of use?

People use every device in every location, in every context. They use mobile handsets in restaurants and on the sofa. They use tablets with a focused determination in meetings and in a lazy Sunday morning haze in bed. They use laptops with fat pipes of employer-provided connectivity and with a thin trickle of data siphoned through expensive hotel Wi-Fi. They use desktop workstations on the beach—okay, they really only use traditional desktop machines at desks. You’ve got me on that one.

Knowing the type of device the user is holding doesn’t tell you anything about the user’s intent. Knowing someone’s location doesn’t tell you anything about her goals. You can’t make assumptions about what the user wants to do simply because she has a smaller screen. In fact, all you really know is: she has a smaller screen.

The immobile context

Users have always accessed our content from a variety of screen sizes and resolutions. Data reported by SecureCube shows that in January 2000, the majority of users visited from a browser with an 800×600 resolution, but a significant minority (twenty-nine percent) accessed the site at 1024×768 or higher, with a smaller percentage (eleven percent) viewing the site at 640×480 (http://bkaprt.com/csm/16; fig 1.1). At that time, decisions about how best to present content were seen as design challenges, and developers sought to provide a good reading experience for users at all resolutions, discussing appropriate ways to adjust column widths and screen layouts as content reflowed from smaller to larger screens.

Figure 1.1

Fig 1.1: We have plenty of experience delivering content to a variety of screen resolutions. Why do we assume that mobile screens necessarily indicate a different context?

What you didn’t hear designers talking about was the “640×480 context” and how it differed from the “1024×768 context.” No one tried to intuit which tasks would be more important to users browsing at 800×600, so less important options could be hidden from them. No one assumed that people’s mindset, tasks, and goals would be different, simply because they had a different-sized monitor.

Why do we assume that mobile is any different?

Mobile tasks, mobile content

I recently departed Austin, Texas, traveling with three friends. Since we arrived at the airport a bit early, I wanted to lounge in the comfort of the United Club, away from the teeming masses. I felt it would be rude to abandon my friends to a similar fate outside, and so I wanted to know how many guests I could bring with me to the club.

A simple Google search should clear up this problem. Sure enough, I quickly found a link that seemed promising (fig 1.2).

Figure 1.2

Fig 1.2: Searching for “United Club Membership” shows that the content exists on the desktop site. But because the mobile website redirects the URL, users wind up on the homepage of the mobile site.

Alas, following the link to United Club Membership just took me to the homepage for mobile.united.com. When users search from a mobile device, United automatically redirects links from Google to its mobile website—without checking to see if the content is available on mobile. If the content doesn’t exist on mobile, the user gets unceremoniously dumped on the homepage of the mobile website. Mobile redirects that break search—how is that ever a good user experience?

Sure, there’s a link to the full desktop site, but that too just dumped me on the desktop homepage. I could try to use United’s internal site search, but I’d wind up pinching and zooming my way through several search result screens formatted for the desktop. And honestly: why should I have to? An answer that should take me one tap from the Google search results should not require searching and tapping through several pages on both the mobile and the desktop sites.

I went and asked the representative at the desk. (Correct answer: two guests.)

I don’t bring this up just because I want to shame United for wantonly redirecting links to a mobile URL when the content isn’t available on its mobile website. (That’s a terrible thing to do, but it comes after a long list of other bad things I’d like to shame United Airlines for doing.) No, I use this example to illustrate a common misconception about mobile devices: that they should deliver only task-based functionality, rather than information-seeking content.

Information seeking is a task

Luke Wroblewski, in his book Mobile First, tells us that Southwest Airlines is doing the right thing by focusing only on travel tasks (fig 1.3):

The mobile experience…has a laser-like focus on what customers need and what Southwest does: book travel, check in, check flight status, check miles, and get alerts. No room for anything else. Only what matters most.

Figure 1.3

Fig 1.3: The Southwest Airlines iPhone application only has room for what actually matters…if what matters doesn’t involve looking up information.

Mobile experts and airline app designers don’t get to decide what “actually matters.” What matters is what matters to the user. And that’s just as likely to be finding a piece of information as it is to be completing a task.

Eighty-six percent of smartphone owners have used their phone in the previous month to look up information—whether to solve a problem, settle an argument, get up-to-the minute information such as traffic or sports scores, or to decide whether to visit a business like a restaurant (http://bkaprt.com/csm/27). Don’t believe me? Look at your own search history on your mobile device—you’ve probably tried to answer all sorts of questions by looking up information on your phone.

The Southwest Airlines desktop website includes information about their baggage policies, including policies for checked bags, carry-ons, and pets, as well as lost and found, delayed baggage, and a variety of other traveler information, such as what to do if you lose your ticket, need to rebook, or your flight is overbooked. It even includes information for parents looking to book travel for unaccompanied minors, and how Southwest accommodates disabled flyers and the elderly.

The mobile experience does not. Who are we to say that this content doesn’t actually matter?

It’s fine to optimize the mobile experience for the most common tasks. But that doesn’t mean that you should exclude valuable content.

Mobile is social

Have you ever clicked on a link from Facebook or Twitter on your phone? How about a link someone sent you in an email?

Figure 1.4

Fig 1.4: “No mobile content found. Would you like to visit the desktop version of the site?” asks The Guardian. Can you guess the answer?

Of course you have. Sharing content with our friends and colleagues is one of the bedrock ways we communicate these days. Users don’t distinguish between accessing email, Facebook, Twitter, or other social services on the desktop or on mobile—they choose them fluidly, depending on which device they’re closest to at the time. In fact, as of June 2012, nearly twenty percent of Facebook members use it exclusively on mobile (http://bkaprt.com/csm/28).

If your content isn’t available on mobile—or provides a bad reading experience—you’re missing out on one of the most compelling ways to get people to read it. Is your site littered with icons trying to get people to share your content? If your readers just get an error message when they tap on shared content, all the effort you put into encouraging social sharing is wasted (fig 1.4).

Designing for context

“Context” is the buzzword everyone throws around when talking about mobile. At the South by Southwest Interactive conference in 2011, the panel called “Designing for context” was the number one must-see session, according to .net Magazine (http://bkaprt.com/csm/29).

The dream is that you can tailor your content for the user’s context—location, time of day, social environment, personal preferences. Based on what you know about the user, you can dynamically personalize the experience so it adapts to meet her needs.

Today, we use “designing for the mobile context” as an excuse to make mobile an inferior experience. Businesses want to invest the least possible time and effort into mobile until they can demonstrate return on investment. Designers believe they can guess what subset of information or functionality users want. Everyone argues that they’re designing for the “mobile use case.”

Beware of personalized interfaces

Presuming that the “designer knows best” when choosing how to deliver personalized content or functionality is risky. We’re notoriously bad about predicting what someone will want. Even armed with real data, we’re likely to make incorrect assumptions when we decide to show some things and hide others.

Microsoft Office tried this strategy in the late 1990s. Office 97 offered many new features and enhancements, which made the user interface more complex. Long menus and dense toolbars gave the impression that the interface was “bloated” (http://bkaprt.com/csm/30). (Sound like any desktop websites you know?)

In response, Microsoft developed “personalized menus” and “rafted toolbars” which showed the most popular items first (fig 1.5). Although Microsoft had good data and a powerful algorithm to help determine which items should be presented first, it turned out that users didn’t like being second-guessed. People found it more frustrating to go through a two-stage process, hunting through multiple menus to find what they were looking for. Personalized menus violated one of the core principles of usable design: put the user in control.

Figure 1.5

Fig 1.5: Personalized menus in Office 97 attempted to prioritize only the options Microsoft thought users wanted. They were a failure.

Now imagine that instead of clicking a chevron at the bottom of the menu to expand it, the user has to click a link to “full desktop website” and then hunt around in the navigation while squinting at a tiny screen. If your website’s mobile version only offers a subset of your content, you’re giving your users the same frustrating experience. Only much worse.

You don’t have good data

Microsoft had a ton of data about which options people used most frequently. They developed a complex algorithm to present the default “short” menu based on the items people were most likely to want, based on years of history and research with multiple iterations of their product. And they still made mistakes.

The choices you make about which subset of content you want to deliver probably aren’t backed up by good data. They might not be backed up by any research at all, just a gut feeling about which options you imagine will be most important to the mythical on-the-go user.

Even if you do have analytics data about which content people are looking for on mobile, it’s not likely you’re getting an accurate picture of what people really want. Today’s crippled mobile experiences are inadequate testing grounds for evaluating what people wish they could do on mobile. As Jason Grigsby, Cofounder of CloudFour.com and MobilePortland.com, says:

We cannot predict future behavior from a current experience that sucks (http://bkaprt.com/csm/31).

If your vision for mobile is designing for context, then the first step you need to take is getting all your content onto mobile devices.

All of it? Really?

Really. Your content strategy for mobile should not be to develop a satellite to your desktop site, showing only the subset of content you’ve decided a mobile user will need. That’s not going to work because:

  • People move fluidly between devices, often choosing a mobile device even when they have access to a desktop computer. Don’t assume you can design for “the on-the-go user” because people use their mobile devices anywhere and everywhere.
  • Mobile-only users want and need to look at your content too! Don’t treat them like second-class citizens just because they never or rarely use the desktop. Even if you think of them as “mobile-mostly” users, remember that you don’t get to decide which device they use to access your content. They do.
  • Mobile supports reading content just as well as it supports functional tasks. Don’t pat yourself on the back just because you’ve mobile-ized some key features—there’s more work to do with your content.
  • Context is a cop out. Don’t use context as a rationale to withhold content unless you have real research and data about what users need in a given situation or environment. Unless you have that, you’re going to guess wrong. (And even if you do have that—given the crappy experiences most users get on mobile today, you’ll still probably guess wrong.)

Never force users to go to the desktop website for content they’re seeking on a mobile device. Instead, aim for content parity between your desktop and your mobile experiences—maybe not exactly the same content presented exactly the same way, but essentially the same experience.

It is your mission to get your content out, on whichever platform, in whichever format your audience wants to consume it. Your users get to decide how, when, and where they want to read your content. It is your challenge and your responsibility to deliver a good experience to them.

0
Your rating: None

A handful of the many canvases your site will adorn. Photo: Ariel Zambelich/Wired.com

When most of us see the phrase responsive design we think of Ethan Marcotte’s original definition — fluid grids, flexible images and media queries. While those are the essential elements of responsive design, developer Jeremy Keith says that designing responsively also means approaching your designs with a different mindset.

There’s a video (regrettably not embeddable) of Keith’s talk on “responsive enhancement” at the recent Webdagene conference in Oslo where he argues that, to design responsively, we need to drop our “consensual hallucination” about what a website is. Much as we might like it to be, a website is not a fixed canvas. It’s not the 600px-wide canvas we used in the 1990s, nor is it the 960px-wide canvas that’s de rigueur today. A website has no width and never has.

Part of the reason responsive design sometimes feels foreign is that legacy of thinking that websites are things with widths. As Keith says “we didn’t embrace the inherent flexibility of the web, we didn’t see it as a feature, we saw it as a bug.” And so we built fixed-width sites for what was and still is an inherently flexible medium.

Keith’s talk gives a great overview of why responsive design is actually what the web has always been and how you can embrace that inherent flexibility in the web. It’s a must-watch for anyone interested in building great websites.

0
Your rating: None