Three Ways to Approach the Mobile Web
by Wes Button
When developing a new website with mobile we take into consideration the various modern technologies we can leverage to serve the site to mobile devices. There are three ways we can approach creating a mobile website, all with various strengths and weaknesses.
Responsive Web Design
Responsive web design (RWD) is a method of designing and developing the front end of a site to allow a site to naturally scale down and reconfigure itself for smaller screen sizes, from a maximized widescreen desktop browser, to a tablet, and down to a smartphone. RWD utilizes CSS (cascading stylesheet) and media queries to apply a different set of design rules based on a user’s screen size: such as the width of an image, the arrangement of the navigation, and the size of the page’s text. Using CSS, you can even hide and show elements only on mobile browsers (such as a Call Us button). Because you are serving the exact same site to mobile and desktop, just styled differently, you don’t even have to think about duplicate content or canonical URL issues for your mobile site.
Responsive web design has a few negatives. First, the entire concept is based on an alternate stylesheet, and although you can hide and display elements using this stylesheet, those elements are always loaded, so RWD is best left to sites that have a minimalist design approach (and even then, they tend to load slower on mobile devices than a purely mobile site). Also, the continued development of RWD can take much longer, with every design choice affecting both desktop and mobile, and every future change to the site has to take into consideration how that change will ‘degrade’ to mobile screen sizes.
Google recommends responsive web design, but that doesn’t mean it rewards it with higher rankings or conversely it doesn’t penalize properly configured server-side solutions. Google recommends responsive web design mainly because using a single url for a web page is a better user experience all around (this can also be achieved with a server side solution) and it requires less resources for Google’s web crawlers (can be achieved with a server side solution).
Some examples of great responsive designs:
Dedicated Mobile Site
If you already have a mobile site set up on a sub domain, to avoid duplicate content issues it is important to use the rel=”alternate” tag to identify to Google that this is a mobile version of this page. You should also use a rel=canonical on the mobile url.
Examples of dedicated mobile sites:
The Best of Both? Responsive Design + Server Side Components
Combining responsive design and server-side scripting (RESS) allows a web developer to serve content for mobile, while styling it using a responsive stylesheet. This loads only what you need for your mobile site instead of simply hiding it CSS via the responsive stylesheet, making for a more consistent style between the two sites (like RWD) and an optimized experience for mobile (like a dedicated mobile site).
Although this may be the best sounding solution, as web technologies, wireless connections, and smartphone speeds improve, we still see an eventual shift to a pure responsive process with only light use of scripting on the server side, if needed at all. This appears to be what Google is banking on. Additionally, developing a server-side script alongside a responsive stylesheet takes the most development time of the three options.
Amazon is a great example of a great RESS mobile site.
Which one is best?
There is no one best solution for everyone. Your businesses is unique and the approach you take to your mobile site users should be unique as well. If you’re site is fairly simple and doesn’t have a lot of bells and whistles, using a responsive design can be a great way to go. A dedicated mobile site might be better when you want a fast loading site that is optimized for the mobile user and is (usually) a little easier on the budget.
A good web development company won’t push one solution or the other. They will recommend the right solution for you. Keep in mind that the worst solution is not having a mobile optimized experience at all or a site that uses flash that doesn’t render on most mobile devices.