Jeffrey Zeldman's Blog, page 24

CSS Grid Layout with Rachel Andrew: Big Web Show

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!

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

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

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

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.

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

Web Law & Disorder

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

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

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

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

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.