"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.
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.
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
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
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
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
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.
