Today a number of users that use the Internet on mobile devices is very large, and with every passing day it becomes even larger. That’s why improving their sites to fit small screens is an important task for many website owners, even for those who lately did not even think of creating a mobile version of their website.
There are two solutions to this problem:
- A mobile version of your website;
- A responsive web design.
As we know, a mobile version of your website is a separate project, which requires a lot of effort, time and money. At the same time, in fact, you get two separate websites, one on a primary domain, the other – the mobile one – on a subdomain. It is considered a big disadvantage regarding website promotion in search engines. Therefore, website owners now more often think about a responsive web design. What’s more, the Google company strongly recommends exactly this option.
A responsive web design is a design, which changes and responds to fit the user’s screen size and lets you to display your single website on any device in a nice and user-friendly way.
How you can create a responsive design
So, you have a task: you have to build a website which will respond to fit different types of screens.
The simplest solutions of a responsive web design:
- A fluid layout;
- Scaling of images and fonts;
- Movement of blocks depending on the screen size.
The size of all elements (blocks, images, fonts, videos, etc.) is specified in percent of the width of the screen. For example:
|
1 2 3 4 |
.container { width: 800px; max-width: 90%; } |
Here, the width of the object is specified as 800 pixels, but it does not exceed 90% of the screen width. Thus, on a large screen, the object will have the width of 800 pixels and on a small screen it will scale to the screen’s width.
In the same way, we can scale an image:
|
1 2 3 4 |
img { max-width: 100%; height: auto; } |
For text fields a min-width parameter is often used. It is similar to max-width, but it sets an opposite value for the object, i.e. the minimum object size.
So you can see, how you can scale the header and font sizes, but what do we do with text blocks, so that they do not go beyond the window size and do not cause the browser to have scroll bars?
One of the simplest ways to move the text depending on the screen size is to create several columns that fit the width of the screen if it gets smaller. If it becomes no longer possible with consideration of the minimum font size, they move down, i.e. on the big screen, the site will consist, for example, of three text blocks:
|
|
|
If the screen gets smaller, the blocks move correspondingly:
|
|
|||
|
When it becomes necessary, they form a vertical row:
|
|||
|
|||
|
There are various responsive web design methods; some of them are simpler, others are more complex, but they give you more options for your website configuration. That is why even for large sites with a lot of features and a big number of interactive functions it is possible to change those to fit various screen sizes, too.
Advantages of a responsive web design
Before we talk about the advantages, it is worth reminding you that only those websites need a responsive design, which are visited by users from mobile devices. Therefore, traditionally we compare two options: a responsive design and a website’s mobile version that is used as an alternative.
- The biggest advantage: the user can effectively use the site on any device, ranging from a desktop to a small mobile phone.
- You can access the site on any device at one address, which is very useful for promotion in search engines, while redirection to a mobile version, which is usually located on a subdomain, divides the traffic into two streams.
- We solve the problem of content duplication, which often puzzled webmasters in using mobile versions of websites.
- In Google search results on mobile devices, sites with such a design will receive advantage over not adapted resources.
Moreover, for creating a responsive design, in most cases, it will be enough to make some relatively small improvements in CSS sheets and HTML code, which allows us save some time and money.
Disadvantages of a responsive web design
A responsive web design is not a universal remedy and we need to use it wisely. Because, like any kind of development, it has some disadvantages:
- Different tasks and usability. When users of complex large sites, for example, bank customers, use the site on mobile devices, most often they need a limited volume of information and features: telephone, the address of a closest department, internet banking login, etc. A mobile version will show these functions in the first place, while if we use a responsive web design, we will partially lose in usability, because most likely, the blocks with important information will appear on different scroll screens. On the other hand, today it is very hard to predict the behavior of the user of a mobile device and guess what does he really need and what not.
- Reduction of the loading speed. The “weight” of a complete site is always bigger than that of a light mobile version. Of course, with the use of modern smartphones and iPad/iPod devices, as well as with a high-speed internet connection, this is not a problem. However, we still have users of old telephones and people who connect to the Internet through 2G. They will have to waste their time waiting for the entire page to load to view only its part.
The summary: what is better and when?
Generally, in 90% of cases a responsive design is simple, user-friendly, helps in promotion of your website in search engines and allows the users to use your site on any device they choose.
However, it is important to understand that a responsive web design will require bigger financial investments than a usual cross-browser web design, which you can get automatically via Photoshop to html conversion engine. Therefore you should decide beforehand: whether the users of mobile devices are your target audience and whether your site needs it at all.
Besides, in some cases, a responsive web design is not possible to create, for example, for advertising sites that are based on flash technology or for web resources with unusual design solutions. It is very important to consider when your designer creates a “draft” of your future website.
To summarize, there is no universal solution that works for everyone. Everything depends on a specific project, its needs and methods used in its realization.
