Web Design Manifesto 2012

THANK YOU for the screen shot. I was actually already aware that the type on my site is big. I designed it that way. And while I’m grateful for your kind desire to help me, I actually do know how the site looks in a browser with default settings on a desktop computer. I am fortunate enough to own a desktop computer. Moreover, I work in a design studio where we have several of them.

This is my personal site. There are many like it, but this one is mine. Designers with personal sites should experiment with new layout models when they can. Before I got busy with one thing and another, I used to redesign this site practically every other week. Sometimes the designs experimented with pitifully low contrast. Other times the type was absurdly small. I experimented with the technology that’s used to create web layouts, and with various notions of web “page” design and content presentation. I’m still doing that, I just don’t get to do it as often.

Many people who’ve visited this site since the redesign have commented on the big type. It’s hard to miss. After all, words are practically the only feature I haven’t removed. Some of the people say they love it. Others are undecided. Many are still processing. A few say they hate it and suggest I’ve lost my mind—although nobody until you has suggested I simply didn’t have access to a computer and therefore didn’t know what I was designing. This design may be good, bad, or indifferent but it is not accidental.

A few people who hate this design have asked if I’ve heard of responsive web design. I have indeed. I was there when Ethan Marcotte invented it, I published his ground-breaking article (and, later, his book, which I read in draft half a dozen times and which I still turn to for reference and pleasure), and I’ve had the privilege of seeing Ethan lecture and lead workshops on the topic about 40 times over the past three years. We’ve incorporated responsive design in our studio’s practice, and I’ve talked about it myself on various stages in three countries. I’m even using elements of it in this design, although you’d have to view source and think hard to understand how, and I don’t feel like explaining that part yet.

This redesign is a response to ebooks, to web type, to mobile, and to wonderful applications like Instapaper and Readability that address the problem of most websites’ pointlessly cluttered interfaces and content-hostile text layouts by actually removing the designer from the equation. (That’s not all these apps do, but it’s one benefit of using them, and it indicates how pathetic much of our web design is when our visitors increasingly turn to third party applications simply to read our sites’ content. It also suggests that those who don’t design for readers might soon not be designing for anyone.)

This redesign is deliberately over the top, but new ideas often exaggerate to make a point. It’s over the top but not unusable nor, in my opinion, unbeautiful. How can passages set in Georgia and headlines in Franklin be anything but beautiful? I love seeing my words this big. It encourages me to write better and more often.

If this were a client site, I wouldn’t push the boundaries this far. If this were a client site, I’d worry that maybe a third of the initial responses to the redesign were negative. Hell, let’s get real: if this were a client site, I wouldn’t have removed as much secondary functionality and I certainly wouldn’t have set the type this big. But this is my personal site. There are many like it, but this one is mine. And on this one, I get to try designs that are idea-driven and make statements. On this one, I get to flounder and occasionally flop. If this design turns out to be a hideous mistake, I’ll probably eventually realize that and change it. (It’s going to change eventually, anyway. This is the web. No design is for the ages, not even Douglas Bowman’s great Minima.)

But for right now, I don’t think this design is a mistake. I think it is a harbinger. We can’t keep designing as we used to if we want people to engage with our content. We can’t keep charging for ads that our layouts train readers to ignore. We can’t focus so much on technology that we forget the web is often, and quite gloriously, a transaction between reader and writer.

Most of you reading this already know these things and already think about them each time you’re asked to create a new digital experience. But even our best clients can sometimes push back, and even our most thrilling projects typically contain some element of compromise. A personal site is where you don’t have to compromise. Even if you lose some readers. Even if some people hate what you’ve done. Even if others wonder why you aren’t doing what everyone else who knows what’s what is doing.

I don’t think you will see much type quite this big but I do think you will see more single-column sites with bigger type coming soon to a desktop and device near you. For a certain kind of content, bigger type and a simpler layout just make sense, regardless of screen size. You don’t even have to use Typekit or its brothers to experiment with big type (awesome as those services are). In today’s monitors and operating systems, yesterday’s classic web fonts—the ones that come with most everyone’s computer—can look pretty danged gorgeous at large sizes. Try tired old Times New Roman. You might be surprised.

The present day designer refuses to die.


Keep your site’s type right; let users work offline

