Nearly two-thirds of Americans are now smartphone 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, telephoning or sending text messages, are increasingly fading into the background. Web applications on mobile devices, however, continue to gain popularity. 10% of smartphone 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.
You can download the infographic on mobile data traffic worldwide here.
It’s not just the smartphone 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 behavioral change, many website operators are faced with new challenges. Layouts that work on 17-inch screens don’t work on tablets or cell phones. Different phone manufacturers prefer different sizes, so it’s necessary to find out how to optimize web presences for mobile devices without sacrificing functionality on desktop PCs. Ways of dealing with these new demands include creating separate websites for mobile access, using mobile website templates with adaptable or responsive designs, or accessing plugins for popular content management systems (CMSs).
As this blog post on finding more mobile-friendly search results shows that online stores, news portals, and corporate identities 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 inranking regarding mobile web searches. This is due to a change in the Google search algorithm, which is often referred to as “Mobilegeddon”. By taking mobile-friendliness into account, Google is officially recognizing the massive increase in mobile internet usage. The focus here is on user-friendliness. 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 connection is generally very limited. Websites that aren’t scalable, use :hover elements to show important information, or contain data-intensive graphics won’t display properly or be easy to use on mobile devices. As a consequence, Google removes these from the web search or flags them as inappropriate, potentially resulting in massive traffic and sales losses.
It’s easy to find out whether your website is mobile-friendly or not by using one of the free online analytical tools offered by numerous providers. We recommend the following tools for checking your website’s mobile-friendliness.
By prioritizing 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 ‘responsive 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, government bodies, online stores, and newspapers that are wondering how to factor in these new requirements in a time and cost-efficient manner; small companies and the self-employed, earning their living online, are also in a pickle. Nevertheless, implementing these adjustments is a matter of budget. Whereas a mobile-friendly design for newly-created web projects can be implemented with little effort, relaunching an established site after optimization can prove costly. Depending on the project, there are many ways to develop a device-independent site: separate mobile websites, mobile website templates in adaptive or responsive designs, and plugin solutions for content management systems.
Mobile websites comprise HTML documents, which are created independently of the homepage and are exclusively 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 necessarily have to be identical to one another. It makes sense to offer a mobile website as an alternative 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 information on the mobile version, such as timetables and interruptions, which are more helpful when on the go. This shows that mobile websites don’t necessarily have to be implemented as subdomains. They are generally optimized for smartphones, 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 smartphones in mind. This is why it’s worth creating separate mobile websites.
"Mobile to overtake fixed Internet access by 2014", stated analyst Mary Meeker in 2008.
Advantages:
Disadvantages:
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.
Check out how to build a mobile friendly website in a few easy steps with IONOS’s website builder!
An alternative to designing a separate website for mobile use is to have a layout that automatically adapts to the respective device. The website’s presentation is based on the visible part of the screen (the viewport). Adaptive designs depend on pre-defined breakpoints – a relatively rigid design grid that offers different views for precisely-described viewports. Layout versions for desktop, tablet, and smartphone displays are common. A fluid adjustment to the respective screen size (like with responsive design described below) can’t be implemented with adaptive websites. Media queries are used as a technical basis for adaptive designs. This includes a CSS3 concept which regulates the allocation of style sheets to an output medium according to its properties. Websites with adaptive designs are usually optimized for certain device types. Web developers orientate themselves on popular products such as the iPhone or iPad, meaning that relevant websites aren’t always optimized for the chosen device.
Advantages:
Disadvantages:
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 responsive 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 adaptation 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 complexity of responsive 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 developing their own designs, lots of website operators choose to use content management systems, like WordPress, Joomla, Drupal, and Typo3. These open source projects depend on large user and developer communities and offer a wide range of prefabricated design templates with responsive designs, some of which are free to use.
Advantages:
Disadvantages:
Plugins offer pre-existing websites (based on a content management system) a cost-effective and quick way of optimizing online offers for mobile devices. This option is especially recommended 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 management system in the world, WordPress. The plugin enables website operators to create an independent, mobile-friendly version of their project, which is basically a separate mobile website. The optimized version will be shown exclusively on mobile devices and be independent of the main site. An alternative to WPtouch is the WP Mobile Edition.
Advantages:
Disadvantages:
All devices are delivered the same content. This means that website operators have less freedom to respond to specific requirements regarding mobile use than with separate mobile web pages.
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!
It’s common to orientate websites during web development 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 significant visibility losses. According to this article, Google prefers a responsive website design. The company justifies the decision as follows:
The most important issue for Google is that responsive websites only need to be crawled once, whereas separate mobile websites need to be individually registered by Googlebot. The search engine provider saves significantly on resources if companies use a responsive website design.
Are smartphones and tablets the beginning of the end for stationary computers? Many developments confirm this, not just the increasing number of mobile search queries on Google. The mobile first approach follows this trend and places primary importance on creating mobile websites. A slimmer scope and more dynamic layout yield more than just satisfied smartphone users — they boost search result...
The evolution of responsive web design has had a huge effect on typography, and the appearance of a text now needs to be adjustable to any device. Responsive typography therefore needs flexible, adaptable fonts to ensure maximum readability. Learn more in our overview of font in responsive web design.
Der Trend in der Webentwicklung führt weg von statischen Webangeboten hin zu interaktiven Inhalten. Auch wenn HTML und CSS nach wie vor das Grundgerüst einer jeden Website darstellen, greifen Webentwickler immer öfter auf serverseitige Programmiersprachen wie PHP zurück, um dynamische Webauftritte zu realisieren. Zudem bieten clientseitige Skriptsprachen wie JavaScript die Möglichkeit, eine...
The app market has already produced several new and progressive app formats; conventional native apps were followed by the development of web apps and hybrid apps. But then what is a progressive web app (PWA)? Fundamentally, they are based on the concept of a web app that then takes the form of an app. But PWAs manage to go one step further, promising users the optimized use of a mobile device’s...
The mobile web can conjure up a whole host of challenges for web designers but at the same time also offers many opportunities for creating a positive user experience. If a mobile site isn’t configured correctly, then this can quickly lead to a bad user experience. To ensure your mobile-optimized website keeps up with the requirements of an ever-increasing mobile web, you should make yourself...
Provide powerful and reliable service to your clients with a web hosting package from IONOS.
View packages
