The general guideline in the web development profession is to develop websites for your target audience’s most common resolution/screen size. This article was written as a guide for developing websites and apps targeted specifically for the Canadian market.
It is important to design websites that will display optimally on the following 4 devices:
- Desktop computers
- Mobile phones
However, there are so many different sizes for each of the above four device categories, and designing websites for each of these different device sizes would be very expensive.
You may wonder why you would just not build a responsive or liquid website which would scale down based on the device automatically as it does with many popular website platforms like Squarespace and Wix. While many websites are built like this, the result is a sub-optimal web design and UX user experience.
Ideally, websites should be designed to display the most important information above the fold such as call-to-action and most important content. So for example, if your main call-to-action button is positioned just above the fold on one device – say a laptop, and the website is not developed for another specific device size – say a mobile device – the call-to-action button may be hidden below the fold. For this reason, ensuring that your website is at a minimum designed for 4 different viewports will result in the optimal user experience on all 4 devices. If this is too much work or is outside of your budget, then we recommend to design for at least 3 viewport sizes – desktop computer, tablet and mobile phone.
Now the question is when designing websites for the Canadian market, which viewport should you design for each of the 4 most popular/most used devices in Canada? This data can be derived from gs.statcounter.com which is the most trusted database of viewport usage in Canada.
Below you will see the most popular viewport sizes in Canada for each of the 4 devices:
Desktop and Laptop Screen Resolution Stats in Canada – September 2018
As you can see in the table above the most popular resolution size for desktop computers (not laptop) is 1920×1080. You do not need to design for any viewport larger than this.
Therefore, designing for this size will ensure that your website looks great on the most popular desktop computers in Canada.
If we look at laptops, we know that the following two sizes are
Laptop 15 inch (Macbook) is 1440×900 x 2 retina
Laptop 13 inch (Macbook) is 1280×800 x 2 retina
Therefore you can develop a website for 1920 x 1080 desktop resolution and then scale down to the lowest resolutions.
Mobile Screen Resolution Stats in Canada – September 2018
From the above table, we can see that the most popular mobile screen resolution in Canada is 375 x 667.
IMPORTANT: Keep in mind that the above sizes are showing stats on 1x retina devices. However, most mobile devices today are 2x retina and so you will need to design for 2x retina devices. Therefore, when designing for 2x retina devices like the iPhone 6,7,8+ or any other 2x retina devices like the Samsung Galaxy or Google Pixel phones, just multiply the resolutions above by 2.
So for example the most popular mobile viewport size in Canada is; 375 x 667, so if you multiply 375 x 2 = 750 and 667 x 2 = 1334 which is the resolution of the iPhone 8. We have written a useful article for designing websites for 2x retina viewports which we recommend you read.
If your website visitors are mostly coming from mobile devices, we recommend to design for multiple mobile device sizes since a large portion of mobile devices fall outside the 375 x 667 range. Therefore, when designing for mobile devices just ensure that it looks good on devices that have screen widths in the 320px to 480px range.
Tablet Screen Resolution Stats in Canada – September 2018
Tablets have definitely changed web design and it’s becoming increasingly important to accommodate them when designing websites since tablets are being used by an increasingly larger and larger customer base. Based on analyzing hundreds of clients Google Analytics accounts we are seeing Table usage increasing to 20-30% of total website visitors!
From the above table, 768 x 1024 px is the popular tablet screen resolution in Canada. Also, it should be noted when a tablet switches orientation, the entire view of a web page can be distorted if not designed properly. The important checklist item here is to make sure the key information is visible in above the fold content without swiping down when viewing it in portrait or landscape views – so you should optimally design for 768 and 1024px viewports.
How 1366×768 became the most common screen resolution?
Screens with 1024 x 768 resolution are a bit like Windows XP. For a long time, they remained as the most used screens on the web and at the beginning of Video Graphics Array era, it is the common resolution that seemed to be the sweet spot for price to resolution value. This screen is slowly declining in usage along with 1280 x 800 as these screens got surpassed by 1366 x 768, as the most modern machines now offer higher resolutions. For the most part, the pixel density of these displays hasn’t changed much in recent years.
As watching videos have become an important PC use case, the panels with 1366 x 768 resolution that displays widescreen video content in a better way have been heavily used. The other screen that is becoming common now is 1080px tall screens with a standard of high definition television.
Importance of designing a responsive website
These days, people use portable devices like laptops, tablets, and mobile phones to browse the web.
But, not even half of the companies who have websites are mobile ready. This is a major drawback because the latest Google algorithm update, Mobilegeddon gives device friendly websites better search engine rankings.
At, present, a fixed display does not work. The layout of a website should be flexible according to the screen size of the device. Only then, your website will look good on a desktop, laptop, tablet and mobile devices.
Here is where responsive website design can be extremely helpful. The primary benefit of responsive design is that the layout changes based on the size of the screen while maintaining a responsive presentation.
Some of the major benefits of responsive websites
- Improves lead generations and conversion rates
- Reduces bounce rate
- Avoids the duplicate content issue
- Improves online and offline browsing experience for users.
- Less time on website maintenance
- Need not create separate versions for various devices
So to reach a wider audience of potential customers, businesses must soon embrace responsive web design.
Resolutions of iPhone
iPhones up to version 3 was compiled with 1 pixel for 1 point, similar to all other mobiles. Then, Apple introduced a unique resolution named ‘RETINA’ in the new versions.
Retina has a ‘367 DPI’ (dots per inch) similar to other mobile but it includes a unique feature where ‘1 point is equal to 2 pixels across the screen and 2 pixels down’, totally 4 pixels.
iPhone 6,7 and 8 has a ‘401 DPI’ where 1 point equals 3 pixels across the screen and 3 pixels down the screen, totally 9 pixels.
The new Retina version introduced by Apple is one of the main reason they stand apart from other devices.
Out of all the screen sizes, desktop with resolution ‘1920 x 1080’ is the most popular in Canada. If you’d like to learn more about what size and resolutions should be used across multiple devices, click here.
When building a website, certain factors such as maintenance costs, visibility in search engines and better conversion rates must be considered. These factors combined with a unified design approach will be beneficial for businesses as well as users. Before working on any website, both designers and developers have to fix the resolution as developing the design from low to high resolution and high to low resolution might end up with consistency problems and affect the look and feel of the website.
With smartphone and tablet sales exploding, responsive websites are the best way your business can keep up with the competition.
We hope our compilation of the most popular screen sizes in Canada was useful. Are you ready to make your website responsive? Wisevu can help you. Our developers specialize in creating responsive websites to help businesses achieve their digital goal. Contact us today, we’ll love to answer your questions and let you know how we can help you.