IN ISSUE No. 350 of A List Apart for people who make websites: keep your web type looking right across browsers, platforms, and devices; let users do stuff on your site even when they’re offline.

Say No to Faux Bold

by ALAN STEARNS

Browsers can do terrible things to type. If text is styled as bold or italic and the typeface family does not include a bold or italic font, browsers will compensate by trying to create bold and italic styles themselves. The results are an awkward mimicry of real type design, and can be especially atrocious with web fonts. Adobe’s Alan Stearns shares quick tips and techniques to ensure that your @font-face rules match the weight and styles of the fonts, and that you have a @font-face rule for every style your content uses. If you’re taking the time to choose a beautiful web font for your site, you owe it to yourself and your users to make certain you’re actually using the web font — and only the web font — to display your site’s content in all its glory.

Application Cache is a Douchebag

by JAKE ARCHIBALD

We’re better connected than we’ve ever been, but we’re not always connected. ApplicationCache lets users interact with their data even when they’re offline, but with great power come great gotchas. For instance, files always come from the ApplicationCache, even when the user is online. Oh, and in certain circumstances, a browser won’t know that that the online content has changed — causing the user to keep getting old content. And, oh yes, depending on how you cache your resources, non-cached resources may not load even when the user is online. Lanyrd’s Jake Archibald illuminates the hazards of ApplicationCache and shares strategies, techniques, and code workarounds to maximize the pleasure and minimize the pain for user and developer alike. All this, plus a demo. Dig in.


Illustration by Kevin Cornell for A List Apart

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:

The (CSS) Future is Now – Eric Meyer

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.

A Philosophy of Restraint
– Simon Collison

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.

Touch Events – Peter-Paul Koch (PPK)

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.

What’s Your Problem? – Whitney Hess

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.

Properties of Intuitive Pages
– Jared Spool

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.

Why I am letting my Google IO invitation expire

HI, [REDACTED]. Thanks for writing to express your concern about my failure to redeem my Google IO promo code. It’s kind of a funny story.

I received a Google IO invitation (copied and pasted below) but didn’t follow up on it because the invitation did not say anything about what Google IO is, who it is for, or why I would want to attend it (if it is an event) or use it (if it is software) or do something else with it (if it is something else).

The Google IO invitation merely gave me complicated directions to sign up for Google IO, no doubt on the assumption that I would gladly attend, download, or sign up for anything that comes from Google, even without knowing what it is; and that, as an unemployed millionaire, I would have plenty of free time to decipher and obey complicated sign-up directions without knowing anything about the product, service, or event.

One of the complexities Google mentions in their invitation letter which fails to explain anything about the product or service they want me to sign up for is that, to qualify for Google IO, I must start a Google+ account. They don’t explain what Google+ is, either, but as it happens, I already have a Google+ account.

My Google+ account is assigned to my Gmail address. But instead of writing to me there, Google wrote to me at my zeldman.com address. My zeldman.com address is actually managed via Gmail, so I should be able to log into my Google+ account whether I am signed in as my Gmail identity or my zeldman.com identity, but Google+ doesn’t work that way. Google+ only works for free Gmail accounts. It does not work for paid corporate accounts like mine. That has always seemed an odd decision to me: if you can only provide services to a subgroup of your users, why not choose the subgroup that pays? But I am not Google.

So Google wrote to my zeldman.com address, which they won’t allow me to associate with my Google+ address, to invite me to start a Google+ account (which I already have) on my zeldman.com account, which they won’t support. And if I do that (which I can’t), and some other complicated stuff, they promise that I will then be able to participate in Google IO, whatever that is.

And now they have written to warn me that my Google IO, whatever it is, will stop being offered if I don’t sign up (which I can’t) right away. And they even convinced you, my friend, to send a personal note ensuring that I don’t miss the opportunity to sign up for their unspecified product or service with the account they don’t support before the unexplained offer is terminated.

While I should be curious about Google IO and what I will miss if I fail to take advantage of the cumbersome offer, what I’m actually far more curious about is how an organization that can’t write an effective direct marketing email message has managed to become one of the most powerful corporations of the 21st century.


Hello,

We recently sent you an invitation to register for Google I/O 2012 and noticed that you have not redeemed your promo code, which will expire at midnight PDT on March 25.

