online, reading articles, searching the internet, browsing for local businesses, and more. With such a known demand, Google even created search penalties for websites that aren’t mobile friendly or for pages in which content is not easily accessible to a user on the transition from the mobile search results.
But, how do you create a website that accommodates every device? Is there an ideal design layout for mobile-friendliness? From Google’s standpoint, the site must be accessible on mobile and have good UX and performance, but from there, the design is mostly up for debate — or is it? Stay tuned as we talk about the heavily debated ways in which your company can have a mobile-friendly website — including responsive and adaptive designs, or using separate URLs — as well as what Google recommends for building smartphone optimized websites.
1. Responsive Web Design
Responsive design, the most used mobile-friendly website design approach, uses flexible grids, layouts, images, and CSS media queries to create a web design that not only looks beautiful on the original platform, but responds to different mobile device screen sizes, platforms, and orientations. With responsive design, each URL serves the same HTML to all devices, but the CSS changes depending on how the page is rendered on the device. This equates to the same page being delivered to all types of devices. In other words, as a user switches from one viewing platform or device to the other (i.e. from laptop to iPhone to iPad), the website’s technology should automatically respond to the user’s preference by adjusting the resolution, image size, scripting abilities, etc. to create the optimal viewing experience, no matter the device. This fluid flexibility and responsive design makes this mobile approach a very easy way for a website to be appropriately viewable and usable on multiple devices.
With responsive design technology, you don’t have to worry about making different layouts for different devices (i.e. laptops, computers, cell phones, or whatever else is made in the future), which also means you don’t have to cater to the users of one device over the other. To create a responsive website — one that creates a great user experience on all devices — just make sure the original website template, your original design, or your web design company offers responsive web design capabilities. When your website is redesigned, the responsive element is automatically handled. Just be aware that with responsive design, page elements are often shuffled and reorganized to fit on different devices. With that in mind, you’ll want to make sure these changes don’t disrupt the visual hierarchy of the design or the overall UX of the site.
2. Adaptive Web Design or Dynamic Serving
Adaptive web design uses static layouts that, when loaded on different devices, will detect and load the appropriate layout or screen width for the particular device. The technical definition of an adaptive site is: sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the user agent is a desktop or a mobile device.
Designed to recognize and load the appropriate screen size of roughly six common screen widths (320, 480, 760, 960, 1200, and 1600px or more depending on what devices your web analytics say is visiting your site), adaptive designs do force the designer to develop a specific design layout for each, but it also means each layout’s separate HTML and CSS codes must be maintained. Furthermore, extra work upon implementation is required to make sure that SEO, content, and links are working.
While designing at least six layouts does sound like more work, when compared to responsive design, the tradeoff is that adaptive design benefits tend to create a more seamless transition to the user’s specific device, as it gives the designer more control over content, typography, and layout. In addition, adaptive designs have fewer display and performance issues commonly linked to the improper use of media queries in responsive designs. And finally, adaptive designs are a great way to retrofit or make an existing site more mobile-friendly.
See the changes and differences between responsive and adaptive designs live on this site.
3. Separate Mobile URLs
A separate mobile URL is when two separate websites are designed — one for desktop users and one for mobile users (perhaps even tablets). With this setup, the system detects which device the user is using, then redirects them to the appropriate site.
A normal website will look something like this:
A mobile website, subdomain, or subfolder may look something like the following:
With a separate mobile URL, bidirectional annotation should be used between the desktop and mobile devices. Doing so helps the Googlebot discover your content, but it also helps Google’s algorithms understand the relationship between your desktop and your mobile pages — a distinction that tells Google the two sites should be considered as one, content-wise, and is therefore ideal for SEO purposes. Other SEO considerations should be factored in, and some elements of responsiveness should be used to account for different mobile screen sizes. In the end, a separate mobile site does allow the user to create different mobile content, which can be optimized for mobile searches and users, but its higher cost of maintenance and complicated SEO requirements (associated with the bidirectional annotation) do make this the most challenging of the three ways to increase your site’s mobile-friendliness.
The Best Mobile-Friendly Web Design For Your Company
There’s a lot to consider when designing your website, but omitting a mobile-friendly design can be costly and detrimental to your SEO efforts. Mobile-first marketing is here to stay, and companies must get on the bandwagon if they want to stay competitive on search engines. Creating a mobile-friendly website doesn’t require that it’s a responsive design — the two are not synonymous — but it does require that certain user-experience elements are met with its design, and that includes either responsive or adaptive designs or mobile-specific URLs. Whichever you use to support your mobile SEO efforts should depend on you and your customers’ needs, desires, and preferences — and a well thought out UX plan. Let us know if we can help!
We also encourage businesses to ensure that they aren’t charged fees or penalties for responsive or mobile-friendly design on their websites. It’s basically a requirement now, so you shouldn’t be penalized for simply using best practices.
Google once recommend responsive designs over the others (the original link has since been taken down), but their admission is likely due to responsive design’s ability to adapt to any size, its ease of maintenance, and its few implementation issues — but we want to know what mobile-friendly design you prefer. Tell us in the comments!