Category: CSS

Categories
A List Apart CSS CSS3 Design Publications Publishing Responsive Web Design spec Standards State of the Web Web Design Web Design History Web Standards

CSS3: Love vendor prefixes, resize full-screen backgrounds

A List Apart Issue No. 309. Illustration by Kevin Cornell.

Learn to love vendor prefixes and create full-screen backgrounds that resize to fit the viewport in Issue No. 309 of A List Apart for people who make websites:

Prefix or Posthack

by ERIC MEYER

Vendor prefixes: Threat or menace? As browser support (including in IE9) encourages more of us to dive into CSS3, vendor prefixes such as -moz-border-radius and -webkit-animation may challenge our consciences, along with our patience. But while nobody particularly enjoys writing the same thing four or five times in a row, prefixes may actually accelerate the advancement and refinement of CSS. King of CSS Eric Meyer explains why.

Supersize that Background, Please!

by BOBBY VAN DER SLUIS

Background images that fill the screen thrill marketers but waste bandwidth in devices with small viewports, and suffer from cropping and alignment problems in high-res and widescreen monitors. Instead of using a single fixed background size, a better solution would be to scale the image to make it fit different window sizes. And with CSS3 backgrounds and CSS3 media queries, we can do just that. Bobby van der Sluis shows how.

Illustration by Kevin Cornell for A List Apart Magazine.

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

Todd Dominey at Happy Cog.

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.

SlideShowPro

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!

Categories
A Feed Apart A List Apart An Event Apart Boston Community conferences content content strategy creativity CSS Design Designers Education eric meyer events Happy Cog™ HTML5 interface launches Standards Tools twitter User Experience UX Web Design Zeldman

A Feed Apart 2.0

A Feed Apart

As promised, a super-hot update to A Feed Apart, the official feed aggregator for An Event Apart, is up and running for your web design conference pleasure. You can now tweet from inside the application, and can even arrange meet-ups and make other social connections there.

Must-read: Designer Ali M. Ali talks about the interface design.

Steve Losh did back-end programming.

Nick Sergeant and Pete Karl created the original A Feed Apart and led the redesign effort.

If you can’t attend the sold-out show, which begins Monday, May 24, you can follow the live Tweetage from the comfort of your cubicle.

Enjoy An Event Apart Boston 2010 on A Feed Apart.

Categories
A Feed Apart An Event Apart better-know-a-speaker Boston Community conferences content content strategy creativity CSS Design engagement eric meyer events glamorous HTML5 Ideas industry Information architecture interface Standards State of the Web The Profession W3C Web Design Web Standards XHTML

Boston Bound

Plane travel versus train travel, that sort of thing.

Morning finds me bound by train for Boston, capital of Massachusetts, land of Puritans, patriots, and host of the original Tea Party. Center of high technology and higher education. Where the John Hancock Tower signs its name in the clouds, and the sky-scraping Prudential Tower adds a whole new meaning to the term, “high finance.” Beantown. Cradle of liberty, Athens of America, the walking city, and five-time host to An Event Apart, which may be America’s leading web design conference. (You see what I did there?)

Over 500 advanced web design professionals will join co-host Eric Meyer and me in Boston’s beautiful Back Bay for two jam-packed days of learning and inspiration with Dan Cederholm, Andy Clarke, Kristina Halvorson, Jeremy Keith, Ethan Marcotte, Jared Spool, Nicole Sullivan, Jeff Veen, Aarron Walter, and Luke Wroblewski.

If you can’t attend the sold-out show, which begins Monday, May 24, you can follow the live Tweetage via the souped-up, socially-enriched, aesthetically tricked out new version of A Feed Apart, whose lights go on this Sunday, May 23. Our thanks to developers Nick Sergeant, Pete Karl II, and their expanded creative team including Steve Losh and Ali M. Ali. We and they will have more to say about the project soon. For now, you can always read our 2009 interview with Nick and Pete or sneak a peek on Dribbble.

There’s also a Flickr photo group and an interstitial playlist, so you can ogle and hum along from your favorite cubicle or armchair.

See you around The Hub or right here on the world wide internets.

Categories
Browsers chrome CSS Design Fonts Google type Web Design Web Design History Web Standards webfonts webkit webtype

And now, Google

