Category: CSS3

Categories
Browsers bugs Code CSS CSS3 Design HTML interface javascript launches Layout maturity Standards State of the Web Tools

Finally, cross-browser visual control over forms.

Now we have something else to be thankful for. Nathan Smith of Sonspring has created a library that gives designers and developers “some measure of control over form elements, without changing them so drastically as to appear foreign in a user’s operating system.” Smith calls his new library Formalize CSS:

I’ve attempted to bridge the gap between various browsers and OS’s, taking the best ideas from each, and implementing what is possible across the board. For the most part, this means most textual form elements have a slight inset, and all buttons look consistent, including the button tag.

For more, including demos, options, screenshots, thanks, and the library itself, read Smith’s write-up at SonSpring | Formalize CSS. Hat tip and happy Thanksgiving to my good friend Aaron Gustafson for sharing this gem.

Categories
A List Apart CSS CSS3

CSS3 & CSS 101 in A List Apart 318

In Issue No. 318 of A List Apart for people who make websites, Noah Stokes (@motherfuton) offers Ye Compleat Refresher Course on CSS Positioning, and we proudly offer an excerpt from Chapter 2 of Dan (@simplebits) Cederholm’s CSS3 for Web Designers (A Book Apart, 2010, published today).

Categories
A Book Apart CSS CSS3 Publications Publishing

A Book Apart No. 2: CSS3 For Web Designers, by Dan Cederholm

CSS3 For Web Designers by Dan Cederholm

DAN CEDERHOLM IS THE FIRST front-end developer I’ve ever worked with who got everything right. Typically when one person is designing in Photoshop and another is converting that design to code, the coder makes at least one or two decisions that the designer will feel moved to correct. For instance, the designer may have intended a margin of 26px, but the coder writes 25px. Or the designer establishes a certain distance between subhead and paragraph, then accidentally changes that distance in a single instance during a Photoshop copy-and-paste error, and the coder slavishly copies the mistake. No front-end developer, however good, reads minds, right?

Wrong. Dan Cederholm reads minds. When we have hired him to code other people’s visual designs, he gets everything right, including the parts the designer got wrong. Maybe that’s because Dan is not only a front-end developer, he is also an extremely gifted designer with a strong personal vision and style, which you can see by visiting work.simplebits.com. Not only that, Dan invariably translates a designer’s fixed Photoshop dimensions into code that is flexible, accessible, and bulletproof. That’s only to be expected, of course, as Dan is a leading and pioneering advocate of accessible, standards-based design and the author who coined the phrase “bulletproof web design.”

Designer, coder, pioneer. That would be plenty of achievement for anyone, but it happens that Dan is also a born teacher and a terrifically funny guy, whose deadpan delivery makes Steven Wright look giddy by comparison. Dan speaks all over America and the world, helping web designers improve their craft, and he not only educates, he kills.

And that, my friends, is why we’ve asked him to be our (and your) guide to CSS3. To be sure, there are (a few) other high-end CSS gurus who write beautifully and wittily, and whom we might have approached. But most are not designers. Dan is, to his core. He dreams design, bleeds design, and even gave the world a new way to share design.

You couldn’t ask for a smarter, more design-focused, more detail-obsessed guide to the smoking hot newness and conceptual and browser challenges of CSS3. So sit back, relax, and enjoy the trip:

Categories
A List Apart Acclaim An Event Apart Announcements Applications apps Authoring Best practices Browsers Code Community conferences content creativity CSS CSS3 Design HTML5 Ideas industry javascript Microsoft Scripting Standards State of the Web UX W3C Web Design Web Design History Web Standards

Awesome web apps in 10k or less

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.

Read about the winning entries: 10K Apart – IEBlog.

Categories
Blue Beanie Day books Browsers creativity CSS CSS3 Design Designers DOM DWWS E-Books editorial Happy Cog™ HTML HTML5 Ideas industry tweets twitter Voting W3C Web Design Web Design History Web Standards webtype XHTML Zeldman

Blue Beanie Day Haiku Contest – Win Prizes from Peachpit and A Book Apart

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.

Write a web standards haiku (like that one), and post it on Twitter with the hashtag #bbd4 between now and November 30th—which happens to be the fourth international Blue Beanie Day in support of Web Standards.

Winning haikus will receive free books from Peachpit/New Riders (“Voices That Matter”) and A Book Apart.

Ethan Marcotte, co-author of Designing With Web Standards 3rd Edition and I will determine the winners.

Enter as many haikus as you like. Sorry, only one winning entry per person. Now get out there and haiku your heart out!

See you on Blue Beanie Day.

P.S. An ePub version of Designing With Web Standards 3rd Edition is coming soon to a virtual bookstore near you. Watch this space.

Categories
CSS CSS3 Design HTML5 software Standards Tools

BBEdit Revised, Reviewed.

Jeffrey Zeldman Presents

I RECENTLY ATE dinner with a friend I hadn’t seen in 20 years. If you are in a position to do likewise, I highly recommend the experience. So much had changed, yet so much was still wonderfully the same. We were still the same joyously creative young fools, yet time had seasoned us. No longer poking the world with sharp sticks, we had found a place in it. I was pleasantly reminded of this existentially thrilling encounter while opening a pre-release version Bare Bones Software’s BBEdit 9.6 update—released to the public as of 12:19 EDT today.