[ How to register ]
1. Make sure you have a Google+ account as it is required to register. Get Google+ at http://www.google.com/+
2. Visit the registration page at
https://developers.google.com/events/register/promocode?code=[REDACTED]
3. Use Promo Code: [REDACTED]. This code can only be used once.

[ Tips to Ensure Successful Payment With Google Wallet ]

1. Make sure your Google Wallet account is tied to the same Google+ account you use to register.

2. In case your bank declines your purchase through Google Wallet, you may need to call the bank that issued your credit card and let them know that you want to make a large purchase. Some banks may decline large purchases that appear to be out of your normal purchase behavior.

3. If Google Wallet is not available in your country, please email googleio2012@google.com to have our support team process your payment.

[ Tips to Ensure Successful Registration With Google+ ]

1. Sign into your Google+ account before you try to redeem your code.

2. To ensure you have created a Google+ account, log into your Google account and go to https://plus.google.com/. If you land on a page asking you “To join, create a public Google profile.” then you don’t yet have a Google+ account and follow the instructions to create one.

3. If you have multiple Google accounts, be sure to sign out of all Google accounts and sign in with only your Google+ enabled account.

4. You can use a personal or company managed Google+ enabled account to complete your registration.

If you have any questions, please email googleio2012@google.com.

Sincerely,
The Google I/O Team

A List Apart No. 345: Responsive content: thinking beyond pages; from research to content strategy to meaningful project deliverables.

IN ISSUE NO. 345 of A List Apart, for people who make websites:

Future-Ready Content

by SARA WACHTER-BOETTCHER

The future is flexible, and we’re bending with it. From responsive web design to futurefriend.ly thinking, we’re moving quickly toward a web that’s more fluid, less fixed, and more easily accessed on a multitude of devices. As we embrace this shift, we need to relinquish control of our content as well, setting it free from the boundaries of a traditional web page to flow as needed through varied displays and contexts. Most conversations about structured content dive headfirst into the technical bits: XML, DITA, microdata, RDF. But structure isn’t just about metadata and markup; it’s what that metadata and markup mean. Sara Wachter-Boettcher shares a framework for making smart decisions about our content’s structure.

Audiences, Outcomes, and Determining User Needs

by COREY VILHAUER

Every website needs an audience. And every audience needs a goal. Advocating for end-user needs is the very foundation of the user experience disciplines. We make websites for real people. Those real people are able to do real things. But how do we get to really know our audience and find out what these mystery users really want from our sites and applications? Learn to ensure that every piece of content on your site relates back to a specific, desired outcome — one that achieves business goals by serving the end user. Corey Vilhauer explains the threads that bind UX research to content strategy and project deliverables that deliver.


Illustration by Kevin Cornell for A List Apart

Download in the Dumps (AKA Killing Me Softly With Adobe)

In which our intrepid reporter is unable to download and reinstall Adobe software he owns and paid for because Adobe.

I REMOVED Adobe CS5 from my studio Mac after it took on water damage during tropical storm Irene. Just as I was going to replace the machine, the water damage seemed to go away. (It actually never did go away, and as I write this it’s pretty bad, but for a week it seemed okay so I didn’t order a replacement.) As I need Photoshop this morning to work on a website, and as I’m still a registered CS5 owner, I logged into Adobe.com to download a “Trial” version of Photoshop. For all the good it did me, I could have eaten my own head.

Clicking “Download Photoshop” put an “Install Adobe Download Assistant” app on my desktop instead of downloading Photoshop. To download Photoshop from the web, you can’t just download Photoshop from the web. You have to download an installer that installs a downloader. There’s no benefit to the user for jumping through this extra hoop, but I guess Adobe Corporate wanted to show off its AIR-based software.

To download trial versions of Creative Suite software, you need to install the Adobe Download Assistant. After installation, the Adobe Download Assistant will start your product download automatically,

the website says. This is a lie.

Once installed, the downloader asks me to sign in again. Which is only logical. After all, between the time I clicked “download Photoshop” as a signed-in user and now, I might have been knocked unconscious by Photoshop pirates. Without a redundant double sign-in, the pirates would win.

So I type in my login and password again—same as I just did on the website to download this meshugah downloader installer in the first place—and guess what? Adobe says my login and password don’t match.

The login and password I used to download the installer downloader are unacceptable to the downloader. If you’re following this gibberish, God bless. If not, Adobe is telling me that the login and password I just used to install the downloader are no good.

