I’m speaking this afternoon at the Snow*Mobile conference in Madison, Wisconsin, on Responsive Design in the Real World.

In conjunction with the conference, I was asked to write an article on responsive design for Technori:

Responsive Web Design: How to Make Websites That Look Great on Any Screen

As mobile devices, tablets, and monitors become available in more and more sizes, and as the use of mobile devices becomes even more prevalent, we need to make sure that websites are designed to display properly on all screen sizes.

Responsive design will allow you to make sure that everyone is able to access your website, no matter what type and size of device they are using.

I am very excited to announce that I’m writing a book on responsive web design. It’s going to be published by O’Reilly in mid-2013.

Responsive design is still relatively new, and it’s something we all need to be talking about. There are a few books out so far, including Ethan Marcotte’s seminal Responsive Web Design, but all those books are targeted towards developers and designers who are already very familiar with HTML and CSS.

But the process of making or maintaining a website involves many other roles: UX designers, content strategists, web managers, etc. Unfortunately there are not a lot of resources yet for all these other people who are involved in creating responsive sites, and who need information that is a bit less… daunting.

My book is going to explain how to build a responsive website, starting at the very beginning. It will explain how all the code works, piece by piece, in a way that’s straightforward and easy to understand. And it will incorporate standards, accessibility, and usability into each step of the process, because those are all integral to a successful website.

The focus will be on building small-screen first responsive sites from scratch, not on converting existing sites or creating sites from static, pixel-perfect comps. We need to stop thinking of responsive design as an add-on to web design, and instead think of it as simply a way to build websites.

If you’ve seen me speak lately, you know that I am incredibly excited about responsive design. This is a great time to be a web designer, because the way we make websites is changing, and definitely for the better. Responsive design lets us create websites that work on any of the incredible range of devices that are now available — and also on future devices that don’t even exist yet. That just blows my mind.

I’m thrilled to have this opportunity to share my knowledge of responsive design, and to be an O’Reilly author.

So you’re probably worried that you’ll forget all about my book by the time it comes out. Stop worrying, you can sign up for my email list and I’ll let you know when it’s available. Otherwise follow me on Twitter or keep an eye out here for updates.

One of the difficult things about designing websites is that we often don’t know how users are using our websites.

Our analytics can tell us what path someone took through the site, but not why they made choices about which links to click or what actions to take. Usability testing can give us more of the “why,” but we often don’t have resources to do much testing, or even any at all.

Analytics can also tell us what the user’s device is like — the size of the screen, the operating system — but we have no idea what’s happening beyond the screen, while users are experiencing the website. Is that 1280 pixel monitor sitting in an office cubicle in a noisy room, or on someone’s desk at home? Is the user pulling out her mobile phone as she’s walking down the street, late for a meeting? Or is she sitting on her sofa at home, comfortable, not in a hurry, and wanting to experience the entire web on that tiny screen?

In the UX world, we talk about this a lot, about not making assumptions, but not everybody seems to get it.

At a Meetup last night, I was talking to a developer from an agency who provides a CMS to their clients. He told me that for their product, separate mobile sites are better than one responsive site, because then they can make sure everyone using the CMS gets the correct experience for their device.

“iPad users are all tech-savvy,” he told me, “so the site for iPad users can be —” And I have a bad habit of interrupting people when I’m disturbed by what they’re telling me, so I did:

“Why do you think that?” I asked him. “What makes you think all iPad users are tech-savvy?”

“Well, only someone who is tech-savvy would even buy an iPad,” he answered. “If you’re not tech-savvy, you would just have a regular computer.”

I repeated my previous question. “Why do you think that?”

He looked at me like I’m crazy. “Because it’s true.”

Well. No, it’s not.

“My parents have an iPad,” I told him. “They are as far from tech-savvy as you can get.” Pretty much everyone has an iPad these days, it seems. I could name at least a couple dozen people I know personally who have iPads and who aren’t web/tech folks, and who certainly aren’t tech-savvy. That’s anecdotal, sure, but it does negate the “all.”

Here’s a little trick: Any time you’re using the word “all” when describing users, you’re almost definitely wrong.

We can certainly make generalizations from the information that’s available to us, and that’s okay, if we do it carefully. But it’s important to remember that there are always exceptions, and you can’t just pretend that those other users don’t exist.

Not all users of your website/app are tech-savvy. Perhaps most of them are, but does the interface make sense to everyone else?

Not all users who are viewing your site on a desktop computer have a fast internet connection. It’s likely most of them do, but how slow is your site going to be for someone who’s using dial-up? It’s certainly a low percentage of users, but there are still people in the United States who use dial-up either because of cost, or because they live in a rural area where broadband isn’t available.

Not all users who are viewing your website on a screen can see what you see. About 4% of people are colorblind. Does all the functionality of your website still make sense, or can someone who is colorblind not understand any of your infographics, charts, and graphics because the key information is labelled only using colors? (Not to mention the users who are have screen reader software, and can’t see your website at all.)

That said, it’s not always possible to accommodate everyone. The biggest issue is resources.

It may be cheaper in the short term to produce an app for iOS and Android, rather than a responsive web app that could be used on any device. If you are okay with leaving people out, then there is nothing wrong with making that choice as a business decision. But make it as a conscious choice, rather than just as an assumption that everybody is using iOS or Android. They’re not.

If you are able to get a better understanding of your users, it can have a big impact on design decisions. But if you don’t have the ability to learn more about your actual users, at least make the only assumption that is always correct: Not all users are the same.

This is a summary of my session on HTML5 accessibility at Accessibility Camp Toronto (I didn’t use slides for my talk, so you’re getting this instead).

Accessibility is not a niche area of web design: everybody who works on the web needs to be interested in accessibility. You should try to make your websites as accessible as possible. For some of you it’s a legal obligation, but for everyone else it’s just the right thing to do.

What Is Accessibility

Accessibility for the web means making sure that our web pages and applications are available to everyone, including people with disabilities. Many but not all users with disabilities use assistive devices or software to browse the web. This includes on mobile devices as well as regular desktop computers.

More »