BlogmyQuery – BMQ

It’s easy to get frustrated by the pace of change in mobile. Companies drag their feet about actually delivering content and services optimized for mobile devices, commissioning yet more research to “prove� the need for a mobile strategy. Meanwhile, we tap away at our ever-more-capable smartphones and tablets, pinching and zooming our way through sites designed for a much larger screen.

Now we can find inspiration for taking quick action in mobile from an unexpected source: the government. President Obama has ordered executive branch federal agencies to make at least two key services available on mobile devices over the next year.

The initiative to optimize content for mobile is part of the larger Digital Government strategy aimed at building a twenty-first-century platform to better serve the American people. This strategy outlines a sweeping vision for how to deliver government services more efficiently and effectively, and it covers everything from how government agencies can share technology and resources more effectively to how to maintain the privacy and security of sensitive government data.

But running through the entire Digital Government strategy is a consistent thread: The government needs to communicate with and deliver services for its citizens on whatever devices they use to access the web.

If it’s true for the government, it’s probably true for your company, too. Your customers are using mobile devices to access your content—you need a strategy to communicate with them where they are.

The latest personal computing revolution

Nearly everyone is carrying smart devices in their pockets that have incredible computing power. It’s creating a dynamic, both inside the walls of government and outside, where citizens are really demanding more.

—Steven VanRoekel, U.S. chief information officer

Imagine you don’t have a broadband internet connection at home. Your employer could see how many hours you waste looking up elementary school classmates on Facebook. Your ridiculous Google searches for things like “What is the probability of being killed by a Pop-Tart?� and “What does rhino milk taste like?� and “Ned Flanders shirtless or nude�—all visible to the eyes of prying co-workers as they walk past your desk. All your por… okay, let’s not go there.

Sure, we all indulge in embarrassing behavior on the internet, best left to the privacy of our own homes. But don’t forget about all the perfectly normal information we want to look up online—research we might not want our employers, coworkers, or strangers in a public computer lab to know about. Looking for a new job. Learning more about a medical condition. Checking a bank statement. Even shopping for Christmas presents.

If you’re like me, you’ve enjoyed the convenience of having a home internet connection for almost twenty years. It’s easy to lose sight of the fact that for many people, access to the internet is a luxury.

Thirty-five percent of Americans have no internet access at home. More than a third of Americans don’t have easy access to personal medical information, tools for financial planning, and animated GIFs of surprised cats.

Race, income, and education level all influence whether people will have a home broadband connection. Roughly 50 percent of both Black Americans and Hispanic Americans have no broadband connection at home. Nearly 60 percent of Americans making less than $30,000 per year don’t have a broadband connection at home. And Americans who don’t have a high school diploma? A whopping 88 percent of them lack a broadband connection at home.¹ The digital divide is real.

But as of early 2012, 88 percent of American adults reported they do have a mobile phone.² As of July, 55 percent of those Americans who own a mobile phone have a smartphone—and two thirds of people who had acquired a new phone in the previous three months chose to get a smartphone.³

As more and more people acquire smartphones, many of those who don’t currently have access to the internet will suddenly have it in the palm of their hands. A growing number of people who cannot afford to pay for both mobile phone and broadband internet access pick one device—the phone.

The mobile-mostly user

Mobile was the final front in the access revolution. It has erased the digital divide. A mobile device is the internet for many people.

—Susannah Fox, Pew Research Center

The stories about how mobile computing has changed human behavior often emphasize the developing world. Billions of people will only ever connect to the internet from a mobile phone. That development may seem positive and exciting, but remote. We assume that a “mobile-only� user is as foreign to us as a villager in Africa, in India, in China.

We’re wrong.

A large and growing minority of internet users in the U.S. are mobile only. As of June 2012, 31 percent of Americans who access the internet from a mobile device say that’s the way they always or mostly go online—they rarely or never use a desktop or laptop computer.⁴ Most tellingly, people who are less likely to have a broadband connection at home are more likely to rely solely or mostly on their mobile device for internet access:

• 51 percent of Black Americans
• 42 percent of Hispanic Americans
• 43 percent of Americans earning less than $30,000 per year
• 39 percent of Americans with a high school or lower education

Even some populations who do have access to a broadband connection and a full-size computer prefer to browse the internet on their phones. Do you want to communicate with people in the coveted 18–29 demographic? Good luck pulling them away from their smartphones. A whopping 45 percent say most of their internet browsing is on their phones.

By 2015, more Americans will access the internet through mobile devices than through desktop computers, according to a prediction by International Data Corporation. Some of these people may still have access to the desktop web, but, for reasons of context, ease, or sheer laziness, will choose their mobile first. For others, there will be no other way to view your content.

For this growing population, if your content doesn’t exist on the mobile screen, it doesn’t exist at all.

It’s never too early for content strategy

Will your organization be ready? Are you moving right now to develop a content strategy for mobile?

Or are you telling yourself that mobile is a blip, a grace note, a mere satellite to the larger desktop website? Do you think that offering a full set of content on mobile is a “nice-to-have,� something to think about only after investing in yet another redesign of the “real� website?

Delivering content on mobile isn’t an afterthought. It’s a requirement. It isn’t a luxury. It’s a necessity.

Think of any piece of information people may want to access on the internet. They will need to access it on a device that isn’t a desktop computer. Do people want to look it up? They’ll want to look it up on mobile. Do people need to search for it? They’ll want to search for it on mobile. Do people want to read it, deeply and fully? They’ll expect to read it on mobile. Do they need to fill it out, document it, and enter it into the system? They’ll need to do it on mobile.

This goes double for any organization that needs to reach people outside mainstream desktop users. Government agencies have a civic responsibility to deliver content to all citizens, which means providing it to them on mobile. Organizations seeking to deliver public health messages to the most at-risk populations won’t reach them—unless that content is available on mobile. Are you an equal-opportunity employer? Not unless you’re delivering your content where African American and Hispanic users can find it. You can’t assume all people in these groups will take the extra step to go find your desktop website.

You need to bring it to where they are. Which is mobile.

How to do it

The United States’ Digital Government strategy outlines a customer-centric approach to optimizing content for mobile. Your organization might not need to take a page from the government procurement handbook, but the roadmap for getting government information and services onto mobile might help you get your content out there, too.

A few highlights from the U.S. government’s approach that you should consider for your organization:

Manage structured content

Today, 57 percent of domains under development by American federal agencies are not being built with a CMS.⁵ As a result, managing and updating content is a cumbersome and difficult process. Content is locked up in static web pages (or worse, in printed documents), which makes it difficult or impossible to move content to a new platform.

The government encourages agencies to explore open-source CMS tools—and to model their content, turning unstructured pages into structured data with appropriate metadata attached.

Create presentation-independent content

Instead of focusing on the final delivery and presentation of the information—whether publishing web pages, mobile applications, or brochures—government agencies now are encouraged to take an “information-centric� approach. This means separating content from presentation, and instead describing the content more fully with a complete taxonomy and authoritative metadata, so the same content can be reused in a variety of contexts.

Treat content as a service

Making government content and data available through APIs increases the value of that data. When the government made GPS and weather data available to the public, it fueled multibillion-dollar industries.

By structuring their content and data, then treating it as a service that can be accessed via an API, the government can make content available to more people and more devices—while maintaining security and control over confidential information.

You can do it. Start now.

The U.S. government has recognized that their goal is not to publish brochures, handbooks, or binders. Their goal is not to publish web pages, either. Their goal isn’t even to publish apps. Their goal is to keep American citizens informed.

The government’s challenge and responsibility is making information available in whatever format American citizens want to consume it. We get to decide what device we want to use—the government can’t impose that on us.

