IN BIG WEB SHOW № 110, Nicole Sullivan and I discuss CSS Conf, building scalable systems that won’t break, designing for speed and performance, learning Ruby, Object Oriented CSS, a CSS Style Guide, Type-o-matic, practical takeaways from stunt CSS, pairing as a work method, sexism and racism tests, and setting aside biases when selecting conference sessions. Enjoy!
Sponsored by Typekit.
DESIGNER, developer, banjoist, Dribbble co-founder, and all-around nice guy Dan Cederholm and I discuss fear of CSS pre-processors; the craft of code; growing the Dribbble design community; transitioning from a two-person part-time start-up to a full-time company with employees; and Dan’s new book Sass For Web Designers in Episode № 102 of The Big Web Show on Mule Radio.
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.
Listen to the episode.
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.
Photo: Chris Jennings
IN EPISODE 63 of Triangulation, Leo Laporte, a gracious and knowledgeable podcaster/broadcaster straight outta Petaluma, CA, interviews Your Humble Narrator about web standards history, responsive web design, content first, the state of standards in a multi-device world, and why communists sometimes make lousy band managers.
“WE ARE ALL PUBLISHERS,” claims Issue No. 353 of A List Apart for people who make websites. Design books with CSS3; craft a responsive web résumé.
by NELLIE MCKESSON
While historically, it’s been difficult at best to create print-quality PDF books from markup alone, CSS3 now brings us the Paged Media Module, which targets print book formatting. “Paged” media exists as finite pages, like books and magazines, rather than as long scrolling stretches of text, like most websites. With a single CSS stylesheet, publishers can take XHTML source content and turn it into a laid-out, print-ready PDF. You can take your XHTML source, bypass desktop page layout software like Adobe InDesign, and package it as an ePub file. It’s a lightweight and adaptable workflow, which gets you beautiful books faster. Nellie McKesson, eBook Operations Manager at O’Reilly Media, explains how to build books with CSS3.
by ANDREW HOFFMAN
Grizzled job hunting veterans know too well that a sharp résumé and near-flawless interview may still leave you short of your dream job. Competition is fierce and never wanes. Finding new ways to distinguish yourself in today’s unforgiving economy is vital to a designer/developer’s survival. Happily, web standards whiz and mobile web developer Andrew Hoffman has come up with a dandy differentiator that is just perfect for A List Apart readers. Learn how to author a clean résumé in HTML5/CSS3 that scales well to different viewport sizes, is easy to update and maintain, and will never grow obsolete.
Illustration by Kevin Cornell for A List Apart.
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.”
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.
Photos: AEA Seattle Flickr pool or hashtags #aea and #aeasea on Instagram.
WITH RETINA DISPLAY technology on the verge of ubiquity and some of today’s best web design minds rightfully fretting about it (see PPK, Stephanie Rieger, Brad Frost, and Stuntbox if you’ve missed this latest Topic Of Concern), it seems to this old web slinger that web type is poised to replace photography as the dominant element of web design aesthetic appeal in the next few years.
But type is type is type, and the higher the resolution of the device, the better that type will look, with no bandwidth overhead.
In that spirit, although we haven’t yet worked with it ourselves, we welcome the launch of TypeButter. Developed by David Hudson and designed by Joel Richardson, TypeButter is a plug-in that “allows you to set optical kerning for any font on your website.”
Soon, CSS and browsers will let us set type properly without the need for widgets and plug-ins. Until then, widgets and plug-ins fill the gap. Thank you, David and Joel, and all you beautiful web type designers and polyfill wizards.
Last year’s 10K Apart challenged readers to create the best application they could using no more than 10K of images, scripts, and markup. We wanted to see what you could do with HTML5, CSS3, and web fonts, and you blew us away.
For this year’s contest, we asked you to step up your game by not only awing us with brilliant (and brilliantly designed) apps built using less than 10K of web standards and imagery, but we also insisted you make those awesome apps fully responsive.
(If you found this page by accident, responsive design accommodates today’s dizzying array of notebooks, tablets, smartphones, laptops, and big-screen desktops—and anticipates tomorrow’s—via fluid design experiences that squash and stretch and swell and shrink and always look like ladies. Ethan Marcotte pioneered this design approach, which takes standards-based progressive enhancement to the next level, and which achieves its magic via fluid grids, flexible images, and media queries. But I digress.)
We worried that demanding responsive design on top of our already tough list of requirements would kill the contest. That it was just too hard. Maybe even impossible. Silly us.
Once again, you overwhelmed us with your out-of-the-box creativity, dazzling technical chops, and inspiring can-do spirit. During the few weeks of our call for entries, people and teams from 36 countries produced 128 astonishingly excellent apps. With that many great entries, judging was a beast! Fortunately we had excellent help. But enough about us. On to the winners!
The mysteriously named L&L has won the 10K Apart Grand Prize for Bytes Jack, an HTML Blackjack game that is totally fun to play—unless you have a problem with gambling, in which case, try one of the fantastic runners-up: Space Mahjong by Toby Yun and Kyoungwoo Ham (Best Technical Achievement); Sproutable, by Kevin Thompson (Best Design); or PHRASE: Make Lovely Circular Patterns Based on Text Phrases (People’s Choice), by Andy Gott.
In addition to these four winners, there are twelve honorable mentions that will delight any visitor—and astonish any web designer-developer who tries to figure out how these wizards worked their magic in under 10K. See all the winners or view the entire gallery and decide whom you would have awarded best in show.
An Event Apart thanks our hard-working, insanely inspired friends at Mix Online.
The 10K Apart hearkens back to Stewart Butterfield’s 5k Contest of yesteryear. Back then, Stewart challenged web designer-developers to create something magical using less than 5K of code and images—and the community responded with a flowering of creativity and awesome proto-web-apps. Stewart, we salute you!