Thursday, May 27, 2010

CSS3 Night at Refresh

Josh Clark on Web Designers and CSS3


Some themes are emerging from the sessions I attended at the WebVisions conference, my first week of experience with the IPad, and two professional meetings I attended at the Portland Incubator Experience. They all seem to be dealing with parallel and intersecting tracks of mobile computing getting "bigger than than the government" (to quote Erykah Badu) and web and application standards in a very interesting time of transition. Refresh is a likely place to see this intersection at work. There are almost seventy Refresh groups around the world all dedicated to "refresh the creative, technical, and professional culture of New Media endeavors in their areas. Promoting design, technology, usability, and standards."


The hour spent at the Portland May meeting featuring a presentation by Eugene web developer Josh Clark certainly echoed the overriding mission statement of the group as well as their manifesto's aspirations to share knowledge, talent, and ideas. Clark focused on CSS3, the latest emerging standard coming out of the W3C for cascading style sheets usage. Many CSS3 features are already supported by web browsers, but, as I already had heard in WebVisions sessions, a big holdout is compatibility for Internet Explorer. Unless one is forced into a MS IE environment in your worklife (as they are at Intel) or a user who has not discovered the opportunities that Firefox or Safari have to offer the user, one might not be aware of the power that MS still wields in the browser world. In otherwords, there is still a heck of a lot of IE out there, and a lot is in the older versions.

Clark takes a pragmatic but a kind of assertive approach here. He feels that attempting to style to universal display should not be a full on modus operandi for the web designer. He states that the notion that all web pages need to be created to look the same in all browsers is impossible and will never be attained. Additionally, he believes that CSS 3 will never be fully implemented as a standard, in fact, CSS 2.1 has never been implemented in a visual fashion. And he doesn't believe that web developers should wait for the W3C, which he describes as "a political nightmare."

So what are the how and why guidelines for the web developer believes wants to start utilizing CSS3 declarations for border radius, transforms, transitions, animations and so forth? Clark provided two sets of thoughts in this regard, the ideas for many he credited to presentations by web standards gurus and advocates like Andy Clarke and Dan Cederholm he attended at A Event Apart

First he laid out four benefits designers and developers should consider by going ahead and moving forward towards CSS3.

  • Good implementation allows us to leverage technology without killing the experience of our browser

  • CSS3 rewards standards compliant browser use by enriching the experience

  • Allows us to move towards the future of the web

  • Cheaper production costs


Browser adoption of CSS3 is going to get better instead of worse, Clark says. Three browsers (Safari, Chrome, Firefox) already do a good job of adopting CSS3 standards. He sees designers playing a role to leverage the browser manufacturers to adopt more quickly or "provide and upsell push towards compliance. Production costs will also be impacted because of economic CSS3 code will put less push on the server and browser.

The designer, of course, has the primary responsibility of meeting the needs of their client. Yet Clark pointed out that a designer/developer can Clark then pointed out what he felt are the four strategies a designer can take in using CSS3.

  • Use CSS3 however and whenever

    But Clark underscored the fact that this approach will work best for experimental web sites and for audiences who are mainly using browsers supported by the WebKit browser engine.

  • Never use CSS3

    For a website that will see a large amount of Internet Explorer browser traffic, this may be the best approach.

  • Use CSS3 appropriately and responsibly

    This approach is stated by Clark as "the logical conclusion." He is very supportive of sites that have nice interactive features and a sense of whimsey, but don't detract from the experience that users may have that are not using the most CSS3 friendly browsers. He gave two examples the Sliding-vinyldemonstration at zurb.com and the interactive features promoting Andy Clarke's For A Beautiful Web DVD tutorials.


Clark also talked about the concept of graceful degradation when it comes to browser standards and web designs. He promotes the idea the practice where the design community will "use our best designs with the tools we have available. Build what we are are going then deal with the IE issue." He promotes the concept of "hardboiled design" that is developed by Andy Clarke taking on an attitude in design similar to that of detectives in pulp novels. Clark can see both sides of this issue, having had more freedom as an independent designer where he interacted with smaller companies and non-profits to where he needs to be more conscious of designing for the IE base with his work as a designer for a software developer. But he showed that CSS3 can be incorporated without impacting one's IE experience.

Clark concluded the formal part of his presentation with code examples for tranforms, transitions, and animations as well as examples of how they are used in sites like Things We Left on the Moon But most impressive was the discussion portion of the evening. There were about a dozen folks in the audience and all made some kind of contribution to the practice and conditions of CSS3 usage, including a long discusion about Microsoft's slowness in transitioning to CSS3 standards.

If nothing more, one left the session with the same answer to "Do Websites Need To Look Exactly The Same In Every Browser?"" that one would have when they click on the link for the question raised by that domain name. But Answering the question in practice is one that the designer/developer needs to ponder with each project they work on.

No comments:

Post a Comment