Love it or hate it, there’s no denying the popularity of HTML emails. And, like the web before it, the inbox has officially gone mobile, with over 50 percent of email opens occurring on mobile devices. Still, email design is an outrageously outdated practice. (Remember coding before web standards became… standards?) But coding an email doesn’t need to be a lesson in frustration. While email designers still have to build layouts using tables and style them with HTML attributes and—gasp!—inline styles, a number of intrepid designers are taking modern techniques pioneered for the web and applying them to the archaic practice of email design. Jason Rodriguez shows how to apply the principles of responsive web design to the frustrating but essential realm of email design.
Topic: Design
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.
Letter to a Junior Designer
When you’re starting out in design you hunger to fix all the things. Your imagination and passion are boundless. So what turns a junior designer into a seasoned pro? It’s more than experience—it’s an ability to be in the moment and be a whole person.
The Z-Axis: Designing for the Future
For years we’ve seen the web as a two-dimensional space filled with pages that sit side by side on a flat, infinite plane. But as the devices we design for take on an increasingly diverse array of shapes and sizes, we must embrace new ways of designing up and down. Designing on the z-axis means incorporating three-dimensional physics into our interface designs. Wren Lanier explains how, by using the z-axis to place interface elements above or below one another, we can create better design systems that are more flexible and intuitive to use—and create new patterns that point the way to future interactions.
Creating Style Guides
A style guide, also referred to as a pattern library, is a living document that details the front-end code for all the elements and modules of a website or application. It also documents the site’s visual language, from header styles to color palettes. In short, a proper style guide is a one-stop guide that the entire team can reference when considering site changes and iterations. Susan Robertson shows us how to build and maintain a style guide that helps everyone from product owners and producers to designers and developers keep an ever-changing site on brand and on target.
Me and My Big Fat Ego
In a design project, there are usually areas where the client sees room for improvement—and that’s hard to take if your self-esteem is bound up with your work. You need confidence to present your work, but be sure to dial back the ego if it stands in the way of a successful client relationship.
Content-out Layout
Grids serve well to divide up a predefined canvas and guide how content fits onto a page, but when designing for the web’s fluid nature, we need something more responsive. Enter ratios, which architects, sculptors, and book designers have all used in their work to help set the tone for their compositions, and to scale their material from sketch to final build. Designers can apply a similar process on the web by focusing on the tone and shape of our content first, then working outward to design fluid, ratio-based grid systems that invite harmony between content, layout, and screen. Nathan Ford takes the next step toward more sophisticated, content-focused layouts on the web.
Inspiration
In the design world, asking about one’s “inspiration” is often code for “where do you pinch your ideas from?” But the act of copying needn’t be wreathed in euphemisms: just like in art class, we learn by copying the work of the masters. The trick is using the experience to learn and then making the technique or pattern your own.
Good Taste Doesn’t Matter
Do we truly believe beauty is in the eye of the beholder? Or do we actually seek out some external standard of good taste in design (and then try to impose it whether it leads to the best solution or not)? We may be happier, and better designers, if we let go of that notion.
What We Mean When We Say “responsive”
We keep using that word, “responsive,” but do we all mean the same thing by it? The debate continues, as it should, while the word in its web context works its way into our language. But by the time its meaning coalesces, will we even need it anymore?
