Which Bootstrap consumer launches were successful

Image: Simon - Pixabay.com

(02.03.2016) There is agreement in the specialist literature: The mobile Internet is now part of everyday digital life and lifestyle. According to a study by the industry service Bitkom, the smartphone is already the main access to the Internet for most people and only 16% of those surveyed name the desktop PC as the main access to the Internet (source: Bitkom survey on smartphone use).

In this article, I'll show you the importance of building and optimizing a mobile website. I will first explain the technical requirements for a clean implementation of the mobile website in order to then go into the optimization of the most important mobile-specific ranking factors. This also includes usability and the local optimization of the site.

So that you can optimize your website optimally for mobile devices and benefit from all mobile ranking factors in the best possible way, this article provides a kind of "extensive checklist" with the most important topics of mobile optimization, which at the same time cover the most important mobile ranking factors.

What options are there for implementation?

There are two different ways to create a mobile website. Which variant you choose is a matter of taste.

It is possible to modify a website so that its display always adapts dynamically to the device used and its resolution. This method is called "Responsive Web Design" and is implemented using HTML5 and CSS3 media queries. The advantage of responsive web design is that there is only one page version for both desktop and mobile devices. This saves you having to maintain two separate websites.

Build a separate mobile website

If a responsive web design cannot be implemented or if a clear separation of mobile website and desktop page is favored, a separate mobile website can be set up under a different URL structure. As a rule, this mobile version of the website is then created on subdomains such as mobile.example.com or m.example.com.

In this case, it is important that you set up clean redirects that always redirect the user who accesses your website with a mobile device one-to-one to the appropriate mobile subpage.

Google supports both variants, but responsive web design is recommended.

Design and construction of the mobile-optimized website

It is important that you offer the user a perfect layout that is fully adapted to the mobile device. In particular, make sure that all content can be read and accessed without problems and without zooming gestures.

You should avoid software or technical implementations based on Flash or Java, for example, as most devices simply cannot output them and the Googlebot does not “understand” them.

If possible, implement your mobile-optimized layout with HTML5 and CSS3.

Examples of a successful mobile-optimized layout

Performance is a very important topic and should not be ignored when implementing a mobile-optimized website. Unfortunately it is still the case that there is not a fast network like LTE everywhere or that the user has used up his high-speed volume. I think everyone knows how slow it can be to connect to a website under these circumstances.

So don't make it even more difficult for the user than it already is, because you didn't value reasonable performance, and keep your site as "light" as possible.

The best way to do this is to use the following methods:

  • Use well-configured browser caching
  • Compress your content (images, HTML, CSS and scripts)

Also make sure that you do not use too many graphics or extensive scripts.

In addition to the areas of design and performance, it is just as important that your website runs properly. If your mobile-optimized page exists on a subdomain such as "http://m.example.com", then make sure that all content is correctly forwarded to the mobile-optimized page.

example.com/inhalt-a should then correctly redirect to m.example.com/inhalt-a and not to m.example.com.

Also, do not exclude any important content such as images, CSS, HTML or JavaScript files from crawling.

Always offer the user the option of opening the appropriate desktop version of the current subpage. To do this, you can, for example, set a link in the footer with the caption “To the desktop version”. 

If there is a subpage on your desktop version that is not available in this form as a mobile page, then please do not output a 404 error on the mobile page, but redirect the user directly to your desktop page. Even better: You can also create a suitable mobile version for this subpage.

If you have decided to host your mobile version on a subdomain, make sure that you do not link to the wrong version. If, for example, there are internal cross-links to other content / sub-pages within your content, then do not link these to the desktop version.

Interstitials? Please do not!

Would you like to draw your users' attention to your great app when they visit the mobile site? Then please do not use interstitials, i.e. areas that cover the entire visible area. This annoys the user and in the worst case can frustrate him so much that he leaves the website immediately.

What is "allowed" within the scope of the possibilities, however, is the use of a small banner, as can be seen on this screenshot.

This is subtle, not annoying, but still noticeable.

Provide the user with quickly accessible contact information anywhere and offer click-to-call buttons with which they can start a call directly from their smartphone with a simple click.

If you add forms or other input fields, remember that the correct keyboard layout is always displayed to the user. It is also advisable to help the user with real-time data validation or an autofill function. This makes working on the small display much easier.

If possible, always offer the user an internal search function with which they can quickly and easily search for relevant content that cannot be found using the navigation. Always place the internal search prominently in the upper area or directly at the page header.

Always arrange your most important call-to-action buttons prominently on the respective content so that it is immediately clear that the user not only finds content here, but can also take action. For example, a reservation function in a restaurant should not be hidden on the mobile page.

For companies that focus on local services, it is quite important to be visible in Google's mobile search results.

To do this, first optimize your individual content with relevant local keywords and then create a Google My Business profile. Fill it out as best you can, preferably completely.

Information such as address data, telephone numbers or ratings are then taken from your Google My Business profile and have a positive effect on the display in local search results.

You can see what a local search result can look like in this screenshot:

Helpful information for the implementation

If you are creating a mobile website or want to make your existing website as responsive as possible, we recommend that you take a look at the following frameworks and tools:

Bootstrap from Twitter:

Bootstrap is a comprehensive framework for the effective design and implementation of responsive websites. In addition to some interesting demo pages (which you can of course build on), the package also contains extensive documentation.

Skeleton: Responsive CSS Boilerplate:

Similar to Bootstrap from Twitter, Skeleton is a CSS boilerplate for the efficient creation of responsive themes. Skeleton also has numerous predefined elements and a demo page.

Jetpack by Wordpress.com:

If you use WordPress as your CMS, you can use the free “Jetpack” plug-in to create an adapted mobile theme Activate in the settings.

Google PageSpeed ​​Insights / Pingdom Website Speed ​​Test:

With these tools you can analyze the performance of your website and get specific suggestions for improvement.

Google's PageSpeed ​​Insights even includes a mobile performance review.

Even if the task of "mobile optimization" seems complex at first, you should take on the topic and optimize the website for mobile use.

If you implement all the necessary steps as described in the article, you will benefit as best as possible from all mobile ranking factors.

Finally, once again in a nutshell, the most important points that lead to a successful and successful optimization:

  • Make sure that the layout is clear, structured and accessible
  • Do not build in any technical obstacles
  • Make sure it is performing well
  • Avoid interstitials and ensure good usability
  • Optimize your page for local search results

I hope that I was able to help you with this post and that you are now well prepared for the creation and optimization of your mobile website. If you have any further questions, the best way to do this is to ask me via Google Plus in the comment area.