Tantek has played a key role in the development and popularization of practical social network portability technologies such as the hCard and XFN microformats. In 2003, Tantek collaborated with Eric Meyer and Matt Mullenweg in the invention of the XHTML Friends Network (XFN), which has since become the most popular decentralized social relationship format in the history of the Web. In 2004 Tantek proposed hCard for representing people and organizations, which has since similarly become the most popular user profile format on the web.
During his years as Technorati’s Chief Technologist, Tantek played an active role in refining and evangelizing hCard, bringing it from a wiki proposal to one that’s endorsed and supported by individuals, numerous small organizations, major companies ranging from AOL to Yahoo, and implemented for over a hundred million user identities and business listings on the web.
At Microsoft, Tantek led the development of Internet Explorer 5 for Macintosh and its Tasman rendering engine, which was the most standards-compliant layout engine of its time. He was also an early member of The Web Standards Project, and is the creator of the Box Model Hack, the first IE hack that let developers work around the incorrect box model in old versions of Internet Explorer.
The Big Web Show features special guests and topics like web publishing, art direction, content strategy, typography, web technology, and more. Get episodes delivered to you automatically:
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.
THE FIRST THING I got about the web was its ability to empower the maker. The year was 1995, and I was tinkering at my first website. The medium was raw and ugly, like a forceps baby; yet even in its blind, howling state, it made me a writer, a designer, and a publisher — ambitions which had eluded me during more than a decade of underachieving desert wanderings.
I say “it made me” but I made it, too. You get the power by using it. Nobody confers it on you.
I also got that the power was not for me alone: it was conferred in equal measure on everyone with whom I worked, although not everyone would have the time or desire to use the power fully.
The luckiest makers
Empowerment and desire. It takes extraordinary commitment, luck, and talent to become a maker in, say, music or film, because the production and distribution costs and risks in these fields almost always demand rich outside investors and tightly controlling corporate structures. (Film has held up better than music under these conditions.)
Music and film fill my life, and, from afar, I love many artists involved in these enterprises. But they are mostly closed to you and me, where the web is wide open, and always has been. We all know gifted, hard working musicians who deserve wide acclaim but do not receive it, even after decades of toil. The web is far kinder to makers.
To care is to share
Not only does the web make publishers of those willing to put in the work, it also makes most of us free sharers of our hard-won trade, craft, and business secrets. The minute we grab hold of a new angle on design, interaction, code, or content, we share it with a friend — or with friends we haven’t met yet. This sharing started in news groups and message boards, and flowered on what came to be called blogs, but it can also slip the bounds of its containing medium, empowering makers to create books, meet-ups, magazines, conferences, products, you name it. It is tough to break into traditional book publishing the normal way but comparatively easy to do it from the web, provided you have put in the early work of community building.
The beauty is that the community building doesn’t feel like work; it feels like goofing off with your friends (because, mostly, it is). You don’t have to turn your readers into customers. Indeed, if you feel like you’re turning your readers into customers, you’re doing it wrong.
If you see a chance, take it
The corollary to all this empowerment is that it’s up to each of us to do something positive with it. I sometimes become impatient when members of our community spend their energy publicly lamenting that a website about cats isn’t about dogs. Their energy would be so much better spent starting bow-wow.com. The feeling that something is missing from a beloved online resource (or conference, or product) can be a wonderful motivator to start your own. I created A List Apart because I felt that webmonkey.com wasn’t enough about design and highfive.com was too much about it. If this porridge is too hot and that porridge is too cold, I better make some fresh, eh?
I apologize if I sometimes seem snippy with whiners. My goal is never to make anyone feel bad, especially not anyone in this community. My message to my peers since the days of “Ask Dr Web” has always been: “you can do this! Go do it.” That is still what I say to you all.
IN A GORGEOUSLY PACED ESSAY at n+1, “the magazine that believes history isn’t over just yet,” an amazing young (22?) writer named Alice Gregory reviews a novel by Gary Shteyngart while simultaneously describing her exhausted and shattered mental life as a Twitter- and Tumblr-following, iPhone-carrying, socializing-while-isolated Internet addict, i.e. modern young person:
This anxiety is about more than failing to keep up with a serialized source, though. It’s also about the primitive pleasure of constant and arbitrary stimulation. That’s why the Facebook newsfeed is no longer shown chronologically. Refresh Facebook ten times and the status updates rearrange themselves in nonsensical, anachronistic patterns. You don’t refresh Facebook to follow a narrative, you refresh to register a change—not to read but to see.
And it’s losing track of this distinction—between reading and seeing—that’s so shameful. It’s like being demoted from the category of thinking, caring human to a sort of rat that doesn’t know why he needs to tap that button, just that he does.
Sometimes I can almost visualize parts of myself, the ones I’m most proud of, atrophying. I wish I had an app to monitor it! I notice that my thoughts are homeopathic, that they mirror content I wish I weren’t reading. I catch myself performing hideous, futuristic gestures, like that “hilarious” moment three seconds into an intimate embrace in which I realize I’m literally rubbing my iPhone screen across his spine.
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:
Jeremy Keith quite effectively live-blogs my opening keynote on the particular opportunities of Now in the field of web design, and the skills every designer needs to capitalize on the moment and make great things.
Related to my talk: Jeremy Keith’s original write-up on a notorious but all-too-common practice. If your boss or client tells you to design this pattern, just say no. Design that does not serve users does not serve business.
“In his opening keynote … Jeffrey Zeldman talked about the skills and opportunities that should be top of mind for everyone designing on the Web today.” Luke Wroblewski’s write-up.
“As a consultant, [Whitney] spends a lot of time talking about UX and inevitably, the talk turns to deliverables and process but really we should be establishing a philosophy about how to treat people, in the same way that visual design is about establishing a philosophy about how make an impact. Visual design has principles to achieve that: contrast, emphasis, balance, proportion, rhythm, movement, texture, harmony and unity.” In this talk, Whitney proposed a set of 10 principles for UX design.
Live blogging by Jeremy Keith. Veerle, a noted graphic and interaction designer from Belgium, shared her process for discovering design through iteration and experimentation.
Luke’s live awesomeness cannot be captured in dead written words, but Mr Keith does a splendid job of quickly sketching many of the leading ideas in this key AEA 2011 talk.
See also: funky dance moves with Luke Wroblewski, a very short video I captured as Luke led the crowd in the opening moves of Michael Jackson’s “Thriller.”
“The next talk here at An Event Apart in Boston is one I’ve really, really, really been looking forward to: it’s a presentation by my hero Ethan Marcotte.”
“In his presentation at An Event Apart in Boston, MA 2011 Jared Spool detailed the importance and role of links on Web pages.” No writer can capture Jared Spool’s engaging personality or the quips that produce raucous laughter throughout his sessions, but Luke does an outstanding job of noting the primary ideas Jared shares in this riveting and highly useful UX session.
Luke W: “In his All Our Yesterdays presentation at An Event Apart in Boston, MA 2011 Jeremy Keith outlined the problem of digital preservation on the Web and provided some strategies for taking a long term view of our Web pages.”
Although it is hard to pick highlights among such great speakers and topics, this talk was a highlight for me. As in, it blew my mind. Several people said it should be a TED talk.
Luke: “In his Idea to Interface presentation at An Event Apart in Boston, MA 2011 Aarron Walter encouraged Web designers and developers to tackle their personal projects by walking through examples and ways to jump in. Here are my notes from his talk.”
Compiled by the speaker, links include Design Personas Template and Example, the story behind the illustrations in the presentation created by Mike Rhode, Dribble, Huffduffer, Sketchboards, Mustache for inserting data into your prototypes, Keynote Kung Fu, Mocking Bird, Yahoo Design Patterns, MailChimp Design Pattern Library, Object Oriented CSS by Nicole Sullivan and more!
“In his Smoke Gets In Your Eyes presentation at An Event Apart in Boston, MA 2011 Andy Clarke showcased what is possible with CSS3 animations using transitions and transforms in the WebKit browser.” Write-up by the legendary Luke Wroblewski.
Fascinating article by Anton Peck (who attended the show). Proposed: a solution to a key problem with CSS transitions. (“Even now, my main issue with transitions is that they use the same time-length value for the inbound effect as they do the outbound. For example, when you create a transition on an image with a 1-second duration, you get that length of time for both mousing over, and mousing away from the object. This type of behavior should be avoided, for the sake of the end-user!”)
ON SUNDAY, while leading a discussion on the future of web design and publishing, I noticed a slightly confused look appearing on some faces in the audience. The discussion had been billed as “Jeffrey Zeldman’s Awesome Internet Design Panel,” and I thought perhaps there was a disconnect for some in the audience between “design” and such topics as where content comes from and who pays for it.
So I asked, “Who here is in publishing?”
A few hands were gently raised.
Uh-huh. “And how many of you work on the web?”
Every right hand in the room shot up.
“You are all in publishing,” I explained.
Now, I like a good rounded corner talk as much as the next designer. I’ve given my share of them. Also of line height and measure, color and contrast, how to design things that don’t work in old versions of Internet Explorer, and so on. In the practice of web and interaction design, there will always be a place for craft discussions—for craft is execution, and ideas without execution are songs without music, meaningless.
But right now (and always) there is a need for design to also be about the big strategic issues. And right now, as much as design is wrestling with open vs. proprietary formats and the old challenges of new devices, design is also very much in the service of applications and publishing. Who gets content, who pays for it, how it is distributed (and how evenly), the balance between broadcast and conversation, editor and user—these are the issues of this moment, and it is designers even more than editors who will answer these riddles.
paidContent UK’s NLA Ruling Summary: How PRs Break Copyright Law Online offers the highlights of a 148-paragraph ruling by the British High Court “that PRs who subscribe to paid news monitors are breaking UK law by effectively copying a substantial part of online news articles.”
The product in question is Meltwater News, an online global media monitoring service that allows subscribers to track “keywords, phrases, and topics in over 130,000 sources from over 190 countries and 100 languages, monitored consistently throughout the day.”
The judge argues that in reprinting publications’ headlines or summaries of longer than 256 characters, the service is “stealing” the publishers’ content, even though Meltwater quite naturally provides links so users who are interested in a given piece of content can click through to the original. Since these summaries and headlines are cached on my computer, as an end-user I am complicit in the theft of content I didn’t pay for, says the judge.
If this ruling sticks, and if it ripples out, it will cripple or kill existing and emerging services that help people find content.
The 10K Apart Challenge had a simple premise: Could you build a complete web application using less than 10 kilobytes? … A joint effort between An Event Apart and MIX Online, the 10K Apart reaped 367 web applications in 28 days—everything from casual games to RIAs—that demonstrate, even with their tiny footprints, what is truly possible with modern [web] standards.
ATTENTION, web design geeks, contest fans, standards freaks, HTML5ophiles, CSSistas, grammarians, bookworms, UXers, designers, developers, and budding Haikuists. Can you do this?
Do not tell me I
Am source of your browser woes.
Template validates.
Happy Cog president Greg Storey describes the thinking behind our latest little experiment in online publishing and community:
Last week we launched Cognition, a studio blog, that replaced the traditional open-mic text area commenting system with two options: Either post a response via your own Twitter account or link to a post on your own blog.
As the primary instigator, Mr. Storey explains his and the agency’s rationale for doing away with traditional comments:
The problem with most comment threads is that they can reach that useless tipping point very quickly. Without having an active moderator to keep up with all of the various threads it’s practically impossible to provide any sort of conversational value.
Meanwhile we have also informally noticed a decline in blog usage since the wider adoption of Twitter within our community. … Happy Cog loves blogs. … What if we could help bring some life back into the old network by encouraging people to write blog posts when they have more to say than what can fit into one-hundred-and-forty characters?
Read more and comment if you wish: Airbag: Babylon.
In Issue No. 313 of A List Apart for people who make websites: Better content management systems start with content strategy; typographically beauteous web pages may benefit from hyphenation and justification.
Any web project more complex than a blog requires custom CMS design work. It’s tempting to use familiar tools and try to shoehorn content in—but we can’t select the appropriate tool until we’ve figured out the project’s specific needs. So what should a CMS give us, apart from a bunch of features? How can we choose and customize a CMS to fit a project’s needs? How can content strategy help us understand what those needs really are? And what happens a day, a week, or a year after we’ve installed and customized the CMS?
Hyphenation and justification: It’s not just for print any more. Armed with good taste, a special unicode font character called the soft hyphen, and a bit o’ JavaScript jiggery, you can justify and hyphenate web pages with the best of them. Master the zero width space. Use the Hyphenator.js library to bottle fame, brew glory, and put a stopper in death. Create web pages that hyphenate and justify on the fly, even when the layout reflows in response to changes in viewport size.
A List Apart and .net magazine have long admired each other. So when .net editor Dan Oliver did me the great honor of asking if I wished to guest edit an issue, I saluted smartly. The result is now arriving in subscriber post boxes and will soon flood Her Majesty’s newsstands.
In .net magazine Issue No. 206, on sale 17th August in UK (and next month in the US, where it goes by the name “Practical Web Design”), we examine how new standards like CSS3 and HTML5, new devices like iPhone and Droid, and maturing UX disciplines like content strategy are converging to create new opportunities for web designers and the web users we serve:
Exult as Luke Wroblewski shows how the explosive growth of mobile lets us stop bowing to committees and refocus on features customers need.
Marvel as Ethan Marcotte explains how fluid grids, flexible images, and CSS3 media queries help us create precise yet context-sensitive layouts that change to fit the device and screen on which they’re viewed.
Delight as Kristina Halvorson tells how to achieve better design through coherent content wrangling.
Thrill as Andy Hume shows how to sell wary clients on cutting-edge design methods never before possible.
Geek out as Tim Van Damme shows how progressive enhancement and CSS3 make for sexy experiences in today’s most capable browsers—and damned fine experiences in those that are less web-standards-savvy.
You can also read my article, which asks the musical question:
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 newer, more mature, more ubiquitous web?
Today’s web is about interacting with your users wherever they are, whenever they have a minute to spare. New code and new ideas for a new time are what the new issue of .net magazine captures. There has never been a better time to create websites. Enjoy!
Photo by Daniel Byrne for .net magazine. All rights reserved.
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.
Gosh knows how they reproduce in newspaper or how effectively they can be translated into favicons, but there’s no denying that there are some lovely works in Wsblogz.com’s gallery of color logos.
