How to make a Website mobile-friendly

You can download the in­fograph­ic on mobile data traffic worldwide here.

It’s not just the smart­phone that’s stealing the show from the desktop PC: instead of sitting at a desk, more and more internet users are relaxing on a sofa with a tablet. Because of this be­ha­vi­our­al change, many website operators are faced with new chal­lenges. Layouts that work on 17-inch screens don’t work on tablets or cell phones. Different phone man­u­fac­tur­ers prefer different sizes, so it’s necessary to find out how to optimise web presences for mobile devices without sac­ri­fi­cing func­tion­al­ity on desktop PCs. Ways of dealing with these new demands include creating separate websites for mobile access, using mobile website templates with adaptable or re­spons­ive designs, or accessing plugins for popular content man­age­ment systems (CMSs).

By pri­or­it­ising mobile-friendly internet services, Google is putting pressure on website operators worldwide. It’s not the first time that bosses of internet-oriented companies have been haunted by slogans such as ‘mobile first’ and ‘re­spons­ive web design’, but the clear statement of the most powerful search engine operator does carry weight. It’s not just those in charge of large companies, gov­ern­ment bodies, online stores, and news­pa­pers that are wondering how to factor in these new re­quire­ments in a time and cost-efficient manner; small companies and the self-employed, earning their living online, are also in a pickle. Nev­er­the­less, im­ple­ment­ing these ad­just­ments is a matter of budget. Whereas a mobile-friendly design for newly-created web projects can be im­ple­men­ted with little effort, re­launch­ing an es­tab­lished site after op­tim­isa­tion can prove costly. Depending on the project, there are many ways to develop a device-in­de­pend­ent site: separate mobile websites, mobile website templates in adaptive or re­spons­ive designs, and plugin solutions for content man­age­ment systems.

Mobile Websites

Mobile websites comprise HTML documents, which are created in­de­pend­ently of the homepage and are ex­clus­ively for mobile use under a separate URL. Mobile services are often provided with the hostname ‘m’, whereas the standard site is accessed with ‘www’:

m.example.com

www.example.com

Ideally, there should be a mobile version of every desktop site, but they don’t ne­ces­sar­ily have to be identical to one another. It makes sense to offer a mobile website as an al­tern­at­ive to the desktop site if users need to access your site when they’re out and about. An example is public transport sites that may have ticket sales as the main focus on the desktop version, but alternate in­form­a­tion on the mobile version, such as timetables and in­ter­rup­tions, which are more helpful when on the go. This shows that mobile websites don’t ne­ces­sar­ily have to be im­ple­men­ted as sub­do­mains. They are generally optimised for smart­phones, with adaptions for a smaller screen, larger buttons, and less data-intensive graphics. When it comes to other mobile devices such as tablets, mobile websites won’t be displayed in an optimal way if they have been designed with smart­phones in mind. This is why it’s worth creating separate mobile websites.

Ad­vant­ages:

• Website operators can specify exactly which website content should be optimised for mobile devices and which in­form­a­tion they would prefer to keep on the desktop PC version. 

• Both versions of the website can be cus­tom­ised sep­ar­ately without the changes affecting the other version.

• When creating mobile websites, web de­velopers have the op­por­tun­ity to enter the technical re­quire­ments of the device (usually a smart­phone).

• Thanks to the reduced display, smaller websites can be created that will load quickly even with limited data rate. 

Dis­ad­vant­ages:

• Every separate website that is created as a mobile version must be main­tained in­di­vidu­ally.

• Changes made to the desktop version don’t auto­mat­ic­ally take place on the mobile version.

When website operators design a mobile version, it can mean that duplicate content is created because material is copied straight from the desktop version. This can decrease your search engine ranking.

Adaptive design

An al­tern­at­ive to designing a separate website for mobile use is to have a layout that auto­mat­ic­ally adapts to the re­spect­ive device. The website’s present­a­tion is based on the visible part of the screen (the viewport). Adaptive designs depend on pre-defined break­points – a re­l­at­ively rigid design grid that offers different views for precisely-described viewports. Layout versions for desktop, tablet, and smart­phone displays are common. A fluid ad­just­ment to the re­spect­ive screen size (like with re­spons­ive design described below) can’t be im­ple­men­ted with adaptive websites. Media queries are used as a technical basis for adaptive designs. This includes a CSS3 concept which regulates the al­loc­a­tion of style sheets to an output medium according to its prop­er­ties. Websites with adaptive designs are usually optimised for certain device types. Web de­velopers orientate them­selves on popular products such as the iPhone or iPad, meaning that relevant websites aren’t always optimised for the chosen device.

Ad­vant­ages:

• On the contrary to re­spons­ive web design, an adaptive design is char­ac­ter­ised by its reduced com­plex­ity.

• Since adaptive designs only support a limited number of displays, website operators have more control over how the content is presented.

• Unlike separate mobile websites, only one version of an adaptive design needs to be main­tained. 

Dis­ad­vant­ages:

• Because of the focus on certain display sizes, adaptive designs can ex­per­i­ence display problems on different device formats. 

• Certain view­points require an analysis of the desired target group.

• Unlike mobile websites, all the display versions show the same content. Only a partial data reduction is possible for mobile devices.

Mobile plugins for CMS

Plugins offer pre-existing websites (based on a content man­age­ment system) a cost-effective and quick way of op­tim­ising online offers for mobile devices. This option is es­pe­cially re­com­men­ded when website operators stick to the original desktop theme and simply want to extend this to mobile devices. A popular third-party solution is WPtouch for the most commonly used content man­age­ment system in the world, WordPress. The plugin enables website operators to create an in­de­pend­ent, mobile-friendly version of their project, which is basically a separate mobile website. The optimised version will be shown ex­clus­ively on mobile devices and be in­de­pend­ent of the main site. An al­tern­at­ive to WPtouch is the WP Mobile Edition. Ad­vant­ages:

• Using plugins to make adaptions is an easy and cost-effective solution. Basic versions are usually available for free. 

Dis­ad­vant­ages: 

• Whether your website runs smoothly or not is in the hands of the third-party’s software support.

All devices are delivered the same content. This means that website operators have less freedom to respond to specific re­quire­ments regarding mobile use than with separate mobile web pages.

It’s common to orientate websites during web de­vel­op­ment to the search engine market leader, Google. Around 65% of searches are carried out using Google. Website operators that disregard essential Google guidelines could end up with sig­ni­fic­ant vis­ib­il­ity losses. According to this article, Google prefers a re­spons­ive website design. The company justifies the decision as follows:

• With re­spons­ive design, content is available under a URL and can easily be shared and linked to. 

• Unlike the operation of mobile sites parallel to the desktop version, Google can easily assign re­spons­ive designs to precise indexing prop­er­ties. This means that it is no longer required to signal the presence of cor­res­pond­ing desktop or mobile sites.

• Re­spons­ive web projects require less main­ten­ance than internet presences with several identical pages.

• Since re­spons­ive designs get by without redirects, any typical errors that could possibly occur when assigning separate mobile sites are basically avoided.

The most important issue for Google is that re­spons­ive websites only need to be crawled once, whereas separate mobile websites need to be in­di­vidu­ally re­gistered by Googlebot. The search engine provider saves sig­ni­fic­antly on resources if companies use a re­spons­ive website design.