— Jeffrey Zeldman (@zeldman) April 18, 2014
A List Apart № 393: Inventing & Documenting Design Patterns
A LIST APART Issue № 393 is about documenting design patterns with a style guide and creating new ones with the z-axis.
by SUSAN ROBERTSON
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.
by WREN LANIER
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.
Big Web Show № 116: The Difference Between Ideas and Products
IN BIG WEB SHOW № 116 (“Everything Web That Matters”), I chat with Phillip Reyland and Roland Dubois, cofounders of Byte Dept., a NYC agency that designs and builds digital products for brands and agencies, and that created the popular Bike Department app for iOS.
Creating products for clients instead of yourself. Four strategies to apply to every product: experience strategy, platform strategy, mobile strategy, and integration strategy. Rethinking the mobile bike app: using data to predict whether a bike will be there when you get to it. The experience layer versus the visual layer. Finding the right partner. Working with ad agencies. The difference between ideas and products, and how to explain it to your client. The wild world of wearables. And more.
LISTEN to Big Web Show № 116 on Mule Radio.
- Mobile and Web Development Agency in NYC – Byte Dept.
- Bike Department iOS app
- @bytedept on Twitter
- @reyland on Twitter
- @rolanddubois on Twitter
- Roland Dubois on LinkedIn
Sponsored by Typekit
The Gory Details
SO MY DAD had another seizure—it’s been about six months since the last one; nobody knows what causes them or how to prevent them. It was 4:00 AM Monday morning. He fell heavily, like a sack of bricks, and cracked open his skull above his right eye. There was blood everywhere on the tiled floor of his bathroom, his wife Catherine says.
Catherine called 911. She couldn’t do it from the phone in the bedroom; she went running through the house looking for a working portable phone. The ambulance came fast and he was rushed to Presbyterian Hospital in Pittsburgh, where he stayed overnight.
The hospital wanted to keep him an extra day for fear that the blood floating around inside his skull could clot and kill him or damage his brain. But he demanded to be released. Got so caught up arguing with his nurse that he forgot he and I were on the telephone.
He may have feared that he would never leave that hospital if he didn’t exit immediately. I get that.
The hospital relented, and he and Catherine drove home, where he called me via FaceTime. His face is horribly bruised and cracked—he resembles the De Niro version of Frankenstein’s monster. But he seems to be all right. His mind and character are what they always were.
Filed under: glamorous
A Temporary Reprieve
MY PHONE SHOWED three consecutive voicemails from my dad’s wife. I told myself, this can only mean one thing. Fortunately, it meant something else. You know your father is getting on in years when a fall and bleeding and a hospital stay are good news.
Achieving Empathy for Institutions with Anil Dash
IN BIG WEB SHOW № 115 on Mule Radio, I talk with Anil Dash, a hugely influential entrepreneur, blogger, and web geek living in NYC.
Things we discuss include:
How government, media, and tech shape the world, and how we can influence them in turn. Our first meeting at SXSW in 2002. How selling CMS systems teaches you the dysfunction at media companies and organizations. Working for the music industry at the dawn of Napster. RFP-EZ. The early days of blogging.
Designing websites for the government—the procurement problem. If we’re pouring all this time into social media, what do we want to get out of it? How big institutions work and how to have an impact on them. Living in “Joe’s Apartment.”
Why, until recently, federal agencies that wanted a blog couldn’t use WordPress or Tumblr and how the State Dept got on Tumblr. Achieving empathy for institutions. Being more thoughtful about what I share and who I amplify on social media. The launch of Thinkup, and a special offer exclusively for
Sponsored by An Event Apart, the design conference for people who make websites. Save $100 off any 2- or 3-day AEA event with discount code AEABWS.
Filed under: Big Web Show, Blogs and Blogging, Culture, HTML, industry, Microblogging, Six Apart, social networking, software, Startups, State of the Web, SXSW, The Big Web Show, The Profession, Web Design History
Designing and Developing “The Web at 25” Website
Mike and Tim are the real deal: a great web design and development team from whom we can all learn a lot. They are also funny, humble, and insightful.
We discuss design, approval, and client focus. Working for geniuses. What we’d all be doing if the web didn’t exist. Keeping the web open. What the W3C has in common with IndieWeb. The web today versus the early web: more powerful, more empowering, and more requiring of specialization. The effect of mobile on the digital divide. Stephen Fry naked. And more.
This episode is sponsored by Hover.
Evolving Responsive Web Design
In What We Mean When We Say “responsive” and Defining Responsiveness, Lyza Danger Gardner and Jason Grigsby cut to the heart of a disagreement I had three years ago with Ethan Marcotte, the creator of Responsive Web Design and author of Responsive Web Design, a book I published in 2011.
Ethan told the world that Responsive Web Design required, and was defined by, fluid layouts, flexible images, and media queries. All three elements had to be present. If they weren’t using all three, you might be doing something interesting, but you were most definitely not doing Responsive Web Design.
Ethan invented all of this. Without him, we would likely be arguing whether it was time to consider 1280 pixels the new default fixed width for all desktop websites, and sending anything that wasn’t a desktop browser to a function- and content-limited “mobile site” whose URL began with the letter m. Ethan is a brilliant, multi-talented innovator; I am but the shadow of a hack. And yet, before he began creating his book, midway through the writing, and even a year after I published it, I continued to urge Ethan to rethink #RWD as “a bigger idea”—a concept rather than a single set of techniques.
I’m no genius. What I meant by “bigger idea” was limited to the notion that we’d one day be able to create responsive layouts with different techniques—so let’s not restrict the concept to a particular execution. I wasn’t thinking about other meanings of responsive, wasn’t considering problems of responsive content, and so on. I’m not that forward-thinking and it was three freaking years ago, come on.
I lost my gentle argument with Ethan, so the industry is having it now. And that’s just as it should be. Everything worked out for the best. Here’s why:
If Ethan hadn’t included three simple executional requirements as part of his definition, the concept might have quickly fallen by the wayside, as previous insights into the fluid nature of the web have done. The simplicity, elegance, and completeness of the package—here’s why, and here’s how—sold the idea to thousands of designers and developers, whose work and advocacy in turn sold it to hundreds of thousands more. This wouldn’t have happened if Ethan had promoted a more amorphous notion. Our world wouldn’t have changed overnight if developers had had too much to think about. Cutting to the heart of things and keeping it simple was as powerful a creative act on Ethan’s part as the “discovery” of #RWD itself.
We’ve only become ready to think about things like “responsible” responsive design, adaptive content, and a standard approach to responsive images now that we have built our share of first-generation responsive sites, and encountered the problems that led to the additional pondering. Baby steps. Brilliant baby steps.
Some commenters want to use initial-capped Responsive Web Design to mean responsive design as Ethan first defined it, and lowercase responsive design to mean an amorphous matrix of exciting and evolving design thinking. Lyza says soon we’ll stop saying Responsive altogether, a conclusion Andy Clarke reached three years ago.
Me, I like that Ethan stuck to his guns, and that the classical definition will always be out there, regardless of how web design evolves thanks to it. Kind of like there’s HTML 5, a defined and scoped W3C specification, and HTML living standard, an evolving activity. Our industry needs roots and wings, and, lucky us, we’ve got ‘em both.
This post has earned 17 responses so far.
From Britain With Love: Front-end Style Guides with Anna Debenham
IN BIG WEB SHOW № 113, developer Anna Debenham and I discuss Adventure Time, Code For America, starting a web career at age 14, checking websites in game console browsers, producing 24 Ways, and the delights of Spotted Dick and Victoria Sponge.
Anna is the author of Front-end Style Guides, creator of the Game Console Browsers website for developers, co-producer of 24 Ways, technical editor for A List Apart, and was netmag’s Young Developer of the Year 2013.
This episode is sponsored by Squarespace, the all-in-one platform that makes it fast and easy to create your own professional website or online portfolio. For a free trial and 10% off, go to squarespace.com and use the offer code JEFFREY.
Websites We Mention
- Front-end Style Guides
- Game Console Browsers website for developers
- 24 Ways
- A List Apart
- Code For America Style Guide
- Anna’s writing (http://maban.co.uk/writing/)
- Anna’s portfolio (http://maban.co.uk/portfolio/)
- Anna on Twitter
- Anna’s personal site
They Made Me a Criminal
THE JAIL DOOR SLAMMED and I was left in a women’s holding cell with seven teenage girls. There were no benches so we sat on the floor. I was fifteen but looked twelve. With long hair on my head and not a whisker to my chin, I resembled a homely girl, although the plainclothes officer who frisked me could have verified otherwise. The cops had picked us up in Point State Park after observing us pass a joint. They’d intended to bust a big dealer named Lonnie—a white guy with long red hair. Fortunately for Lonnie but unfortunately for us, a white guy named John also had long red hair, also happened to be in the park, and also happened to possess and publicly share a joint.
I was there after trying to find a summer job selling hot dogs at Three Rivers Stadium. 10,000 other boys my age had had the same idea that day. Possibly a dozen of them landed a job. My friend Mike and I did not. It was a hot day, and after waiting in line for three hours to fill out a job application, we were ready to go home. But first we had to pick up Mike’s friend Donny, who was tripping in Point State Park.
Donny was our age but looked eighteen. His dad was in the Mob. There were guns in his house. Mike looked up to him the way I looked up to Mike.
Mike and I found Donny sitting in a circle with a bunch of teenage girls and a red-haired guy resembling Ian Anderson of Jethro Tull. We were tired and they were girls so we sat with them. Someone passed a joint and I pretended to smoke it so nobody would know how uncool I was. Moments later a half-dozen men in suits and dark sunglasses burst from the bushes like clowns from tiny cars and began frisking and collaring us. Nobody tried to run away. It took a while to realize these guys were cops. A man in a hat made me stand up, then felt my balls. I asked if he was gay and he hit me in the face. After that I didn’t say anything.
We rode downtown in the back of a genuine paddy wagon. It must have been more fun, or scarier, for the kids who were actually high.
The officer who separated us by sex put me in the women’s cell, which was good with me. We were the cell’s only occupants; me and the girls hung out playing with matches, learning each other’s names, and wondering what our parents would do to us if we ever saw them again.
A few months before this, I’d been picked up for shoplifting. I hadn’t actually done the shoplifting—my friend Paul had. I didn’t even know he’d taken anything. But the sales girls at G.C. Murphy’s hated Paul and me, and the cops believed their story, so I now had a juvenile record in my parents’ suburb, and was about to get one in Pittsburgh for drug use.
I’d spent the previous year getting beaten up for moving to Pittsburgh from somewhere else, and for being Jewish, and for being small, and for having no facial hair, and for not knowing how to fight, and for not swearing, and for not stealing, and for not smoking, and for sucking at gym, and for raising my hand in class, and for knowing the answers to the teacher’s questions. Now I was a delinquent and almost nobody picked on me. Maybe there was an alternate path out of being the class punching bag, but, if so, nobody had clued me in.
There was a little window in the jail door, just like on TV. After a few hours a lady cop appeared in it and began taking everyone’s information. I was the last one to go to the window. The lady cop asked my religion and I said none. She didn’t like that, although it probably explained things in her mind. She shut the jail door window when she left.
Two minutes later she was back with a male cop—a huge black guy named Tiny, who made me leave the cell and follow him. During the jail door window interview, I’d given my name. I guess somebody had looked twice at it and realized I was a guy. Tiny escorted me to the cell where they were holding John, Mike, and Donnie. I joined them and the door closed. We all watched Donnie come down from his acid trip. It didn’t look like fun.
My father cut my hair short and grounded me for two months. He cut it himself with a hair cutting kit he’d bought at the drugstore in the town we’d lived in before Pittsburgh. The box the kit came in said “Cut Hair At Home And Save!”
We were tried as a group in juvenile court. My parents and Mike’s parents attended. Donny’s dad did not. Before the trial my lawyer instructed me not to deny I’d smoked pot because nobody would believe me. I was to plead emotional instability and request probation on the grounds of being from the suburbs. Right before our trial began, they sentenced a 14-year-old black kid to six months in a juvenile detention center for stealing chewing gum. I stood up. I don’t know what I intended to do. Yell at the judge for being racist, I think. My dad grabbed my hand and pulled me back to my seat. I could see in his eyes that he was afraid for me. My whole life, I’d never seen my dad look afraid. His eyes made everything real.
As part of a plea bargain, my parents agreed to send me to a psychiatrist. I was given a year’s detention and forbidden to enter Point State Park.
I started using drugs the next day. If I had a record, I was going to live up to it.
This is my story from Graphic Content: True Stories From Top Creatives (Print, 2014), curated by Brian Singer, available in hardcover and Kindle editions.