Nearly two-thirds of Americans are now smart­phone owners, a fact that shows how digital world is becoming even more mobile. Today, powerful all-rounders come pocket sized and are beginning to replace lots of different devices. Standard functions like, tele­phon­ing or sending text messages, are in­creas­ing­ly fading into the back­ground. Web ap­pli­ca­tions on mobile devices, however, continue to gain pop­u­lar­i­ty. 10% of smart­phone users in the US don’t have any other access to the internet apart from on their device. According to experts, mobile data traffic worldwide will increase fivefold to 49 exabytes by 2021.

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­hav­ioral 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 optimize web presences for mobile devices without sac­ri­fic­ing func­tion­al­i­ty 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­spon­sive designs, or accessing plugins for popular content man­age­ment systems (CMSs).

Why should you optimize your website for mobile devices?

As this blog post on finding more mobile-friendly search results shows that online stores, news portals, and corporate iden­ti­ties will have a hard time staying afloat in the future if they don’t start catering to mobile visitors. Since April 2015, website operators who neglect their mobile visitors have been more likely to see sizeable losses in ranking regarding mobile web searches. This is due to a change in the Google search algorithm, which is often referred to as “Mo­bi­leged­don”. By taking mobile-friend­li­ness into account, Google is of­fi­cial­ly rec­og­niz­ing the massive increase in mobile internet usage. The focus here is on user-friend­li­ness. Mobile devices have smaller displays compared to PCs and laptops and are operated by touch or swipe gestures. What’s more, the bandwidth of the mobile internet con­nec­tion is generally very limited. Websites that aren’t scalable, use :hover elements to show important in­for­ma­tion, or contain data-intensive graphics won’t display properly or be easy to use on mobile devices. As a con­se­quence, Google removes these from the web search or flags them as in­ap­pro­pri­ate, po­ten­tial­ly resulting in massive traffic and sales losses.

Is your website ‘mobile-friendly’?

It’s easy to find out whether your website is mobile-friendly or not by using one of the free online an­a­lyt­i­cal tools offered by numerous providers. We recommend the following tools for checking your website’s mobile-friend­li­ness.

  • Google Mobile-Friendly Test: you can use Google’s Mobile-Friendly Test to check how suitable your website is for mobile devices. Enter the cor­re­spond­ing URL into the box and click on ‘analyze’ to see an instant val­i­da­tion. In addition to a general as­sess­ment and an error report, the tool also offers a preview function, so you can see how your site will look on a smart­phone display. There are links offering further tips on how to optimize your site.
  • W3C Mobile Checker: the Mobile Checker from the World Wide Web Con­sor­tium (W3C) also requires you to simply enter a URL to get the an­a­lyt­i­cal process started. The W3C Mobile Checker website gives users the option of checking three different device profiles: 640 x 960 XHDPI, 640 x 1100 XHDPI, and 800 x 1280 HDPI. This free tool differs from Google’s Mobile-Friendly Test in that the error report goes into detail and is aimed more towards advanced web de­vel­op­ers.
  • IONOS Website Checker: IONOS also offers a free Website Checker with which you can check the mobile-friend­li­ness of your website. The tool only needs the website’s URL in order to read the source code. In addition to seeing how your website is presented on different devices, the analysis also captures three further aspects of a suc­cess­ful online project: how well it can be found by the search engine, how secure it is, and how long it takes to load.
Website Checker

Ap­proach­es to website op­ti­miza­tion

By pri­or­i­tiz­ing 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­spon­sive 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­ment­ed with little effort, re­launch­ing an es­tab­lished site after op­ti­miza­tion can prove costly. Depending on the project, there are many ways to develop a device-in­de­pen­dent site: separate mobile websites, mobile website templates in adaptive or re­spon­sive designs, and plugin solutions for content man­age­ment systems.

Mobile Websites

Mobile websites comprise HTML documents, which are created in­de­pen­dent­ly of the homepage and are ex­clu­sive­ly 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 nec­es­sar­i­ly have to be identical to one another. It makes sense to offer a mobile website as an al­ter­na­tive 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­for­ma­tion on the mobile version, such as timeta­bles and in­ter­rup­tions, which are more helpful when on the go. This shows that mobile websites don’t nec­es­sar­i­ly have to be im­ple­ment­ed as sub­do­mains. They are generally optimized 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.

Quote

"Mobile to overtake fixed Internet access by 2014", stated analyst Mary Meeker in 2008.

