“Sizing svg is more complicated than sizing an img,” writes Chris Coyier in this excerpt from his new A Book Apart title Practical SVG. But, he continues, it’s complicated in a good way—it gives us more control and opens up some interesting new possibilities. Read on.
Topic: Design
Adapting to Input
The rise of mobile devices made us confront the reality that we can’t control the size of the viewport, and we adapted. Now it’s time to face up to another reality: web input modes are proliferating and we have no control over which ones a user has and prefers. Seasoned developer Jason Grigsby has some advice on adapting to the way the web is now.
The Rich (Typefaces) Get Richer
Type on the web has come a long way since the beginning of the decade. We now have literally thousands of fonts at our disposal to use on our sites. But the same faces—the Futuras, the Gothams, the Proxima Novas—crop up everywhere. Jeremiah Shoaf encourages us to break out of our cognitive ruts and explore the wealth of typographic diversity at our fingertips.
Never Show A Design You Haven’t Tested On Users
User testing doesn’t have to be expensive or time-consuming—and it should never be skipped entirely if you don’t have “permission” to do it. Injecting real feedback early and often affects how we design our work, communicate, and even present concepts to the client. Testing should be a habit, even when it doesn’t seem possible. It just requires a little ingenuity.
Designing the Conversational UI
In the second of a two-part series, Matty Mariansky turns to the practical aspects of designing conversational interfaces. He discusses some of the challenges that he and his team encountered along the way and offers guidelines for translating specific design patterns into a conversational form. These guidelines are loose principles rather than hard-and-fast rules; best practices for designing conversations will form, break, and form again. It’s an exciting time to be a pioneer.
All Talk and No Buttons: The Conversational UI
Conversational interfaces have been around for a while, but they’ve only recently begun to spread into the mainstream. The entire field of visual interface design—everything we know about placing controls, handling mouse and touch interaction, even picking colors—will be affected by the switch to conversational form, or will go away altogether. In the first of two parts, Matty Mariansky sketches out a road map for this brave new world.
Rolling Out Responsive
Every organization is different, with their own internal processes, stakeholder needs, and customer expectations—meaning that there’s no one right way to approach a responsive redesign project. What’s right is what’s right for your company, as Karen McGrane explains in her new book, Going Responsive. This excerpt looks at the pros and cons to different responsive project approaches—from beta release to big reveal and everything in between—so you can figure out the best fit for your team.
Frameworks
As we’ve adopted responsive design—componentizing our interfaces, establishing breakpoints, and thinking content-out instead of canvas-in—we’ve learned that there’s more to it than just changing our techniques. We have to change the way we talk about (and act on) the principles of good responsive design. In this excerpt from Chapter 5 of his new book, Responsive Design: Patterns & Principles, Ethan Marcotte explores the philosophical and practical frameworks that can guide our responsive work.
How We Hold Our Gadgets
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.
Using Responsive Images (Now)
The rise of responsive web design sent designers and developers scrambling to figure out how best to deliver responsive images across a range of device widths. Thanks in large part to efforts by the Responsive Issues Community Group (RICG), we can now serve images of varying quality depending on the user’s viewport rather than on some convoluted server-side setup. Chen Hui Jing introduces us to the new image selection types and shows us how we can make them work for us.
