What do you do if your graphic design needs to be user-friendly across different devices?

2 Use flexible grids and units

Flexible grids and units are essential for creating responsive designs that scale and fit different devices. Flexible grids are based on percentages or fractions, rather than fixed pixels, so they can adjust to the available space. Flexible units, such as em, rem, vw, vh, or %, are relative to the parent element, the root element, or the viewport size, rather than absolute pixels. For example, you can use vw (viewport width) to set the font size of your headings, so they change proportionally to the device width. You can also use CSS calc() function to combine different units and create dynamic values.

3 Optimize your images and media

Optimizing images and media for different devices is essential for page size and loading time. To do this, choose the right format and compression level for your images (e.g. JPEG for photos, PNG for graphics with transparency, and SVG for vector graphics). Additionally, you should use responsive images techniques such as srcset, sizes, and picture elements to serve different image versions based on the device width, pixel density, or media conditions. CSS object-fit and object-position properties can be used to control how images fit and align within their containers, while background-size and background-position properties can adjust background images to the container size and position. Media queries can be used to hide or show media elements such as videos, audio, or iframes based on device capabilities or preferences. Finally, lazy loading techniques like the loading="lazy" attribute or Intersection Observer API can defer loading images and media until they are in the viewport.

4 Consider touch and gesture interactions

Touch and gesture interactions are common on mobile devices, such as tapping, swiping, pinching, or zooming. To make your design user-friendly, ensure buttons, links, and inputs are large enough and spaced enough for easy tapping. Additionally, avoid using hover effects or menus that rely on mouse movement and provide feedback and transitions for interactive elements. You can use CSS touch-action property to specify how the user can interact with the element and CSS media (hover: none) or (pointer: coarse) to detect if the device supports hover or not. Lastly, test your design on different touch devices and browsers, and use tools like Chrome DevTools or Firefox Remote Debugging to inspect and debug your design.

5 Follow accessibility and usability guidelines

Accessibility and usability are essential components of user-friendly design, particularly for different devices. Accessibility means that your design is accessible to people with disabilities, such as visual, auditory, motor, or cognitive impairments. Usability means that your design is simple to use, understand, and navigate for all users. To follow accessibility and usability guidelines, you should make use of semantic HTML elements and attributes to provide structure and meaning to your content. You should also consider contrast, color, typography, navigation, labels, icons, ARIA attributes and landmarks. Furthermore, you should test your design with different devices, browsers, screen readers, and keyboard navigation. Tools like WebAIM Contrast Checker or Color Contrast Analyzer can help check the contrast ratio and color combinations. Other tools like Lighthouse or axe DevTools can audit and improve your accessibility score.

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?