Web Fonts Part 9: Google enters the fray.

THE long-planned inevitable has now been announced. With open-source-licensed web fonts, web font hosting, and add-a-line-to-your-header ease of configuration, Google has joined Typekit, Font Squirrel, Ascender, Font Bureau and others in forever changing the meaning of the phrase, “typography on the web.”

The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and served by Google servers.

Oh, and Typekit? They’re in on it, and they couldn’t be more pleased.

Categories
A List Apart An Event Apart Announcements Appearances Community conferences CSS Design development editorial events Standards Usability User Experience UX Web Design Web Standards

AEA Minneapolis

An Event Apart Minneapolis 2010.

An Event Apart, the design conference for people who make websites, has posted its Minneapolis 2010 schedule. Join Eric Meyer and me and ten amazing guest speakers on July 26-27, 2010 for two great days of design, code, and content:

Monday, July 26

9:00am–10:00am

Put Your Worst Foot Forward

Jeffrey Zeldman, author, Designing With Web Standards, 3rd Ed.

Nothing teaches like failure. Web standards godfather and An Event Apart cofounder Jeffrey Zeldman shares some of his biggest blunders as a designer, entrepreneur, and creative director, and how each mistake taught him to be better at what he does. Study what the problem was and why the mistake seemed like the right answer at the time; see why it turned out to be a really bad idea after all; and learn the great positive lesson each mistake taught.

10:15am–11:15am

DIY UX: Give Your Users an Upgrade

Whitney Hess, Strategic Partner, Happy Cog

Have you fallen in love with your solution and forgotten the original problem? Are you certain that your product actually makes people’s lives better? Not every company can hire someone like me to help you listen to your users, so you’re gonna have to learn how to do some of this stuff yourself. I’ll show you techniques to find out who your users are, what they really need and how to go about giving it to them in an easy to use and pleasurable way. And it doesn’t have to bankrupt you or kill your release date.

11:30am–12:30pm

The CSS3 Experience

Dan Cederholm, author, Bulletproof Web Design and Handcrafted CSS

In a fast-paced hour of design ideas and techniques, learn how advanced CSS and CSS3 can add richness to your site’s experience layer, and discover the role CSS3 can play in enhancing interactivity.

12:30pm–2:00pm: LUNCH

2:00pm–3:00pm

Mobile First!

Luke Wroblewski, author, Web Form Design

More often than not, the mobile experience for a web application or site is designed and built after the PC version is complete. Learn the three reasons web applications should be designed for mobile first instead: mobile is exploding; mobile forces you to focus; and mobile extends your capabilities.

3:15pm–4:15pm

Learning To Love Humans—Emotional Interface Design

Aarron Walter, author, Building Findable Websites

Humans, though cute and cuddly, are not without their flaws, which makes it a challenge to design for them. By understanding how the wet, mushy processor works in these hairy little devils, you can design interfaces and web experiences that will have them hopelessly devoted to your brand. Aarron will introduce you to the emotional usability principle—a design axiom that identifies a strong connection between human emotion and perceived usability. Through real-world examples, you’ll learn practical interface design techniques that will make your sites and applications more engaging to the humans they serve.

4:30pm–5:30pm

Anatomy of a Design Decision

Jared Spool, Founder, User Interface Engineering

What separates a good design from a bad design are the decisions that the designer made. Jared will explore the five styles of design decisions, showing you when gut instinct produces the right results and when designers need to look to more user-focused research.

7:00pm–??pm

Opening Night Party

Sponsored by (mt) Media Temple

Media Temple’s opening night parties for An Event Apart are legendary. Join the speakers and hundreds of fellow attendees for great conversation, lively debate, loud music, hot snacks, and a seemingly endless stream of grown-up beverages. Venue details will be announced soon.

Tuesday, July 27

9:00am–10:00am

Everything Old Is New Again

Eric Meyer, author, CSS: The Definitive Guide, 3rd Ed.

Faux columns. Sliding doors. Image replacement. We rely on these techniques on a near-daily basis, but how will they be affected by the expanding vocabulary of CSS3? Will they be reworked, slimmed down, or abandoned altogether? An Event Apart cofounder and CSS mastermind Eric Meyer pulls some old standbys out of the toolbox and applies the capabilites of CSS3 to see how they can be made leaner, meaner, and more powerful.

