Skip links

Screen Sizes, Resolution, Color and Fonts: Making your Website Consistent For Users

With all of the different forms of devices available, it’s important to make sure your webpage looks great no matter the size of the screen. When you are designing for print, you always know the size of the piece of paper that your design will be printed on. However, when it comes to designing for the web, you are faced with the unique challenge that different users will have different sized screens, such as smartphones, iPads, tablets, laptops and even 27”+ desktop monitors. These different sized screens show different amounts of information, so your design and formatting needs to be able to work on a range of different screen sizes. Make sure you thoroughly test your site’s view-ability on multiple devices. Ask friends and family to look at your site on multiple devices and make sure it’s visually pleasing and user friendly.

Remember, someone’s first impression and interaction with your site could likely be on their smartphone. Make sure they easily get all the information they need to come back to your site and use your services or products.

Resolution, which refers to the number of dots a screen shows per inch, can also vary. A higher DPI means more dots and clearer, more accurate images. Some small devices have a higher resolution than desktop computers and most operating systems allow users to adjust the resolution of their display screens or the number of pixels that are shown on the screen. It’s interesting to note that the higher the resolution, the smaller the text appears, and any mobile devices have screens that are higher resolution than their desktop counterparts.

Variation in monitors create inconsistency for websites. How your monitor displays the colors on your site may appear differently on someone else’s. This is due to chemicals that cause color change over time, varying levels of ability to display colors, and resolution. Make sure you or your designers try to create images and sites that appear very similar from platform to platform, especially if your products are visual in nature. Calibrating monitors will help and this can be done with hardware devices and software programs that analyze the way colors appear on a screen and reconfigure settings to match a predetermined standard. Since screens change over time, they need to be calibrated on an occasional basis for best results.

Fonts may also display differently on different platforms, such as Windows and Macs. A limiting factor for web design is that you are limited to what your website users have installed on their computers. If the visitor does not have the chosen font, his or her browser will use some other font, even if it does not suit the content and design of your page. Cascading Style Sheets (CSS) will allow web designers to specify a list of fonts to be used if the first choice is not available. Your backup fonts should be similar to the originally intended font so that your page will not only look more or less as you intended, but it will also help keep everything aligned. Sans Serif fonts (Arial, Helvetica, Verdana) are probably the most commonly used fonts.

Do you have a framework in place to audit websites on every browser and format? How do you stay on top of the problems with ever-changing resolutions?