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.
.col-xs-$
|
Extra Small | Phones Less than 768px |
.col-sm-$
|
Small Devices | Tablets 768px and Up |
.col-md-$
|
Medium Devices | Desktops 992px and Up |
.col-lg-$
|
Large Devices | Large Desktops 1200px and Up |
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
