Three common pitfalls when designing for different screen sizes
Designing for different screens – known as Responsive Design – has become one of the
Screen Sizes
most important factors of modern web design. Back in the noughties, over three-quarters of web traffic came from just two different screen sizes. Nowadays, with many people having multiple devices, ensuring your site is readable at any resolution is a must. Here are three common pitfalls of designing for different sizes.
1 – Textual worries
With a change in screen size, perfectly and painstakingly chosen fonts and sizes can completely distort the page, making it difficult to read. Always make sure the font sizes and weighting is compatable at different screen-sizes and resolutions to ensure your site is always readable. There are several online tools (many of them free) that allow you test out your font choices for different screens to ensure your site is always readable.
2 – Bloated images
Images can pose the biggest challenge to responsive design. For image rich sites in particular, page performance on a mobile phone can tank along with conversion rates. This is in addition to the wasted bandwidth costs of having to send over the image files to a device that can't clearly show it. However, many automated tools exist online to ensure you can optimise your images for different screens. There are also other options, such as Icon Fonts, that are more easily scalable to suit your Responsive Design needs.
3 – Mobile doesn't mean 'lite version'
According to Google, 90% of web users move between devices simultaeneously to accomplish a task. Similarly, a smartphone is now the most common starting point for online activity. This means someone that accesses your site from their smartphone wants the same functionality – such as buying a product or accessing a video file – on their phone that they can get from their desktop.
Having a simplified mobile version, while easier in the short-term, may lead to users going elsewhere while browsing from their phone. The best websites are so because they take content in to account as well as context. This means that, if there is content that isn't translating to a mobile device, it may require throughtfully created additional content or a change in structure to ensure all site traffic can get what they need from your site.
