Services Portfolio Discovery Call

Chances Are Your Website Is Not Optimized for These Screen Sizes...

device optimization



web development

Author: Jake Ni
Published: Nov 16, 2020
Updated: Nov 27, 2020
10 min read

"This stupid website doesn't load right on my iPad!"

We've all made this comment at some point, about some crappy website that is not optimized for different devices. This can be a nagging problem given that device usage is so diversified right now. This is not a new topic. Device optimization has been popular for 4-5 years. Yet we still find websites out there that are under-optimized or completely unoptimized.

Photo by Roberto Nickson on Unsplash

Here is a chart that shows the percentage of web browsing activities based on device type, courtesy of StatCounter. As of Oct 2020, worldwide web browsing is comprised of 48.88% desktop, 48.62% mobile and 2.5% tablet.

Screenshot taken on StatCounter

Today, we'll dive into this topic and leave you with a few tips to help you find out if your website is rendering correctly on different devices.

It's All About Screen Resolution

Most people think that there is a "mobile/desktop/tablet version" that makes a web page render differently on different devices. Well, as it might be true in a very few cases, it's actually the screen resolution that determines the rendering of a web page on a certain device. Screen resolution is the #### x #### you see often on the sticker of TVs, laptops etc. The unit used is "pixel". Obviously different devices may have different resolutions. It is actually impossible to customize a perfect fit of your web page for every single device. The good news is most devices of the same category have similar sizes in the ball park. So your goal would be to optimize your web pages on the most commonly used devices, and hope that it has good tolerance for others.
Here are some of the most common screen resolutions. Stats courtesy of StatCounter

1920 x 1080, the Most Common Desktop Screen Resolution, Account for 9.68% of Web Browsing

A standard PC monitor, Photo by Josh Sorenson on Unsplash
1920 x 1080 is the standard desktop monitor resolution. This is the screen size of your home PC, your office PC & pretty much any PC monitor that is not ultra-wide. Websites are usually well optimized for this screen resolution. One thing to look out for though, is to make sure that the content of the web page is not too spaced out. As it can be inconvenient for reading. So make sure your website has about 15 - 20% padding on both the left and right side.

1366 x 768, the Most Common Laptop Screen Resolution, Account for 9.32% of Web Browsing

A notebook, Photo by Pakata Goh on Unsplash
1366 x 768 is a pretty common screen resolution for laptops. These are your generic Windows notebooks like HP, Dell, Sony, etc. The tricky part about this screen resolution is the shortened height. So make sure your website's first fold (leave a comment down below if you are not familiar with this term) sits above the 768 pixel range.

768 x 1024, the Most Common Tablet Screen Resolution, Account for 2.38% of Web Browsing

Photo by Henry Ascroft on Unsplash
This is the screen resolution of 1st - 6th generation iPad, some iPad Air, some iPad mini & some iPad Pro. The interesting thing is that tablets usually get rotated a lot while being used. So this screen resolution can be flipped to 1024 x 768. The display of the web page will go from portrait to landscape (from vertical to horizontal). Make sure your web page is well designed for both use cases.

360 x 640, the Most Common Mobile Screen Resolution, Account for 9.32% of Web Browsing

Photo by Padraig Treanor on Unsplash
360 x 640 is the screen resolution of the Samsung Galaxy S7 & S7 Edge. This goes to show that Android is still the king when it comes to cellphone market share. At this point, we've ventured into the mobile device category and a lot has to be changed on a website in order for it to be optimized. 
First, make sure that the content of the web page does not overflow along the x axis. Or in English, make sure the content of the web page doesn't exceed the boundary of the screen in the left and right direction. Users expect to scroll up and down on a mobile device, not left and right.
Second, because screen real estate is drastically less on a mobile screen, trade-offs have to be made. Certain elements of a web page will need to be reduced in size or taken out completely. Take this page for example. If you view it on a desktop, you'll see a reading guide on the right. While on mobile, it is removed.
Note that the height of the resolution doesn't matter as much as the width, because up and down scrolling is an expected behavior on mobile devices. Your main focus is to make sure the content fits within the width of the resolution.

Other Common Screen Resolutions

Other devices that we think are worth mentioning:
375 x 667 - iPhone 6, 6s, 7, 8, SE (2nd generation)
414 x 896 - iPhone XR, XS Max
1400 x 900 (2560 x 1600) - Macbook Pro, 13 inch model
1680 x 1050 (2880 x 1800) - Macbook Pro, 15 inch model

A Simple Trick to Test Your Website's Optimization Without Actually Viewing It on Different Devices

Here is a way you can test your web page's optimization without actually opening the page on different devices. If you're in Chrome browser, download the extension called "Resolution Test". Once installed, you can see there are already a few preset resolutions for you to test. Just click on any one of them, and it will automatically resize your browser to that resolution. You can also add more resolutions to the presets, especially the ones we talked about in this article, if they're not already in the presets. Pretty neat right?
"Resolution Test" Chrome extension
It is best to also refresh the page after resizing, because some optimization may not kick in without refreshing the page.

The Golden Rule We Use Here at 1 Stop Coder

When we build websites and web applications at 1 Stop Coder, we'd like to set these 4 ranges of width (as we stated, height needs not to be taken into consideration since pages are scrollable up and down). We consider them to be adequate for most device screen resolutions out there.
The ranges are:
Mobile: < 768px,
Tablets: 768px - 1024px,
Laptops(notebooks): 1024px - 1366px,
Desktops: >1366px
For the curious ones & the ultra tech-savvy:
Note that there is a difference between "pixel" in web development and "pixel" in screen resolution. There is a term called "viewport" that is used in web development. This has more to do with optimization than the raw pixel counts. Then there is logical pixel, media query in CSS which are directly responsible for how pages render in a browser. 
Although height is less important, you need to make sure the first fold of your web page, meaning the first meaningful section of the page, sit above the height.
I didn't dive into these nuances because I didn't want to create any confusion. But if you are curious about this topic, leave us a comment below. We'll be happy to answer your questions.


About the Author

Jake Ni

Account Executive at 1 Stop Link

Jake believes that small businesses are the backbone of America.

They deserve to benefit from the latest technology that fail to trickle down from "big tech".

With expert local knowledge and over 7 years of industry experience, he's ready to help you build a top tier web presence!

Book a video consultation with Jake:

Reviews & Testimonials: Top Rated Digital Marketing Agency

Genuine words of appreciation from our loyal clients.

Follow Us on Social Media

See our daily updates on our Instagram page