Best Practices for Website Design

Web developers have had to evolve their skill set from designing for a limited number of desktop resolutions to creating flexible websites optimised for all device display resolutions. This article identifies best practices for website design, and provides a resource of popular devices and their display resolutions.

Modern HTML, CSS, and Javascript frameworks like Bootstrap are leading the way for developing responsive, mobile first websites.

The utilize a “grid system” which divides the screen real estate into 12 equal columns. Based on the width of the display in pixels, the framework can determine how many columns to use while displaying the page content.

The best part about the new grid system is that you don’t have to create different versions of your site for different devices. Given the large number of devices listed below, and the numerous screen resolutions, you can realistically design your website to use a different grid on 4 different browser sizes. Below is the breakdown of the different sizes.

To ensure websites are built for the best experience on the most devices, it’s important to be aware of the most popular screen sizes and resolutions. The more your website is accessible and easy to use, the more people will be able to view and use it which tranlates to a more positive user experience.

Screen Size vs. Resolution
The screen size is the diagonal measurement of the physical screen in inches, while the resolution is the number of pixels on the screen. The resolution is displayed as width by height (i.e., 1024×768). Also, while desktop and laptop displays are in landscape (wider than tall), many mobile devices can be rotated to show websites in both landscape and portrait (taller than wide) orientations. This means that designers and developers, in some cases, must design for these differences.

Most Popular Screen Resolutions

• Desktops & Laptops

1024×768 and higher

15-inch Apple MacBook Pro with Retina display: 2880 x 1800 226 ppi

• Standard Netbook/Tablet Resolution

1024×600

Amazon Kindle Fire
Samsung Galaxy Tab, Galaxy Tab 7.0 Plus & Galaxy Tab 2 7.0
HTC EVO View 4G

• iPhone

6 Plus: 1920×1080 401 ppi

6: 1334×750 326 ppi

5: 1136×640

4S: 640×960

3GS: 320×480

• iPad

First & second generations: 1024×768

Third generation: 2048 x 1536 264 ppi

• iPad Mini

1024×768

• Android Phones & Tablets
  

Most phones are 320px wide or 360px wide, and most tablets are 800px wide. When designing for them, however, it is typical for developers to break them into the following groups based on their Density-independent pixel (dp), which is the minimum screen size.

Small screens: 426dp x 320dp

Normal screens: 470dp x 320dp

Large screens: 640dp x 480dp

Extra-large screens: 960dp x 720dp