Mobile sites and responsive design: Part 1

• Mobile sites and responsive design: Part 2
• Claim your 25 percent discount for the full book (sorry only available for UK, European readers).

Mobile sites and responsive design (part 1)

Let’s make something clear from the outset; you need a mobile-optimized site. That doesn’t mean your site happens to work on mobile devices. It means the user journey via mobile has been carefully considered and you offer the optimal experience via mobile devices. It means that you have weighed up the different technical solutions in order to achieve this and have selected the most appropriate approach. It also means that you have not been steered by the limitations of your current web platform or content management system (CMS).

In this chapter we’ll explore why a mobile site really is absolutely essential, why apps and mobile sites aren’t a one-or-the-other choice, and how you can achieve your marketing and business objectives using mobile sites.

Start with the fundamentals

Already, an average of 23 per cent of visitors to many sites get there via mobile devices (Walker Sands, 2013). This means that, potentially, nearly a quarter of your audience will be on a mobile device. This is reason enough to make sure your site is fully optimized for these visitors, before you even consider the potential of increased conversion rates and average order values via a properly optimized mobile experience. Increased average order values of up to 22 per cent have been demonstrated through properly optimized mobile experience (Affiliate Window, 2013).

Focus on the user journey

The key point of a mobile-optimized site is to offer an experience that best suits the consumers’ needs and circumstances. This means they should be able to access the information or utility that your site offers, on the device they are using, in an easy and efficient way.

Classic mistakes

• Mobile compatible – Having a website that works on mobile devices often confuses people into thinking they have a mobile-optimized experience. If your website works on mobile devices, but the consumer spends much of his or her time zooming in and out to see anything clearly, this is not an optimized experience.
• Broken journey – Adopting the latest technology trends without considering the impact they have on the user journey is a common mistake. Placing a QR code onto your latest outdoor advertising campaign, without considering the fact that the website you are sending mobile users through to does not work on mobile devices, is not a great idea.
• Mobile site dead end – This is my pet hate. It involves visiting a website on a mobile device and then being re-directed to a mobile-specific version of the website. Nothing disastrous so far, but there is nothing more annoying than finding the piece of content I need isn’t on their mobile site, but their technology won’t let me visit their standard site on my mobile device. Every time I try and visit the main site it just re-directs me. Give people an option to visit the standard website. Please.

Mobile site options

1. One size fits all

The first, simplest and least likely to work approach! The idea is that you create one site that works well on desktop and mobile devices. In reality, it normally means that some sacrifices have to be made and that either your desktop or mobile site will need to suffer.

The only scenario in which this really works is when your site is very simple and limited in its functionality. An example of this would be a site based on a single landing page with a sign-up form.

What we are really doing in this scenario quite often is tweaking a website so it at least functions correctly on a mobile device. This clearly isn’t a mobile-optimized site, but it may be what you need to do as an interim measure.

What this highlights is that we need to start by understanding what should be the key differences between a mobile and desktop experience and why? We’ll explore this in the next section of this chapter.

2. Dedicated mobile site

A mobile-specific version of your website can seem like the most obvious solution. Basically, you have two versions of your website, a mobile and desktop version, and depending on the device the site visitor is using, they are given a different version of your site.

You could in fact have multiple versions beyond a desktop and mobile version, and have versions for individual devices or maybe just separate desktop, smartphone and tablet versions.

The advantage of this approach is the ability to completely adjust a site for an optimized mobile experience. The downside is that you have multiple sites to manage and this can create a few challenges.

The level of complexity this creates will depend on how you update and manage the content of your sites. Static sites, which are sites that are updated and edited by changing the code itself (using a developer or updating it yourself), just mean increased workloads as you have multiple sites to update. Content-managed sites, which are sites where you have some form of interface that allows you to update your site, can be more complex.

CMS can be used in a number of different ways to manage mobile
sites:

