02/09/2024 | News release | Distributed by Public on 02/09/2024 18:19
Published: September 02, 2024
I redesigned my website recently. While I'm no expert website developer, I know my way around my content management system (CMS). The redesign was going well with my new copy, headers, etc.
However, there was a problem.
While the website looked great on my MacBook, the elements didn't quite fit when I checked it on my iPhone. Some parts of the navigation menu were missing, and the text was cut off. I realized I couldn't publish it just yet and needed to adjust it to render perfectly on other common screen sizes - namely, mobile.
This redesign experience highlights the importance of responsive design. As of 2023, there were over 7.3 billion mobile users, and this number is expected to rise to over 7.49 billion by 2025. Imagine the number of leads or millions of dollars you'd lose if your website doesn't cater to these users.
Your audience uses different devices with varying screen sizes to access your website. As such, you must design your website to adapt to each screen.
In this article, we'll examine the different screen sizes to consider when designing, why screen sizes matter, and how to code a responsive design for various screen sizes.
Let's begin with an understanding of what a responsive design means.
Table of Contents
Responsive or responsive web design refers to the technique or procedure of creating websites that change or adapt to look good on a visitor's device.
With responsive design, your website's content, media, and other elements remain consistent, readable, and accessible when rendered on a mobile device, iPad, tablet, or desktop.
Fluid layouts, CSS media queries, a single codebase, and flexible media, among other things, make responsive website design possible.
Responsive web design is not a nice-to-have feature. Instead, it should be the standard for any website you create.
Why? Well, have you ever visited a website and got excited to see some elements out of frame or not properly loading?
Not at all.
You and, by extension, your users want websites optimized for whatever device they use to access the site.
Here are some other reasons to make creating responsive web designs a priority.
Designers typically use one of two approaches - responsive or adaptive design - to ensure users have the best experience when browsing websites and applications.
Though they have the same end goal, they work in different ways. Here's how they compare.
Responsive design, as you've learned, involves creating a website that adjusts its layout and elements based on a device's screen size.
Adaptive design, on the other hand, involves creating fixed layouts for specific screen sizes for devices. This means the layout created for a mobile device wouldn't work for a desktop.
Use responsive design when you want a:
Use adaptive design when you want a:
The video below provides more detail about responsive website design and how it differs from adaptive and fluid designs.
https://youtu.be/Mco_Qfs1BgU?si=PyqOzGCyqkfid_93
Screen size measures a device's diagonal length, usually from one corner to the opposite corner.
Screen sizes are typically measured in inches (for example, 4", 20", etc.) or aspect ratio (for example, 16:9, 5:4, etc.).
Aside from a screen's size, you should also consider a screen's resolution.
Screen resolutions measure the number of pixels that make up a display. Say your phone has a 360x800 screen resolution, which means the phone can display 360 pixels horizontally and 800 vertically.
The higher the resolution, the higher the quality and detail of a display. Devices of different sizes can also have the same resolution.
Size matters. Yes, your screen size is crucial in responsive design because it determines how your content is displayed and how users interact with it.
Here are other reasons why responsive design screen sizes matter.
The whole point of responsive design is to give an excellent user experience. Say your design doesn't account for mobile screens. It will leave users zooming in and out to navigate or scroll on your website.
Such interaction will likely drive them away from your site. So as you design for the big screens, remember to do the same for the smaller ones. Seeing as mobile devices have 61.74% of the worldwide market share, it'd be a considerable amount of people you'd likely turn away if you don't cater to their screen size.
Designing for different screens means accommodating different breakpoints. It is best to create the mobile (or smallest) screens first and then progress to tablets and desktops, as these have a higher breakpoint.
By prioritizing the smaller screens, you ensure that the crucial information users need doesn't get lost.
Knowing your screen sizes and resolutions helps you deliver designs that always meet your audience's needs.
Below, I've grouped the standard screen sizes based on mobile, tablet, and desktop displays.
Over the years, mobile screen sizes have changed and we now see phones with displays of around 6.5 -7 inches.
These are the most common mobile screen sizes to consider:
Other screen resolutions for mobile devices include but are not limited to 360x780, 375x812, 385x854, 428x926, and 360x640.
While tablets might only have a 2.17% market share, you still need to create your website so that it renders perfectly on them.
The following are common screen sizes for tablets:
Other tablet resolutions include 834x1194, 1024x1366, and 744x1133.
Remember to consider landscape and portrait orientations when designing mobile and tablet screens.
Millions of people use their desktops to access the internet, whether working from a traditional office or remotely.
Here are some of the common desktop screen sizes to keep in mind:
Other desktop resolutions include 1600x900, 2560x1440, 1280x1024, 810x1080, and others.
CSS media queries play a significant role in making responsive design possible. With these media queries, you can adapt your website's layout, content, and display to different screen sizes and resolutions.
And the best part? It's not too difficult to learn how to use these media queries.
Let me show you.
First, think of CSS media queries as instructions or rules that allow your website to look different based on the screen size.
To write a media query, you must first use the @media rule followed by the CSS styles and conditions you want to apply.
For example, examine the syntax below:
See the Pen media query syntax example by HubSpot (@hubspot) on CodePen.
The p {...} part of the code sets the style for all screens - making paragraphs appear black and in font size 16px.
However, the second part sets a new rule using @media. The @media (max-width:600px) {...} command tells the website to change the font size to 14px and color to blue if the screen is 600px or smaller.
With commands like these, you can adjust your website to different screens. You'll only have to set the screen's maximum width and change elements like font size, color, height, etc.
You can use different media types when making a CSS media query. The most commonly used ones are:
Here's what it would look like to code a line break for different screens using CSS media queries.
In this example, a line of text will break into two lines on smaller screens but stay on one line on larger screens.
Since this is CSS code, you'll need to add it to your HTML code. The HTML code looks like this:
See the Pen media query syntax example 2 by HubSpot (@hubspot) on CodePen.
Running the code, you'll discover that the line of text stays in one line on a laptop, and breaks on a smaller screen.
If the code doesn't run on the first try, continue to test and refine until you get it right.
Creating a responsive website is essential for providing a seamless user experience across various devices, improving SEO, and maximizing engagement and conversions.
By understanding and implementing responsive design principles, using CSS media queries effectively, and continuously testing your design, I guarantee you can create a website that looks and works great on any screen.