10:15am–11:15am

Paranormal Interactivity

Jeremy Keith,
author, DOM Scripting

Interaction is the secret sauce of the web. Understanding interaction is key to understanding the web as its own medium—it’s not print, it’s not television, and it’s certainly not the desktop. Find out how to wield HTML, CSS, and JavaScript to craft experiences that are native to the web.

11:30am–12:30pm

Patterns, Components, and Code, Oh My!

Erin Malone, co-author, Designing Social Interfaces

Designing with patterns sounds like a great idea on the surface. But what does it really take to identify and write patterns? And just what do you do with them once they are created? Rounding out the pattern library with components and code can help prototyping and design move faster, leaving time to solve more challenging problems. This session will discuss the benefits of and issues that arise from designing with patterns, and show how to stay creative while doing so.

12:30pm–2:00pm: LUNCH

2:00pm–3:00pm

Message and Medium: Better Content by Design

Kristina Halvorson, author, Content Strategy for the Web

Designing for multichannel content delivery (mobile, anyone?) means an entirely new set of considerations and challenges for web professionals everywhere. Unfortunately for content creators, it’s nearly impossible to predict whether their writing will maintain impact and readability across each and every platform. But forget about the medium for a minute; it’s the message that matters most. We’ll learn how to identify your key business messages, how they inform your content strategy, and how they impact multi-channel content development and design.

3:15pm–4:15pm

A Dao of Flexibility

Ethan Marcotte, co-author, Handcrafted CSS and Designing With Web Standards, 3rd Edition

“The Way is shaped by use, but then the shape is lost.” Our sites are accessed by an increasing array of devices and browsers, and our users deserve a quality experience no matter how large (or small) their display. Are our designs ready? Explore sites that think beyond the desktop and have successfully adapted to their users’ habits. Ethan will also discuss how bring an extra level of craftsmanship to our page layouts, and revisit popular CSS techniques in this ever-changing environment.

4:30pm–5:30pm

How the Web Works

Jeff Veen, author, Art & Science of Web Design

Turns out that the fundamental principles that led to the success of the web will lead you there, too. Drawing on 15 years of web design and development experience, Jeff will take you on a guided tour of what makes things work on this amazing platform we’re all building together. You’ll learn how to stop selling ice, why web browsers work the way they do, and where Rupert Murdoch can put his business model.

Register through June 28 and save $100 off your conference pass. Hurry: tickets are first-come, first-served, and seating is limited.

Categories
Accessibility Advocacy Apple Applications apps art direction Browsers bugs Code Compatibility CSS Design HTML ipad iphone Layout Real type on the web Standards State of the Web The Essentials Tools W3C Web Design Web Standards webfonts webkit webtype zeldman.com

Opera loves my web font

And so do my iPhone and your iPad. All it took was a bit o’ the old Richard Fink syntax and a quick drive through the Font Squirrel @Font-Face Kit Generator (featuring Base 64 encoding and SVG generation) to bring the joy and wonder of fast, optimized, semi-bulletproof web fonts to Safari, Firefox, Opera, Chrome, iPhone, and Apple’s latest religious device.

Haven’t checked IE7, IE8, IE9, or iPad yet; photos welcome. (Post on Flickr and link here.)

What I learned:

? Even if manufacturer supplies “web font” versions with web license purchase, it’s better to roll your own web font files as long as this doesn’t violate the license.

Categories
CSS Design findability Search Site Optimization The Essentials

Of Google and Page Speed

Our visually and behaviorally rich sites are about to lose precious Google juice, WebSiteOptimization.com reports in a new piece titled Page Speed Factored into Google Search Rankings:

Google’s addition of a page speed signal to its search rankings algorithm officially links performance with search engine marketing. The loading speed of a web page affects user psychology in a number of ways, and now it can effect its rankings as well.

This back-to-basics message catches us at a funny time in web design history.

“Make more of less” has long been the norm

Most of us who’ve designed sites for quite a while, and who consider ourselves user- and standards-focused, have traditionally designed sites that loaded faster than the competition. We did it by using caching technologies (CSS instead of table layouts, linked instead of inline JavaScript, and so on). For many, many years, we also did it by keeping images to a minimum, using system fonts instead of pictures of type, CSS colors instead of faux backgrounds, and so on.

