“DESIGN GURU Jeffrey Zeldman, says while he likes Muse for its ease of creating layouts, it still doesn’t answer his plea for a better Internet. ‘Software can’t generate HTML that is search-engine friendly, accessibility-friendly, and portable between desktop and mobile,’ he says. ‘Only web design professionals who understand semantic markup, responsive and adaptive web layout, and mobile user interface can do that.’”
AS THE TITLE indicates, this year’s 10K contest requires that your applications be “reasonably responsive” (yes, it’s vague by design). The Responsive Design movement Ethan pioneered is still learning how to walk in the real world. We felt it best to leave some wiggle room to encourage new discoveries.
To Whom it may Concern,
I recently discovered your “Home” page here:
Would you please consider adding a link to my website called Job-Applications.com? It is a resource that provides hundreds of printable and online applications for retail stores, department stores, pharmacies, grocery stores, restaurants, shops, etc. Its a great way for people to find part time and full time work quickly.
If you think it would be of use to your visitors, would you please consider adding a link to my website on your page here:
Here is the HTML link you could add: Job-Applications.com – Find hundreds of online applications and printable job forms.
Please let me know if you have any questions.
YOU FIND ME ENSCONCED in the fabulous Buckhead, Atlanta Intercontinental Hotel, preparing to unleash An Event Apart Atlanta 2011, three days of design, code, and content strategy for people who make websites. Eric Meyer and I co-founded our traveling web conference in December, 2005; in 2006 we chose Atlanta for our second event, and it was the worst show we’ve ever done. We hosted at Turner Field, not realizing that half the audience would be forced to crane their necks around pillars if they wanted to see our speakers or the screen on which slides were projected.
Also not realizing that Turner Field’s promised contractual ability to deliver Wi-Fi was more theoretical than factual: the venue’s A/V guy spent the entire show trying to get an internet connection going. You could watch audience members twitchily check their laptops for email every fourteen seconds, then make the “no internet” face that is not unlike the face addicts make when the crack dealer is late, then check their laptops again.
The food was good, our speakers (including local hero Todd Dominey) had wise lessons to impart, and most attendees had a pretty good time, but Eric and I still shudder to remember everything that went wrong with that gig.
Not to jinx anything, but times have changed. We are now a major three-day event, thanks to a kick-ass staff and the wonderful community that has made this show its home. We thank you from the bottoms of our big grateful hearts.
I will see several hundred of you for the next three days. Those not attending may follow along:
SOME IDEAS SEEM inevitable once they arrive. It’s impossible for me to conceive of the universe before rock and roll or to envision Christmas without Mr Dickens’s Carol, and it’s as tough for my kid to picture life before iPads. So too will the internet users and designers who come after us find it hard to believe we once served web content in boxy little hardwired layouts left over from the magical but inflexible world of print.
I remember when the change came. We were putting on An Event Apart, our design conference for people who make websites, and half the speakers at our 2009 Seattle show had tumbled to the magic of media queries. One after another, CSS wizards including Eric Meyer and Dan Cederholm presented the beginnings of an approach to designing content for a world where people were just as likely to be using smart, small-screen devices like iPhone and Android as they were traditional desktop browsers.
Toward the end of the second day, Ethan Marcotte took what the other speakers had shared and amped it to 11. Suddenly, we had moved from maybe to for sure, from possible to inevitable. Ethan even gave us a name for his new approach to web design.
That name appears on the cover of this book, and this book represents the culmination of two years of design research and application by Ethan and leading-edge design practitioners around the world. Armed with this brief book, you will have everything you need to re-imagine your web design universe and boldly go where none have gone before. Happy reading and designing!
Responsive Web Design
ONE GLORIOUS AFTERNOON in March, 2006, as a friend and I hurried past Austin’s Downtown Hilton Hotel to catch the next session of the SXSW Interactive Festival, a young stranger arrested our progress. With no introduction or preliminaries, he announced that he was available to speak at An Event Apart, a conference for web designers that Eric Meyer and I had launched three months previously. Turning to my companion with my best impression (which is none too good) of Mr Burns of “The Simpsons,” I asked, “Who is this brash young upstart, Smithers?”
The brash young upstart quickly became an essential colleague. In the months and years that followed, Aaron Gustafson created dazzling front- and back-end code for some of my agency’s most demanding clients. Just as importantly, he brilliantly tech-edited the second and third editions of Designing With Web Standards. The job largely consists of alerting Ethan Marcotte and me to the stuff we don’t know about web standards. I’ll let you think about that one. For five years now, Aaron has also been a tough but fair technical editor for A List Apart magazine, where he helps authors succeed while ensuring that they are truly innovative, that their methods are accessible and semantic, and (thanks to his near-encyclopedic knowledge) that they give all prior art its due. Moreover, Aaron has written seminal pieces for the magazine, and, yes, he has lectured at An Event Apart.
Given my experiences with the man and my admiration for his knowledge and abilities, I was thrilled when Aaron told me the premise of this book and began letting me look at chapters. This isn’t just another web design book. It’s an essential and missing piece of the canon. Our industry has long needed a compendium of best practices in adaptive, standards-based design. And with the rise of mobile, the recent significant improvements in desktop and phone browsers, and the new capabilities that come with HTML5, CSS3, and gestural interfaces, it is even more vital that we who make websites have a reliable resource that tells us how to take advantage of these new capabilities while creating content that works in browsers and devices of all sizes and widely differing capabilities. This book is that resource.
The convergence of these new elements and opportunities is encouraging web professionals to finally design for the web as it always should have been done. Adaptive design is the way, and nobody has a wider command than Aaron of the thinking and techniques required to do it well. In these pages you will find all that thinking and those methods. Never again will you lose a day debating how to do great web design (and create great code) that works for everyone. I plan to give this book to all my students, and to everyone I work with. I encourage you to do likewise. And now, enough preliminaries. Dive in, and enjoy!
Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement
by Aaron Gustafson
Foreword by Jeffrey Zeldman
IN MY APPRENTICE DAYS, I worked for Marvin Honig, a Hall of Fame copywriter who created indelible commercials for Alka-Seltzer, Cracker Jack, and Volkswagen during the 1960s and 1970s, and who assumed creative leadership of Doyle Dane Bernbach upon legendary founder Bill Bernbach’s death. It was not one of those bloody successions that stain the pages of history and advertising. Bill chose Marvin to carry on in his place.
By the time I met Marvin, he and I were toiling at Campbell-Mithun-Esty. He had been brought in to radically upgrade the financially successful but talent-challenged agency’s creative product. I was there because it was the first job I could get in New York.
Marvin was gentle. He never told you how stale your ideas were or how disappointed he was in you for not working harder. He made you believe you were the future, not only of the place, but of the profession.
Besides his warmth, what I remember most is a piece of advice he gave me: “If you’re not a creative director by the time you’re 40, get out of the business.”
Continue reading But What I Really Want to Do is Direct at Cognition, the blog of Happy Cog.
Q. Working with print designer who is just getting into web and they want to control everything. Any advice on how to deal with them? – @FossilDesigns
A. I ASSUME YOU’RE CODING what your colleague designs. Gently explain how pixel-perfect design falls apart on the web, using visual examples. Start with a design that looks great in the environment it was designed for. Your colleague will smile. “Yes, it does look nice here,” you will agree. Then move on to three or four common environments where that same design breaks or is unpleasant to use. As long as you are not being a jerk about your superior knowledge, your calm, friendly expertise together with a few examples should make your colleague amenable to learning more. At that point, there are dozens of resources in print and on the web. Start with gentle, introductory books and articles. (I wouldn’t plunge your friend into Mobile Boilerplate.) I leave it as an exercise to readers of this page to list articles and books that can help.
If your colleague remains adamant about pixel-perfect design, you’re working with the wrong designer. Relationships only work when respect flows both ways. If your partner will not listen, you need a new partner. If this is a freelance gig, find one. If it’s a job, and you simply can’t get through to your new colleague, involve your boss. Be firm but not threatening. You’re not trying to get your colleague fired, you’re simply trying to resolve a dispute in which only one of you has expertise. If you’re afraid to involve your boss, you’re in the wrong job, and your non-web-savvy colleague is merely a symptom of a larger organizational problem. Get out! You can do better.
A FEW QUICK NOTES from the first hour of A Day Apart: Mobile Web Design, an all-day learning session led by Luke Wroblewski (aka Day III of An Event Apart Seattle), Bell Harbor Conference Center, Seattle, WA:
Audience questions for Luke
- How to take a website for desktop to mobile?
- Do we need to care about non-Webkit?
- Trade-offs between native and web
- How to navigate differences between different versions of Webkit?
- Mobile e-commerce: best practices
- Challenges with different cultures/languages
- Media queries
- If no budget, what can focus on web to make mobile ok?
- How to take a website for desktop to mobile?
- Mobile e-commerce best practices
- Multiple screen sizes and pixel densities
- Time for one project: go mobile or tablet (in e-commerce)
- CMSes and mobile—sigh
- Best practices for page load
WHY MOBILE? Convincing clients/bosses to care
- Of the 50% of total mobile commerce in the US, 70% of it is coming from one iPhone application (eBay).
- eBay: global mobile sales $2 billion in 2010, $600 million in 2009. Real commercial opportunities emerging on mobile.
- Best Buy: mobile web users doubling every year: 30M (2010), 17M (2009), 6M (2008).
- PayPal: mobile transactions increased six-fold in 2009: $25M to $141M.
- Double-digit (28%) rise in social networking on mobile web.
- Twitter: 40% of tweets sent via mobile, 16% of new users start on mobile.
- Facebook: 200 million active mobile users.
- Instagram: iPhone only app took three months to hit one million users. Six weeks later they hit two million users.
- Mixi (Japan): 85% of page views on mobile vs. 14% 4.5 years ago.
PRODUCTIVITY AND MEDIA
- Google: mobile searches grew 130% in Q3 2010
- Pandora: 50% of total user base subscribes to the service on mobile
- Email: 70% of smartphone users have accessed email on mobile device
“I don’t want to be the record executive clinging to CD sales.”
Yelp: every other second a consumer calls a local business and generates driving directions from a Yelp mobile app.]]27% of all Yelp searches come from their iPhone application, which had 1.4 million unique users in May 2010.
Zillow.com: Viewing active listings 45% more often from mobile devices (audience is primarily active buyers, on location or scoping out neighborhoods)
Facebook: People who use Facebook on their mobile devices (200M active) are twice as active on Facebook as non-mobile users.
Shift in Usage
Let’s look at Gmail:
- Visitors to web-based emails sites declined 7%.
- Visitors accessing email on mobile devices increased 36%.
But what about mobile web usage?
40% of tweets sent via mobile.
16% of new users start on mobile.
Mobile web usage
- Mobile phones will overtake PCs as the most common web access devices worldwide by 2013.
- 600% growth in traffic to mobile websites in 2010.
- Facebook and Twitter access via mobile browser grows by triple digits in 2010.
- Average smartphone user visits up to 24 websites per day.
- Top 50 websites constitute only 40% of mobile visits.
- Opera Mini traffic up 200% year/year.
Follow the live tweets at afeedapart.com.