Major mistakes when developing responsive design
Adaptive design is becoming more popular, today it is no longer just a fashionable new technology. Below are the most common mistakes made when developing an adaptive site, a kind of checklist.
Do not hide parts of the site just because they do not fit on the screen of a mobile device. Mobile users want to see the same content and functionality as desktop users. You need to design the interface so that everything fits where possible.
')
Most mobile devices are touch-controlled, so it is imperative to optimize the interface elements for it. Popular techniques are described in habratopic Site Optimization for tablets .
The sizes of the screens on which the site can be displayed are very different, therefore it is necessary to change the typography so that the user is comfortable reading texts.
Mobile Internet can not always allow to download too heavy sites, you need to remember this when developing an adaptive design.
In fact, this is a special case of a previous error, which is extremely common. Any image should be optimized, both in weight and in size.
When developing an adaptive site, it is very tempting to make a primitive design that simply “will take shape” on the screen of a smartphone. You need to make a design that will be as convenient as possible on any device.
Developing a website on an adaptive CSS framework, with all add-ons and plug-ins, is often redundant. Sometimes simple enough easy mesh. Or you can even develop from scratch.
Site content can be very diverse - large texts, photos, videos, spreadsheets, and more. It is necessary to think over how all this will be displayed on the pages of the site.
Adaptive design should work not only on small and ordinary screens, but also on huge monitors and televisions. It is necessary to test the site for them.
On many responsive websites, developers turn off the ability to resize the site on touch devices by writing it in the viewport meta tag, and this can be very annoying to users. (Just in case, I'll give a link to Apple's documentation on using Viewport )
This is a favicon equivalent for iOS devices, added with simple code:
Hide content
Do not hide parts of the site just because they do not fit on the screen of a mobile device. Mobile users want to see the same content and functionality as desktop users. You need to design the interface so that everything fits where possible.
')
Do not optimize for touch devices
Most mobile devices are touch-controlled, so it is imperative to optimize the interface elements for it. Popular techniques are described in habratopic Site Optimization for tablets .
Do not optimize typography
The sizes of the screens on which the site can be displayed are very different, therefore it is necessary to change the typography so that the user is comfortable reading texts.
Use too large files
Mobile Internet can not always allow to download too heavy sites, you need to remember this when developing an adaptive design.
Use too large images.
In fact, this is a special case of a previous error, which is extremely common. Any image should be optimized, both in weight and in size.
Simplify design
When developing an adaptive site, it is very tempting to make a primitive design that simply “will take shape” on the screen of a smartphone. You need to make a design that will be as convenient as possible on any device.
Use heavy frameworks when not needed
Developing a website on an adaptive CSS framework, with all add-ons and plug-ins, is often redundant. Sometimes simple enough easy mesh. Or you can even develop from scratch.
Do not think about the content
Site content can be very diverse - large texts, photos, videos, spreadsheets, and more. It is necessary to think over how all this will be displayed on the pages of the site.
Don't think about big screens
Adaptive design should work not only on small and ordinary screens, but also on huge monitors and televisions. It is necessary to test the site for them.
Disable zoom
On many responsive websites, developers turn off the ability to resize the site on touch devices by writing it in the viewport meta tag, and this can be very annoying to users. (Just in case, I'll give a link to Apple's documentation on using Viewport )
Forget about Home Screen icon
This is a favicon equivalent for iOS devices, added with simple code:
<link rel="apple-touch-icon" href="/custom_icon.png"/> Source: https://habr.com/ru/post/187748/
All Articles