Helvetica With Curves—And Other Updated Classics 24 Feb 2016, 7:42 am

Title card from ‘Designing With Web Standards in 2016,’ An Event Apart presentation by Jeffrey Zeldman. Text is set in Forma, an upcoming face from Font Bureau.

NOT UNLIKE what Mattel has done with Barbie, the typographic geniuses at The Font Bureau are working on a humanist geometric sans-serif that could almost be thought of as Helvetica with curves.

Forma is the name of the as-yet unreleased font family, and you can get a peek at one weight of it in the above image, which is taken from my slide deck for “Designing With Web Standards in 2016,” which is the presentation I’ll premiere next month at An Event Apart Nashville.

This new presentation examines the seemingly ever-deepening complexity of designing for our medium today—a complexity that has driven some longtime web designers I know to declare that web design has become “too hard,” or that “the fun has gone out of it”—and asks what our traditions of designing with web standards can teach us about crafting web experiences for a multi-device, mobile-first world.

Given that my original (unpublished) title for Designing With Web Standards was going to be Forward Compatibility—and given that Forward Compatibility is not so different in concept from today’s phrase, Future-Friendly—I’m guessing that structured, semantically marked-up content, progressive enhancement, and the separation of style from structure and behavior still have a huge role to play in today’s day-to-day web design work.

Oh, dear, I hope that wasn’t a spoiler.

I look forward to sharing these ideas with you in greater detail at An Event Apart. Now celebrating our tenth year of bringing great ideas to our community, and creating a space where the smartest folks in web design and development can meet, mingle, bond, network, and learn together. Follow @aneventapart for show announcements, links to useful web resources, and free giveaways on the 10th of every month in 2016. (This month’s giveaway, ten beautiful fleece comforters monogrammed with the A Decade Apart logo, went to ten lucky winners on February 10th. Keep watching the skies.)

The post Helvetica With Curves—And Other Updated Classics appeared first on Zeldman on Web & Interaction Design.

Foreword to HTML5 for Web Designers, 2nd Edition 18 Feb 2016, 10:32 am

WELCOME to the second edition of HTML5 for Web Designers, the book that launched a thousand sites—or apps, if you prefer. It is also the book whose first edition launched our little craft publishing house. And its new edition comes to you when it is needed most, on a web riven by conflicting visions.

For some folks, the web today is what it has always been: namely, the most accessible medium ever devised for sharing content. For others, including the heads of powerful tech companies, the web is a platform for building JavaScript-powered applications whose purpose is to disrupt every industry on earth, chiefly for the benefit of investors.

Adherents of both camps are equally passionate—and both swear by HTML5, which was designed to create both kinds of web. HTML5 has given us a web both more powerful and more divided.

So much has changed over the past five years, it’s hard to remember that many businesses were still betting on Flash as recently as 2009, and still building sites and applications exclusively for the desktop browser. Then, in 2010, Steve Jobs famously declared that his iPhone would not support Flash. Flash was dead, Steve said. HTML5 was the future. A hundred thousand designers, developers, and site owners suddenly asked themselves, “HTML wha—?” The next day, our little book came out, which was good timing for sales, but even better for the industry. And there are still no better guides to the new markup language than Jeremy Keith and Rachel Andrew.

In this book, you will learn what HTML5 is, why it came to be, and how to use it to create sites and applications as powerful as anything you can imagine. Forms, elements, semantics, scripting? It’s all here, guided by a set of principles as straightforward as they are noble—principles that deliver sophisticated web interactivity while remaining true to Tim Berners-Lee’s twenty-five-year-old vision of an open, accessible web that works for all. This book spells out a philosophy that will deepen not only the usability of your projects, but their humanism as well.

HTML5 for Web Designers is a book about HTML like Elements of Style is a book about commas. It’s a book founded on solid design principles, and forged at the cutting edge of twenty-first century multidevice design and development. Jeremy Keith and Rachel Andrew never, for one second, forget what moment of web design history we are in, and how much depends upon our ever bearing in mind not only our users in the wealthiest countries, but also the least of these. I know, admire, and continually learn from the depths of the authors’ belief in humanity and HTML. You will, too.

Jeffrey Zeldman
Publisher
A Book Apart
February 17, 2016