As the web audience grew, heavily trafficked sites became even more restrictive in their decorative flourishes, whether they cared about web standards or not. Thus Google, while happily using bad CSS and markup, exerted monk-like discipline over its designers. Not only were images out, even such details as rounded corners were out, because the tiny images needed to facilitate rounded corners prior to CSS3 added a tenth of a kilobyte to page weight, and a tenth of a kilobyte multiplied by a billion users was too much.

Of late, we have grown fat

Yet in the past few years, as wideband became the norm, every mainstream site and its brother started acting as if bandwidth didn’t matter. Why use 1K of web form when you could use 100K of inline pseudo-Ajax? Why load a new page when you could load a lightbox instead?

Instead of medium-quality JPEGs with their unimportant details painstakingly blurred to shave KB, we started sticking high-quality PNG images on our sites.

As these bandwidth-luxuriant (and not always beautiful, needed, or useful) practices became commonplace on mainstream sites, many advanced, standards-focused web designers were experimenting with web fonts, CSS3 multiple backgrounds, full-page background images, and other devices to create semantic, structurally lean sites that were as rich (and heavy) as Flash sites.

So now we face a dilemma. As we continue to seduce viewers via large, multiple background images, image replacement, web fonts or sIFR, and so on, we may find our beautiful sites losing page rank.

Read the report and watch this space.

Categories
An Event Apart Appearances CSS Design

Best AEA yet

Content strategist Kristina Halvorson prepares to address An Event Apart Seattle.

An Event Apart Seattle, our first three-day show, was our best yet. Not only was every speaker engaging and every topic relevant, but there was a thematic unity between presentations as leading-edge topics came to the fore. What came out at AEA Seattle 2010 will be the best practices of 2012. Fortunately, this year’s next four shows will feature many of the same speakers and topics.

Some highlights:

  • CSS3 media queries are the new hotness. They were explained and demonstrated to brilliant effect by Eric Meyer, Andy Clarke, and Ethan Marcotte. (More on this soon at A List Apart.)
  • Eric Meyer showed how to use media queries and box sizing to create adaptable layouts with a single stylesheet and a few rules. By adaptable layouts, I mean ones that switch from 3-column to 2-column to iPhone single column as the user resizes browser window. It even works in IE if you use a JavaScript scrim. The room gasped! The eternal problem—how to present different formats according to device size—now appears solved by web standards.
  • Luke Wroblewski’s extraordinary “Mobile First” presentation changed the way I think about web design. Luke showed how the mobile versions of many sites are strong, smart, and absurdly easy to use, while the “desktop” versions of these same sites suck. For instance, the mobile version of as well-known travel site gives me, the customer, a few big buttons making it easy for me to check in, check the status of my flight, and do one or two other things I actually want to do. By contrast, the desktop version is a confusing hodgepodge of ads, clutter, and Flash, with seemingly dozens of competing navigation aids, none of which offers me the opportunity to do what I need to do on the site. It isn’t that a different team is designing the mobile versions; it’s that the discipline of mobile forces any team to create lean, user-focused interfaces. Conceiving the mobile version first gives us the opportunity to create powerful sites that never lose sight of the person they’re designed for.

Relive the memories on A Feed Apart and Flickr and join us at the next An Event Apart show!

Categories
cities Code Community conferences content content strategy CSS Design development eric meyer Happy Cog™ HTML HTML5 Seattle speaking Standards State of the Web Tools Usability User Experience UX Web Design Web Standards Zeldman

An Event Apart Seattle

Above: Part of my deck for “Put Your Worst Foot Forward,” a talk on learning from mistakes at An Event Apart Seattle 2010.

Greetings, web design fans. I’m in Seattle doing the final prep for three days of kick-ass design, code, and content. Starting Monday, April 5 and running through Wednesday, April 8, An Event Apart Seattle 2010 features 13 great speakers and 13 sessions, and has been sold out for over a month. A Day Apart, a special one-day learning experience on HTML5 and CSS3, follows the regular conference and is led by Jeremy Keith and Dan Cederholm.

The all-star cast includes …

… And that’s just the first day.

There are also two parties (sponsored by our good friends at Media Temple and MSNBC) and seven more great speakers with topics of interest to all standards-based web designers.

