How many times a day do you hear a cell phone ring? Mobile devices are no longer our future, they are our present, ingrained in almost every facet of our lives, and getting more important every day.
There are thousands of articles and blogs about the mobile web, and I’m very thankful for that. It allows me to share an aspect of the mobile web that’s seldom discussed: integrating mobile browsing as a core concept of new site development rather than retroactively transforming a mobile site out of a desktop site.
Many people think of a “mobile web site” in terms of “screen size,” and deduce that if they can pop out designs to fit, all will be well on the mobile web. The challenges are far greater than that:
- Limited RAM (memory) and disk/drive space.
- Lean and not so mean operating system, slower than full computers.
- Can be rendered in portrait or landscape mode.
- No mouse-over events.
- New windows/tabs are often impossible.
- Heavy web sites can cost your users money: mobile device bandwidth is accessed over the subscriber’s phone service and heavy web sites can result in bandwidth surcharges.
In respect to the mobile web, there are two main schools of thought: build a separate site, or retroactively integrate responsive design.
The Alternate Mobile Site: Do It Once, Then Do It Over
For existing web sites, sometimes the only option is to build the mobile site from it as a physically separate second site. This is probably the least efficient and most difficult to maintain approach to the problem, likely to create difficulties throughout the life of the web site. Content changes will need to be duplicated on the mobile site, over and over again. It’s also harder to get clients to “let go” of the website design they’ve grown to love for what they see on their mobile device.
Responsive Design is Not Mobile Web Duct Tape
The distinction between the terms Responsive Design and Adaptive Design is pretty confusing.1 Responsive Design refers to the engineering of a layout via CSS and coding in such a way that it will fit on any viewport regardless of size using fluid grids, assigning fluid sizing to images, and CSS media queries to apply styling for specific devices.2 A single layout is used that morphs based on the device reading it.
Responsive design is the ultimate answer to mobile web site development, but when applied retroactively, it generally begins to look more like adaptive design than responsive design, adjusting the same desktop content to fit mobile devices. A web site that is truly mobile-ready will also address adaptive output, in which the content sent to the browser is appropriate for the device.
Let Your Developers Help (it’s Why You’re Paying Them)
If mobile compatibility is a core directive of your project development, your developers can leverage that directive to optimize the user’s experience regardless of device as the project is being built. Rather than “hide” non-mobile content, they can develop a site in such a way that it outputs the mobile content by default, adding features and content for desktop devices when detected.
The mobile web returns us to a time when the web was young (I’m humming Auld Lang Syne as I type,) urging us to develop to the lowest common denominator, the smallest subset of information, then enhance it for devices that can handle the full glory of our creations. This concept is often lost in today’s unlimited development environment. Targeting mobile devices first will prepare you and your developers for a clear path of responsive design, and the reduced data set for mobile will help you focus on the web site’s primary objectives.
1 Like most Internet buzz words, even these meanings are vague and subject to interpretation. There are many arguments and discussions around their differences.
2 Originally coined by Ethan Marcotte, April 2010: Responsive Web Design