The post Foreword to HTML5 for Web Designers, 2nd Edition appeared first on Zeldman on Web & Interaction Design.

Big Web Show № 142: Information Architecture is Still Very Much a Thing, with Abby Covert 21 Jan 2016, 9:58 am

Today’s Big Web Show guest is Abby Covert, Information Architect; curator of IA Summit; co-founder of World IA Day; president of IA Institute; teacher in the Products of Design MFA program at New York’s School of Visual Arts; and author of How To Make Sense of Any Mess, a “brilliant introduction to information architecture” (Peter Morville) that is frequently purchased at Amazon with Don’t Make Me Think and The Design of Everyday Things, the two classics of usable design.

Discussed: why IA matters now more than ever, the difference between IA and content strategy (IA is building the vehicle, CS is putting fueling it and making sure it won’t run out of gas), writing and designing a book, building agreement among stakeholders, “not having opinions, not having ideas of one’s own,” IA’s origins in language and structure, the fun of the IA Summit, the creation and growth of World IA Day, the joy of teaching, and more.

Enjoy Episode № 142 of The Big Web Show: Information Architecture is Still Very Much a Thing, with Abby Covert.

URLs

http://abbytheia.com
https://twitter.com/abby_the_ia
https://twitter.com/IAinstitute
http://worldiaday.org
https://twitter.com/SVAPOD
http://www.howtomakesenseofanymess.com
http://www.amazon.com/How-Make-Sense-Any-Mess/dp/1500615994/
http://www.merriam-webster.com/dictionary/retronym

​Sponsored by A List Apart​

The award winning Big Web Show features special guests and topics like web publishing, art direction, content strategy, typography, web technology, and more. It’s everything web that matters.

The post Big Web Show № 142: Information Architecture is Still Very Much a Thing, with Abby Covert appeared first on Zeldman on Web & Interaction Design.

Sharing is Caring: the Shopify Partner Studio Program 21 Jan 2016, 9:43 am

THE INTERNET, as we all know, makes it possible to work from anywhere. Back in 1999, I started Happy Cog studio from a desk in my bedroom. I shouldn’t even call it a desk. It was a door on top of two filing cabinets. But that, a Mac, and an internet connection were enough to launch my web design business.

But creative people thrive by rubbing shoulders with other creative people, which is why I opened a studio as soon as the business I was doing justified the expense.

It’s no secret that coworking spaces have exploded in the past five to ten years, and the communal setting they offer helps freelancers, remote workers, and other independent professionals work better and more happily. But, as good as coworking spaces are, I believe designers and developers do even better in a shared studio where the same talented folks come in day after day, sitting at the same desks every day. That’s why I opened A Space Apart in 2012, and it’s why I’m delighted to open my studio to the Shopify Partner Studio Program.

If you’re a qualifying designer or developer just starting your career, we want you here. Besides rubbing shoulders with each other, and with some of the smartest designers and developers I know, you’ll gain mentorship experience from Shopify execs, web design/development industry icons, and me. (Never fear, I’ll learn more from you than you will from me.)

So kickstart your freelance business with free office space and mentorship from Shopify and me. If you haven’t already done so, apply now!

The post Sharing is Caring: the Shopify Partner Studio Program appeared first on Zeldman on Web & Interaction Design.

CSS Grid Layout with Rachel Andrew: Big Web Show 11 Jan 2016, 2:08 pm

RACHEL ANDREW—longtime web developer and web standards champion, co-founder of the Perch CMS, and author of Get Ready For CSS Grid Layout—is my guest on today’s Big Web Show. We discuss working with CSS Grid Layout, how Grid enables designers to “do something different” with web layout, why designers need to start experimenting with Grid Layout now, how front-end design has morphed into an engineering discipline, learning HTML and CSS versus learning frameworks, and the magic of David Bowie, RIP.

Enjoy Episode № 141 of The Big Web Show.

• Subscribe via iTunes.
• Subscribe via RSS

Sponsored by A List Apart and An Event Apart.

URLs

rachelandrew.co.uk
Get Ready for CSS Grid Layout
Perch CMS
Writing by Rachel Andrew
Books by Rachel Andrew
@rachelandrew

The post CSS Grid Layout with Rachel Andrew: Big Web Show appeared first on Zeldman on Web & Interaction Design.

