The 4 Ways to Make Your Site Mobile-Friendly
Mobile design is no longer the future. For a while now it has been the present. Sites that have already transitioned to mobile design have benefited from improved conversion rates and search engine rankings. Come April 21st this will be even more prominent as Google has announced it will be releasing a Mobile Update. The update has been greatly anticipated and you can certainly expect some shakeup in Google’s search results.
With that introduction let’s dive into how to choose the best mobile option for your website.
The four main options that you can decide from are:
- Responsive Web Design
- Separate Mobile Version (m.domain)
- Dynamically Served Site (Adaptive)
- Native App
We’ll first run through what each of these options are exactly along with their pros and cons. After you have a solid understanding of the different options you can make the best decision. Or you can skip to the decision section at the end, your call.
Responsive Web Design
What is a Responsive Website?
A responsive site is one that is designed to be visually flexible. The same url, html, content and images are delivered but the CSS gives different rules depending on screen size and orientation. The site automatically detects a visitor’s browser size and fluidly adjusts the layout of the site accordingly.
How does this happen? The magic of breakpoints (and good designers and developers).
Breakpoints are the specific sizes of a browser window at which the design of a website will be adjusted. These sizes correlate to the general screen size of devices being used. You usually find 4 breakpoints on a site: one for desktops, one for tablets, one for large phones and one for small phones. A designer will arrange the layout of a website for each browser size and then the developer will make it so. The better the designer and developer the more fluid the adjustments to the site appear.
The website you are on itself has a responsive design. You can see the different breakpoints in the design by grabbing the corner of your browser window and decreasing its size. Go ahead and give it a try. Did you note the breakpoints? The site is responding to the browser window, hence ˜responsive’. For more details about responsive design check google’s explanation.
Pros and Cons of Responsive Design
- One URL Both desktop users and mobile users visit the same url for your website. This makes it easier to find and remember. Along with users Google and other Search Engines only have to crawl one set of urls. These means more of your site is crawled before the Google bot times out. It also means you only need to do SEO on one site.
- No need for User-detection User detection is detecting the device being used by a visitor and redirecting the visitor to the appropriate content. Our site is responding, not redirecting. User Detection is used by m.domains and dynamic sites. The problem is it can be expensive to maintain and there are many technical errors that can be made. Responsive avoids the mess.
- Long Term Cost While it may be initially more expensive to build a responsive site it will cost much less to maintain over the long haul as you only need to maintain one version of your website. It is also much easier to make quick updates to your responsive site than other options.
- Initial Costs Responsive Design costs more up front. Particularly if you are trying to transfer the content of an existing sites to responsive design. The larger your existing site the costlier it becomes. If you are creating a new site these costs are prohibitive costs are largely avoided. And of course, the more you want out of the design the more it costs. E.g. 6 breakpoints is more expensive than 4.
- Load Time Responsive Sites have the potential to load slowly if there are an excessive amount of code and CSS files. Slow load times skyrocket bounce rate. Make sure you hire a skilled developer to avoid this.
- Feature Phones Feature phones are those which can access the internet but have a limited number of applications and settings (think a flip phone with a weird web browser). Unlike smart phones feature phones have issues processing CSS. Since responsive sites rely heavily on CSS to display correctly it can be an issue. But how many people still use feature phones? The majority of people actually, although that will change as the in the coming years.
Separate Mobile Version (m.domain)
What is a Separate Mobile Website?
In comparison to Responsive sites Mobile versions are static (for the most part). Different urls, html and css are delivered to users on smart phones. Essentially when visitors come to your site on a mobile device they will be visiting a different website than if they came on a desktop.
Let’s clarify ‘different website’. Your domain name (e.g. yourwebsite.com) serves as the address for your website. Your mobile version resides on a subdomain (m.yourwebsite.com) which is a different address. So your domain and subdomain are actually different websites. You can make them look similar to each other but each website address will have its own set of files.
You can think of the difference between responsive design and a separate mobile version this way. Responsive Design is constantly adjusting the layout of a single apartment to fit each new visitor while an m.domain.com is sending visitors to different apartments with different layouts at separate addresses.
*You can also create a mobile version for your website using a subdirectory (domain.mobi) instead of a subdomain (m.domain.com). Since both these options share many of the same drawbacks compared to other options and subdomains are far more common I won’t go into detail here. If you would like to learn more click here. For more details about m.domains in general check google’s explanation.
Pros and Cons of a Mobile Version
- User Experience This is the greatest benefit. You can create a user experience specifically designed for your mobile users. You don’t have to deal with any awkward responsive objects or layouts.
- Load Time With such a small file size your site should be able to load quickly even with the redirects. This is a big advantage on mobile where slow load speed quickly causes abandonment.
- Initial Costs Simple mobile sites are much less expensive to design and develop compared to responsive sites with several breaking points. There are many point and click, DIY services online. Even if your mobile site has a breaking point for some responsiveness the cost should be significantly lower.
- Quick Implementation If you need your mobile site and you need it now an m.domain is the quickest solution.
- Large Websites If you have a large number of pages on your website you can quickly create a simple mobile experience. Large news sites and online stores usually don’t find responsive design financially feasible.
- Feature Phones Responsive sites have issues on feature phones but separate mobile sites donâ’t have this issue. If a large portion of your users have feature phones m.domain may be the way to go.
- Two Urls for Users Although it is not a big issue your visitors will need to remember a second url to navigate to your site. One potential benefit is that your users may use different search terms on mobile devices compared to desktop.
- Two Urls for Spiders This is a big issue.The second mobile site is considered separate by Google which means you need to do additional SEO work for the mobile site. The separate url also means that you lose the backlink profile of your main domain (unless you implement bidirectional redirects, read on for more info).
- Long Term Cost Over time the correct configurations can be a drag on your budget. If you don’t maintain the sites you could have embarrassing or even brand damaging display errors.
Dynamic Serving (AdaptiveÂ Design)
What is a Dynamically Served Website?
Dynamic Serving, aka adaptive or user-agent sniffing, is when you keep the same url but the server sends different html and css files depending on the device requesting the page. The website is able to identify the device being used by matching the device to a list of predetermined user-agent strings. Each user-agent string matches a device and provides instructions to serve up a set of files. The visitor with a smart phone would visit yourwebsite.com (not m.yourwebsite.com) but still see a completely different set of html and css files.
Dynamic Serving can be implemented in two different ways: unidirectional redirecting or bidirectional redirecting. Unidirectional redirecting has links default to the desktop site but mobile devices are redirected from desktop to mobile.
Bidirectional redirecting add a second layer by redirecting desktop users from the mobile site to the desktop site. To implement bidirectional redirection you need to place a rel=alternate tag on the desktop, pointing to the mobile site. On the mobile site place a rel=canonical tag pointing to the desktop site. This tagging helps Google treat the two sites as one rather than separate entities (which would cause ranking issues). Google explains the process on their developer site.
To continue the apartment analogy dynamic serving is bringing a user to a completely different apartment layout that sits at the same address. Admittedly, the analogy doesn’t fit perfectly as dynamic serving is a blending of both a separate mobile site and responsive web design. If you want to learn more about dynamic serving check google’s page.
Pros and Cons of Dynamic Serving
- Load Speed Similar to m.domains dynamic serving only provides the number of files and css needed for the mobile experience. By avoiding the excess files your site speed quickly improves even with the redirection.
- Feature Phones Just like m.domains dynamically served websites do a much better job on feature phones than responsive design. They don’t require the excessive CSS to properly size the site layout to the device display.
- Keyword Strategy You have an opportunity for SEO if your users search differently on mobile devices vs. desktops. You can build the html and content for different devices around the different sets of keywords used. E.g. Users may look up general keyterms on mobile devices to do initial research and then armed with supplemental knowledge use more long-tail searches to finish their research on desktop.
- Maintenance Making sure your user-agent strings are up to date and error free is a long standing investment. If you make a mistake you may end up displaying the wrong configuration or nothing at all. Another risk with user-agent strings is Google accusing you of cloaking. This happens if you incorrectly setup a hint with the vary http header. The hint lets the googlebot know where to send their mobile crawler.
- Level of Expertise Server side coding is a more unique skill set among designers and developers which means they can charge you a premium for their services. This same higher cost level also applies to maintenance fees.
- SEO You do have the ability to create different keyword strategies for the different html files you create but that means additional work for each set you wish to optimize. You also risk losing the power of your backlink profile unless you properly use bidirectional redirects.
What is a Native Application?
A native app (application) is software developed specifically for mobile based operating systems. These operating systems vary based on mobile device. Your Iphone is running on iOS while your Samsung Galaxy is running on Android and that phone you play with at the store but never buy is running on WP (sorry Windows). The user needs to download the app from a specific operating system store like the Apple Store and install it on their phone.
Apps live directly on the users’ device and don’t require internet access to function. While your app could be your entire mobile experience in most cases native apps are built in addition to a responsive or m.domain version of your site.
In this article I discuss four main options and include native applications as one of those options. However a fifth option closely related to native app is web application. While native apps live directly on the operating system of the mobile device web applications live server side. This brings additional pros and cons to consider such as speed vs ease of updating. If you are considering an app as the best option learn a bit more about native apps vs. web apps.
Pros and Cons of a Native App
- User Experience Apps provide the best user experience out of all the site options. They are designed not only to be displayed on mobile devices but to use the functionality of these devices. Apps can take advantage of the camera phone, device settings and other apps. Be Creative!
- Omnipresent & Quick The app does not require internet access to be used. It is also always sitting on the users’ apps menu calling their attention. Since the app was developed specifically for the operating system they also perform faster than online options.
- App Store Credentials App stores give their stamp of approval on apps they provide users. This means you get instant validation to your credibility and security that a website does not.
- Initial Costs Good app developers are generally not short on work so expect a higher price. Apps are complex and custom built making the most expensive solution. Of course if you are a midnight enthusiast you might be able to develop an app on your own.
- Maintenance Just like dynamic serving there will be a considerable amount of maintenance to ensure that your app continues to function properly on different operating system updates with new generations of mobile devices. Even making adjustments to a current app version is difficult you cannot simply upload the edits to the server. The changes need to be provided to the app store and then downloaded by the user.
- No Flexibility Your app will only function on mobile devices that share the same operating system which means you may be excluding a large amount of potential traffic. While you can create cross-platform apps this is additional time and cost.
- App Store Standards Since app stores need to approve your app before it goes onto the market this means that you will need to wait. Your app may also be turned down which means additional time and expense.
Choosing the Right Option
Simply put, there is no best option despite what you may find in other articles. A lot of the strong opinions you read online can be ascribed to personal preference or the capabilities of the individual making the suggestion. The best way to make your decision is to weigh the pros and cons of each option as they fit your needs. To help you do this go ahead and review the chart below which summarizes the main points of this article.
Hopefully you now have an idea of what you need to do. Making this initial decision is probably the hardest piece of creating a mobile-friendly site. Now you can start searching through the different development services offered. If you are still having a difficult time making a decision there are three basic profiles most people fit into. Find the one that best fits you and follow the suggestion (of course there are always exceptions). *If you skipped down to the decision section it was noted earlier that along with native apps you could also consider web apps. You can learn more about the differences here.
Inexpensive, Immediate Solution
You have read about the google mobile update that is coming and you have little time left to make the change to a mobile-friendly site. You need to make the change quickly and since that is the case you probably have not previously saved capital for the change. You may have an in-house developer with experience but likelihood is that this is not the case. List of services you could use:
Suggested Method: Your best option is going to be an m.domain. You can quickly implement and separate mobile version for your site at a relatively inexpensive price. The good news is that there are also DIY options available through services online. Here is a list; just be careful you understand the faults of the different options.
Long Term Solution for Small Business
This time you have had time to think about the change you will make to your website and have saved up to pay the developer. You are also a small business which means you can’t pay a large amount to have a developer maintain the site in the future. In fact you may want to do the edits yourself.
Suggested method: Responsive Design is what you would go with here. Although it may cost more up front, especially if you are converting an existing site to a custom design, the benefit is worth it. You won’t have to pay as much for the maintenance of the site and any additional content added will only have to be done once. There are decent options available for you DIY people. Different CMS options like Wordpress or Joomla can be used and professional themes can be purchased for low prices. If you are not up to learning Wordpress you can use a service like Squarespace to get the job done.
Solution for those with Greater Resources
You have a decent amount of money and time to focus on a mobile version of your website. You probably have a strong brand and a heavy focus on the user experience of your customer’s online. The decision focuses more on return from investment than the costs. Your goal is frequent engagement or a very high conversion value.
Suggested Method: You are going to choose dynamic serving (adaptive) or a native app or possibly both. These options provide you the ability to design exactly the user experience that you want for your customers with the hope they will better convert on site. If you choose a native app you can have your brand imagery directly on the mobile device of the users. It will cost more to create and maintain your app or mobile website but you understand this going into the project.
Now you are armed with the knowledge of the pros and cons of each of the mobile options out there. The key takeaway is that there really is no right option; just the option that best fits your needs. Now, it’s time to get started developing your site.