Over the past 5 years, the share of mobile traffic has grown by 20%, and today responsive design is already taken for granted. In 2020 you can access any website from your phone and it will work well. Most users leave a site if they see that it does not perform well on their smartphone or tablet, and Google will lower the site's ranking in search results if it is not optimized for mobile devices.
Therefore, the design of responsive websites requires a special approach that differs from the development of a static website. Designers use Responsive Design, in which the design is first determined by the user's device (smartphone, tablet or computer) and then displayed according to the device's screen size.
On one hand, the creation of Responsive Design simplifies the development and maintenance of the site - the code and SEO will be the same for all devices. On the other hand, a responsive site is not just stretching the entire site to fit the screen, but adjusting every element on the page. Responsive Design will not give 100% control over the content and its style, as the designer will never know what size the user's device will be. When designing Responsive Design, aspiring designers make common mistakes, while experienced professionals have to make compromises.
When Responsive Design is junk
Responsive Design often means long loading times for mobile users. Before adapting to the device screen, the full Desktop version of the site must load. All of the content is loaded automatically, even those that will not be shown to mobile users.
In addition, despite the widespread adoption of mobile devices, wireless internet speeds are still slow. Coupled with heavy images and videos, this makes it very difficult to use the site on mobile devices.
Cut out functionality
With Responsive Design, the experience of a website on different devices can vary dramatically. Often, designers cut out functionality that they think is unnecessary on mobile devices. But such a decision breaks the expectations of users, especially when they already have experience using the extended version of the website. They come to the site for a solution to their problem and want to get the same functionality regardless of the device.
Another compromise is adding a button to the mobile version of the Request Desktop Website, under the guise of caring for the user and giving them choice. But to be honest, it feels like being lazy when designing a mobile version and taking responsibility for how the user will receive content on their device.
Responsive Design means that the same content is optimized for the correct screen size. But the content experience needs to be device-specific.
Sometimes designers do not pay enough attention to the content and interface on mobile versions of the website or do not participate in cross-platform testing. Therefore, users are forced to endlessly scroll through long pages, fall through the hierarchy of navigation menus and navigate uncomfortable tables, just because this content is presented in the same way as in the desktop version.
Fixing Mistakes in Responsive Design
Consider how you can maximize your website content on a mobile device. What will columns, navigation, tables, and forms look like? It is not a good idea to simply reduce the size. A more thoughtful approach is required.
Consider primarily the user's needs and the context of the situation when they are using different devices. Highlight Call to Action on the page, build a short and convenient path to it so that the user successfully reaches their goal.
Navigation & Screens
Surely, navigation on mobile devices is different from navigation on desktop screens. Navigation on mobile devices needs to be simplified so that people can quickly access the information they need. To do this, you can try using tabs in order to not hide the desktop navigation behind a hamburger menu.
Users are used to gestures. They love to flip through cards, drag and drop list items, pinch to zoom pictures. Whenever possible, try to design touch gesture support for navigation where possible to make operation more intuitive.
The other side of the proliferation of mobile devices (smartphones, tablets and laptops) is the declining focus on designing for wide screens. But desktop computers remain popular, and it is still a designer's job to display website pages correctly for them.
Don't forget about wide screens. On large screens, the user may notice such errors of designers as a fixed width of the background image with gaps on the sides, too small font size, and narrow columns of text.
It is necessary to use the space to the maximum, no matter how large the user's device.
Images make up a significant portion, up to 50% of the page weight. The easiest way to speed up your website is to optimize your images. Whenever possible, create vector graphics for interfaces, and optimize raster graphics using Sketch's built-in tools and third-party services. Also get in touch with the developers (link to blog post) and discuss how to prepare images for further optimization using code. Let the images load gradually without breaking the layout.
Typography & Layout
When decreasing the width of the screen, it is worth reducing the size of the text. But if you make the font too small, it becomes difficult to read. And if you increase it too much, users would not want to scroll through long lines of text. For optimal readability, the ideal number of characters per line should be around 60-70 with a font size of 16px, which is about 8-10 words.
Sketch Mirror makes it easy to check how the layout will look, live on a mobile device. This application will help you find the middle ground between comfortable reading and easy navigation of content on the page.
Tables & Forms
Spreadsheets and shapes are a headache for a designer as well when designing them for mobile.
There are different ways to display table data on a smaller screen. They can add horizontal scrolling, completely redesign data, or turn rows into cards. Data can be rearranged, collapsed into lists, docked to the edges of the screen. The type of solution you choose depends mainly on what kind of data you have.
Forms should also be easy to fill out from the phone. Instead of a long list of fields that fits on one screen on a desktop computer, it is better to make a step-by-step wizard and use mobile patterns in the UI: place the title above the fields, show errors before submitting the form, do pagination if the form is paginated, etc.
Designing for users, not platforms
The best way to create a useful Responsive website is to start designing Mobile and Tablet at the same time as the Desktop version. Design for users, not devices. People can solve their problems in different ways on smartphones and computers. But you need to take the same attention to designing experiences for users regardless of platform.