Ways To Optimize WordPress Website For Displaying On Mobile And Tablet Devices

by | Development, WordPress Tutorials

We have recently had a post prepared, entitled “Web Design Trends for 2015”. We have decided not to publish it as the topic has already been extensively and well covered in the regional blogosphere. Instead, we have decided to focus our attention on texts that will help users adapt to the new trends and all potentially necessary changes. This is one of them.

The current predictions and recommendations state that the optimization for mobile browsers is becoming an essential task in case you haven’t already done it. To comprehend the importance of this merit we don’t actually need any extensive analysis; rather, simple examples of everyday life appear as quite enough of teller. Practically, all it takes is to pay closer attention to what devices people are commonly using in their everyday communication, public places and transport.

It is worth mentioning that a number of companies dealing with market analysis agree on the fact that 1/3 of all banking transactions in 2014 was carried out with the help of mobile computers (tablets and smartphones). Based on this data, we can get a roughly calculated number as to how many of them use the same device for browsing the web, reading, researching and searching even your site, maybe.

Mobile Version Of WordPress Site?

Responsive Design Or The Port?

One of the most popular and potentially the easiest ways to get WordPress running the way you want it on your device is to purchase a WordPress theme that relies on responsive design. Simply put, the quality of this design is to automatically detect the size of the browser’s window and adjust the website display. The results may just be entirely satisfactory. One theme is set to adjust to different devices, whether it’s a phone, tablet, screen PC or a laptop. However, this solution requires a new theme and a set of additional settings and changes that needs to be covered. It requires a complete website redesign.

responsive-design-image-1

A far easier and far less complicated way to achieve what you are after without having to go through your WordPress redesign process is plugin that allows for a separate mobile version of the site which will be displayed to users viewing the site through their phones and tablets. You can still keep the old design as it will be displayed on big screens (desktop and laptops) just as before.

The procedure is simple. All it takes is to install the plugin through the control panel of your website and activate it. Depending on the built-in options, you can adjust the mobile version of your site and manipulate the content as well as ways of displaying it. Here are a few plugins that can help you:

WPtouch Plugin

This plugin is a popular solution. It allows you to view mobile versions of the site and comes with a default theme called Bauhaus. The theme is pretty flexible and can affect the colors, website logo, icons, fonts and social icons.

wp-touch-plugin

The number of articles shown on the home page can also be easily determined. In the same way, certain categories may be excluded from the display if you do not want them to be shown to users of portable computers with smaller screens. Judging by the comments of satisfied customers, the plugins also includes a slider rich in features.

The professional version of this plugin costs $49 and has four additional themes and three additional addons (modules): addon for caching mobile version of the site, responsive images and an addon that shows the content intended for users with mobile devices only.

The plugin can be installed from the WordPress dashboard directly or by downloading the manual installation via FTP client here: https://wordpress.org/plugins/wptouch/

WP Mobile Detector Plugin

WP Mobile Detector detects whether a visitor views a website through an ordinary mobile phone or a smartphone. It automatically detects up to 5000 devices, and based on the results it shows the appropriate theme. As for the ordinary mobile phones, this plugin excludes all images and advanced elements of the HTML programming so pages load way faster than they normally would. Smartphones have all the images automatically resized, minimized and adjusted to the size of the screen in case they are too big for the smartphone format.

wp-mobile-detector-plugin

The plugin has five default themes which might as well be described as minimalist. The professional version costs $50 and it features five additional mobile themes and an editor. It also supports mobile advertising through services such as AdSense.

The connection can be installed directly from the WordPress control dashboard or by downloading the manual installation via FTP client from here: https://wordpress.org/plugins/wp-mobile-detector/

Jetpack Plugin Brings Its Own Cell Phone Module

Within Jetpack plugin there is a module for displaying the site on mobile devices. It’s simple, easy to setup and functional plugin which does the work. One can say that its main flaw is the fact it lacks a lot of options. All settings come down to determining the display of articles on the home page and archive pages, that is – whether there will be the whole article running or just the part of it.

jetpack-mobile

This plugin is completely free; it can be installed directly from the WordPress dashboard or by downloading the manual installation via FTP client from here: https://wordpress.org/plugins/jetpack/

Note: Jetpack comes with many other modules that you may not need or want. Prior to installation, consider the list of modules that come with this plugin.

WP Smart Mobile Theme Plugin

wp-smart-mobile-wordpress-plugin