A beloved and venerable HTML and text editor for Macintosh, BBEdit is tailored to the needs of web developers and designers who write their own code. Its no-frills interface consists of a document window in which you write your code; a side drawer that lists all pages you’re working on, enabling you to navigate between them; a stack of buttons (many with drop-downs) you can push to perform tasks like choosing and inserting a DOCTYPE, wrapping chunks of copy in paragraph tags, checking syntax and links for errors, and more; and a report window where you can view your test results and correct your errors.

Previous versions of BBEdit were updated with the precepts of Designing With Web Standards in mind, and the current version takes some of its feature cues from Jeremy Keith’s HTML5 For Web Designers. (When I say the software takes its cues from Mr Keith’s book, I mean that literally; Bare Bones Software head Rich Siegel and his team used HTML5 For Web Designers to help develop some of their testing suites.)

Given these antecedents, it’s no surprise that the new version adds support for HTML5, including published element lists from WHATWG and W3C; CSS3 properties, including vendor-specific properties for Mozilla, Safari/WebKit, and Opera browsers; a new contextual code-hinting feature tied to your chosen doctype that includes as-you-type popups for allowed elements, attributes, and (in CSS documents) style properties; and Bare Bones’s own offline validator (HTML 3.2 through HTML5, XHTML inclusive), baked right into BBEdit.

Using BBEdit 9.6 this morning, I was able to quickly update my site from XHTML 1.0 to HTML5. The syntax checker enabled me to use my preferred coding style (i.e. XHTML style) and the product identified outmoded attributes (“language=JavaScript”) and elements (“rev”), enabling me to correct them right in the error report window. It took no time at all.

BBEdit 9.6 also found the errors in WordPress plug-ins like fbLike Button and TweetMeme Retweet Button, enabling me to make an informed decision to stop using the former plug-in and helping me edit the PHP files of the latter plug-in so that it now validates here.

BBEdit 9.6 also offers increased performance for several common
operations, including search, and includes several enhancements and
refinements, plus fixes for reported issues. Detailed information on
all of the changes and improvements in BBEdit 9.6 can be found on the Release Notes page.

After using the new version for two days, I am switching back to BBEdit as my full-time coding platform.

BBEdit 9.6 is available free of charge to all registered BBEdit 9 customers from the Bare Bones Software website on the BBEdit Updates page. For more information, or to download a fully functional demo, visit Bare Bones Software’s site.

Categories
Accessibility Adobe Advocacy Apple Applications apps architecture Authoring Best practices Browsers business Code content strategy CSS3 Design Designers development editorial Happy Cog™ HTML HTML5 industry javascript Platforms Publications Publishing Real type on the web Standards State of the Web The Essentials The Profession W3C Web Design Web Design History Web Standards webfonts webtype Zeldman

The future of web standards

Jeffrey Zeldman on the future of web standards.

“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?”

—The Future of Web Standards by Jeffrey Zeldman

Originally written for .net magazine, Issue No. 206, published 17 August in UK and this month in the US in “Practical Web Design” Magazine. Now you can read the article even if you can’t get your hands on these print magazines.

See also: I Guest-Edit .net magazine.

Categories
A List Apart Code CSS CSS3 Design Happy Cog™ HTML HTML5 Usability User Experience

ALA 314: Web Forms Magic

Issue No. 314 of A List Apart For People Who Make Websites is all about your form.

Ryan Seddon shows how to reduce errors and guide users to success via new methods made possible by HTML5 and CSS3. Harness HTML5 form input types and attributes to set validation constraints to check user input, and use CSS3’s new UI pseudo-classes to style validation states, making form completion quick and effortless.

And Luke Wroblewski explains how accordion forms increase completion rates and user happiness by dynamically showing and hiding sections of related questions as people complete the form—allowing them to focus on what matters and finish quickly. Learn how your smallest design decisions affect completion speed, which design choices make these innovative forms feel familiar and easy—and which make them feel foreign and complex, leading people to make errors.

Illustration by Kevin Cornell for A List Apart Magazine.

Categories
A List Apart An Event Apart Announcements Appearances Applications architecture art direction Best practices Browsers chrome Code CSS CSS3 Damned Fine Journalism Design Designers editorial Education engagement glamorous Happy Cog™ HTML HTML5 Ideas industry interface ipad iphone launches Layout photography Press Publications Publishing Real type on the web Responsive Web Design Standards State of the Web The Big Web Show The Essentials The Profession This never happens to Gruber type Typography User Experience UX W3C Web Design Web Design History Web Standards webfonts webkit Websites webtype writing Zeldman zeldman.com

I guest-edit .net magazine

Web 2.1. Zeldman guest-edits .net magazine.

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.

Categories
Browsers bugs Code Compatibility CSS CSS3 development Free Happy Cog™ HTML HTML5 Ideas industry links Standards State of the Web The Essentials The Profession Tools Web Design Web Design History Web Standards

HTML5, CSS3 default templates

