As more people take to their smart phones and tablets to browse the web, making sure your website is accessible on these devices is essential. We'll help you to understand how visitors interact with your business online so that you can focus on better fulfilling their needs. Whether you need a standalone mobile website or a responsive web design, META can help.
supports Smartphone-optimized sites in three configurations.
These approaches include responsive design (Google's recommended configuration), standalone mobile sites,
and dynamic serving. The pros and cons of these mobile approaches as well as device support considerations and flexible layouts
are discussed in more detail below:
- Responsive Web Design
- Standalone Mobile Sites
- Dynamic Serving
- Mobile Device Support
- Flexible Layouts
Responsive Web Design (RWD)
Responsive design is a web design and development technique used to create websites that react to the size of a user's screen. In simple terms, the same HTML code is delivered regardless of the device being used to access your site.
META advocate the use of responsive web design because it offers the following business benefits:
- You'll save time and cost on mobile development - a primary benefit of adopting a responsive design is that it takes less time than creating an additional stand-alone mobile site, which has been the traditional approach
- Maintenance of your website will cost you less - it's much easier and less time consuming to manage and maintain a single site
- You'll be able to increase your reach to tablet and mobile audiences without the need for separate site - traditionally users may have been re-directed to a device specific site (e.g. mobile)
- Your website will use a single URL making it easier for your users to interact with, share, and link to your content
- A single URL for your website content will help you to avoid the potential pitfalls of duplicate content which may arise with a separate mobile site
- You won't need to redirect your users to the “device-optimized view”. This should reduce loading times and make your website faster - an important consideration given that Google now use page load speed as a ranking factor
- You'll save resources for both your site and Google's crawlers. Crawling of your pages will also be more efficient as Googlebot user agents will only need to crawl your pages once. Any crawling improvements could actually indirectly lead to more of your site's content being indexed which is a good thing
Standalone Mobile Sites
Traditionally, a separate mobile site was the only alternative to a desktop website when it came to displaying pages optimised for smaller screens. The use of a standalone mobile site feels a little old hat these days with the advent of responsive design, although it may still be a viable option for your business depending on your circumstances.
A Smartphone site is essentially a copy of your desktop website that is delivered following some form of mobile device detection. The server that your website is hosted on then does the work to deliver optimised pages that are smaller and easier to navigate on mobile screens.
Usability guru Jakob Nielson is an advocate of the separate mobile site solution. He claims that
good mobile user experience requires a different design than what's needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work. With this in mind, a separate mobile site could be the correct approach.
That said, there are some drawbacks to standalone mobile sites, the main being problems that can arise if the technical implementation of your mobile site (m.example.com) as an alternate to your desktop site (www.example.com) is configured incorrectly. In worst case scenarios, Google may treat your related desktop and mobile sites as separate entities leading to both desktop and mobile URLs being shown in desktop search results. This can negatively impact your search engine rankings and result in duplicate content issues.
For some businesses and ecommerce retailers, a separate mobile site could be the right option for the following reasons:
- A complete responsive redesign is deemed too expensive
- Content can be tailored based on the specific user intent (mobile users search differently to desktop users and are more likely to type shorter more local based keywords and search phrases)
- Can be a cost effective alternative to a full responsive redesign when adapting the code of an existing site proves difficult or impractical
- Device detection techniques can give more flexibility as to what content is displayed to the user
- A standalone Smartphone site doesn't require a “mobile first thinking” approach for your desktop site
- You'll be able to keep your existing desktop site exactly how it is
Dynamically Served Content
Dynamic serving of different HTML content on the same URL can get complicated rather quickly. This approach relies on detecting user agents to determine what content to serve to which devices.
If you decide to take this approach to mobile site content, you should ensure that you utilise the Vary HTTP header. This will give Googlebot a hint that different content is being served for Smartphone's and signal their crawlers to discover your unique mobile content.
Whilst we wouldn't recommend this approach (there area better options available discussed above), Google Developers have documented
dynamically serving different HTML content on the same URL as a possible configuration for Smartphone-optimised websites.
Mobile Device Support
When you're building a mobile friendly website, testing it in the latest range of Smartphone and tablet devices goes without saying. The sheer number of web capable devices on the market today, all with different screen sizes and resolutions can make support for all eventualities almost impossible.
That said, by utilising a test bed of popular devices you should be able to check your site for potential problems during its mobile development. Before launch, we'd also recommend a thorough review of your website using a device support matrix to check for consistency across as many devices as possible.
If you're finding it difficult to get your hands on the latest gadgets to test your website on, don't worry, META can help. We'll test your website throughout its development in the most popular mobile devices.
You should also take the time to think about the different browsers that your visitors may use to access your website. Browser support and testing also comes as standard with any new web project that we work on.
Flexible Layouts (Fluid Layouts)
Thankfully, the days of fixed width and table-based layouts for websites are behind us. Looking to the future, with a growing number of devices all with varying screen resolutions, it's becoming increasingly more important that your website is flexible enough to adapt to its surroundings.
Flexible layouts, sometimes referred to as fluid layouts go hand in hand with responsive web design, HTML5 and CSS3. Flexible layouts provide a future-proofed proportional approach to web design that allows your web pages to adapt to a devices viewport without being constrained to fixed width pixel based layouts.
The advantages of proportional layouts are critical in responsive designs and allow a linear progression between the different breakpoints assigned via CSS media queries. In short, with a fluid layout your web pages will flex and look great on all viewports ensuring you're ready for any devices and screen resolutions that come onto the market.
Embrace the power of a fluid layout from META combined with a responsive redesign for a truly kicks ass website that's future proofed to boot!