• A CMS-based desktop site and static mobile site – this means you have a mobile-optimized site built but in order to edit and change it, you will need to use a developer or edit the code directly yourself.
• A CMS-based desktop site and separate CMS for your mobile site – this means you will have two separate CMSs in order to update the different versions of your sites. This makes the movement of content between the two sites more complex, but can be a fairly straightforward solution.
• A single CMS for multiple versions of your site – this means that although you have a separate mobile-optimized site, you are able to manage your site content for multiple sites under one CMS. Generally this solution will allow you to edit content and ‘assign’ it to a particular version of your site. This is a fairly elegant solution but requires a CMS that is designed to manage this kind of situation.

3. Responsive design

Responsive design, sometimes referred to as adaptive design (although these definitions actually mean different things that we’ll discuss later), means developing one site that will display appropriately for each device it is viewed on. This means the site can look completely different on each device and will lay out in the way best suited to a particular environment.

This approach is generally implemented using a combination of web technologies like cascading style sheets (CSS) and JavaScript which we’ll discuss more in a moment. The key point is that these technologies allow the browser to look at things such as the device the site visitor is using, the width and height of the display, and then decide on how the page should be laid out.

Responsive design and adaptive design are often terms that are used interchangeably; however, they are quite distinct things. Responsive design is something that is actioned within your browser. This means that a page is sent to your browser, and your browser then does the work to display the correct elements of the page. This is called a client-side technology (the client is your browser).

Adaptive design is something that is actioned on the web server. The type of device being used is identified and then the appropriate version of the site is delivered. This is called a server-side technology. The advantage of adaptive design is that not as much content is sent to the browser where it may not be used and a solely mobile version of a site is sent to a mobile device. (See the next box on responsive design and its limitations).

The term responsive design is gradually coming to mean adaptive design, although developers will argue about the differences for ever more.

4. Hybrid approach

There are also some solutions that take elements of dedicated mobile sites and combine them with some responsive design elements. For example, your site could use a number of CSSs to make your site look different on different devices, but your CMS could allow you to select which pages, menu options and other features display on different versions of your site. This essentially amounts to a dedicated mobile site but can help minimize the management time involved in having multiple sites.

There are also other technologies that can be combined with responsive design to get past its limitations and to create an optimized mobile experience. These are often referred to as ‘responsive web design with server-side components’ or RESS for short.

A silver bullet for mobile sites

Responsive design is often seen as a silver bullet solution, solving all of our mobile site problems. It certainly can offer a single site solution, meaning that your website adapts according to the device of the visitor. There are, however, some considerations you need to be aware of. Firstly, you need to consider if a responsively designed site can go far enough to really implement a mobile-optimized experience, or whether you are still making compromises because of the limitations of the technology?

It’s certainly possible to achieve an optimized experience in most scenarios, but this very much depends on how your site is implemented and what functionality you require. In many cases, for example, e-commerce sites still need a dedicated mobile site as responsive design just doesn’t give enough flexibility to adapt the site as much as is required.

Another consideration should be load time. If responsive design is implemented poorly, you can end up loading a full desktop site to a mobile device, and then just displaying certain elements of it. For this reason, it is generally a better bet to start considering responsive design from the outset of a web project rather than trying to bolt it on afterwards, as this often leads to ‘bloated’ websites that can be slow to load.

Rather than being a silver bullet, responsive design techniques are just that: techniques. They can certainly help you achieve a mobile-optimized experience, but you should also be aware of their limitations and they can be used in combination with other techniques.

Mobile design principles: mobile sites vs. desktop sites

So let’s take a look in the following section at the key considerations when we are considering mobile sites and the main differences from a desktop version of a website.

1. Prioritization of content

One of the key issues with mobile devices is generally their screen size and the fact that screens are smaller than those of a desktop or laptop computer. This means that page ‘real estate’ is at a premium and we need to make viewing and understanding the content as easy as possible.

This generally means considering the user journey of a mobile user and prioritizing content according to their potential needs. It also means filtering out content that may not be essential in order to de-clutter the mobile experience.

2. Horizontal vs. vertical layout

