Pixel-perfect is not perfect
15 years ago, pixel-perfect was the ultimate goal for developer, to satisfy design rules. But since 10 years, the rules are changing.
What is pixel-perfect?
Pixel-perfect is when the rendering of user interface (UI) totally match with rendering provided as template by designers.
Designer provides a 15px margin on the left and and the right of an element. Developer should integrate this 15px.
Why was it hardcore to integrate?
15 years ago, most of the UI were for web pages rendering.
Web pages rendering uses CSS rules.
And CSS rules interpretations were really different from one browser to another one. So, if your rendering was pixel-perfect for any kind of device and browser, you were a rock star!
And mobile broke the rules
Ten years ago, the iPhone become the most popular mobile device for browsing the web. Followed by Android.
And that changes the rules.
Adaptive design
The design on the web is now adaptive for each size of screen. So, you need to consider multiple sizes of screen and orientation on your design. With more or less content for each size.
The same rules applies for mobile apps.
Responsive design
Another constraint for developers, but considered by designers, is responsive.
It’s not directly linked to UI design, but it’s really important for good UX. User interface must response to user interaction within a minimum interval of time.
Dynamic Types
For accessibility, and to improve reading comfort, Apple introduce Dynamic Types with iOS 7 in 2013.
You should now consider multiple sizes for text, with consistent design and user experience.
Auto layout
Mobile apps are using auto-layout, to simplify elements positioning. Placement is calculated by auto-layout engine. It uses placement rules.
It’s also useful with dynamic types: when text is too large, you can adjust your rendering dynamically.
And it’s very interesting with localized content: simply specify leading margin and it will be automatically adjusted on left or right, following localization settings.
Safe area
With new devices, especially with notch, you need to know where it’s safe to place interface elements.
This was introduced 2 years ago, just before iPhone X. 😜
Safe area are calculated for device type, window properties (multitasks on iPad) and accessibility settings. Then provided to developer. So, it can changes at any time.
It’s really useful to with auto-layout. You place your element on the leading side of safe area, and it will be automatically adjusted.
Readable content guide
Especially on iPad, if you follows safe areas, your content can be unreadable because it leaves your fields of view.
So, you can use readable content guide, another guide inside safe area, that follows device type and accessibility settings to adjust your content for readability.
If you changes accessibility settings, window properties (iPad) orientation of your device or anything else, readable content margins will change to ensure the best readability experience.
Forget pixel-perfect
Except if you needs specific rules out of UX/UI field, you shouldn’t follows pixel-perfect rules.
If you follow pixel-perfect rules, your design will look as a foreign design in user’s device. And provide a really bad experience.
Modern design tools like Sketch provides a large set of tools to apply these rules. Constructors (Apple, Google) offers libraries of UI elements and dynamic fonts for the tools.
