In his There Is No Mobile Web presentation at Breaking Development in Nashville TN, Jeremy Keith outlined why Web designers and developers need to embrace the flexibility inherent in the Web especially in today’s multi-device world. Here are my notes from his talk:
- There isn’t a second Web specifically for mobile devices. It’s all the same Web just as accessed by mobile devices. We use the term “mobile Web” as a shortcut for this concept. But even the words we use can influence our thinking and frame our discussions.
- When we use the term “mobile Web” it may lead us to separate things instead of aiming for universal accessibility. We should all aim for universal access as the default and only diverge when absolutely necessary.
Giving up Control
- But designing something for access on every single device is hard.
- Originating from print, the Grid system is a set of guidelines (or rules) for making things beautiful on a page by applying structured order. This provides a certain level of control for the designer.
- On the Web, we started with tables and spacer gifts for layout then moved to CSS in order to impose layout control. This effort to control things was a carryover from print.
- But the Web browser is not a known entity. We don’t know about the speed of the user’s connection, the Javascript support, available plugins, or size of the browser window. These are known unknowns.
- How did designers work with this? We had “consensual hallucinations” about how much room we actually had to design with. This provided a set of fixed constraints to which we could apply hundreds of years of print design learning.
- The first step to embracing the Web as its own medium is thinking flexibly. The default, we should build Web sites to be flexible. But many Web sites have been built with fixed layouts/assumed control instead.
Embrace the Medium
- The first thing people do when a new medium comes around is ape a previous medium. Instead embrace all the things that make a medium unique.
- Why haven’t we embraced the Web as a unique medium? Our tools (Dreamweaver, Photoshop, etc.) force us to pick constraints up front like canvas size. Instead we need to work in the browser so we can show clients how things will actually work.
- The rise of tablets and mobile devices highlights exactly how much we never knew about the browsers we serve content to.
- Silo-ing experiences for specific devices is another example of trying to maintain control. It assumes we can leave our desktop sites as they are and impose a different type of control on mobile sites rather than embracing flexibility.
- Concentrating on a single class of devices simply doesn’t scale. As more devices come out, you won’t be able to support all the unique devices that come out. It’s simply not scalable.
- This transition to Responsive Web Design has had the same reaction as the move from tables to CSS. People are comfortable with the techniques already use.
Working Content First
- Almost every site recently created is a desktop-optimized site. Applying media queries to existing desktop sites does not optimize mobile experiences.
- Mobile First is a great way to design. It really forces you to clarify. What does a user need here? If its content, put it front and center. If it’s a task make it easy. Beginning this way is a great way to focus.
- Mobile First really boils down to content first. What is it the customer need first? Not just copy but tasks as well.
- But instead of focusing on content, we’ve focused on layout and added content later.
- Begin with your content, lay on your presentation (CSS), then behavior (Javascript). This is building with progressive enhancement. This is what building for the Web is about: layered development based on what devices can support. It’s because of progressive enhancement that we can apply a content first methodology.
- When designing a site, consider the pieces not the container. Start from small pieces working out, rather than from a layout working in.
- Breakpoints should not be dictated by devices, but by content. Let the content decide when to expand and when adjust your designs.
- When you expand your designs to larger screens, start thinking –what would be nice to have. How can things be included to enhance the experience? You can use conditional loading to include more elements as they makes sense on larger screens. Think of these as “nice to have” enhancements.
But What About...?
- Web apps? There really isn’t a great definition of what a Web application is. In fact, many people use the term “Web application” as a get out of jail free card to avoid having to apply progressive enhancement to their site. The real answer is “it depends”. Each solution is a bit different.
- Context? When thinking about content first, the question of context always comes up. We can’t know what people want when they come to our site. The fact they come from a different class of device doesn’t mean they have a specific goal. It would be great to know why people are coming to your site. But we can’t.
- The things that matter on mobile also matter on desktop. Performance applies to all devices. It is not just for mobile users.
- Content First and Responsive Web Design put readers in control. Instead of forcing people into a specific experience.
- There is no mobile Web, nor desktop Web. It is just the Web. Start with the content and meet people halfway.