Chat with us, powered by LiveChat

How to make your website suitable for mobile users

It’s clear: we now use a lot of smartphones and tablets to surf the internet. So you have to make sure that your website looks good on those devices too. But how do you do that in practice?

 

Responsive design

There are several ways to make your website mobile. The best way I find is the way in which the layout of a site automatically adapts to the size of the screen on which it is viewed. This is called responsive design.

In short, the method means that you include an extra style rule in your style sheet for every part that needs to have a different look when the screen gets narrower or wider. In that extra style rule, you then specify when that rule should be applied, and what those changes should exactly mean.  

Example

I’m sure an example will make this a little clearer. Suppose I have set the text part of my website (the article element) to occupy 80% of the width of the screen (width: 80%;). If someone looks at my website with a screen resolution of 1366 x 768 pixels, then the text part of my website is shown on a width of 1093 pixels (80% of 1366). But if he looks at it with a screen resolution of 1920 x 1080 pixels, then that part is suddenly 1536 pixels wide. I think that is far too wide (the lines become far too long and the text is therefore difficult to read).

What I actually want is for the article element to take up 80% of the screen when my site is viewed at a screen resolution of 1440 pixels wide or lower, and 65% when the screen resolution is higher. If the screen is very narrow (e.g. less than 800 pixels), then the article can take up 95% of the screen instead of the standard 80%. In order to do this, I’ll put the following in my style sheet:

 

        article { width: 80%; }

        @media screen and (min-width: 1441px) { 

            article { width: 65%; }

        }

        @media screen and (max-width: 800px) {

            article { width: 95%; } 

        }

With these style rules I indicate that the article element normally has a width of 80% of the screen. Unless the display is wider than 1440 pixels (min-width: 1441px) or narrower than 800 pixels (max-width: 800px). Then the same one gets the article element a width of 65% or 95%, respectively.

 

This way you can check all the html elements of your web page and give a different value to the properties that have to change when the screen gets wider or narrower in your stylesheet.

 

For example, the menu at the top of my website disappears when the screen gets too narrow, and instead a link is placed at the top of the page. Only when you click on it, you will see the menu.

 

A different mobile version of your site

With responsive design, the appearance of your website adapts to the width of the screen. The content of your web pages does not change, it remains exactly the same with every screen width. But sometimes it is better to make a separate mobile version of your website.

 

It is possible that visitors who request your website with a smartphone, are looking for very different information than the desktop or laptop users who visit your site. A good example is the website of the Airlines. Visitors who call up this site on their smartphone will be more likely to be looking for the current departure and arrival times than desktop visitors. The mobile version of the website therefore looks very different from the company’s desktop version.

 

In this case, you are creating two different websites. The pages that are intended for mobile browsers are placed in a separate folder within your site. Then you put a piece of script on your server that can see which device a visitor uses to call up your website. If this is a smartphone, the script will send this visitor to the mobile version of your site. But if he looks at your site on a desktop or laptop, he will see the regular version.

 

That all sounds quite complicated, but it doesn’t have to be. There are companies where you can put up the mobile version of your site, and who also give you the code that determines whether visitors should be redirected or not.

 

If you want to do it all by yourself, then you put your mobile pages of your website within a folder on your own server, and with one of the scripts of Detect Mobile Browsers you make sure that your visitors are directed to the right pages. But to be able to do so, you need to have some knowledge of html and php.