#425: Designing for Mobile

State of mobile UX, accessibility target sizes on mobile, iOS and Android, optimal font size, navigation patterns and layout grids. Issue #425 • October 3, 2023 • [View in the browser]( [Smashing Newsletter]( Goedendag Smashing Friends, What’s the optimal font size on mobile? Do 44×44px target sizes achieve optimal accessibility on mobile devices? And what differences between iOS and Android UI design should we keep in mind? In this newsletter, we deep dive into designing for mobile, with practical guidelines, design patterns and the overall state of mobile UX. [SmashingConf Antwerp]( inclusive and practical: that’s [SmashingConf Design & UX](. Oh my, it’s happening next week! Meet [SmashingConf Design & UX]( in Antwerp, Belgium 🍫 (Oct. 9–12, in-person and [online]( our shiny new conference all around design systems, UX, product design, AI and UI. Only a [few tickets are left]( so don’t wait too long! Ah, and don’t forget to [sign up]( for the chocolate workshop, walking waffles tour and Brad Frost’s jam as well. If you’d rather deep dive into design and UX, we also have friendly hands-on workshops and [bundle tickets for teams]( (of course!). In the meantime, let’s explore the wonderful world of mobile! — Vitaly ([vitalyf]( --------------------------------------------------------------- 1. UI Design Guide For iOS Apple’s Human Interface Guidelines cover everything you need to consider to design experiences for Apple’s platforms. If you’re looking for a concise summary of the most important aspects you need to be aware of when building an iOS app, Ana and Vlad Prokhorov’s [guide to creating UI designs for iOS]( is for you. [A comprehensive guide on creating UI designs for iOS apps]( The guide covers everything you need to know to create designs consistent with Apple’s guidelines. You’ll learn how to define a grid for your mobile app and dive deeper into color and color management, typography, and iconography. Best practices for list, tab bar, and navigation bar components, as well as for transition styles, are also featured. A great foundation for everyone new to iOS app design. (cm) --------------------------------------------------------------- 2. Modern iOS Navigation Patterns Good navigation is straightforward and predictable, making it easy for users to find their way around. Frank Rausch collected all the familiar [navigation patterns for structuring iOS apps]( such as drill-downs, modals, pyramids, sequences, and more in a guide. You can think of it as an unofficial bonus chapter for Apple’s Human Interface Guidelines. [Modern iOS Navigation Patterns]( In the guide, Frank looks into different types of structural navigation which give users confidence about where they are in the hierarchy. You’ll also explore overlay navigation patterns that require a user action and take a closer look at how to design embedded navigation that fits into the strict structural and spatial model of iOS. Precious tips for everyone who cares about well-crafted user interfaces. (cm) --------------------------------------------------------------- From our sponsor The Morning Paper For Hacker News Readers [TLDR]( Love Hacker News but don’t have the time to read it every day? [Try TLDR’s free daily newsletter](. TLDR covers the most important tech, startup, and programming stories in a quick. 5-minute email. No politics, sports, or weather. Over 1.3 million software engineers and tech workers read TLDR each day. --------------------------------------------------------------- 3. The State Of Mobile UX 16 years after the release of the first iPhone, mobile has become mainstream, and, as the Nielsen Norman Group points out in their [fifth mobile-usability report]( we’ve finally reached a period of maturity in mobile UX. The report shares interesting insights into the current state of mobile user experience and highlights some of the biggest themes that stood out. [The State of Mobile User Experience]( As the report found, mobile UX is better than ever. Certain mobile-specific patterns have become standard and well-adopted by users, the capability differences between native apps and the mobile web become less and less pronounced, and there has also been substantial improvement to make logging in and registration easier on mobile. However, the mobile experience is still far from being perfect — particularly when it comes to popular elements, like overlays and in-app browsers. There’s still room for improvement! If you want to dive deeper into mobile UX, the Nielsen Norman Group also compiled a [collection of links to articles and videos]( they published on the topic, covering everything from general considerations about designing for mobile to interaction design, accessibility, and e-commerce. (cm) --------------------------------------------------------------- 4. Upcoming Workshops and Conferences That’s right! We run [online workshops on front-end and design]( be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well. [Smashing Online Workshops]( With [online workshops]( we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are. As always, here’s a quick overview: - [Typography Masterclass]( UX with Elliot Jay Stocks. Oct 16–30 - [Customer-Centric Product Strategy Workshop]( UX with Debbie Levitt. Oct 18–26 - [Design KPIs Masterclass]( UX with Vitaly Friedman. Oct 31 – Nov 8 - [Accessibility for Designers]( UX with Stéphanie Walter. Nov 6–15 - [Smart Interface Design Patterns]( UX 9h video + Live UX Training with Vitaly Friedman - [Jump to all workshops →]( --------------------------------------------------------------- 5. iOS vs. Android UI Design How to translate an iOS app into an Android app, or vice versa? Eric D. Kennedy’s [complete guide to iOS vs. Android UI design]( highlights the most relevant differences between iOS and Android for UX and UI designers. [iOS vs. Android App UI Design: The Complete Guide]( The guide provides an overview of the main differences between the platforms and looks into the peculiarities of navigation, controls, typography, and other platform standards. Practical examples visualize the differences. If you’re designing both an iOS and an Android version of an app, Eric’s guidelines will save you a lot of time researching. (cm) --------------------------------------------------------------- From our sponsor The World Of Composable Web Architecture Comes Together At Netlify Compose 2023! [Netlify]( Developers at businesses of all sizes are turning to composable web architecture for unmatched agility, speed, and efficiency. Compose 2023 gathers a diverse ecosystem of technology decision-makers, developers, engineers and more, to shape the path towards a modern, composable future of the web. [Join in person or virtually]( --------------------------------------------------------------- 6. Mobile Accessibility Target Sizes We all know how frustrating it can be when we need to tap twice or even three times because the target size of an icon or link is too small. So, how big should interactive elements be? What’s a reliable size for icons, links and buttons to prevent mistakes and rage taps? Vitaly’s [mobile accessibility target sizes cheatsheet]( is here to help. [Mobile Accessibility Target Sizes Cheatsheet]( The cheatsheet recommends using at least 27×27px for small links or icons in the content area and at least 44×44px for icons at the top and the bottom of the page — but, of course, going up a few pixels is even better to make sure mistakes are really difficult to make. The cheatsheet also shares tips for preventing touch mistakes in complex data tables and assisting users with complex manipulations such as rotating an image. (cm) --------------------------------------------------------------- 7. Layout Grids For Responsive Design Grids are perfect to achieve visual consistency and establish connections between elements. So what does the optimal grid look like? Andrii Zhulidin shares practical tips and tricks to help you build [grids for mobile and responsive interfaces](. [Digging deep in layout grids in mobile app design]( Of course, there’s no one-size-fits-all solution, so Andrii’s overview equips you with everything you need to find optimal solutions for your project’s needs. He covers the optimal number of columns, how to properly count gutters and margins, and how to deal with calculation accuracy, and you’ll learn how to set up separate grids inside individual modules and how to maintain vertical rhythm when building larger modules. A great primer. (cm) --------------------------------------------------------------- From our sponsor Faster Fluid Responsive Design With Penpot’s Flex Layout [Penpot]( Penpot’s Flex Layout feature, based on CSS standards, revolutionizes responsive design. But, how does it work exactly? Designers shape layouts and developers seamlessly integrate generated code. A win-win approach that empowers designers with precise control, boosts developer efficiency and accelerates project timelines, all while promoting collaboration. [Try Penpot’s Flex Layout for free](. --------------------------------------------------------------- 8. Finding The Right Font Size Even the best typeface is only as good as it is set. But how do you decide what is a good font size for your web design project? Oliver Schöndorfer wrote a solid [introduction]( with guidelines to point you in the right direction. In it, he shares practical examples focused on body text in responsive web design. You’ll learn more about what Oliver calls the “holy trinity of typography’” and explore how relative units like em and rem make things easier for designers. [What’s the right font size in web design?]( In a nutshell, Oliver recommends setting your body text at a default size of 1em which is calculated as 16px in most browsers. Use relative units, and from there, scale up the font size and, ideally, the layout proportionally and make it larger on bigger viewports where you usually have a larger distance between the viewer and the screen. After [reading Oliver’s post]( you’ll definitely want to note down some of these valuable tips to take your typography game to the next level! (cm) --------------------------------------------------------------- 9. News From The Smashing Library 📚 Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing. In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as [printed books](. Have you checked them out already? - [Understanding Privacy]( by Heather Burns - [Touch Design for Mobile Interfaces]( by Steven Hoober - [Image Optimization]( by Addy Osmani - [Check out all books →]( [Success At Scale]( … and we’re currently working on a new book: [Success At Scale]( shipping in fall. [Pre-order your copy]( or [browse the complete library](. --------------------------------------------------------------- 10. Recent Smashing Articles - [Getting Started With Neon Branching]( - [Re-Creating The Pop-Out Hover Effect With Modern CSS (Part 1)]( - [Re-Creating The Pop-Out Hover Effect With Modern CSS (Part 2)]( - [Dancing Leaves And Spooky Fellows (October 2023 Wallpapers Edition)]( - [Exploring Enhanced Patterns In WordPress 6.3]( - [Read more on Smashing Magazine →]( --------------------------------------------------------------- That’s All, Folks! Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time! --------------------------------------------------------------- This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris LjeÅ¡njanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](