A Book Apart Briefs! 7 Jan 2016, 6:38 am

FROM THOSE WONDERFUL people who brought you Responsive Web Design, Design Is A Job, Mobile First, plus thirteen additional instant classics of web design and development, here come A Book Apart Briefs: even briefer books for people who make websites. Starting with the immediately useful and illuminating Get Ready For CSS Grid Layout by Rachel Andrew (foreword by Eric Meyer), and Pricing Design by Dan Mall (foreword by Mike Monteiro).

Web design is about multi-disciplinary mastery and laser focus, so we created A Book Apart to cover the emerging and essential topics in web design and development with style, clarity, and, above all, brevity. Every title in our catalog sheds clear light on a tricky subject, and fast, so you can get back to work.

With sixteen classics under our belt, and buoyed by your support over the years, today we take that mission one step further with our new, ebook-only guides to essential fundamentals, of-the-moment techniques, and deep nerdery.

As A Book Apart co-founder and publisher, it actually thrills me to bring you the pricing guide our business has needed since forever, by Superfriends founder Dan Mall; and the easily understandable guide to the next generation of CSS layout, by the super-talented and incredibly brilliant Perch co-founder Rachel Andrew.

There are no better writer/designers to present these topics. And there are no needless words to waste your time, because these are A Book Apart Briefs: same great writing, even more brief.

Dig in!

The post A Book Apart Briefs! appeared first on Zeldman on Web & Interaction Design.

Of Patterns and Power: Web Standards Then & Now 5 Jan 2016, 12:09 pm

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 post Of Patterns and Power: Web Standards Then & Now appeared first on Zeldman on Web & Interaction Design.

CSS & Design: Blending Modes Demystified 5 Jan 2016, 7:15 am

IN AN IDEAL world, we’d be able to modify a design or graphic for the web while keeping the original intact, all without opening an image editor. We’d save tons of time by not having to manually reprocess graphics whenever we changed stuff. Graphics could be neatly specified, maintained, and manipulated with just a few licks of CSS. Oh. Wait. We can do that! Justin McDowell gives us the lowdown: read Blending Modes Demystified in today’s A List Apart.

Illustration by Brad Colbow

The post CSS & Design: Blending Modes Demystified appeared first on Zeldman on Web & Interaction Design.

The Year in Design 24 Dec 2015, 8:11 am

• Mobile is today’s first screen. So design responsively, focusing on content and structure first.
• Websites and apps alike should remove distractions and let people interact as directly as possible with content.
• 90 percent of design is typography. And the other 90 percent is whitespace.
• Boost usability and pleasure with progressive disclosure: menus and functions that appear only when needed.
• One illustration or original photo beats 100 stock images.
• Design your system to serve your content, not the other way around.
• Remove each detail from your design until it breaks.
• Style is the servant of brand and content. Style without purpose is noise.
• Nobody waits. Speed is to today’s design what ornament was to yesterday’s.
• Don’t design to prove you’re clever. Design to make the user think she is.

Also published in Medium

Translated into German (also here) by Mark Sargent

Translated into French by Jean-Baptiste Sachsé

Translated into Turkish by omerbalyali.

Translated into Spanish by Tam Lopez Breit.

The post The Year in Design appeared first on Zeldman on Web & Interaction Design.

Web Law & Disorder 22 Dec 2015, 7:01 am

LEGISLATING THE WEB has long been murky ground. When glacial processes, uninformed committees, and international politics meet the individualized culture of the internet, friction ensues. Despite the resulting confusion, it’s our duty to work within the law—and to speak up for a better relationship between governing bodies and web professionals. In the current A List Apart, Heather Burns guides us through the current dilemmas in digital law, and offers a solution: professionalizing our industry to ensure a seat at the table.

☞ Enjoy The Perfect Storm in Digital Law by Heather Burns.

☞ And for more on Heather Burns and internet law, listen to The Law is an Ass: Digital Law & Web Design with Heather Burns. It’s Episode № 137 of The Big Web Show—everything web that matters.

Illustration: Ping Zhu

The post Web Law & Disorder appeared first on Zeldman on Web & Interaction Design.

Ad Blocking Phase II 19 Dec 2015, 11:13 am

