Jeffrey Zeldman's Blog, page 55

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.

[image error] [image error] [image error] [image error] [image error] [image error] [image error]

Web, Mobile, Responsive, Content | Notes from An Event Apart Seattle Day 1

IF YOU couldn't be among us for An Event Apart Seattle 2012 Day 1 on Monday, 2 April 2012, these notes by the illustrious Luke Wroblewski will almost make you feel you were there:

Content First – Jeffrey Zeldman

In his opening keynote at An Event Apart in Seattle, WA 2012 Jeffrey Zeldman talked about the need to keep content front and center in websites and the web design process.

Big Type Little Type – Jon Tan

In his Big Type, Little Type talk at An Event Apart in Seattle, WA 2012 Jon Tan talked about important considerations for font setting and selection on the web.

Silo-Busting with Scenarios – Kim Goodwin

In her Silo-Busting with Scenarios talk at An Event Apart in Seattle, WA 2012 Kim Goodwin described the value of using scenarios as a design tool and walked through an example of how to do so.

Five Dangerous Ideas = Scott Berkun

In his Five Dangerous Ideas talk at An Event Apart in Seattle, WA 2012 Scott Berkun outlined truths about how the world works that creatives don't like to talk about.

Adaptive Web Content – Karen McGrane

In her presentation at An Event Apart in Seattle WA 2012 Karen McGrane discussed the need for structured content on the web.

Rolling Up Our Responsive Sleeves – Ethan Marcotte

In his Rolling Up Our Responsive Sleeves talk at An Event Apart in Seattle, WA 2012 Ethan Marcotte walked through ways to tackle thorny issues in responsive design layouts, media, advertising, and more.

Watch http://www.lukew.com/ff?tag=aeaseattle2012 for notes on Day II, beginning momentarily.

AEA swag thermos (part of the complete 2012 swag set) illustrated by the magnificent Kevin Cornell for An Event Apart.

[image error] [image error] [image error] [image error] [image error] [image error] [image error]

A List Apart No. 347 | Style Tiles & Self-Critique

DESIGN BETTER with Issue No. 347 of A List Apart for people who make websites:

Artistic Distance

by PAUL BURTON

Pimpin' ain't easy; neither is self-critique. If you are passionate about what you create, it is impossible to completely disassociate yourself from your work in order to objectively evaluate and then improve it. But the ability to achieve "artistic distance"—that is, to attain a place that allows you to contemplate your design on its own merits—will enable you to improve your own work immeasurably and, ultimately, to cast off the immature shackles of ego. Learn to let your work shine by letting go of it. Acquire the knack of achieving artistic distance.

Style Tiles and How They Work

by SAMANTHA WARREN

How do you involve your client in a successful design process? Many of our processes date back to print design and advertising. It's time we evolved our deliverables to make clients a more active participant in the process. The style tile is a design deliverable that references website interface elements through font, color, and style collections delivered alongside a site map, wireframes, and other user experience artifacts. Learn how style tiles can align client and designer expectations, expedite project timelines, involve stakeholders in the brainstorming process, and serve an essential role in responsive design.

A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices.

Illustration by Kevin Cornell for A List Apart.







[image error][image error][image error][image error][image error][image error][image error]

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/...

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

[image error] [image error] [image error] [image error] [image error] [image error] [image error]

Web Type Will Save Us (Or, Who’s Afraid of the Big, Bad Retina Display?)

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.

After all, responsive web design already called upon us to create and swap multiple versions of the same image. And now Retina Displays reveal the lack of quality in all web images — compelling us, perhaps, to create high-resolution image versions which some users lack the bandwidth to download, and to lather our sites with yet more JavaScript as we try to detect whether or not each user’s device requires a higher-res image (shades of 1999!).

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.

Web Type Will Save Us (Or, Who's Afraid of the Big, Bad Retina Display?)

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.

After all, responsive web design already called upon us to create and swap multiple versions of the same image. And now Retina Displays reveal the lack of quality in all web images — compelling us, perhaps, to create high-resolution image versions which some users lack the bandwidth to download, and to lather our sites with yet more JavaScript as we try to detect whether or not each user's device requires a higher-res image (shades of 1999!).

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.







[image error][image error][image error][image error][image error][image error][image error]

Post-Induction Party Pix by Annie Ray | SXSWi 2012

I THREW A PARTY on the last night of SXSW Interactive 2012 to celebrate my induction in the Hall of Fame. Photos © Annie Ray, annieray.net. The entire photo gallery is available for your viewing pleasure at http://cog.gd/3m0.

[image error] [image error] [image error] [image error] [image error] [image error] [image error]

Jeffrey Zeldman Inaugural Hall of Fame Testimonial Video (4:00)

Jeffrey Zeldman tribute video – on his induction into the SXSW Interactive Hall of Fame from Jeffrey Zeldman on Vimeo.

VIDEO: SOME MEMBERS of the web design and development community share thoughts about yours truly on the occasion of my induction into the SXSW Interactive Hall of Fame.

This video was played on the big screens at SXSW Interactive during the 2012 Awards Show preceding the inaugural Hall of Fame induction ceremony on March 13, 2012.

Shucks, folks.







[image error][image error][image error][image error][image error][image error][image error]

Behind The Music: The Jeffrey Zeldman Dolls

Jeffrey was looking for us to do a more tailored, short run of the doll we had initially designed of him-215 to be exact. They were to be given away as gifts at the Hall of Fame after party being held at South by Southwest (right about now is where you can hear our jaws drop to the floor).

Here was the opportunity to put handmade work into the hands of 215 web designers and industry gurus at one of the largest interactive design conferences in the world-South by Southwest. Are we interested? Hells, please! So, after hashing out the details and specifics we set into work on the very complicated and detailed project. Below are just a few of the pictures we took documenting the process…

Of Austin Fame and Marches | Dolls for Friends.

[image error] [image error] [image error] [image error] [image error] [image error] [image error]

The Impossible Year | Jeffrey Zeldman with Mini-Zeldman Doll Polaroid…

JOHN MORRISON:

Jeffrey Zeldman with Mini-Zeldman Doll

Polaroid SLR 680SE / Impossible PX-680 Color Shade

Jeffrey became the first person inducted into the SXSW Interactive Hall of Fame. Afterwards there was a party with mini-Zeldman dolls.

The Impossible Year | Jeffrey Zeldman with Mini-Zeldman Doll Polaroid…







[image error][image error][image error][image error][image error][image error][image error]