In 2019, roughly 52.2% of all web traffic came from mobile phones. It makes sense—billions of people have a smartphone in their pocket these days. The problem is, smartphone screen sizes vary. The iPhone 11 screen is 6.1”, the Samsung Galaxy Note 10 screen is 6” and the Google Pixel 3’s screen is 5.5”. And that’s just the best-selling current devices! Smartphone screens can range anywhere from 4.5” to well over 6.4”.
Why does screen size matter? Because it dictates how people see your website. A 2” difference across smartphones can have a big impact on site display. See for yourself—plug your URL into this website and select different smartphone models to see how your site looks.
Now, imagine the difference in how your site looks from a 13” laptop screen to a smartphone screen! Needless to say, a responsive website is important. Scalable and responsive mean the same thing.
What elements of your website should you scale?
Your entire website should scale! From layout and design options, to images and videos, to text, forms and tables, your website should react to screen sizes and scale cohesively across all elements. Small graphics with huge blocks of text wouldn’t look very good—neither would a horizontal contact form on a page meant to offer vertical scrolling. Make sure every element of your site scales according to screen size.
How does element responsiveness work?
You can’t put up a bunch of text, graphics, images and video and expect them to automatically scale up or down to accommodate screen size. To promote scalability, you need to program it into your site’s design files (CSS).
The simplest way to do this is to adapt specific elements by changing their attributes from static to dynamic. For example, you might have a banner that’s 800px wide. The element remains the same size (800px), regardless of detected screen size. But, if you change the element size to 80%, it becomes a dynamic element, capable of responsiveness to all devices. The constant is the same, but 80% of a 13” screen width is different from 80% of a 6.5” smartphone screen size—hence, scalability.
There’s also resolution responsiveness to consider. You can’t shrink something down to a quarter of its normal size and expect it to look good, or vice-versa. For a website to be truly responsive and scalable, you need to code using the “—srcset” attribute and provide alternative image sizes and resolutions.
There’s even more magic that needs to happen for more complex elements, but the concept is the same. You need to code-in responsiveness and provide the proper instructions to ensure your site behaves appropriately for visitors.
Build around a grid and add responsive classes
Scaling individual site elements isn’t enough. With responsiveness comes proximity and the need for elements to rearrange themselves on the screen. This is why most web developers build atop a grid system and use responsive classes.
A grid system divides your website into invisible sections, each with different instructions for responsiveness. Pretend your website has three equally-sized vertical sections on a desktop layout. On a phone, there’s not enough horizontal space to display them all, so they need to adapt. Each vertical section has a different responsive class that tells it how to adapt: the first section stacks on top of the second and the third moves below.
Grids and classes give you the option to preconfigure your site to different screen sizes and dictate how it behaves between those sizes. It’s the best way to ensure your site looks great on ANY screen size.
Responsiveness with usability in mind
Between element scaling and responsive arrangement of your pages, you need to remember to preserve utility. It’s easy if your page is a blog post that someone can scroll through. But if your page has dynamic elements, forms, clickables or navigation associated with it, there needs to be purpose to your scale. Here are some things to keep in mind:
· Are your elements appropriately spaced?
· Can people properly click or tap-to-click?
· Are the page and content proportionate?
· How are elements arranged in a scroll flow?
The bottom line is that your site should be as easy to use and navigate on a laptop computer as it is on a smartphone or tablet—no matter the screen size.
Think beyond your screen
As you design your website, keep responsive design top-of-mind. Elements should conform to the specific screen size of any device someone might view them on. Not only that, your responsiveness of your site should preserve its function and appeal. What looks good on your laptop needs to look just as good on your smartphone. Minding the scalability of your site is the simplest way to make sure people have a good experience with it.