Like a pimp pretending to help a runaway teen, a link in the unhelpful downloader now asks, “Having trouble signing in?” There being nothing else to do, I click the link, which takes me to a “Reset your password” panel. Only I can’t reset my password in the “Reset your password” panel; I’ll only be able to reset my password on a custom web page, whose address I will only learn once I receive an email from Adobe sending me a custom link. Excitingly, that “Reset your password” page (the one that will actually allow me to reset my password) will be generated on the fly via Adobe’s famous and ultra-reliable ColdFusion software.

I’ve now lost 30 minutes of work time but Adobe is not done with me. Oh, no. This is where the fun begins.

I spend long minutes reflexively checking my email, like a junkie scanning the corner in search of his busted dealer. The custom link email finally arrives, but the link never works. (It’s the cream of the jest!) Here is a screenshot of Adobe’s Chinese Japanese website, powered by ColdFusion, which is unable to generate a “Reset your password” page, allowing me to reset my password and use the AIR-based downloader software to download the software I already own.

Mission: not accomplished. Total time wasted: 45 minutes (not counting the writing of this blog post, which I do in the faint hope that Adobe will improve its customer experience). I still have no working copy of Photoshop and it’s clear I won’t get one today. The installer disks are gone from my office because I’m moving to a new studio soon and have been packing important pieces like installation disks ahead of time. (After all, I had reasoned, Adobe lets you download software from its website, so why keep disks around?)

To be fair, Hurricane Irene was not Adobe’s fault, and lots of people suffered much worse than a water-damaged iMac. Nor is water damage to my Mac Adobe’s fault. My decision to remove CS5 from the Mac was based on fear that if the Mac died and I hadn’t removed CS5, I would not be able to install it on the replacement machine I intended to purchase, as Adobe licensing (and the software itself) requires you to uninstall from Machine A before installing on Machine B. Adobe CS5 costs more than the computer I intended to buy, so it seemed prudent to remove it from the damaged machine, but of course I regret that decision now, because Adobe’s website won’t let me update my member information, and its downloader won’t let me download.

So I’ll be working from home tonight, doing what I should have done today. Five little letters: ADOBE.

Breathless Update!

Apparently Adobe’s entire membership section, powered by ColdFusion, is now down. Trying to do anything inside the member section leads to a Chinese “Sorry” page. This might be why the “downloader” failed to authorize my credentials. How much simpler it would be if Adobe simply provided a link to download its software (like in the old days) instead of forcing registered users to jump through broken hoops.

New Approaches To Designing Log-In Forms

LUKE WROBLEWSKI: “For many of us, logging into websites is a part of our daily routine. In fact, we probably do it so often that we’ve stopped having to think about how it’s done… that is, until something goes wrong: we forget our password, our user name, the email address we signed up with, how we signed up, or even if we ever signed up at all.

“These experiences are not just frustrating for us, but are bad for businesses as well. How bad? User Interface Engineering’s analysis of a major online retailer found that 45% of all customers had multiple registrations in the system, 160,000 people requested their password every day, and 75% of these people never completed the purchase they started once they requested their password.”

“To top it off, visitors who are not logged in do not see a personalized view of a website’s content and recommendations, which reduces conversion rates and engagement. So, log-in is a big deal — big enough that some websites have started exploring new designs solutions for the old problem.”

New Approaches To Designing Log-In Forms

Don’t Be Evil (Wink).

Google. Evil.

WHILE VIEWING STATS on TweetMeme, I noticed a banner ad that said, “New York—explore it again like you used to.” Intrigued, I clicked the ad. It took me to the web page shown above. (Click to view full size.) At the top was a message thanking me for subscribing. Ouch! I had not subscribed, I had merely clicked a link. Opt-in subscription without notice or warning is about as dark as a user experience pattern can get and still be legal.

Beneath the notice was an ad for a women’s strip tease class. I don’t think I’m the intended demographic. Facebook would know that. Why doesn’t Google?

The offer had a time limit; the script on the time limit froze my browser, prompting a force-quit and restart.

If “Don’t Be Evil” is still Google’s slogan, I wonder if folks who work there say it with a straight face.

Advanced web design links

FROM MY TWITTER STREAM of late:

Okay, that last one isn’t a web design link and the Apple comment could go either way, but that’s how I roll. Follow me on Twitter for more snarkeractive funucation!