Touch adds a new dimension to our designs, and asks us to think not only about the canvas of the screen, but also about how users interact physically with the screen itself. We need to consider the ergonomic needs of holding a smartphone, tablet, or hybrid device—switching hands, swapping grips, and pointing, clicking, and typing. In this excerpt from Chapter 1 of Designing for Touch, Josh Clark examines the role of thumbs in driving our device interactions, no matter the size of the screen.
Topic: Mobile/Multidevice
Each week, new devices appear with varying screen sizes, pixel densities, input types, and more. Creating great mobile (and immobile) experiences. Constraints, challenges, and new opportunities. Mobile-first. Content-first. Responsive workflow. Responsive Design + Server Side Components (RESS). JavaScript, APIs, and progressive enhancement. Designing for hand, lap, and desk.
How Do We Get It Done, Now?
In the future that’s forever one short year away, brilliantly functional, widely implemented APIs will redeem us from our toil and trouble. We just have to get ready for their coming, while seeing to the nitty-gritty of making the web work in the present. Sadly, it’s a lot less predictable than that. Every new standard has to start small, and we’ll always need to choose which API to back and which to pass over.
Container Queries: Once More Unto the Breach
Media queries have been the go-to tool in building responsive sites, allowing us to resize and recombine modules to suit multiple contexts, layouts, and viewports. But relying on fixed viewport sizes can quickly twist stylesheets into Gordian knots. We still need a future-friendly way to manage responsive CSS. Mat Marquis explores the problem and the progress toward the solution—and issues a rallying call.
Instant Web
For some, Facebook’s Instant Articles is a sign that the traditional web stack is incapable of giving users a first-class reading experience. But the sluggish performance of the web isn’t due to an inherent flaw in the technology. That particular problem originates between the seat and the keyboard, where builders make choices that bloat their sites. For Mark Llobrera, Instant Articles is a sign that we need to prioritize performance like we actually mean it.
Readable Wearables
Displays that are more tiny than our lowest-size breakpoints require a more condensed range of type sizes. If you don’t already have in place a typographic system that can absorb the demands of this new context (watches, wearables, digital sticky notes, whatever), now might be the time to consider it. Matt Griffin was ready for anything because his site was simple and built to be future friendly.
Planning for Performance
We should build websites that are not merely responsive, but sustainable, globally accessible, and, well, responsible, as Scott Jehl suggests in his new book, Responsible Responsive Design. Our approaches to responsive websites need to consider ever-changing devices, limited networks, and unexpected contexts. In this excerpt from Chapter 3, Scott discusses page load times and the responsible delivery of code.
Awkward Cousins
As users we switch seamlessly between the web and apps, yet as designers and developers we huddle in separate rooms. Wouldn’t this party be livelier if we mingled?
Look at the Big Picture
It’s easy to see that automation can streamline image-optimization for all the varied contexts on the pan-device web. What’s harder to imagine is a future where foregrounding meaningful content in images can be handled by an algorithm. Art direction still requires human intervention, and that’s often a luxury in high-production environments.
Device RAM and image megapixel limit
Andy Clarke experimented with the max decoded size for images on iOS and found that file size isn’t the only thing to keep an eye on.
Surveying the Big Screen
We’ve been designing responsively for more than three years, now, and have the small-screen pattern libraries and portfolios to prove it. But what about larger screens? While we commonly use liquid design for smaller breakpoints, allowing our content to expand and contract as needed, few of us consider what happens beyond a maximum width of 960 pixels or so—which can leave a heap of unused pixels on a contemporary desktop display. Mike Pick explores how to use negative space, scale, density, and layout devices such as grids, modules, and columns to break through the 1024-pixel layout barrier.
