You may have read in the press last week that obese football fans at this year’s World Cup in Brazil we have access to extra-large seats (and half price tickets!!). What this shows is that one size (or seat) does not fit all!
This train of thought should be adopted by any web designer when they are deciding on the best way to make a website compatible for mobile.
There are a number of options for mobile strategies: responsive design, adaptive design, a mobile version or a native app. One approach may suit a company perfectly and be completely inappropriate for another. Perhaps a combination of strategies is the way to go.
By using comparisons with football players past and present, this blog post delves deeper into the pros and cons of each strategy…
Don’t end up with just a carcass
Firstly, it is worth mentioning that in the last few years I have started to favour progressive enhancement (mobile through to desktop) over graceful degradation (desktop down to mobile).
To give this subject the attention it deserves would require another blog post (or two!). However, I will give a quick summary of why I have started to champion progressive enhancement.
Using graceful degradation can be a bit like watching a succulent roast chicken be gradually stripped away until you are left with just the carcass.
You create an amazing desktop website with loads of cool features and functionalities only to realise that as the device screen sizes get smaller the website looks less and less impressive until you end up with a site that is just a shell (the carcass) of the original for mobile.
It’s possible that energy levels are zapped as designers and developers see all their awesome work being stripped away. I am certainly not saying that this happens every time and we have built many websites ourselves using this method.
Should you adopt the progressive enhancement workflow, you focus on the core features that you want on the website and then go from there.
If you look at mobile first you can use all the “new project excitement” to create something excellent and the energy levels do not decrease because you are getting to be more creative as the project develops.
Adding cool features as you work your way up to desktop rather than taking things away.
The Cristiano Ronaldo of web design
Responsive web design has been the darling of the web design world over the last few years but does it deserve its superstar status?
Well, yeah, it does! It is a fantastic way to approach web design as it ensures that a website will work across all devices.
Responsive web design (RWD) is great for any company that just wants to build a website that can be viewed across mobiles and tablets.
RWD uses flexible media queries that shrink and grow based on the browser size. With RWD the content is sized relatively according to the device environment using points, ems, percentages, pixels and other design tools.
It then reflows as the browser size changes. RWD is great for analytics because all data comes from one source.
Content is king rather than focussing on specific devices. This actually reinforces the argument for progressive enhancement because it is far more content-centric than gradual degradation. This means that there are benefits in terms of accessibility as well.
As progressive enhancement starts with simple fundamentals i.e. semantic, well-structured content, you are in a great position to implement superior accessibility, not to mention excellent SEO standards.
A couple of examples of progressively enhanced sites that have focussed on adding functionality and features as the device screen gets bigger are shown below. Linear mobile versions were built and then the content was enhanced for desktops.
For example, parallax technology was applied to the new Bacardi website (select United States in the location dropdown after entering your age).
In the mobile version, all of the parallax content is opened...
The image below shows what happens when you scroll on the desktop version. Check it out here.
Another example can be found when looking at the website for the law firm Leigh Day. Resize your browser to see that the mobile version has no carousel. Then resize again to see the change for a tablet, the carousel goes below the company description.
Finally, the desktop version has a carousel with a company description to the right hand side.
The Paul Scholes of web design
Adaptive web design is a bit like what Paul Scholes is to football, brilliant but not quite as flashy as RWD (Ronaldo) so will never get the headlines. There are two types of AWD, client-side and server-side.
Client-side adaptive involves the adaptation taking place in the user’s browser and server-side adaptive is where the web server detects the various devices and loads the correct template.
It is essentially a combination of standard desktop design practices but with an intention to cater for mobile devices. Breakpoints are determined not by content, as is the case with RWD, but by specific device. Site content is reconfigured when the breakpoints are hit.
If you have a legacy website that is not responsive, adaptive is a great option. It can be a long and arduous process to make an existing website responsive. It is often best just to start from scratch if you are adamant you want a responsive site.
However, by using adaptive web design it is easier to control how the content will flow but there are downsides. The site will need to be designed at multiple sizes which can be expensive.
Also, only Michael J Fox and Doc know what devices we will have in the future so who’s to say that in a couple of years’ time you are not going to have to design your site again for a BBQ/Tablet (you saw it here first!).
The Julian Dicks of web design
For those of you who remember Julian Dicks, you will recall his no-nonsense style of defending! What you saw is what you got…which normally meant a broken leg for a tricky winger!
Mobile-specific websites can be good for the “Julian Dicks no nonsense approach”. Serving up a limited experience can be useful when a user is not going to need all of the features the desktop version has.
For example, if someone is going onto a bank’s website via a mobile they are likely wanting to do only basic things such as check their balance. They are unlikely to want to top up their ISA or apply for a remortgage.
Simple mobile specific websites can be effective for ecommerce websites as well. They get rid of clutter and use big call to action buttons eliminating the risk of the user getting distracted from the company’s ultimate objective…purchases!
Ebay, Cheapflights .com and Under Armour are three examples of brilliant mobile specific ecommerce websites.
However, many believe that all of the advantages of building a mobile specific website can be achieved using RWD and there is a strong argument among a growing number of designers and developers that a mobile domain can do more harm than good!
It is said that a company can end up with a confused user base due to the use of two different core URLs e.g. .mobi and .com, to access what is essentially the same site.
Consumers can become confused as to what site they should be going to in order to perform certain tasks. You will also have to deal with two separate code stacks.
The Emile Heskey of web design
Anyone that’s watched Emile Heskey play football with no doubt have asked the question “why even bother?” as he continues to fall over, mis-control the ball and boot it into Row Z!
The same question is often asked when discussing whether to create a native app. Much of what can be achieved with an app can now be achieved with a website using one of the three strategies I have already discussed in this blog post.
Developing an app can be expensive and if you develop an app for iOS you are alienating a load of people who are on Android and vice versa.
There are some cool tools out there such as PhoneGap that enables you to develop an app for both iOS and Android but you still have to deal with both stores and anyone who has experience of this knows how frustrating that can be.
However, Heskey did have his uses, as Michael Owen liked to remind us (namely his battering ram qualities), and native apps do too.
If you have device specific features such as GPS or the use of a camera then native apps are currently the best option. It’s worth noting though that with the work of W3C in expanding the possibilities available with the HTML5 related API getUserMedia(), this may not be the case for much longer.
Of course, you do have the added bonus of native apps working offline though.
So as a general rule of thumb I offer the following advice:
- If you are starting your project from scratch with a complete redesign and new build then responsive is probably the way to go.
- If you have an existing website that you need to be mobile compatible quickly then the chances are it’s best you go with adaptive web design.
- If you have device specific features explore building a native app.
However, who’s to say that Ronaldo, Scholes, Dicks and Heskey can’t play in the same team? That is to say, use a combination of strategies.
However, it is far more likely that Ronaldo and Scholes would play in the same team, meaning it is far more likely that a combination of RWD and AWD will be used to maximise the potential of a website.