Smartphones are generally used initially in vertical layout as are tablet devices. Screens on desktop devices, however, are generally horizontally orientated. This orientation needs to be factored into our designs, but we also need to consider the fact that mobile devices can change orientation.

3. Links and buttons

Throughout websites we use hyperlinks extensively, and hyperlinks are just linked text. This approach is less effective on mobile devices because of the size of screens relative to our input device, i.e. our fingers. For this reason, buttons tend to work better on mobile devices but can look extremely clunky on desktop sites.

4. Screen size and graphics

Quite clearly we are generally dealing with smaller screen sizes and we have already discussed how screen space is at a premium. However, this lack of space and screen size means that many graphics that are suitable for desktop-based sites are not suitable on mobile sites.
This is generally due to the lack of clarity when an image is small and because of the amount of space they are taking up in the precious amount of space available.

5. Reduced hierarchy

Many desktop-based sites offer various ways of navigating their content, hierarchical menu systems and page elements like breadcrumb trails that show where you are on the site. Because of space limitations we often need to remove many of these elements. However, it is also essential that the mobile user does not feel lost or confused as to where they are on the site. For this reason, having a reduced and simpler hierarchy on your mobile site can make things much easier.

6. Phone integration

Phones clearly have additional functionality not offered by desktop devices that can often be used within mobile sites (apps can generally access these functionalities even more effectively and we’ll discuss that in the apps chapter later). Things like geographic location, click to maps, click to text and so on can be utilized to improve the mobile experience.

Technology and jargon in perspective

When talking about mobile site development, there are a lot of technical terms and technologies involved. Below you’ll find a few of the most important ones that should help you navigate, discuss and develop your mobile site plans:

• HTML– hypertext markup language (HTML) is the markup language that is used to lay out web pages. The files sent to our web browsers when we request a web page are HTML files which are then translated by the browser into what we see.
• CSS – cascading style sheets (CSS) is used to describe the styling information for a markup language. This basically means it defines what different parts of a web page should look like. A range of CSS can be used on different devices to generate varying content layout.
• JavaScript – JavaScript is a client-side language (meaning it is run and used within a browser) to add extra functionality to web pages. It is often used to help select which is the most appropriate CSS to use on a particular device.
• Responsive design – responsive design allows web pages to be displayed differently on different devices by adjusting the layout and page elements shown. These adjustments are made within the browser.
• Adaptive design – adaptive design allows for a specific version of a web page to be sent to a specific device or browser. Once the device and/or browser is known, only the relevant version of the web page is sent to the browser.
• Progressive enhancement – this is an approach to building web pages that tries to prevent sending content to basic browsers that wouldn’t be compatible with it. This means a basic version of a web page is built and then gradually enhanced for more sophisticated browsers. The more sophisticated elements of the page are not loaded initially, meaning there is no wasted load time.
• RESS – responsive web design with server-side components (RESS) is a technique combining elements of responsive web design and other technologies to maximize the mobile experience and bypass shortcomings of individual techniques. RESS is also often referred to as adaptive design.
• Media queries – these are part of CSS and an important part of responsive design. They allow the layout to adapt to the screen resolution and layout.
• Fluid grid – the fluid grid principle is that web pages should be positioned and laid out according to percentages rather than fixed sizes and positions. This means that layouts can more easily be adapted for different sizes of screens.

What responsive design really means

When many people talk about responsive design, they are in fact talking about using a number of different technologies to achieve an optimal mobile experience. These differing ways of using the same phrase is why you’ll find so much discussion online about the pros and cons of responsive design. In reality, when most people talk about responsive design they are actually talking about a number of techniques working together and are actually referring to RESS techniques or other hybrid solutions.

You have been reading the first part of a 19 page exert from Daniel Rowles’ excellent new book: Mobile Marketing: How mobile technology is revolutionizing marketing, communications and advertising.
• Mobile sites and responsive design: Part 2
• Claim your discount for the full book (sorry only available for European readers).
• Targetinternet.com (Daniel Rowles’ Website) for examples of mobile sites and to see responsive design in practice.