There are many ways to configure a website for
all screens. Factors to think about include the cost, time to build, your
available human resources and infrastructure, and the needs of your customers.
Whatever configuration you choose, as an underlying principle we
strongly recommend that you serve all your sites from a single domain, like example.com. In particular,
if your desktop site is hosted on example.com, don’t put your
mobile site on a separate domain, like a.com/example.
Stay with a single domain and you’ll build brand and URL equity
with your users. With that principle in mind, let’s look at the three basic
ways you can build a mobile-friendly website: responsive design, dynamic serving, and a fully separate mobile
site.
Responsive Design
Responsive web design (RWD for short) is a clever design
technique that uses a single HTML code base for all platforms. That is, all
viewing devices read from the same code on the same URL. The content
resizes itself to fit the screen being used, based on pre-defined breakpoints
and fluid grids.
RWD requires solid up-front planning. Costs can be high at
first, but once the device-specific strategy is set, maintenance can be less
resource-intensive.
Pros:
·
One
URL for all content. Using a single
URL for a piece of content makes it easier for your users to interact with,
share, and link to your content. It’s also easier for search engines to
discover and index your content.
·
A
streamlined user experience. Presentation of all content is customized, and device-specific
features can still be used.
·
Flexible
orientation. RWD naturally
allows for landscape or portrait device orientation changes by users.
·
No
redirects. Load time is
reduced and performance increased.
Cons:
·
Careful
planning required. Since all HTML
is shared here, careful planning is a must to develop a truly custom and robust
experience with optimal performance for each device and user.
Common mistakes to avoid:
·
Data
bloat. Don’t let mobile
users download full-size images meant for big screens and fast speeds. Try to
reduce HTTP requests and minimize CSS and JavaScript. Load visible content
first and defer everything else.
Who it’s for:
Businesses that are focused on offering a
consistent experience and can plan holistically for all devices with a single
web team. (Starbucks.com, BostonGlobe.com and Time.com all use this approach.)
RWD can be expanded to fit new devices as they emerge, and the single URL is
good for linking and sharing articles without confusion or redirects.
Dynamic Serving
In this method, the web server detects the type of device a
visitor is using, then presents a custom page designed just for that device.
Custom pages can be designed for any device type, from mobile phones and
tablets to smart TVs.
Pros:
·
A
custom user experience. Each
user gets content and layout created just for their device.
·
Easier
changes. Adjust content
or layout for one screen size without having to touch other versions.
·
Faster
loading. Your team can
streamline content for optimal load times on each device.
·
Single
URL. As with
Responsive Design, Dynamic Serving keeps all your users on a single URL.
Cons:
·
Content
forking. Multiple custom
pages mean multiple sets of the same content. Unless you have a sophisticated
CMS in place, keeping content up to date on all device-specific pages can be
challenging.
Common mistakes:
·
Faulty
device detection. Your servers
will need to run scripts to recognize all available devices. This step prevents
problems like the server sending a mobile-optimized site to tablet users. Your
webmaster will need to keep the directory up-to-date and running smoothly to
avoid bad detection or gaps in service. Another common mistake is that the
server assumes a device orientation, most commonly portrait, but the user may
be holding the device in a different orientation (ie landscape).
·
Changing
experiences: Users will be
confused if you have multiple sites and they appear radically different. While
it’s important to customize for each screen size, your brand look and feel
should be recognizable in all formats.
Who it’s for:
Dynamic serving is a resource-intensive
solution for companies that make frequent changes to their website, and who
often need to adjust display for one device, such as tweaking only their mobile
site. A capable IT staff (or vendor) is a must to manage the different and
possibly complex sets of website code required.
A Separate Mobile
Site
A third option is to simply create a mobile site that’s separate
from your original desktop site. Your system detects mobile visitors and
redirects them to your mobile-optimized site (often using a sub-domain like
m.yourname.com).
Only mobile users will see the separate mobile site. Users of
tablets, Web-enabled TVs or other devices will still see your original desktop
site.
Pros:
·
A
custom user experience. This
gives you the most freedom to create a separate mobile site that is designed
only for mobile users.
·
Easier
changes. Content or
design changes can be limited to the mobile version of the site, with no effect
on other devices.
Cons:
·
Multiple
URLs. Sharing a web
page requires careful redirects and integration between your mobile and
non-mobile sites. Redirects also lead to longer page load times.
·
Content
forking. Keeping two
different sets of content can make data management more complex.
Common mistakes:
·
Faulty
redirects. When a mobile
user lands on a deep desktop page, make sure they aren’t redirected to your
generic mobile homepage. Also important: avoid smartphone-only errors, where a
desktop URL redirects to a non-existent mobile URL.
·
Missing
annotations. The two-way
(“bidirectional”) annotation helps Googlebot discover your content and helps
our algorithms understand the relationship between your desktop and mobile
pages and treat them correctly.
·
Inconsistent
user experience: People who look
at your smartphone site should recognize it as the same business they see on
your desktop site. This prevents confusion and a bad overall user experience.
Who it’s for:
Businesses that for any reason need to manage
their mobile site independently. For instance, some businesses may want to use
a different vendor for mobile, or may want a mobile structure that simply
wouldn’t be possible with RWD. Since setup is relatively easy and can be quite
cost-effective, a separate mobile site can be good for small businesses with
more basic site needs.
References:
- http://www.google.com/think/multiscreen/start.html
- http://www.feedthebot.com/mobile/
- https://developers.google.com/webmasters/mobile-sites/
- http://www.foraker.com/choosing-between-responsive-web-design-and-a-separate-mobile-site-to-improve-mobile-visitors%E2%80%99-experience/
- http://mob.is.it/blog/why-separate-mobile-site-is-usually-better-than-responsive-design
