Pitfalls of responsive web design
Responsive web design is much more than just flexible templates and @ media queries . In fact, this is a completely new approach to design. Given this, I propose to consider several common pitfalls that should be avoided in your next adaptive template.
Screen resolutions
Do not focus on the most common permissions today - tomorrow they will change. And the day after, too. To create a design that will be relevant in the future, focus not on key points, where your design changes, but on what happens between these key points.
')
If you are developing primarily for mobile devices, start building the interface, focusing on the smallest screen resolution that you are going to support. Then simply increase the browser window until your design “goes.” Mark a cue point at this point and correct the flaws in the @ media query . Repeat.
Make sure that you provide a great User Experience on the screens in the range between the resolutions of today's popular devices - and you will please the users in the future. ( See also Trent Walton's Device-Agnostic article - translator comment )
Speed
The meaning of responsive web design is to provide the best user experience on any device. But if your site is loading slowly, it doesn't matter how good the content looks on small screens, or how professionally the images are stretched, because there will be no one who has the patience to see it.
Site speed is above all, allocate some amount from the budget for performance. Use Webpagetest.org to make sure your site loads quickly even on 3G. Pay particular attention to the " Speed Index ", which shows how much time passes before the user sees the content on the page.
Images
Nothing will speed up your mobile site like reducing image size. The new HTML < Picture > tag will be supported by several browsers later this year, but for now there is a PictureFill polyfill library.
I recommend using PictureFill so that you can go to the picture tag when it will be more actively supported, but there are other, older options - such as Adaptive Images.
Any solution for the implementation of elastic images is necessary for a full-fledged adaptive design.
Do not hide the content
It is difficult to fit all the functionality the user needs on a small screen. The ability to hide some items on mobile devices can be tempting - don't do it! Mobile users, visiting your site, expect to receive from him everything they need. Do not punish them simply because they use a device with a small screen.
This is part of what makes it difficult to create responsive design: implementing everything you want to show the user on a small screen is a difficult task. Do not hide the details; Take a look at time-tested UI elements for inspiration and test a lot to see exactly how users interact with your site.
This may require more time and effort, but by giving users what they came for, you turn visitors into satisfied customers.
Screen resolutions
Do not focus on the most common permissions today - tomorrow they will change. And the day after, too. To create a design that will be relevant in the future, focus not on key points, where your design changes, but on what happens between these key points.
')
If you are developing primarily for mobile devices, start building the interface, focusing on the smallest screen resolution that you are going to support. Then simply increase the browser window until your design “goes.” Mark a cue point at this point and correct the flaws in the @ media query . Repeat.
Make sure that you provide a great User Experience on the screens in the range between the resolutions of today's popular devices - and you will please the users in the future. ( See also Trent Walton's Device-Agnostic article - translator comment )
Speed
The meaning of responsive web design is to provide the best user experience on any device. But if your site is loading slowly, it doesn't matter how good the content looks on small screens, or how professionally the images are stretched, because there will be no one who has the patience to see it.
Site speed is above all, allocate some amount from the budget for performance. Use Webpagetest.org to make sure your site loads quickly even on 3G. Pay particular attention to the " Speed Index ", which shows how much time passes before the user sees the content on the page.
Images
Nothing will speed up your mobile site like reducing image size. The new HTML < Picture > tag will be supported by several browsers later this year, but for now there is a PictureFill polyfill library.
I recommend using PictureFill so that you can go to the picture tag when it will be more actively supported, but there are other, older options - such as Adaptive Images.
Any solution for the implementation of elastic images is necessary for a full-fledged adaptive design.
Do not hide the content
It is difficult to fit all the functionality the user needs on a small screen. The ability to hide some items on mobile devices can be tempting - don't do it! Mobile users, visiting your site, expect to receive from him everything they need. Do not punish them simply because they use a device with a small screen.
This is part of what makes it difficult to create responsive design: implementing everything you want to show the user on a small screen is a difficult task. Do not hide the details; Take a look at time-tested UI elements for inspiration and test a lot to see exactly how users interact with your site.
This may require more time and effort, but by giving users what they came for, you turn visitors into satisfied customers.
Source: https://habr.com/ru/post/239373/
All Articles