If you can’t be with us, follow the Twitter stream live on A Feed Apart.

Categories
CSS Design Fonts Real type on the web type

Friday Font: TeeFranklin

TeeFranklin, an alternative to Helvetica and Franklin

Gloriously available for @font-face embedding, TeeFranklin by Suomi Type Foundry at Fontspring is a family of 14 weights/styles that may be perfect when you want to offer something a tad different from Helvetica and Franklin while retaining many of the qualities that make those fonts great.

Categories
Code content content strategy creativity CSS Design Fonts Standards State of the Web style type User Experience webfonts webtype

Model Site

Blissfully Aware site redesign.

Web designer Joshua Lane, currently best know for doing fancy web stuff at Virb.com, has overhauled his personal site in ways that are aesthetically pleasing and visually instructive.

Like all good site redesigns, this one starts with the content. Whereas the recent zeldman.com redesign emphasizes blog posts (because I write a lot and that’s what people come here for), Lane’s redesign appropriately takes exactly the opposite approach:

There is a much smaller focus on blog posts (since I don’t write often), and a much larger focus on the things I do elsewhere (Twitter, Flickr, Last.fm etc). Individually, I don’t contribute a great deal to each of those services. But collectively, I feel like it’s a good amount of content to showcase (as seen on the home page). And something that feels like a really good representation of “me.”

Not one to ignore the power of web fonts, Lane makes judicious use of Goudy Bookletter 1911 from The League of Movable Type, an open-source type site founded by Caroline and Micah, featuring only “well-made, free & open-source, @font-face ready fonts.” (Read their Manifesto here.)

The great Barry Schwartz based his Goudy Bookletter 1911 on Frederic Goudy’s Kennerley Oldstyle, a font Schwartz admires because it “fits together tightly and evenly with almost no kerning.” Lane inserts Schwartz’s open-source gem via simple, standards-compliant CSS @font-face. Because of its size, it avoids the secret shame of web fonts, looking great in Mac and Windows.

But considered type is far from the redesigned site’s only nicety. Among its additional pleasures are elegant visual balance, judicious use of an underlying horizontal grid, and controlled tension between predictability and variation, ornament and minimalism. Restraint of color palette makes photos, portfolio pieces, and other featured elements pop. And smart CSS3 coding allows the designer to play with color variations whenever he wishes: “the entire color scheme can be changed by replacing a single background color thanks to transparent pngs and rgba text and borders.”

In short, what Lane has wrought is the very model of a modern personal site: solid design that supports content, backed by strategic use of web standards.

Categories
Acclaim Advocacy Appearances better-know-a-speaker content creativity CSS Design HTML Interviews speaking The Profession User Experience Web Design Web Design History Web Standards Zeldman

Laying Pipe

The Pipeline inaugural podcast

Dan Benjamin and yours truly discuss the secret history of blogging, transitioning from freelance to agency, the story behind the web standards movement, the launch of A Book Apart and its first title, HTML5 For Web Designers by Jeremy Keith, the trajectory of content management systems, managing the growth of a design business, and more in the inaugural episode of the Pipeline.

Categories
An Event Apart Announcements Appearances CSS Happy Cog™ HTML5 Web Design Web Standards webtype

Three Days in Seattle

Dan Cederholm holds forth on the virtues of coffee and CSS3 at An Event Apart.

Three, count ’em, three days of design, code, and content. That’s what we’ve got lined up for you in beautiful Seattle, Washington. Including a special one-day workshop on HTML5 and CSS3, led by Jeremy Keith and Dan Cederholm (pictured above, extolling the virtues of caffeine and CSS).

The complete schedule for An Event Apart Seattle 2010—including A Day Apart with Jeremy Keith and Dan Cederholm—is now available online for your listening and dancing pleasure.

Photo: Warren Parsons.

Categories
An Event Apart Community conferences CSS Design Happy Cog™ industry San Francisco Standards State of the Web The Profession User Experience UX Web Design Web Standards

A Feed Apart

Live from San Francisco, it’s An Event Apart, for people who make websites. If you can’t join us here today and tomorrow, enjoy the live feed, designed and coded by Nick Sergeant and Pete Karl.

Also:

Composed at The Palace Hotel. Short URL: zeldman.com/?p=3208.