THE WORLD has finally caught up with Been, Inc. Three years ago, this tiny start-up company shared my studio space in New York. Their product idea was remarkably original: instead of passively accepting the data collection and loss of privacy that comes with most ad networks on the web, what if people had a choice—to either block ads and third-party trackers entirely, or earn rewards for letting ads through?

The initial web-based product, playfully designed by Monkey Do, took the scariness and complexity out of tracking issues, and returned the decision making power to the consumer. Unfortunately, the mainstream web wasn’t ready for ad blocking, and consumers en masse either weren’t ready to think about privacy, or simply didn’t know the company’s value proposition because of its nonexistent marketing budget. (The only thing that kills products faster than no marketing is poor execution—although a handful of products have survived both.)

To stay afloat in the face of mass indifference, the company temporarily pivoted, using a portion of their technology to facilitate sharing of web content between consumers, much like the late lamented Ma.gnolia or Pocket’s new Recommended section. But where Ma.gnolia and Pocket were/are text-powered, the pivoted Been app was primarily visual, which helped it gain traction in the eduation market. Grade-school teachers and kids loved using the app for research projects—and their support helped the company stay in business long enough for the internet to catch up with their ideas.

Version 2.0 of their Choice app for iOS is the product of years of work on user privacy, data ownership, and control. iOS fans can download it at www.been.mobi/getv2edu.

The company’s site explains the push-button mechanics through which you can choose to block ads and third-party trackers in your apps and Safari, or earn rewards by letting ads through and sharing (strictly non-personal) information with Been. (Earn Mode is limited to US users for now.)

When I foolhardily put down my deposit on a New York studio that was larger and more costly than what I needed, my hope was that it would attract a like-minded community of designers and tech companies from whom I would learn and be inspired. That was certainly the case with my friends at Been! I wish them great success at helping to bring the changes our web needs.

The post Ad Blocking Phase II appeared first on Zeldman on Web & Interaction Design.

Hamster Dance of Death 16 Dec 2015, 9:07 am

I NEVER take my daughter to pet stores, because she always wants to save all the animals. But our babysitter didn’t get the memo. Last week at a filthy pet store near school, Ava fell in love with a neglected hamster. Once the internet had assured me our cats wouldn’t kill the hamsters, I gave Ava permission to bring home the hamster, and gave the babysitter money to take care of the purchase.

Ava came home with two hamsters: a lady and a gentleman.

In less than a week, the lady gave birth to seven naked pink babies. It looked like mama hamster was going to eat her babies—distressing my daughter no end—but, days later, they are still alive, and their fur is beginning to grow in.

It’s a school day, but Ava has another virus—her second in two weeks—and is home from school for the second day in a row; I’m home watching her and attempting to do my work.

This morning while I was having coffee on the couch, Ava put the daddy hamster on my tummy. He slipped around behind me, and somehow disappeared.

We spent an hour on hands and knees amid Ava’s used Kleenexes, spilled hamster food, cedar chips, and other detritus, searching for the missing hamster. The cats could not find him either. (Giovannia, our vigilant tuxedo cat, actually looked for the missing hamster; gimlet-eyed Snow White licked her paws, oblivious.)

It soon became obvious that the hamster had somehow crawled into the family couch.

When little incisions under the cushions failed to reveal the missing rodent, I painstakingly destroyed the entire seating area in hopes of finding him. Insider tip: when destroying a couch from ABC Carpet & Warehouse, a scissor works better than a kitchen knife.

It was a beautiful couch before our sick dog Emile (RIP) had his way with it, and before Giovannia and Snow White converted it to a cat manicure device, and before Ava and I gave up and had all our meals on it, and before Ava decided that her favorite meal was soup.

Before I destroyed it, it looked like the Gestapo had held sex parties on it, but at least it was a couch.

Destroying the couch did not produce the hamster. We’ve left a trail of hamster food outside the ripped-apart couch. Probably he will come out at night, hamsters being nocturnal.

Anyone more experienced in this area, please share tips.

The post Hamster Dance of Death appeared first on Zeldman on Web & Interaction Design.

Progressive Enhancement FTW with Aaron Gustafson 4 Dec 2015, 11:59 am

LONGTIME developer, lecturer, and web standards evangelist Aaron Gustafson and I discuss the newly published update to Aaron’s best-selling industry classic “love letter to the web,” Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement, 2nd Edition (New Riders, 2015) in Episode № 140 of The Big Web Show—everything web that matters.

