In recent years, mobile traffic has grown significantly and this trend continues. Therefore, it is important to pay special attention to optimizing their projects for mobile devices. In this article we will look at practical tips for optimizing web design for mobile devices.
Using multiple images with media queries
We hope that you are already familiar with media queries. For mobile design, media queries are almost fundamental. Currently, the problem with media queries is that many designers and developers create websites for mobile after the main sites, although ideally it should be the other way around. From the atlanta web designer this is important.
This approach is vividly noticeable in a large number of media queries for popular device sizes (320 pixels, 480 pixels, 768 pixels). Although the mobile-first approach should prevail (layout first for mobile devices), and write media queries for desktop versions.
Therefore, the next time you work on a design, try using the mobile-first approach:
- Create media queries for desktop versions.
- Avoid using pixels for control points. Instead, try working with em and percentages (relative units) as often as possible so that the site adjusts to zoom levels.
- Do not forget to set up media queries to adapt to retina devices (i.e. with a minimum resolution: 192dpi).
Image Optimization
Even if you have a fully responsive design, visitors may be frightened off by the site’s too long loading, and the pictures here play a big role. Users expect images to load quickly, so you need to find a way to reduce the size of media files and at the same time preserve their quality. Regarding the atlanta web designer this is an important matter.
To optimize images, you can use suitable tools, for example. They allow you to reduce the size of images by selectively reducing the number of colors, as well as removing unnecessary metadata.
Make the most of SVG
Scalable vector graphics (SVG) is a great tool for adding graphics to a site. This tool is especially useful for simple graphics, such as logos, icons, infographics, and the like.
Use the right fonts
Mobile design is not just images. The choice of fonts used has a great influence on the project, since the text is the main method of information transfer.
From the point of view of the designer, choosing the right fonts means:
- Do not use fine print. You do not want users to increase each line to read the written
- Avoid fonts that use a small space between letters.
- If you use media queries for text, use em units for font sizes instead of pixels.
- Use sans serif fonts because they scale better at most resolutions.
Text as part of the user interface
The font you use is not the only issue of convenience and readability. Since mobile web design provides a wide variety of screens, you need to consider text as part of a common UI (user interface) to ensure maximum readability.