Ad­van­tages:

  • Website operators can specify exactly which website content should be optimized for mobile devices and which in­for­ma­tion they would prefer to keep on the desktop PC version. 
  • Both versions of the website can be cus­tomized sep­a­rate­ly without the changes affecting the other version.
  • When creating mobile websites, web de­vel­op­ers have the op­por­tu­ni­ty 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­van­tages:

  • Every separate website that is created as a mobile version must be main­tained in­di­vid­u­al­ly.
  • Changes made to the desktop version don’t au­to­mat­i­cal­ly 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.

Tip

Check out how to build a mobile friendly website in a few easy steps with IONOS’s website builder!

Adaptive design

An al­ter­na­tive to designing a separate website for mobile use is to have a layout that au­to­mat­i­cal­ly adapts to the re­spec­tive device. The website’s pre­sen­ta­tion is based on the visible part of the screen (the viewport). Adaptive designs depend on pre-defined break­points – a rel­a­tive­ly 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­spec­tive screen size (like with re­spon­sive design described below) can’t be im­ple­ment­ed with adaptive websites. Media queries are used as a technical basis for adaptive designs. This includes a CSS3 concept which regulates the al­lo­ca­tion of style sheets to an output medium according to its prop­er­ties. Websites with adaptive designs are usually optimized for certain device types. Web de­vel­op­ers orientate them­selves on popular products such as the iPhone or iPad, meaning that relevant websites aren’t always optimized for the chosen device.

Ad­van­tages:

  • On the contrary to re­spon­sive web design, an adaptive design is char­ac­ter­ized by its reduced com­plex­i­ty.
  • 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­van­tages:

  • Because of the focus on certain display sizes, adaptive designs can ex­pe­ri­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.

Re­spon­sives design

Adaptive websites only provide a limited number of display options, but as the variety of mobile devices increase, there’s a bigger demand for more flexible display types. Many website operators prefer re­spon­sive design, which is also based on CSS3 media queries. As with adaptive design, the server delivers the same HTML code to all devices. This means that the site is available in every kind of layout variant under the same URL. But unlike adaptive design, the adap­ta­tion to the device’s screen size is carried out smoothly without a rigid grid of defined viewports. This allows a mobile site to fully utilize all the available space on the device’s screen. Due to the com­plex­i­ty of re­spon­sive designs, launching a website on this design principle is tedious and expensive. The content, as well as the layout, must be designed in a flexible way. Text segments, images, videos, and tables should work on smart TVs as well as on cell phones. Instead of de­vel­op­ing their own designs, lots of website operators choose to use content man­age­ment systems, like WordPress, Joomla, Drupal, and Typo3. These open source projects depend on large user and developer com­mu­ni­ties and offer a wide range of pre­fab­ri­cat­ed design templates with re­spon­sive designs, some of which are free to use.

Ad­van­tages:                                                          

  • Re­spon­sive designs take every display size into con­sid­er­a­tion, including mobile devices that will be on the market in the future.
  • Just as is the case with adaptive design, no further mobile website design must be main­tained.
  • Good re­spon­sive designs offer user-per­cep­tion com­par­isons on all supported devices.
  • Google prefers re­spon­sive designs.

Dis­ad­van­tages:

  • Im­ple­ment­ing a re­spon­sive design is costly (es­pe­cial­ly when it comes to pre-existing projects). 
  • Content from complex web pages can’t always be trans­ferred to small displays so easily.
  • Mobile devices load the same data amount as desktop PCs. Page loading times on mobile devices is thus usually slower than on separate mobile websites.

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­ti­miz­ing online offers for mobile devices. This option is es­pe­cial­ly rec­om­mend­ed 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­pen­dent, mobile-friendly version of their project, which is basically a separate mobile website. The optimized version will be shown ex­clu­sive­ly on mobile devices and be in­de­pen­dent of the main site. An al­ter­na­tive to WPtouch is the WP Mobile Edition. Ad­van­tages:

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

Dis­ad­van­tages: 

  • 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.

Fact

In 2015, Google saw more searches from mobile devices than from PCs - all the more reason to ensure that your site is optimized for mobile devices!

Google prefers re­spon­sive websites

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 guide­lines could end up with sig­nif­i­cant vis­i­bil­i­ty losses. According to this article, Google prefers a re­spon­sive website design. The company justifies the decision as follows:

  • With re­spon­sive 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­spon­sive designs to precise indexing prop­er­ties. This means that it is no longer required to signal the presence of cor­re­spond­ing desktop or mobile sites.
  • Re­spon­sive web projects require less main­te­nance than internet presences with several identical pages.
  • Since re­spon­sive 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­spon­sive websites only need to be crawled once, whereas separate mobile websites need to be in­di­vid­u­al­ly reg­is­tered by Googlebot. The search engine provider saves sig­nif­i­cant­ly on resources if companies use a re­spon­sive website design.

Go to Main Menu