The same is true for your organization. You already have customers who only access your content from their mobile device—and that number will only grow. If your web content isn’t fully optimized for mobile, you’re invisible to a large and growing subset of Americans.

It’s not too late, but the time to start is now. Develop a roadmap and put a strategy in place to start publishing your content on mobile devices.

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.

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).

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.

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?

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.

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.

Better browser support has CSS experiments become more popular these days. My personal favorite up until today was Paperfold CSS. Of course we also saw Meny and some other more playful approaches. Makisu is a brand-new concept for dropdown navigation menus realized by the use of CSS 3D transforms. I have seldom seen such an impressing result. Sorry Paperfold CSS, I leave you for Makisu...

After endless suplications from the design community Daniel Bruce finally finished his update of the Entypo Glyph Set — a free set of universal 284 carefully crafted pictograms for regular design projects. The icons are available as EPS, PDF and Photoshop PSD files as well as desktop typefaces (TrueType, OpenType) and Web fonts.

Download The Set For Free!

This set contains a large collection of glyphs for all occasions and uses — common pictograms that shouldn’t be missing in anybody’s arsenal. Each glyph was drawn and optimized to make sure that it fits the overall style of the suite. Overall, the set contains 284 pictograms. You can use this glyph set freely for commercial and personal projects.

The freebie is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported license. You are free to distribute, transform, fiddle with and build them into your work, even commercially. However, please always credit the original designer of the set (in this case, Daniel Bruce). The Social Extension glyphs are subject to the trademark and copyright laws of their respective companies.

• large preview (.jpg).
• large preview of social glyphs (.jpg).
• download the whole set for free (.zip, 10.3 Mb).
• download the whole set from the designer’s site (the archive is a .dmg-file)

Behind The Design

As always, here are some insights from the designer:

“The first Version was released in February 2012 and had around 120 glyphs. Actually, the only reason why I designed it was that I myself needed a well-designed pictogram suite for my own projects. I also wanted a suite with a more illustrated style than the ones available out there. So I started with the 20-30 glyphs that I needed at the time — ending up with 120 glyphs. And since I already had done the work, it was an obvious choice to release them free to the Web design community we all are a part of. Let’s say it was my chance to give something back.

So now — 7 months and 83.000 downloads later — it was time for an update. During that time, many people asked for new glyphs that they felt should be a part of the suite. This, together with my own ever-expanding need for pictograms, has led to Entypo 2 with over 280 glyphs.

The update has brought:

• Over 150 new glyphs
• Improved design of many of the old icons
• A new social media extension
• Improved hinting

When selecting what social media services should go into the Entypo Social, it was important for me to include services from non-Western societies as well. That’s why Entypo is the first suite where you can find pictograms for QQ, Renren, Sina Weibo, Mixi and VK. And true to the phrase “carefully crafted” I haven’t just copy-pasted the logos of all services into the suite. I have actually redrawn most of them so they are optimized for a size of 20×20 pix at 72 dpi.

The hardest pictogram to draw was strangely enough the key glyph. It sounds pretty straightforward, but getting the perfect shape of a modern key that would go well with the rest of the suite took me quite some time.

My favorite pictogram is the trash can. It has a very distinct look to it and sets it apart from all other icon fonts. The trash can is also one of those pictograms that have depth. You might notice that Entypo is a mix of flat glyphs and ones with a bit of perspective.

— Daniel Bruce

Thanks, Daniel! We sincerely appreciate your time and efforts! You can follow Daniel on Twitter and on Dribbble.

(jc)

---

© Smashing Editorial for Smashing Magazine, 2012.

Complex websites would not work well without JavaScript. Often there are several scripts residing in the head of your HTML document. The more you embed, the slower your website, potentially. Head.js is a JavaScript tool that calls itself the only script you need. We have put it to the test and found out that Head.js can really boost the performance on websites with several scripts. The more scripts you call in the head the higher the effect Head.js can provide.