The Five Types of Mobile Website
Why does a 'mobile friendly' website still look like a miniature version of the desktop site on a mobile device? The miniature site forces you to pinch, squeeze and zoom in to read the content. Who actually likes browsing the web like this? Is it really 'friendly'?
web • innovation
We believe there are five categories of mobile website design methodologies, and each one has its own advantages and disadvantages. We're going to talk about these, and also offer a list of things to consider when putting a mobile website plan on the table.
Here are the five categories, as we see it:
There's another type of mobile website that isn't mobile compatible at all. Some sites will actually fail to load on mobile devices. They fall into a category all on their own, which we'll call "not mobile in any way". An example of this would be Flash-driven restaurant menu sites. But we won't be talking about those.
Let's walk through a quick explanation of each of the main five categories above.
Mobile friendly is just as it sounds; the site does not contain anything that will break or fail to load if rendered on a mobile device. You can pinch and zoom to hit buttons, read text and access all the sites nifty bells and whistles.
Treefrog, by default, builds mobile friendly websites. Nothing will break, everything will load, although it will still feel as if you're trying to look at a page through a keyhole.
Why would you go this route? Mainly due to budget/time, but also because not every website needs to have an 'experience' mobile version, which we'll discuss later. You may have already noticed, but iOS7 for iPhone came equipped with a handy tool for Safari (the default web browser on the iOS) that allows you to view the text and images within the main content frame of a website. For those who simply want their users to be able to read on-site content or news items, mobile friendly websites are often perfect.
Adaptive is a development style that physically changes the design of the site as you resize your window. An adaptive design will re-arrange page elements in relation to the size of the window where it is being displayed.
An adaptive design is based on predefined screen sizes. Resizing a window will 're-stack' visual elements based on the width of the display. The websites code has been arranged so that it will reorganize content sections to conform to the display size.
An aside, Treefrog makes a front end development tool called a.mphibio.us which allows web designers to create adaptive layouts. If you want to get a sense of what mobile adaptive websites do, you can load a.mphibio.us on your desktop computer and resize your browser window. The layout will shift, change and adapt based on the size of your screen.
This teaser video gives you a great sense of what is involved when coding an adaptive website. Full disclosure: the video promotes a tool developed by Treefrog, but even so, it gives you a great visual reference for what 'adaptive' layouts mean.
Responsive web design is sometimes referred to as 'liquid' design. A responsive design conforms to the physical dimensions of the device you are using to view the site. It will literally morph the content in order to save viewers having to zoom in and scroll left or right to read page content.
A responsive design can actually resize images and page content sections based on the width of the screen/device you are using to view it.
There are similarities between adaptive and responsive design, however the biggest difference is probably that adaptive web design is based on fixed columns and screen resolution sizes, whereas responsive design is not fixed.
An example of a responsive design would be a site like http://mediaqueri.es
Resizing the browser window actually changes the pixel ratio of the images within the frame. This differs from adaptive in the sense that adaptive would not technically resize the images, rather rearrange them into a logical columnar layout depending on the size of the devices screen.
An experience mobile site is formatted to display on a specific mobile device. It's a completely separate design, and it often requires a separate content structure. Most mobile sites are pared down to contain only the essentials for a quick, nimble experience. Loading this site on a desktop machine will look strange. Basically, all the content is made to display properly on a mobile device, and is not really supposed to look right on a desktop browser.
You'll also notice that the mobile experience site and the main canopytower.com site have content that is arranged differently. It's not necessarily different content, it's just pared down on the mobile version. People who surf mobile sites normally don't want to spend a lot of time rooting around for information. They don't need all the bells and whistles.
A native mobile site is essentially an app. An app is a web-based program, often coded with specific languages (such as Objective C for the iOS platform) specifically engineered to run on a mobile device. The native mobile site will contain separate content and offer a different experience from the desktop website. An app means a whole other site build, a different style of programming, different content loading structure and maintenance. It's a completely separate animal from your desktop website.
Given that, it is wise to map out the type of experience you want users to have with your native mobile site/app. Think about the type of thing you would want a user to have access to from their app. What makes it a unique and rewarding experience? What will make it one of the tools in their mobile swiss army knife that they consistently pull out and use?
The strength of a native app will be defined by fulfilling the need. Some native apps don't need a connection to the web in order to run properly, whereas others do. What purpose will your app serve? Is it for users to access information? Will it be interactive, or in a game format? Will you charge for it, or will you allow people to access it for free and then use it as a platform to call attention to your other resources?
The possibilities are endless. Ideally, a native app would serve as a stand-alone compliment to your website. The first question you need to ask is: why would people want to download your app? What can they get from your app that they can't get from your website?
When you consider offering your users a mobile experience, first determine the level of engagement. Here are some things to consider:
Have you searched through Google Analytics to determine what the trends are with mobile users to your site?
To do this, access your analytics account, head to the Audience menu, then Mobile -> Devices submenus. Compare some time frames. Has the usage increased? How much time are they spending on the pages? Are they mostly heading to your contact page, or are they spending time on any of your landing pages? How about your internal content pages? Keep note of this as you make your plans.
Think of your target market.
Is your audience mobile? Are they likely to be searching for you while they're on the road? Is your current web content sufficient to give them the information they need when accessing the content from a mobile device?
Have you accessed your site from a mobile device yet?
How does it look? What is the experience like? Do you end up getting frustrated with lacking functionality, or do you wish it did something different? What are these things? How does the experience differ on different types of mobile devices (tablets/phones)?
What are the apps you use most on your mobile device?
Why do you use them? Can you envision providing an experience for mobile users similar to one of your favourite apps?
What is your content strategy for mobile?
Should you be looking at restructuring your content/updating and fixing your content before applying a responsive design to your site to load on mobile devices? In short, is your content interesting and engaging enough to be presented through a mobile platform?
There will continue to be confusion about these multiple types of sites and experiences as mobile devices get more complex, and as we get used to newer ways to access the web. If you have any questions about the differences between mobile sites, feel free to contact us.
Full disclosure: Treefrog can make all five of the mobile versions mentioned in this article. We'd love to talk with you about your vision, and help you develop the right platform for your needs.
Contact us directly and we’ll help you out!