ONE of the most frequent questions we get asked about the mobile web is ‘Where do I go to learn about all this stuff?’ So here’s an extensive list of helpful tools and resources that can help you create great mobile web experiences.”
Categories
Category: links
Outside reading. Visual and textual fun for boys and girls.
GOOD MORNING! I’ve added some nifty external links to my About page. Enjoy.
I WISH I had written Adactio: Journal—Sea change. I advise every web designer who hasn’t yet done so to read it.
Categories
A Book Apart A List Apart Adobe An Event Apart Apple architecture art direction Authoring Best practices Big Web Show client services Code content content strategy creativity CSS CSS3 Dan Benjamin Design DWWS E-Books editorial Education eric meyer Fonts Formats Free Advice Happy Cog™ Haters industry Information architecture interface ipad iphone IXD javascript links maturity New Riders peachpit Publications Publishing Real type on the web Respect Responsibility Responsive Web Design Standards State of the Web tbws The Big Web Show The Essentials The Profession This never happens to Gruber Typekit Typography Usability User Experience UX W3C Web Design Web Design History Web Standards webfonts webkit Websites webtype work Working writing Zeldman zeldman.com
2010: The Year in Web Standards
WHAT A YEAR 2010 has been. It was the year HTML5 and CSS3 broke wide; the year the iPad, iPhone, and Android led designers down the contradictory paths of proprietary application design and standards-based mobile web application design—in both cases focused on user needs, simplicity, and new ways of interacting thanks to small screens and touch-sensitive surfaces.
It was the third year in a row that everyone was talking about content strategy and designers refused to “just comp something up” without first conducting research and developing a user experience strategy.
CSS3 media queries plus fluid grids and flexible images gave birth to responsive web design (thanks, Beep!). Internet Explorer 9 (that’s right, the browser by Microsoft we’ve spent years grousing about) kicked ass on web standards, inspiring a 10K Apart contest that celebrated what designers and developers could achieve with just 10K of standards-compliant HTML, CSS, and JavaScript. IE9 also kicked ass on type rendering, stimulating debates as to which platform offers the best reading experience for the first time since Macintosh System 7.
Even outside the newest, best browsers, things were better than ever. Modernizr and eCSStender brought advanced selectors and @font-face to archaic browsers (not to mention HTML5 and SVG, in the case of Modernizr). Tim Murtaugh and Mike Pick’s HTML5 Reset and Paul Irish’s HTML5 Boilerplate gave us clean starting points for HTML5- and CSS3-powered sites.
Web fonts were everywhere—from the W3C to small personal and large commercial websites—thanks to pioneering syntax constructions by Paul Irish and Richard Fink, fine open-source products like the Font Squirrel @Font-Face Generator, open-source liberal font licensing like FontSpring’s, and terrific service platforms led by Typekit and including Fontdeck, Webtype, Typotheque, and Kernest.
Print continued its move to networked screens. iPhone found a worthy adversary in Android. Webkit was ubiquitous.
Insights into the new spirit of web design, from a wide variety of extremely smart people, can be seen and heard on The Big Web Show, which Dan Benjamin and I started this year (and which won Video Podcast of the Year in the 2010 .net Awards), on Dan’s other shows on the 5by5 network, on the Workers of the Web podcast by Alan Houser and Eric Anderson, and of course in A List Apart for people who make websites.
Zeldman.com: The Year in Review
A few things I wrote here at zeldman.com this year (some related to web standards and design, some not) may be worth reviewing:
- iPad as the New Flash 17 October 2010
- Masturbatory novelty is not a business strategy.
- Flash, iPad, and Standards 1 February 2010
- Lack of Flash in the iPad (and before that, in the iPhone) is a win for accessible, standards-based design. Not because Flash is bad, but because the increasing popularity of devices that don’t support Flash is going to force recalcitrant web developers to build the semantic HTML layer first.
- An InDesign for HTML and CSS? 5 July 2010
- while our current tools can certainly stand improvement, no company will ever create “the modern day equivalent of Illustrator and PageMaker for CSS, HTML5 and JavaScript.” The assumption that a such thing is possible suggests a lack of understanding.
- Stop Chasing Followers 21 April 2010
- The web is not a game of “eyeballs.” Never has been, never will be. Influence matters, numbers don’t.
- Crowdsourcing Dickens 23 March 2010
- Like it says.
- My Love/Hate Affair with Typekit 22 March 2010
- Like it says.
- You Cannot Copyright A Tweet 25 February 2010
- Like it says.
- Free Advice: Show Up Early 5 February 2010
- Love means never having to say you’re sorry, but client services means apologizing every five minutes. Give yourself one less thing to be sorry for. Take some free advice. Show up often, and show up early.
Outside Reading
A few things I wrote elsewhere might repay your interest as well:
- The Future of Web Standards 26 September, for .net Magazine
- Cheap, complex devices such as the iPhone and the Droid have come along at precisely the moment when HTML5, CSS3 and web fonts are ready for action; when standards-based web development is no longer relegated to the fringe; and when web designers, no longer content to merely decorate screens, are crafting provocative, multi-platform experiences. Is this the dawn of a new web?
- Style vs. Design written in 1999 and slightly revised in 2005, for Adobe
- When Style is a fetish, sites confuse visitors, hurting users and the companies that paid for the sites. When designers don’t start by asking who will use the site, and what they will use it for, we get meaningless eye candy that gives beauty a bad name.
Happy New Year, all!
If you’re intrigued, as I am, by the trailer for David Fincher’s upcoming The Social Network, and if part of what compels you about the trailer is the musical score—a choral version of Radiohead’s “Creep”—you’ll be happy to know you can purchase said song via emusic.com: On The Rocks is the album, “Creep” is the track, and Scala, a Belgian all-teenage-girl choir, are the artists. Highly recommended.
P.S. If emusic.com had an affiliate program, I’d have free music for life.
Free for use in all web projects, professional or personal, HTML5 Reset by Monkey Do! is a set of HTML5 and CSS templates that jumpstart web development by removing the styling native to each browser, establishing basic HTML structures (title, header, footer, etc.), clearing floats, correcting for IE problems, and more.
Most of us who design websites begin every project with bits and pieces of this kind of code, but developer Tim Murtaugh, who created these files and who modestly thanks everyone in the universe, has struck a near-ideal balance. In these lean, simple files, without fuss or clutter, he manages to give us the best-practices equivalent of everything but the kitchen sink.
Tim Murtaugh sits beside me at Happy Cog, so I’ve seen him use these very files (and earlier versions of them) to quickly code advanced websites. If you’re up to speed on all the new hotness, these files will help you stay that way and work faster. If you’re still learning (and who isn’t?) about HTML5, CSS3, and browser workarounds, studying these files and Tim’s notes about them will help you become a more knowledgeable web designer slash developer. (We need a better name for what we do.)
My daughter calls Mr Murtaugh “Tim the giant.” With the release of this little package, he earns the moniker. Highly recommended.
Categories
Thursday Links
- HTML5 audio and video WordPress plugin lets you embed media for native playback in supported browsers; content degrades gracefully in unsupported browsers.
- 10 Tips for Designing Mobile Websites. Great stuff.
- The downside of free fonts.
- Flipboard, superhot new “social iPad magazine,” will be powered by semantic data.
- Nick Usborne: “Why I don’t much like the phrase, ‘content marketing.'”
- JK Rowling may allow digital Harry Potter books.
- We all have movie star issues now. Reputation and privacy in the digital age.
- Ready Media: Roger Black and friends offer professionally designed magazine and web templates “at a fraction of the cost.” Pushback ensues.
- With beautiful type comes great responsibility.
- Veerle: Gradient rings in Illustrator
- Douglas Bowman: A Browsable, Searchable Archive of Tweets
- A Feed Apart is live! Share your experiences of An Event Apart Minneapolis or enjoy the conference vicariously.
Categories
Acclaim Applications apps architecture art direction Authoring Best practices Browsers business Career Code creativity CSS Design development HTML HTML5 Ideas industry interface ipad iphone javascript links maturity Photoshop Platforms Publishing Standards State of the Web Stories The Profession Web Design Web Design History Web Standards
SlideShowPro adds HTML5
Most of us web folk are hybrids of one sort or another, but Todd Dominey was one of the first web designers to combine exceptional graphic design talent with serious mastery of code.
Being so good at both design and development that you could easily earn a fine living doing just one of them is still rare, although it looks like the future of our profession. One of the first serious designers to embrace web standards, Todd was also one of the few who did so while continuing to achieve recognition for his work in Flash. (Daniel Mall, who came later, is another.)
Finally, Todd was one of the first—along with 37signals and Coudal Partners—to abandon an enviably successful client services career in favor of full-time product development, inspiring a generation to do likewise, and helping bring us to our current world of web apps and startups.
A personal project that became an empire
In Todd’s case, the product was SlideShowPro, a project he designed for himself, which has grown to become the web’s most popular photo and video slideshow and gallery viewer. When you visit a photographer’s portfolio website, there’s an excellent chance that SlideShowPro powers its dynamic photo viewing experience. The same is true for the photo and video gallery features of many major newspaper and magazine sites, quite possibly including your favorites.
But deliberate lack of Flash support in the iPad and iPhone, while lauded here on February 1, 2010 as a win for accessible, standards-based design (“Not because Flash is bad, but because the increasing popularity of devices that don’t support Flash is going to force recalcitrant web developers to build the semantic HTML layer first”), presented a serious problem for developers who use SlideShowPro and readers who enjoy browsing dynamic photo and video galleries.
Mr Dominey has now solved that problem:
SlideShowPro Mobile is an entirely new media player built using HTML5 that doesn’t require the Flash Player plugin and can serve as a fallback for users accessing your web sites using these devices. But it’s not just any fallback — it’s specially designed for touch interfaces and smaller screen sizes. So it looks nothing like the SlideShowPro player and more like a native application that’s intuitive, easy to use, and just feels right.
The best part though is that because SlideShowPro Director (which will be required) publishes the mobile content, you’ll be able to provide the mobile alternative by simply updating the Flash Player embed code in your HTML documents. And just like when using the SlideShowPro player, because Director is behind the scenes, all your photos will be published for the target dimensions of these devices — which gives your users top quality, first generation images. The mobile player will automatically load whatever content is assigned to the Flash version, so the same content will be accessible to any browser accessing your web site.
A public beta will be released in the next weeks. Meanwhile, there is a video demo. There’s also an excellent Question and Answer page that answers questions you may have, whether you’re a SlideShow Pro customer or not. For instance:
Why mobile? Why not desktop?
We believe that (on the desktop) Flash is still the best delivery method for photo/video galleries and slideshows for it provides the most consistent user experience across all browsers and the broadest range of playback and customization options. As HTML5 support matures across all desktop browsers, we’ll continue to look into alternate presentation options.
Into the future!
“A half-century ago, Afghan women pursued careers in medicine; men and women mingled casually at movie theaters and university campuses in Kabul; factories in the suburbs churned out textiles and other goods.
“There was a tradition of law and order, and a government capable of undertaking large national infrastructure projects, like building hydropower stations and roads, albeit with outside help. Ordinary people had a sense of hope, a belief that education could open opportunities for all, a conviction that a bright future lay ahead. All that has been destroyed by three decades of war, but it was real.”
Once Upon a Time in Afghanistan, a photo essay by Mohammad Qayoumi
When I was twenty, Barbie was a symbol of oppression with obvious food issues. No way would a future child of mine identify with that.
When I was twenty, “princess” was another word for “child of oppressor.” Monarchs went with pogroms and capitalists.
If I ever had a daughter, she would be one of the people. Or a leader of the people. Or an anarchist. Or most probably an artist. Art was problematic because it also went with corporate capitalism (when not going steady with poverty) but at least the few artists who made money disdained it, if only publicly.
Twenty wasn’t easy.
When I was twenty, when I considered bringing a child into this world of wrong, I pictured her enjoying organic produce and healthy ethnic cuisines.
Decades and chameleon lives later, I was married and we were expecting.
After our daughter was born, I suggested raising her vegetarian. It seemed wrong to feed an angel on the blood and limbs of slaughtered animals. Her mother said she’d go along with the vegetarian angle as long as I did the research and committed to preparing fresh, nutritionally balanced meals that supplied every nutrient our child would need.
So she eats meat.
Mostly she eats french fries.
She sometimes eats at McDonald’s. Also she eats candy and plays with Barbies. She says she is Barbie’s biggest fan. Soon after learning to say Dada and Mama, she asked if she was a princess. We said yes.
What used to be my elegant teakwood dining table is now the staging area for a Barbie apartment. The Barbie pool, Barbie camping van, and Barbie salon that comprise the “apartment” barely leave room for the Barbies, Stacies, and Kellys who make use of these facilities.
The princess turns six in September. She’s working on the party guest list and we’ve already decided on her birthday present: a Barbie house.
Barbie is now fifty. But fifty is the new 49. There’s a reason she’s stuck around all these decades. Turns out it has nothing to do with theory and everything to do with girls.
P.S. Hint to my people: when you go to barbie.com, enable Flash.
Categories
Like it says
Categories
Book By Its Cover
Book By Its Cover is a glorious new blog devoted to the beauty of books.
Categories
Viva Gonçalves!
- The Ultimate Hipster Irony http://bigthink.com/ideas/18758
- Why You Can’t Work at Work | Jason Fried | Big Think: http://bigthink.com/ideas/18522
- Seeing too many ultra-minimal/undesigned blogs labeled “beautiful” cuz they use a @typekit font or two. Uh-uh.
- I love what @typekit is doing for the web, how it’s shaping the agenda *and* delivering the needed tools.
- In other news, I’ve come up with a title for my book of short stories. KAFKA FOR BEGINNERS.
- Selection pseudo-element. Choose text color/BG color when user selects text! Try it at http://bit.ly/9sjnai . (Not supported in IE).
- “IRS bomber Joe Stack captured the news for days, but his African American, Vietnam vet victim has gone unheralded” http://j.mp/a9U12B
- Must-read column, NYTimes: I Cost More, but I’m a Specialist http://s.nyt.com/u/Byb
- It’s probably a good thing that I didn’t get that XHTML2 tattoo. Probably.
- I just received a lovely “Happy New Year” card from the W3C. Repeat, I just received it.
- Watch Happy Cog’aoke 2 / Lesson Two: Solo-tunities on Vimeo! http://vimeo.com/9556324
Follow me on Twitter: @zeldman
m.nicewebtype.com is a light yet essential mobile site for people who design websites, love type, and struggle to keep up with the dizzying world of web fonts. In it, Tim Brown, author of Nice Web Type, creator of Web Font Specimen (what’s that?), and latterly type manager for Typekit, curates the Design Twitterverse to share the latest insights, innovations, quips, and controversies regarding everyone’s favorite new web design fetish.
Don’t leave home without it.