Free for use in all web projects, professional or personal, HTML5 Reset by Monkey Do! is a set of HTML5 and CSS templates that jumpstart web development by removing the styling native to each browser, establishing basic HTML structures (title, header, footer, etc.), clearing floats, correcting for IE problems, and more.

Most of us who design websites begin every project with bits and pieces of this kind of code, but developer Tim Murtaugh, who created these files and who modestly thanks everyone in the universe, has struck a near-ideal balance. In these lean, simple files, without fuss or clutter, he manages to give us the best-practices equivalent of everything but the kitchen sink.

Tim Murtaugh sits beside me at Happy Cog, so I’ve seen him use these very files (and earlier versions of them) to quickly code advanced websites. If you’re up to speed on all the new hotness, these files will help you stay that way and work faster. If you’re still learning (and who isn’t?) about HTML5, CSS3, and browser workarounds, studying these files and Tim’s notes about them will help you become a more knowledgeable web designer slash developer. (We need a better name for what we do.)

My daughter calls Mr Murtaugh “Tim the giant.” With the release of this little package, he earns the moniker. Highly recommended.

Categories
A List Apart An Event Apart Appearances Best practices better-know-a-speaker conferences content content strategy creativity CSS CSS3 Curation Design Designers engagement eric meyer Happy Cog™ HTML HTML5 Ideas Images industry Minneapolis people photography Responsive Web Design Typography Usability User Experience UX W3C Web Design Web Standards webfonts Zeldman

Minneapolis Remembered

Eric Meyer at An Event Apart Minneapolis - photo by Jared Mehle

The show’s over but the photos linger on. An Event Apart Minneapolis was two days of nonstop brilliance and inspiration. In an environment more than one attendee likened to a “TED of web design,” a dozen of the most exciting speakers and visionaries in our industry explained why this moment in web design is like no other.

If you were there, relive the memories; if you couldn’t attend, steal a glance at some of what you missed: An Event Apart Minneapolis: the photo pool at Flickr.

Next up: An Event Apart DC and San Diego. These shows will not be streamed, simulcast, or repackaged in DVD format. To experience them, you must attend. Tickets are first-come, first-served, and every show this year has sold out. Forewarned is forearmed; we’d love to turn you on.

Photo: Jared Mehle.

Categories
Authoring CSS CSS3 HTML HTML5

HTML5 and CSS3 virtual classes

IF YOU’RE BONING UP on HTML5 and CSS3, you’ll want to consider two remarkable learning experiences taking place live on the web this summer:

Learn HTML5 with John Allsopp

Here is a great educational opportunity that’s also an amazing value. Experience eight structured sessions, two live Q&A sessions, private discussion forum, practical exercises and more, from one of the world’s best and most experienced teachers of standards-based design. All for just US $9.95. That is not a typo. Live classes start 26 July 2010.

Learn CSS3 with John Allsopp

And the hits keep on coming. This virtual classroom led by Allsopp includes twelve structured sessions, three live Q&As, and more, for just $14.95. It’s the perfect complement to any other reading or training you may be doing, at a price that’s impossible to beat. Classes start 16 August.

A Book Apart Discount

As if this deal wasn’t great enough, participating in either course earns you a coupon code good for a 20% discount off Jeremy Keith’s HTML5 For Web Designers, the A Book Apart inaugural pub that’s taking the web design world by storm. The discount is good through September 1st. No, you can’t apply it retroactively to a book you’ve already purchased. (So if you’ve already bought the book, buy a second copy—one for home, one for office. Or get it for a friend. Or don’t buy it. What matters is your health. Are you eating enough? You look thin.)

Categories
automattic Best practices Big Web Show clients Code CSS CSS3 Design Interviews

Nicole Sullivan on CSS

CSS troubleshooter Nicole Sullivan on The Big Web Show.

Update! Episode 11 featuring Nicole Sullivan on CSS optimization is now available for your listening and viewing pleasure at 5by5.tv.

If writing good CSS is tough, fixing someone else’s (or multiple someones’) bad CSS is a rarified art calling for the skill of a surgeon, the sensitivity of a Stradivarius, the patience of a saint, and the diplomacy of a Zheng He. Nicole Sullivan is one of the best and most successful of that small pool of CSS troubleshooters. Dan Benjamin and I are thrilled to have her as our guest on Episode 11 of The Big Web Show. Join us today, 8 July 2010, for the live taping at 1:00 PM ET.

Nicole is an evangelist, front-end performance consultant, CSS Ninja, and author. She started the Object-Oriented CSS open source project, which answers the question: how do you scale CSS for millions of visitors or thousands of pages? She also consulted with the W3C for their beta redesign, and is the co-creator of Smush.it, an image optimization service in the cloud.

Nicole is passionate about CSS, web standards, and scalable front-end architecture for large commercial websites. She speaks about performance at conferences around the world, most recently at An Event Apart, The Ajax Experience, ParisWeb, and Web Directions North.

The Big Web Show is taped live in front of an internet audience every Thursday at 1:00 PM ET on live.5by5.tv. Edited episodes can be watched afterwards (often within hours of taping) via iTunes (audio feed | video feed) and the web.

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.