October 6, 2014 at 16:12Pitfalls of responsive web design
- Transfer
Responsive web design is much more than just elastic templates and @ media queries . In fact, this is a completely new approach to design. With this in mind, I suggest looking at a few common pitfalls that should be avoided in your next adaptive template.
Screen Resolutions
Do not focus on the most common resolutions today - tomorrow they will change. And the day after tomorrow too. To create a design that will continue to be relevant in the future, focus not on the key points where your design is changing, 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 enlarge the browser window until your design "goes". Mark the cue point at this point and fix the flaws in the @ media query . Repeat.
Make sure that you provide a great User Experience on screens in the range between the resolutions of today's popular devices - and you will please users in the future. ( See also Trent Walton's article Device-Agnostic - Translator's Note. )
Speed
The point of responsive web design is to provide the best user experience on any device. But if your site loads 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 - above all else, allocate a certain amount from the budget for performance. Use Webpagetest.org to make sure your site loads fast 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 the size of images. NewHTML-tag < the Picture > will be supported by several browsers later this year, and while there is a polyfill-library PictureFill .
I recommend using PictureFill so that you can move on 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 adaptive design.
Do not hide content
It is difficult to fit all the functionality a user needs on a small screen. Being able to hide some elements on mobile devices can be seductive - don't do this! Mobile users visiting your site expect to get everything they need from it. Do not punish them just because they use a device with a small screen.
This is part of what makes creating responsive design difficult: 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 the time-tested user interface elements for inspiration and test a lot to see exactly how users interact with your site.
This may take more time and effort, but by giving users what they come for, you turn visitors into satisfied customers.
Screen Resolutions
Do not focus on the most common resolutions today - tomorrow they will change. And the day after tomorrow too. To create a design that will continue to be relevant in the future, focus not on the key points where your design is changing, 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 enlarge the browser window until your design "goes". Mark the cue point at this point and fix the flaws in the @ media query . Repeat.
Make sure that you provide a great User Experience on screens in the range between the resolutions of today's popular devices - and you will please users in the future. ( See also Trent Walton's article Device-Agnostic - Translator's Note. )
Speed
The point of responsive web design is to provide the best user experience on any device. But if your site loads 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 - above all else, allocate a certain amount from the budget for performance. Use Webpagetest.org to make sure your site loads fast 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 the size of images. NewHTML-tag < the Picture > will be supported by several browsers later this year, and while there is a polyfill-library PictureFill .
I recommend using PictureFill so that you can move on 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 adaptive design.
Do not hide content
It is difficult to fit all the functionality a user needs on a small screen. Being able to hide some elements on mobile devices can be seductive - don't do this! Mobile users visiting your site expect to get everything they need from it. Do not punish them just because they use a device with a small screen.
This is part of what makes creating responsive design difficult: 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 the time-tested user interface elements for inspiration and test a lot to see exactly how users interact with your site.
This may take more time and effort, but by giving users what they come for, you turn visitors into satisfied customers.