Our static tools and linear workflows aren’t the right fit for the flexible, diverse reality of today’s Web. Making prototyping a central element of your workflows will radically change how you approach problem solution and save you a lot of headaches – and money. But most importantly, you will be creating the right products and features in a way that resonates with the true nature of the Web. A discourse on processes, flexibility, the Web as a material, and how we build things.Saving Your Web Workflows with Prototyping – Matthias Ott
This story is a bit long, but I promise it will be worth it, because it contains the two most important principles every designer must know and take to heart if you intend to do great work anywhere, under almost any circumstances, over the long, long haul of your career.Sticking To It – fresh from JZ in Automattic.Design
Adelle and Adelle Sans have long been two of my favorite fonts—two great tastes that taste even better together! Now there are two more great flavors, with the release of Veronika Burian and José Scaglione’s twin-powered Adelle Mono family.
Adelle Mono is a true, monospaced version of the robust yet sensitively detailed font family.
Adelle Mono Flex is a proportional version that’s suited for text, branding, UI, captions, and screens: “It feels monospaced but reads like a nice slab,” TypeTogether explains in the June, 2020 issue of their newsletter announcing the release.
Much more information, along with a try-it-yourself type tester and a 60% introductory discount, is available on TypeTogether’s Adelle Mono web page.
(Note: Veronika Burian and José Scaglione designed the original Adelle and Adelle Sans, along with the new Mono and Mono Flex versions. Additionally, Irene Vlachou assisted in the creation of Adelle Mono.)
Like 90s hip-hop, The Web We Lost™ retains a near-mystical hold on the hearts and minds of those who were lucky enough to be part of it. Luke Dorny’s recent, lovingly hand-carved redesign of his personal site encompasses several generations of that pioneering creative web. As such, it will repay your curiosity.
Check Luke’s article page for textural, typographic, and interactive hat tips to great old sites from the likes of k10k, Cameron Moll, Jason Santa Maria, and more.
And don’t stop there; each section of the updated lukedorny.com offers its own little bonus delights. Like the floating titles (on first load) and touchable, complex thumbnail highlights on the “observer” (AKA home) page.
And by home page, I don’t mean the home page that loads when you first hit the site: that’s a narrow, fixed-width design that’s both a tribute and a goof.
No, I mean the home page that replaces that narrow initial home page once the cookies kick in. Want to see the initial, fixed-width home page again? I’m not sure that you can. Weird detail. Cool detail. Who thinks of such things? Some of us used to.
And don’t miss the subtle thrills of the silken pull threads (complete with shadows) and winking logo pull tab in the site’s footer. I could play with that all day.
Now, no site exactly needs those loving details. But danged if they don’t encourage you to spend time on the site and actually peruse its content.
There was a time when we thought about things like that. We knew people had a big choice in which websites they chose to visit. (Because people did have a big choice back in them days before social media consolidation.) And we worked to be worthy of their time and attention.
Days of future past
We can still strive to be worthy by sweating details and staying alive to the creative possibilities of the page. Not on every project, of course. But certainly on our personal sites. And we don’t have to limit our creative love and attention only to our personal sites. We pushed ourselves, back then; we can do it again.
In our products, we can remember to add delight as we subtract friction.
And just as an unexpected bouquet can brighten the day for someone we love, in the sites we design for partners, we can be on the lookout for opportunities to pleasantly surprise with unexpected, little, loving details.
Crafted with care doesn’t have to mean bespoke. But it’s remarkable what can happen when, in the early planning stage of a new project, we act as if we’re going to have to create each page from scratch.
In calling Luke Dorny’s site to your attention, I must disclaim a few things:
- I haven’t run accessibility tests on lukedorny.com or even tried to navigate it with images off, or via the keyboard.
- Using pixel fonts for body copy, headlines, labels, and so on—while entirely appropriate to the period Luke’s celebrating and conceptually necessary for the design to work as it should—isn’t the most readable choice and may cause difficulty for some readers.
- I haven’t tested the site in every browser and on every known device. I haven’t checked its optimization. For all I know, the site may pass such tests with flying colors, but I tend to think all this beauty comes at a price in terms of assets and bandwidth.
Nevertheless, I do commend this fine website to your loving attention. Maybe spend time on it instead of Twitter next time you take a break?
I’ll be back soon with more examples of sites trying harder.
Unintentionally hilarious Style piece on Stoicism as misunderstood and ostentatiously practiced by trend-conforming Silicon Valley billionaires. (Ooh, billionaire walks five miles a day? So does everyone with two legs in New York.)
TEN great links to launch your weekend:
If you missed Gerry McGovern’s brilliant An Event Apart talk on “Top Task Management,” the video’s here for your pleasure.
If you missed Eric Meyer’s article “Practical CSS Grid: Adding Grid to an Existing Design” in A List Apart, drop what you’re doing and read!
If you missed my chat about design discovery with UX consultant Dan Brown on this week’s Big Web Show, have a listen.
What sex is your font? Many people see typefaces as gendered. All this and much more in “The Font Purchasing Habits Survey Results” by Mary Catherine Pflug.
“The Gig Economy Celebrates Working Yourself to Death” by Jia Tolentino in The New Yorker.
Well, there goes *that* startup idea. Facebook starts warning U.S. users when they’re sharing fake news in Macworld.
“The Three-Hour Brand Sprint” (“GV’s Simple Recipe For Getting Started On Your Brand”) by Jake Knapp.
“Why Are Designers Still Expected To Work For Free?” asks Design Observer’s Jessica Helfand in Fast Company’s Co.Design.
Bonus (this one goes to 11): “Jeffrey Zeldman Presents a Math Problem” from Typethos.
Hope you’re hungry!
Web Design and Typography
This is freakin’ awesome: Styling Text With SVG Filters from the Code School blog.
John D. Jameson writes great mini-articles about web typography and front-end development on his personal site.
Here’s a look at twelve kinds of italic typeface, with some notes on their cultural contexts, historical backgrounds, and practical applications: Italics Examined, from Hoefler & Co.
So you’ve seen a typeface in use – on a poster, in a magazine, on a website … and you want to know what’s the name of that typeface. Here are five useful tips to identify it: The 5 best Tricks to Identify a Font – Video by Typography Guru. Hat tip: Typewolf.
In the Magazine
Write a better class of CSS: Tim Baxter shows how to make our CSS as semantic and meaningful as our markup in today’s A List Apart: Meaningful CSS: Style Like You Mean It.
Rachel Andrew, Eric Meyer, Jen Simmons & I discuss radically new web layouts—for real this time—in Episode 115 of The Web Ahead, recorded live at An Event Apart: thewebahead.net/115.
Design For Real Life authors Sara Wachter-Boettcher and Eric Meyer chat with Jason Ogle on the User Defenders podcast: userdefenders.com/podcast/design-for-real-life/
Speaking of radically new web layouts, the future of web layout needs your input and feedback. Read and respond: A Revised Subgrid Specification, by Rachel Andrew.
Better CSS Drop Caps with “initial-letter” (hat tip: Rachel Andrew)
IN “CONTENT Display Patterns” (which all front-end folk should read), Dan Mall points to a truth not unlike the one Ethan Marcotte shared last month on 24 ways. It is a truth as old as standards-based design: Construct your markup to properly support your content (not your design).
Modular/atomic design doesn’t change this truth, it just reinforces its wisdom. Flexbox and grid layout don’t change this truth, they just make it easier to do it better. HTML5 doesn’t change this truth, it just reminds us that the separation of structure from style came into existence for a reason. A reason that hasn’t changed. A reason that cannot change, because it is the core truth of the web, and is inextricably bound up with the promise of this medium.
Separating structure from style and behavior was the web standards movement’s prime revelation, and each generation of web designers discovers it anew. This separation is what makes our content as backward-compatible as it is forward-compatible (or “future-friendly,” if you prefer). It’s the key to re-use. The key to accessibility. The key to the new kinds of CMS systems we’re just beginning to dream up. It’s what makes our content as accessible to an ancient device as it will be to an unimagined future one.
Every time a leader in our field discovers, as if for the first time, the genius of this separation between style, presentation, and behavior, she is validating the brilliance of web forbears like Tim Berners-Lee, Håkon Wium Lie, and Bert Bos.
Every time a Dan or an Ethan (or a Sara or a Lea) writes a beautiful and insightful article like the two cited above, they are telling new web designers, and reminding experienced ones, that this separation of powers matters.
And they are plunging a stake into the increasingly slippery ground beneath us.
Why is it slippery? Because too many developers and designers in our amnesiac community have begun to believe and share bad ideas—ideas, like CSS isn’t needed, HTML isn’t needed, progressive enhancement is old-fashioned and unnecessary, and so on. Ideas that, if followed, will turn the web back what it was becoming in the late 1990s: a wasteland of walled gardens that said no to more people than they welcomed. Let that never be so. We have the power.
As Maimonides, were he alive today, would tell us: he who excludes a single user destroys a universe. Web standards now and forever.
THE MODERN SOCIAL WEB is a miracle of progress but also a status-driven guilt-spewing shit volcano. Back in the 1990s—this will sound insane—we paid a lot of money for our tilde accounts, like $30 or $40 a month or sometimes much more. We paid to reach strangers with our weird ideas. Whereas now, as everyone understands, brands pay to know users.
IN ISSUE NO. 357 of A List Apart for people who make websites:
by DEVAN GOLDSTEIN
To be sure we’re designing the right experience for the right audience, there’s no substitute for research conducted with actual users. Like any research method, though, usability testing has its drawbacks. Most importantly, it isn’t cheap. Fortunately, there are other usability research methods at our disposal. The standouts, expert review and heuristic evaluation, are easy to add to a design and development process almost regardless of budget or resource concerns. Explore these techniques, learn their advantages and disadvantages, and get the low-down on how to include them in your projects.
by KRISTOFER LAYON
Whether we prototype, write, design, develop, or test as part of building the web, we’re creating something hundreds, thousands, or maybe even millions of people will use. But how do we know that we’re creating the right enhancements for the web, at the right time, and for the right customers? Because our client or boss asked us to? And how do they know? Enter product management for the web—bridging the gap between leadership and customers on one side, and the user experience, content strategy, design, and development team on the other. Learn to set priorities that gradually but steadily make your product (and the web) better.
SINCE 1998, A List Apart has explored the design, development, and meaning of web content, with a special focus on web standards and best practices.
Illustration by Kevin Cornell for A List Apart Magazine.
For your pleasure:
Jason Grigsby (@grigs) discusses the next frontier: web-enabled televisions. Key points from this important BDConf speech transcribed by Brad Frost. With Slideshare video.
As usual, Jeremy Keith is the cluefullest person in the room when it comes to the sexual politics of HTML5.
Just like it says.
“If you’re complaining about IE in 2012, the problem isn’t Internet Explorer … it’s your job. But you can fix that.” One of several nuggets that emerge from my interview with the new design magazine.
Just like it says.
“Whether to check email or to look up program or product information, using a tablet or smartphone while watching TV is more common than not according to a Q4 2011 Nielsen survey of connected device owners in the U.S., U.K., Germany and Italy. In the U.S., 88 percent of tablet owners and 86 percent of smartphone owners said they used their device while watching TV at least once during a 30-day period. For 45 percent of tablet-tapping Americans, using their device while watching TV was a daily event, with 26 percent noting simultaneous TV and tablet use several times a day. U.S. smartphone owners showed similar dual usage of TV with their phones, with 41 percent saying their use their phone at least once a day while tuned in.”
Just like it says.
The latest CSSquirrel comic takes a jaded view of recent goings-on amidst the framers of HTML5. Alas, it’s even worse than he thinks.
Well done, Adaptive Path.
Jeffrey Zeldman with Mini-Zeldman Doll
Polaroid SLR 680SE / Impossible PX-680 Color Shade
Jeffrey became the first person inducted into the SXSW Interactive Hall of Fame. Afterwards there was a party with mini-Zeldman dolls.
ONE of the most frequent questions we get asked about the mobile web is ‘Where do I go to learn about all this stuff?’ So here’s an extensive list of helpful tools and resources that can help you create great mobile web experiences.”
GOOD MORNING! I’ve added some nifty external links to my About page. Enjoy.
I WISH I had written Adactio: Journal—Sea change. I advise every web designer who hasn’t yet done so to read it.