No Good Can Come of Bad Code: Ask Dr Web in A List Apart
Remember: the future will come whether you design for it or not. If your company charges $300,000 for a website that won’t work on next week’s most popular device, your company won’t be able to stay competitive in this business. It might not even be able to stay in the business, period. After all, clients who pay for sites that break too soon will look elsewhere next time—leaving your company perpetually hunting for new clients in a downward spiral of narrowing margins and diminishing expectations.
Your company’s survival is tied to the ability of the products it makes to work in situations you haven’t imagined, and on devices that don’t yet exist. This has alwaysbeen the challenge of web design. It’s one A List Apart has taken seriously since we began publishing, and our archives are filled with advice and ideas you can boil down and present to your bosses.
TAKE A LOOK in dev tools; maybe you don’t need a couple of dozen trackers on every page.
Chris Wilson on why Web vs. Native is the wrong question, and what web developers can do to maximize the web’s strengths instead of undercutting them by over-relying on heavy frameworks designed to emulate native apps.
I WATCHED dozens of Barbie videos hundreds of times when my daughter was three and four years old. I can’t praise their animation, dialog, or other cinematic and literary qualities, but this I can say in their favor: every Barbie video we watched was feminist and empowering in its messaging.
This was not the Barbie my girl cousin grew up with, wondering which outfit she should wear to please Ken. This Barbie kicked ass.
In one video, set in 18th Century France, Barbie and her roommates overcame sexism to become Musketeers. They exposed a conspiracy, beat male villains at swordplay, and more than once saved the life of the kingdom’s rather ineffectual prince. (The downside of the Barbie videos’ crude but seemingly heartfelt feminism was that they tended to portray men as wimps or scumbags. Women are strong in the Barbie videos; good men are not.)
In another video, Barbie was an actor who became a film director when the director of the picture in which she was starring tried to patronize her. In Fairytopia, the first and worst animated of the videos, Barbie went on a Lord-of-the-Rings-style quest and saved an entire kingdom from ruin. In A Fashion Fairytale, she saved her aunt’s business from bankruptcy by an evil (woman) competitor, and then helped that competitor turn from the dark side to the light. In other words, she kicked ass but also nurtured and forgave. Assertive and supportive. A fighter and a hugger.
I watched these videos over and over, because children aged three to four thrive on repetition. I got familiar enough that I could quote the dialog as easily as I quote from Rushmore or North By Northwest. I was relieved when my daughter outgrew Barbie, because my mind craved something a little more grown-up in the film narrative department. But I never once worried that the videos were telling my daughter she could be anything but awesome. I never watched a single Barbie video that told girls life was about finding and pleasing anyone besides yourself.
This was also the time in my daughter’s development when we bought Barbie reading books and Barbie dolls. When I was three, Barbie had a thousand ways to look beautiful. When my daughter was three, Barbie had a thousand ways to earn a living.
You can find fault with Barbie. For one thing, she still promotes a vision of the world in which caucasian features set the beauty standard—a world in which, even if there are variously ethnic friends in the mix, the main character is always white. Then there are her unrealistic physical dimensions, which have been tied to self-loathing and eating disorders in girls and women. (Not that Barbie’s is the only unrealistic physique girls contend with—they’re bombarded with the stuff from birth.) The Barbie stories never question the established social order. They inspire girls to achieve, but obviously they don’t address male/female pay discrepancy or other serious social issues.
Musketeer Barbie saves the prince; she doesn’t ask why do we need a prince? Shouldn’t we invent representative democracy? And how about letting a woman run things?
Barbie won’t save us. But she’s not as bad as all that.
For young girls who have just begun seeing the world through the filter of gender, today’s Barbie does some good. Barbie videos were some of the only stories we watched back then that didn’t require me to immediately explain, apologize for, and caution against believing, one or more horrifying biases. Viewed a classic Disney film lately?
The internet feeds on outrage and cat gifs. And the recent outing of a Barbie story that appears to conform to 1950s-Barbie-thinking made perfect fodder. But it might simply be a book that teaches children how different professionals work together to create the digital games they enjoy playing. A designer is part of the mix; so are developers and other professionals, whose complementary skills support each other. That’s how it works when I design stuff. In my work, almost every day, there are things that go wrong that oblige me to call someone else to fix them. I notice a problem on a server; I reach out to a sysadmin. It isn’t because I’m a boy and boys are dumb. It’s because designers aren’t sysadmins.
All right. Fair enough. It was a terrible error for the illustrator to make all the technical people male. That sends an awful message—one lots of us have been working to fight. It’s disturbing that nobody at the publishing house realized the inferences that could be drawn from this mistake. And if this were my only exposure to Barbie in the past ten years, I’d be drawing those inferences and storming the barricades (i.e. retweeting) with the rest of my peeps.
But honestly? I spent two long years with the Barbie franchise. I think the women running it today are serious about girl power. Maybe the unfortunately timed illustration error reveals a deep sexist conspiracy. Or maybe it’s just one of those things nobody thought about while rushing a cheap book to print.
Become a Web Developer: Avi Flombaum of The Flatiron School on Big Web Show 89
AVI FLOMBAUM, dean of The Flatiron School, is my guest in Big Web Show Episode No. 89. A 28-year-old Rubyist, Skillsharer, storyteller and entrepreneur, Avi founded Designer Pages and NYC on Rails before creating The Flatiron School—a 12 week, full-time program designed to turn you into a web developer.
IN EPISODE No. 86 of The Big Web Show, I interview Monkey Do studio’s Michael Pick and Tim Murtaugh.
Mike, Tim, and I discuss the A List Apart redesign, responsive images and type, CSS Zen Garden, organic design processes, the future of CMS systems, designing a food truck app, and more.
TIM MURTAUGH has been building web sites since 1997 and specializes in delivering standards-based HTML5/CSS templates. His eye for design and serious affinity for clean code allow him to painlessly integrate his templates into larger systems without sacrificing user experience or aesthetics. Tim started in the non-profit world, moved on to start-ups, shifted to an agency, upgraded to publishing, and from thence: Monkey Do. Tim can be found on Twitter at @murtaugh.
This episode of The Big Web Show is sponsored by Shutterstock.com. Get 30% off any package with discount code “BIGWEBSHOW3.”
IN EPISODE No. 79 of The Big Web Show (“everything web that matters”), I interview CSS guru, Microformats co-founder, O’Reilly and New Riders author, and An Event Apart co-founder Eric A. Meyer (@meyerweb) about upcoming CSS modules including grid layout, flexbox, and regions; his career trajectory from college graduate webmaster to world-renowned author, consultant, and lecturer; founding and running a virtual community (CSS-Discuss); becoming an O’Reilly writer; the early days of the Mosaic Browser and The Web Standards Project’s CSS Samurai; “The Web Behind” variation of The Web Ahead podcast, and more.
Eric A. Meyer has been working with the web since late 1993 and is an internationally recognized expert on the subjects of HTML and CSS. He is the principal consultant for Complex Spiral Consulting and lives in Cleveland, Ohio, which is a much nicer city than you’ve been led to believe. Author of “Eric Meyer on CSS” (New Riders), “Cascading Style Sheets: The Definitive Guide” (O’Reilly & Associates), “CSS2.0 Programmer’s Reference” (Osborne/McGraw-Hill), and the CSS Browser Compatibility Charts, Eric co-founded and co-directs An Event Apart, the design conference “for people who make websites,” and speaks at a variety of conferences on the subject of standards, CSS use, and web design.
IN EPISODE No. 77 of The Big Web Show, I interview returning guest Sarah Parmenter about designing an app for the homeless; the challenges of multi-device design; teaching HTML and CSS to young people; designing a complex reader app; the ideal number of employees for a small design studio; Brooklyn vs. small-town UK; and more.
The Big Web Show features special guests on topics like web publishing, art direction, content strategy, typography, web technology, and more. It’s everything web that matters.
Will the last digital canvas please turn out the lights?
DESIGNERS. WE LOVE CANVASES. It’s what we know. Even the cave wall had predictable, fixed dimensions. On the web, in the past few years, we’ve finally had to acknowledge that the canvas is not fixed, that each user’s canvas is different, and that fixed-width design—while safe and comfortable because it’s what we know—really doesn’t make sense in the world of HTML, and probably never did. We’ve spent the past two or three years rapidly learning (and sharing) new ways of designing.
But while we were unwrapping ourselves from the notion of a fixed canvas on the web, many of us were gleefully tucking into a fixed canvas in Apple’s world of the iPhone and iPad. True, the iPad had more pixels than the original iPhone—an advantage also enjoyed by later iPhone models with their Retina displays. But they shared easily interchanged aspect ratios (4:3 for the iPad and 3:2 for the iphone), enabling designers to design right to the canvas.
Apple’s fixed canvas wasn’t just a designer’s security blanket. It enabled us to craft a certain kind of polished experience right to the device. We laughed (or cried) at the Android with its 500 “standard” breakpoints and counting. Apple had given us a fixed-width sandbox and we built castles in it.
Well, goodbye to all that.
The end of fixed aspect ratios
With the iPhone 5’s switch to a 16:9 aspect ratio, and given the unknown aspect ratio of the upcoming iPad mini, “we’re going to see a big change in a certain type of iOS app—the one designed for the device,” Craig Grannell predicts in today’s reverttosaved.com:
[Veteran developer John] Pickford summed it up by stating his approach would no longer depend heavily on screen shape, and I’ve heard similar from other developers, both of apps and games although especially the latter. In a sense, this could be a good thing—freeing up iOS from the constraints of specific screen shapes opens up developers to whatever Apple throws at them next and should also make apps simpler to port to competing platforms. But it also impacts heavily on those tightly crafted experiences that were designed just for your iPad or just for your iPhone. Having all the action take place only in the very centre of a screen, because a developer cannot guarantee what device you’re using, or, worse, carving out a viewport and surrounding it with a border, could cheapen iOS games and apps in a big way.
Perhaps I’m being pessimistic, but pre-iPhone 5, indies were already feeling the pinch. With that device and perhaps a new, smaller iPad to contend with, the shift towards more fluid and less device-specific apps seems inevitable.—Craig Grannell, iOS screen fragmentation points to a shift in app development
I share Craig’s assessment of what the change in aspect ratios portends for application design. But I believe that designers will rise to the challenge, as we have on the web; and that bright app designers will find ways to design experiences which, even if they are actually flexible behind the scenes, still feel like they were custom crafted for the device in your hand.
HTML5 Video Player II
JOHN DYER’S MediaElement.js bills itself as “HTML5 <video> and <audio> made easy”—and that’s truly what it is:
HTML5 audio and video players in pure HTML and CSS.
CSS & Mobile To The Future | Embrace Users, Constrain Design | An Event Apart Seattle 2012 Day II
TUESDAY, 3 APRIL 2012, was Day II of An Event Apart Seattle, a sold-out, three-day event for people who make websites. If you couldn’t be among us, never fear. The amazing Luke Wroblewski (who leads a day-long seminar on mobile web design today) took excellent notes throughout the day, and shares them herewith:
In his The Future is Now talk at An Event Apart in Seattle, WA 2012 Eric Meyer talked about some of the visual effects we can achieve with CSS today. Create shiny new visual elements with no images using progressive enhancement and CSS that is available in all modern browsers.
In his A Philosophy of Restraint talk at An Event Apart in Seattle, WA 2012 Simon Collison outlined his design philosophy and how he applies it to web projects. Embrace constraints; simplicity and complexity; design aesthetic; design systems as foundations that prepare us for future projects and complexity; affordances and type; focus and content; audit and pause — prevent catastrophic failures and shine a new light on what you’ve learned with each project.
In his Touch Events talk at An Event Apart in Seattle, WA 2012 Peter-Paul Koch talked about touch support in mobile browsers and how to handle touch events in web development. Includes a ranking of current mobile browsers; interaction modes in mobile versus desktop (mouse) and keyboard — how do we adjust scripts to work with touch?; touch events; supporting modes; event cascade; and “stick with click.”
Mobile to the Future – Luke Wroblewski
Alas, Luke could not take notes on his own presentation. Here’s what it was about: When something new comes along, it’s common for us to react with what we already know. Radio programming on TV, print design on web pages, and now web page design on mobile devices. But every medium ultimately needs unique thinking and design to reach its true potential. Through an in-depth look at several common web interactions, Luke outlined how to adapt existing desktop design solutions for mobile devices and how to use mobile to expand what’s possible across all devices.Instead of thinking about how to reformat your websites to fit mobile screens, attendees learned to see mobile as way to rethink the future of the web.
In her What’s Your Problem? Putting Purpose Back into Your Projects talk at An Event Apart in Seattle, WA 2012 Whitney Hess outlined the value of learning about opportunities directly from customers. Understand the problem before designing the solution. Ask why before you figure out how. There is no universal solution for all our projects, we need to determine which practices are “best” through our understanding of problems. Our reliance on best practices is creating a world of uniform websites that solve no one’s problem. Leave the desk and interact with people. Rather than the problem solver, be the person who can see the problem.
At An Event Apart in Seattle WA 2012, Jared Spool walked through what makes a design intuitive, why some users need different treatment, and the role of design. Current versus acquired knowledge and how to bridge the gap (how to train users, thus making your site or app “intuitive”). Redesigns and how to avoid disaster. Design skills. The gap between current knowledge and target knowledge is where design happens. Why intuitive design is only possible in small, short iterations.
Day III begins in 90 minutes. See some of you there.