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.

mobile

See on mobile

7e5ff814b87b19103a0b647008bb035f_qr

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

river_slider

See on mobile

0ffa9f7c2d101cb365f9a6ce7fde06ca_qr

Incorrect, distorted proportions of pictures.

mobile

See on mobile

fc63363b79149059a183f527ada0fbe7_qr

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

mobile

See on mobile

3fe0ee4fdf78b19f1b0ca7b5ec3c4639_qr

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

mobile

See on mobile

d12c2e0f49d4fd344861048a21fcdc84_qr

Another example of nonresized slider:

mobile

See on mobile

6349bffe250a55dab273eae9332d8060_qr

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

mobile

See on mobile

8fc98591ea5f6b8173a1b7255931012d_qr

 

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.

mobile
bigblockmobile

See on mobile

47e76e2dc0e7d89d47bee7aecc3652d5_qr

 

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:

mobile

See on mobile

9579b21a5c8a59bd3acf0fee3cd9c4e0_qr

 

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.

contact-sentinel

See on mobile

163267137249f72a6ae44514d34b7dc2_qr

 

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.

contact-sentinel

See on mobile

8184c82acbdecdf4c3ba6b0d22a707a6_qr