Skip to main content

Thanks iPhone 14, designing for device sizes is dead

If you want to be kept up to date with new articles, CSS resources and tools, join our newsletter.Back when the mobile web just got started, mobile design was simple (…it wasn’t, but bear with me). Your site had to fit 320px wide and it would work for “Mobile”. 320px is the width of the original iPhone and Android phones dutifully followed. Unfortunately that didn’t take long, and mobile phones have been growing larger and larger ever since.Especially in the Android ecosystem the variety of screen sizes exploded, rapidly growing to 360, 393 and 412px wide. On the iOS size the expansion was much more gradual. First to 375px, then 390px and 414px for the “large” phones. Apple kept this for a while: small phones were 375px (pre-notch) or 390px wide (Pro or otherwise), and the large phones were 414px (pre-notch) or 428px wide.With Apple’s dominance, especially with people designing and building websites, it meant we could hold the fiction that there were two widths for designing for devices, and that was manageable. It doesn’t matter that this wasn’t true (hello, Android), but it’s true enough that people could get away with believing it.But the iPhone 14 changed that.iPhone 14 comes in two flavors: Normal and “Pro”. The Pro changed the device from using a notch to something Apple calls the “dynamic island”. It looks really cool, but that’s not what this article is about.Rendering courtesy of Davo GalavottiWhile the normal iPhone 14s have the same dimensions as the 12 and 13 (390px wide for normal size, 428px for Plus) it’s the Pro’s that throw a wrench in our fiction of clearly different widths.iPhone 12/13…ProiPhone 14…Pro’Normal’390px390px390px393pxPlus/Maxn/a428px428px430pxThere’s a 3px width difference for the iPhone 14 and Pro, and a 2px width difference for the iPhone 14 Plus and Pro Max. That’s a tiny difference, but it breaks the nice fiction that developers have been telling themselves regarding mobile devices:If the site fits on 390px and 428px, you’ll be fine. In fact, you can optimize precisely for these widths.If it fits precisely on your iPhone Pro Max, it can now easily no longer fit on someone’s iPhone Plus. You have to test both. And when a new device has another tiny change, you can add that one yet again.Testing on specific device widths is an evolutionary dead endIf you optimize for a device today, it’s going to break in a year. Your design has to be fluid and flexible to make it look good regardless of a device’s width. Today, in a year, in a decade.Of course I’m not the first to argue against optimizing for devices (this isn’t even the first time I’m doing so) and recently Andy Bell has done so far more eloquently over at buildexcellentwebsit.es and in his talk Be the browser’s mentor, not its micromanager.But it’s hard to change. Designers design at 390px wide, device emulators have fixed widths and at the end of the day, time pressure maybe means that’s all we use. And the site ends up being broken at random sizes, extra work needs to be done after a project is delivered and no one has a good time.So what now?Let go of the idea that you’re designing a site to fit devices.  » Read More

Like to keep reading?

This article first appeared on polypane.app. If you'd like to continue this story, follow the white rabbit.

View Full Article
Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

#Dev
How to Channel a Daily Vision into a 20-Year Photography Career

How to Channel a Daily Vision into a 20-Year Photography Career

#Silicon Valley
WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

#Web Design
Fresh For Designers

Is the Dynamic Island plain stupid or the next revolutionary UX pattern?

#All

Let's talk about Web Design

The term "web design" describes the layout of websites that are seen online. Instead of software development, it typically refers to the user experience components of website development. The primary focus of web design used to be creating websites for desktop browsers, but from the middle of the 2010s, designing for mobile and tablet browsers has gained significance.

What is a webdesigner?

A web designer is responsible for a website's look, feel, and occasionally even content. For instance, appearance refers to the colors, text, and images utilized. Information's organization and categorization are referred to as its layout. An effective web design is user-friendly, aesthetically pleasing, and appropriate for the target audience and brand of the website. Many websites focus on keeping things simple so that viewers won't be distracted or confused by additional information and functionality. Removing as many potential sources of user annoyance as possible is a crucial factor to take into account because the foundation of a web designer's output is a site that gains and nurtures the trust of the target audience.

Responsive and adaptive design are two of the most popular techniques for creating websites that function well on both desktop and mobile devices. In adaptive design, the website content is fixed in layout sizes that correspond to typical screen sizes, while in responsive design, information moves dynamically based on screen size. A layout that is as consistent as possible across devices is essential to preserving user engagement and trust. Designers must be cautious when giving up control of how their work will appear because responsive design can be challenging in this area. While they might need to diversify their skill set if they are also in charge of the content, they will benefit from having complete control over the final output.

What does a web design worker do?

A web designer is a member of the IT industry who is in charge of planning a website's structure, aesthetic appeal, and usability.

A skilled site designer must possess both technical know-how and creative graphic design abilities. They must be able to envision how a website will seem (its graphical design) and how it will operate (conversion of a design into a working website).

The terms web developer and designer are frequently used interchangeably but erroneously. In order to construct more complex interactions on a website, such as the integration with a database system, a web developer is frequently more likely to be a software developer who works with programming languages.