Examples of high-quality adaptive website design in RuNet

[subornaakter24]

Does responsive design interfere with the display of ad units (for example, in Google AdSense)?

If your site hosts advertising content, you should pay special attention to the choice of formats for its materials, since wide blocks (say, banners 728 × 60 px) may not fit on a phone screen measuring 320 px.

It is preferable to use standard rectangular blocks (for example, 300 x 250): they can be adjusted to both mobile phone screens and PC monitors.

There are thousands of different mobile devices. What screen resolutions should a responsive website support?

It would be good if at least the following permission parameters were set for media queries in CSS3:

320 px (iPhone, landscape mode);

480 px (iPhone, portrait mode);

600 px (Android tablets);

768 px (iPad and Galaxy Tab tablets);

1024 px (iPad landscape mode and PC desktop).


Read also!

"Website Design: How to Properly Declare Yourself on the Internet"
Read more
Publishing house "Kommersant"

Most representatives of electronic media, as it turned out, prefer mobile sites, but there are also those who have not yet thought about the suitability of their publications for users who prefer automotive mailing list phones and smartphones. Perhaps only Kommersant stands out from the crowd.

Publishing house "Kommersant"

The main page of the adaptive site presents news in two versions - compressed and detailed, there is also an article with announcements, presented in very small gray font. Most likely, this is not the best option for viewing on mobile devices.

News portal "Live Volgograd"

A well-executed adaptive design of the news site. The portal works perfectly in the desktop version, and on the screen of tablets and mobile phones. For the latter, the version has a very convenient news format with a preview.

News portal "Live Volgograd"

Meduza.io

The Meduza publication places its bets on news because it knows exactly what people read on their phones and smartphones the most. That is why the adaptive website of the information portal is a long news feed with small inclusions from other sections. By the way, you can get to know each of them in more detail by going to the “Menu”.

Meduza.io

Sberbank

The adaptive version of the official Sberbank website retains all the capabilities available to users who access the page from a desktop PC. It seems that the functions are placed in accordance with the requests of mobile users.