Responsive Web Design: Theme’s errors on narrow screens

Today all new templates are responsive, but note that sometimes developers only sets the Bootstrap or other responsive frameworks and responsive plugins (for sliders and etc.) and forget to properly fix styles for beautiful and correct display of website pages on mobile devices. Unfortunately we see such defects even on the top themes demos. Consider the basic errors.
All tests were executed on a mobile phones Samsung GT-S5830, Android version 2.3.6 and Samsung GALAXY S4 Mini, Android version 4.2.2.

1. Sliders

Sliders are the weakest point in responsive templates on narrow screens: stuck together text lines, collide buttons, shifted pictures, shifted off the screen text, too small, difficult to read text, or on the contrary text blocks overlapping the picture and so on.
Something can be corrected by changing styles and settings for mobile resolution, some errors are really hard to fix, and may be sometimes it’s better NOT to show slider on narrow screens (premium sliders, such as Revolution Slider, allow to make it via the settings).

Look at examples of incorrect sliders work on narrow screens

Pictures are shifted relative to each other – had to be under each other.

Stuck together text lines, button text and background are shifted.

Incorrect, distorted proportions of pictures.

Text blocks overlap the picture which in this case isn’t visible.

Here we see only a part of the slide – slider dosn’t resize to fit the screen.

Another example of nonresized slider:

Slider navigation covers active links on a slide. What will work when you click: navigation or button? Unfortunately link on the button is unavailable.

 

2. Rational use of the screen on the mobile device

Size of empty blocks is the same as on the big screen, sometimes taking a third or even half of the screen height.

 

3. Website header

Too small logos. Icons are placed too closely and so small that is hard to tap a link.

 

4. Navigation

Menu is available only when you are at the top of the page – it is very inconvenient when pages are so long.
ToTop button often doesn’t work.
See example:

 

5. Map

Enabled scrollwheel zooming on the wide (on small screens map is always fullscreen and has large height) map doesn’t allow users  to scroll to content below the map, but just starts scrolling the map.
In the example below the map a contact form is located – try to see it.

 

6. Focus outlines on links

The default – orange – outline highlight color on focus isn’t changed – it often does not match the design.

 

7. Image/text carousel

When scrolling carousel its elements are not completely visible.