Topics covered include: Aaron’s superhero origin story as a creator of progressively enhanced websites and applications; “we’re not building things we haven’t built on the web before;” “creating opportunities for people outside your comfort zone;” development in the world of Node.js; “every interface is a conversation;” “visual design is an enhancement;” “interaction is an enhancement;” nerding out over early web terminal interfaces; Microsoft, Opera, and more.

Sponsored by DreamHost, Braintree, and Thankful.

Deal

Save 35% off Aaron Gustafson’s Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement, 2nd Edition when you enter discount code AARON35 at checkout.

URLS

https://www.aaron-gustafson.com/about/ – About Aaron
http://adaptivewebdesign.info/2nd-edition/ – Adaptive Web Design Second Edition (“95% new material”)
[PDF] – Read the first chapter free (PDF)
http://adaptivewebdesign.info – First Edition, May 2011 (read the entire first edition free)
http://webstandardssherpa.com – Web Standards Sherpa
https://github.com/easy-designs/batch-ua-parser.php – UA Parser Script by Aaron – on Github
https://www.aaron-gustafson.com/notebook/ – Notebook: Aaron’s blog
https://www.aaron-gustafson.com/speaking-engagements/ – Engagements: Aaron’s speaking page, using Quantity Queries
http://alistapart.com/article/quantity-queries-for-css – “Quantity Queries for CSS” by Heydon Pickering in A List Apart
http://alistapart.com/author/agustafson – A List Apart: articles by Aaron Gustafson
http://alistapart.com/article/goingtoprint – Eric Meyer’s “CSS Design: Going to Print” in A List Apart
https://www.whatsapp.com – Whatsapp

The post Progressive Enhancement FTW with Aaron Gustafson appeared first on Zeldman on Web & Interaction Design.

Blue Beanie Day – Support Web Standards 29 Nov 2015, 11:19 am

THE NINTH ANNUAL Blue Beanie Day in support of web standards will be celebrated around the world tomorrow, November 30, 2015. The more folks who (literally and figuratively) tip their cap to Blue Beanie Day, the more we can restore or raise awareness of web standards and the accessible, open web they make possible. I hope I can count on your help to spread the word.

It’s a thrilling time to create web content and experiences, as more new coders join our ranks, using more new tools and frameworks to create more new kinds of content, experience, and interactivity. But in this environment that moves faster than reason, it’s too easy for our community and the breathless media that reports on it to lose sight of vital basics.

Progressive enhancement and accessible, semantic markup aren’t optional extras. They’re the foundation of a web that works for all people, of whatever ability, on whatever devices they choose to access it.

Please join me tomorrow, Monday, November 30th, in celebrating a web that works for all. On your social networks, use hashtag #bbd15 and add a blue beanie to your avatar or photo. And on your websites and social media, please take a moment to share what web standards mean to you. If you like, you can also post your photos or essays directly to bluebeanieday.tumblr.com.

Thanks!

The post Blue Beanie Day – Support Web Standards appeared first on Zeldman on Web & Interaction Design.

№ 139: Every Time We Touch—Josh Clark, author of “Designing For Touch” 20 Nov 2015, 12:16 pm

TOUCH introduces physicality to designs that were once strictly virtual, and puts forth a new test: How does this design feel in the hand? Josh Clark’s new book, Designing For Touch, guides designers through this new touchscreen frontier, and is the launchpad for today’s Big Web Show conversation.

In a fast-paced, freewheeling conversation, Josh and I discuss why game designers are some of our most talented and inspiring interaction designers; the economy of motion; perceptions of value when viewing objects on touchscreen versus desktop computer; teaching digital designers to think like industrial designers (and vice-versa); long press versus force touch; how and when to make gestures discoverable; and much more.

Sponsored by DreamHost and BrainTree. Big Web Show listeners can save 15% when ordering Designing For Touch at abookapart.com with discount code DFTBIGWEB. Discount valid through the end of January 2016.

URLS

Big Web Show Episode № 139
Big Medium
Designing For Touch

The post № 139: Every Time We Touch—Josh Clark, author of “Designing For Touch” appeared first on Zeldman on Web & Interaction Design.