In this article we will discuss design considerations for the wide range of screen sizes in the marketplace. We’ll start with an overview of how these things came to be, then move to how screen sizes impact your design, how many layouts you might need to flesh out, where to start, and considerations for when to change layouts or re-style design elements. We‘ll also mention some design apps to facilitate faster web and app design.
The Growth of Mobile
Before Steve Jobs walked on stage in 2007 to introduce the first iPhone, web design was simple. Most screens were 640×480, 800×600, or 1024×768. A few people in creative disciplines needed 1600×1200 or 1280×1024 screens, but any website worked on these screens. Mobile devices typically received a separate, often text-only site.
Early iPhone models didn’t change much for developers, but later iterations introduced larger screens with higher resolutions. Soon developers began writing “Media Queries” in CSS code that directly targeted devices based on their screen size and resolution. It became possible to have the same website adapt itself to various desktop screen sizes, as well as an increasing variety of mobile screens. This practice is called “Responsive Design” and is used nearly universally on web sites. As a result, wholly separate mobile sites have become a dying species.
In 2009, when separate mobile sites were still in vogue, mobile devices accounted for less than 2% of web traffic in the United States, according to Stat Counter’s Global Stats. Fast forward to 2019, and mobile traffic in the United States recently surpassed desktop traffic. This trend shows no signs of reversing. In fact, the United States actually lags behind the rest of the world in mobile adoption.
Along Came a Tablet
The first iPad was introduced in 2010, a mere three years after the first iPhone. This presented web developers with another, albeit more limited, set of screen sizes to target in CSS.
Tablet market share has increased to around 7.5% market share in the United States in mid-2019, but has recently fallen off to less than 5%. This could be due to seasonal buying patterns during the Christmas period, so 2020 could see a rebound, or perhaps a new split in device ownership has taken hold.
Although the tablet market share is small, it is nevertheless important. Many developers make subtle changes to desktop sites for display on tablets in landscape orientation, and often use the mobile layout for portrait orientation.
Monster Screens — 4k and Above
A few years ago, 1080p was the big thing in screens, and we started seeing laptops and even some phones with 1920×1080 screens. These days we see desktop monitors that far exceed that spec, like UHD screens at 3180×2160, or 4k screens at 4096×2160. The iMac on which this article was typed has a native resolution of 5120×2880 (aka 5k), although for practical reasons it is set to 2560×1440. The latest Apple Pro XDR Display has an absurd 6016×3384 (6k) resolution.
Because of the plethora of super-high resolution screens, we now need to think about what a web page should look like when the user’s browser window is wider than, say, 1920 pixels. An otherwise well-designed site could look like a postage stamp on a super-wide screen, so a developer might ask to see a layout for screen widths above 1920 pixels. That’s in addition to commonly-used layout breakpoints of desktop, laptop, tablet/landscape, tablet/portrait, and mobile. How many layouts are needed depends greatly on the content and overall design aesthetic.
Now that we‘ve covered the multitude of screens, where do we start designing?
Go “Mobile First”
“Mobile First” means that design and content are created starting with mobile devices, then enhanced or fleshed out for larger screens and/or more capable devices and browsers. In this way, we focus on what is important to both the client and their end user, then add proverbial bells and whistles as screen sizes increase.
Many older designers and developers began their careers working on desktop-only sites. For them, this can be a difficult transition and learning curve. It’s necessary, however, because of the increasing shift to mobile usage. In the past, mobile sites may have been treated as a design and development afterthought, but now that mobile traffic has surpassed desktop in the United States, we must convince ourselves and our clients to go Mobile First. Otherwise you risk having a site with a high abandon rate.
Responsive Design Breakpoints
Breakpoints, in development terms, are the pixel widths at which a design adapts in response to changes in device screen sizes or browser widths. A developer will use a CSS technique called “Media Queries” to apply different styles to the same content depending on the device or browser “viewport size.” This approach is commonly called “Responsive Design” and has largely replaced mobile-specific sites over the last decade.
There are no hard and fast rules for when to change layouts other than “when it starts to look bad.” In general here are some common device viewport widths to consider:
- Mobile/portrait — between 320 and 480 pixels wide
- Mobile/landscape — between 480 and 896 pixels wide
- Tablet/portrait — between 600 and 850 pixels wide
- Tablet/landscape — between 850 and 1280 pixels wide
- Notebooks/laptops — between 1024 and 1920 pixels wide
- Desktops — from 1366 to 1920 pixels wide
- Super-wide — over 1920 pixels wide
Don’t be scared by this and start thinking you will need to fully flesh out seven layouts. While it’s clear from the ranges above that there is no “one size fits all” approach, there is considerable overlap across device categories. This creates some efficiency by potentially sharing layouts across devices. In the end, you may be fine with only two fully fleshed-out layouts: a mobile version where all content is in one column, and a desktop version, with content displayed in several columns. It all depends on the best point(s) at which to change the layout.
Generally speaking, many site templates you might use in a CMS like Squarespace, Weebly, Wix, or WordPress will have three breakpoints: Mobile/Tablet (tall), Tablet (wide)/Laptop, and Desktop. You may find within a custom design that this is also true. So again, nobody needs to panic or build seven complete layouts! Work smarter, not harder, as the saying goes. Plan on two or three full layouts with some additional guidance for super-wide screens, and you should be fine.
Super-wide Layout Guidance
At screen widths above 1920px wide, provide guidance to your developer by deciding whether your content will take up the full width of the screen, or be constrained to an arbitrary size like 1920px wide. A simple annotated mockup will usually suffice to communicate this.
If you choose to constrain content, you also need to determine how to work with backgrounds and full-width images.
- Your whole page may simply be “boxed” in which case you could:
- add a shadow down both sides
- give the page background a different color, pattern, or image
- create an “implied” box, in which content remains inside the arbitrary limit while background colors and images extend to full window width; note that background images may become awkwardly cropped or zoomed in unexpectedly as they will not become taller, only wider
- All content could become full width. Note that in some cases this will be awkward as columns may become wider than expected, creating unexpected negative space below text blocks or making images much larger than desired. If you find you don’t like what’s happening when making a quick mockup for the developer, either box the content or flesh out the layout to create a new breakpoint.
When to Change Layouts
Here’s the simple version: change to a new layout when it starts to look bad. Here are a few common things to consider when changing entire layouts from desktop to tablet to mobile and vice versa:
- How many menu items can fit on screen at once? When does a menu drop down below a logo? When a menu can no longer fit on one line, change to the mobile header and collapse the menu to a trigger icon. This may also be a good time to change the entire layout, but that depends on how well the in-page content displays.
- What is the optimal number of characters per line of text? When you exceed that (around 50–60 characters), consider changing the number of columns on the layout. What works well in a single column on mobile may be better off as two columns on a tablet, or three on a wider screen.
- When do logos or other images appear to be too small or large? Does this force a change in the number of columns in the layout, or require changing a header to the mobile version?
When to Change Element Styles
Here are a few thoughts on when to resize various elements on a page, like headers and buttons:
- It should be noted that headers and footers can be changed independently of in-page content. It might make sense for a header to change to its mobile version long before multi-column content is reduced to one column.
- When does headline type seem too large or body copy too small? Change font size as needed for optimal legibility.
- When are elements like buttons and menu items too small? On touch devices, your finger is quite wide relative to a mouse cursor, so make elements large enough to be effective “tap targets.” Size them to be around 48×48 pixels.
- When are clickable elements too close together? On touch devices, the rule of thumb is to allow about 32 pixels between tap targets.
Use Good, Modern Layout Apps
Avoid older programs like Photoshop, Illustrator, or InDesign in favor of newer, more UI-focused design apps. Use apps like Sketch, Adobe XD, or an alternative program to draft your wireframes and design prototypes.
In one of those programs, it’s simple to create artboards at various common screen sizes, then paste content from one to another and resize to ensure it still works. You may find that you only need two breakpoints, or maybe three is optimal. You can also create design prototypes with functional links. This is very effective when showing a client and developer how navigation should work. As an added benefit, these programs make it easy to design mobile apps, not just websites.