How to improve the responsive version of the site

How to improve the responsive version of your website? - 9 tips

1. Prioritize content types.

Responsiveness (or rather, the grid on which responsive design is usually based) has the effect of "compressing" content by default at low resolutions.

What used to take up, for example, four columns in one row and was visible side by side, on mobile devices is one under the other.

As a result, the height of such a page increases dramatically. In order to make the way from top to bottom, a lot of finger movements are required.

Therefore, make sure that the main elements that are useful to users are located as high as possible.

This is necessary in order not to make them look for what they are potentially most interested in for a long time. The sooner visitors notice this, the better - both for them and for you.

2. Don't show everything that is visible on desktops

This tip follows directly from the previous one.

As I already mentioned, the grid implicitly dictates that individual columns hide one under the other on the screens of small devices.

Does this mean that a smartphone user should see exactly the same information as a website visitor from a desktop computer?

Absolutely not.

We treat mobile devices differently than computer monitors. Because of their size, we expect them to navigate websites a little differently.

We want everything to be as compact as possible so that the mobile site contains only the most necessary information.

Assess whether all the information that is "usually" displayed on your site will be useful for mobile users. If you don't think so, keep hiding some of the elements so you can focus on the important ones.

3. Provide appropriately sized images to users

When talking about how to improve a responsive website, we shouldn't forget graphics.

A responsive site view can be easily scaled horizontally. Simply expand or narrow your browser window to see how the site looks at different resolutions.

The problem may be that images inserted incorrectly may simply look bad on small screens.

On the one hand, they may be "underdrawn" to the edge of the screen, and on the other hand, they may simply be unnecessarily stretched compared to the original.

Therefore, "responsive website" is not one word, the presence of which solves all issues. Behind this is the need to consider all possible resolution ranges. Also, on each subpage.

All this to make sure that this view (and the graphics in it) is simply optimal.

4.Make email addresses and contact numbers viewable

If you're thinking about how to improve the responsive version of your site, this is definitely one of the basics.

There are certain website elements that should be treated appropriately on mobile sites.

We are talking about e-mail addresses, for example. By placing an appropriate link to such an address, we can select it with our finger. This will open an email client that you can use to send messages.

The same applies to phone numbers. By adding a "tel:" link, the user can touch the number with their finger and go directly to the dialer, that is, the application responsible for dialing the number. The window is already filled with the specified phone number - there is no need to insert it, much less rewrite it "live".

These changes seem minor, but trust me, users appreciated it.

5. Reduce the weight of graphics

Once again we dive into graphics for a moment.

Yes, technology is moving forward. Data packets are constantly increasing, and different types of networks also give us the ability to browse the Internet much faster than before.

However, nothing prevents us from using the so-called image compression.

This involves reducing the weight of images so that they simply take up less space on the server with little or no loss of quality.

As a result, images load faster and the server "eats" fewer resources.

In many cases, the amount of work that needs to be done in this direction is disproportionately small compared to the result obtained.

On this occasion, I can recommend you one of our texts: how to optimize the graphics on the site?

6. Make sure the fields in the forms are of the correct types

On computers, we do not notice this problem. The fact that the form has two fields "Name" and "Phone number" does not matter to us. With the help of one keyboard, we can fill both fields equally easily.

Everything is different on the cells.

If a field in HTML is marked with the "number" type, then when you select such a field, the mobile browser launches the numeric keypad by default.

On the other hand, if the field is marked as "text field" or "text", the default keyboard will be displayed.

Thus, the user will have to take one step less. If the page requires the visitor to enter a phone number at a specific location, then setting the field type to 'number' simply saves time. After that, the entire process of filling out the form runs more smoothly.

Therefore, do not forget to mark the required fields with the required types.

Here's some text you might find interesting: Forms on websites - how to design them effectively?

7. Adjust the font size and line height.

One of the obvious ones in the context of how to improve the responsive version of a website.

We sometimes read a lot on mobile phones and tablets. It cannot be denied that they are handy devices for just this activity.

Therefore, it is necessary to do everything possible to help users with this.

The text on your site just needs to be clearly visible. In some cases, it may even make sense to slightly increase the font size compared to those available on desktop computers.

The same goes for line height. The text cannot simply be "compressed". There must be the correct spacing between individual lines so that the text "breathes" and is easy to read.

8. Consider adding a search engine

Because of their design, responsive websites are often not as intuitive to use as their desktop counterparts.

This is especially true for more complex sites with lots of content inside.

If your site falls into this category, consider providing users with a search engine.

If you have a lot of blog content, placing a search form at the very top should be a cost effective move.

In this case, you will save users time, who will be able to find what they are looking for much faster.

Some time ago we also published a relevant text on this topic in our blog: search engine on the site - how should it work and look like?

9. Adjust the button size

As they say, last but not least.

In the context of how to improve the responsive version of a website, buttons should not be forgotten.

They are responsible for performing the most important actions - searching, selecting subpages and even buying products. They have thousands of uses.

Therefore, the rule is simple - buttons must be not only visible, but also the correct size.

All this is done so that our finger can comfortably use the button.

How to improve the responsive version of a website? - summary

As you can see, the requirement to have a responsive site and the mark that the site is such mean absolutely nothing.

The very fact of using the so-called "grid" in the construction of the site will not help.

You need to carefully analyze the whole site to make sure that the site actually looks optimal at all relevant resolutions.

I hope that the above tips will be useful to you.