This plugin is free too, but unlike the one we talked about in the previous paragraph, it offers far more options. Conveniently, you can set up your personal logo or choose a page that will be displayed as a home page. Google Analytics and AdSense can be added to the mobile version of the site. WP Smart Mobile comes with three themes which allow for the font color and background to be easily changed. There is also an option to select the menu which will be screened in the mobile version which does not depend on the main menu that features on the theme intended for large screens.

screenshot-s w org 2015-10-23 11-41-28

This plugin can be installed directly from the WordPress dashboard or by downloading the manual installation via FTP client from here: https://wordpress.org/plugins/wpsmart-mobile/

WiziApp Plugin

This plugin uses HTML5 technology as design basis. Settings allows integration of Google Analytics and AdSense. One can also choose a menu that will run on mobile devices. All themes are customizable.

screenshot-www wiziapp com 2015-10-23 11-43-48

The plugin comes with a mobile theme called Smooth Touch. There are seven additional themes available at a cost of $49 each. Also, if you find this price to be a bit much, you can pay an annual membership fee (69 $) and get access to all themes, you can remove the branding and be entitled to using technical support during the membership fee.

The port can be installed directly from the WordPress dashboard or by downloading the manual installation via FTP client from here: https://wordpress.org/plugins/wiziapp-create-your-own-native-iphone-app/

WordPress Mobile Pack Plugin

This plugin uses responsive design in order to adapt to different screens of mobile devices. It comes with a theme and six masks. The change in color and character forms can be easily done. In addition, one can add the logo of their own choice and graphic elements that will display on their website in a line that will make it more visually recognizable. Google Analytics can easily be integrated by adding the UA-000000-01 code.

wp-mobile-pack-wordpress-plugin

In addition to the six additional masks for the theme, displayed in random pick on the home page, there is the option to easily add additional photos.

The port can be installed directly from the WordPress dashboard or by downloading the manual installation via FTP client from here: https://wordpress.org/plugins/wordpress-mobile-pack/

Site Optimization Is Necessary All Throughout The Interim Period

At the moment of the technology development, such optimization is necessary in order to properly show the content on the device through which the website is viewed. Optimization, changes and new adjustments may even be difficult especially during this transitional period when they encounter the design mode, screen size and new habits of browsing the Internet. If we look at trends like responsive design and TheGrid’s futuristic approach to the project, it is evident that the new methods of programming and designing pre-count on all kinds of devices and screen sizes. Active and planned optimization will no longer be so necessary. Until then, though, we will have to get our offer to better adapt to the demands of visitors.

So, What Is It That We’ve Done?

You may have noticed by now that the AdriaHost blog is optimized for display on mobile and tablet devices. Given how advanced we are we have decided not to use any WordPress widgets. We sketched the desired look we wanted for our blog and we’ve made a separate template that our site will be using for the blog only. We’ve done the optimization through CSS styles entirely, with the 1070px Grid System.

The process of modifying the existing theme demanded a lot more time than installing a WP plugin or creating a responsive WordPress theme from scratch, but we do hope you like the new facelift of our blog just as much as we do.

SUBSCRIBE NOW FOR NEW POSTS FROM OUR BLOG!

Slični tekstovi:

15 useful tips and tricks for wp-config

15 useful tips and tricks for wp-config

This file, wp-config.php, is important for the functionality of the whole WordPress site. That file contains data about the database, database user, database user password and other settings. It can be used for...

How to install Dokuwiki from cPanel

How to install Dokuwiki from cPanel

DokuWiki is a simple solution to organize documents and knowledge bases specially designed to be used by many users. Articles, images, important documents, and any that can be saved for public or private, can find its...

Migrate your WordPress in 10 easy steps

Migrate your WordPress in 10 easy steps

Most of the web site migrations on Adriahost are WordPress migrations. Users are moving from different platforms, panels, configurations, somebody can do that easily, somebody needs more time and help, and we are here...

2 Comments

  1. Mausin Shaikh

    Hello Milos, Great informative article. I never thought to optimize a website for mobile through Plugin. I just follow the instructions given by Google Page Insights to optimize the website for Google. Thanks for the article.

    Reply
    • Ivan Blagojević

      Hello Mausin, thank you for reading 🙂 . Feel free to read our other articles, we believe that we have a lot of nice things here.

      Reply

Trackbacks/Pingbacks

  1. SEO Mistakes To Avoid - […] In one of our previous articles we tried to make this process as easy as possible, and we have…

Leave a Reply