Hardboiled Web Design
November 2nd, 2010 by Matt Haff
Andy Clarke, author, Transcending CSS
Take an uncompromising look at how to make the most from modern design tools and browsers, up-to-date techniques and processes. In this practical, design-focused talk, Andy will discuss the “how” as well as the “why,” and challenge your preconceptions to help you make better work for the web. Learn the most modern, forward-moving, and sometimes experimental CSS techniques, and why a forward looking approach to CSS will pay real dividends.
What’s Holding Us Back?
Misconceptions, Preconceptions…
When will it be safe to use this awesomeness in our stuff? When will it be standard? Implementation comes before the standard…not the other way around.
There is no one CSS3 specification – the priorities are not for helping us, it’s all about the browsers priorities and what gives them the competitive edge.
Progressive Enhancement - held up as the “ideal way” to build websites… This came into play 7 years ago!
“It builds for the least capable devices first, then moves on to enhance those documents to allow a richer experience for those users with modern graphical browser software.” – Steve Champeon
We should be designing for the best browsers first, and then thinking intelligently about what should happen when or if the website is accessed by another browser that doesn’t support particular features… This way we aren’t limiting ourselves by trying to reach up from the least capable device.
We should be using our skillsets to create amazing designs and experiences based around what the newest most advanced browser support. This is where Graceful Degradation comes in… I mean think about it, when you are adding your fonts through CSS, you put the best font first and the crappy stuff later!
Hardboiled HTML
Just use the HTML to describe the base of the content, not the design. This allows us to be much more flexible with our designs.
Using modernizr you can use HTML5 and CSS3 in all your sites even those that don’t support it yet.
Using :nth-of-type you can make sure it works regardless if more content gets added in that would normally jack up :nth-child.
Use selectivizr to add CSS3 pseudo classes to IE 6-8 just by including the JS on your page.
What Does Browser Testing Mean?
It raises the question of what we show our bosses, our clients. No longer do we need to waste our time trying to make different browsers look identical. We need to reach for the most advanced browser, and gracefully degrade to the older browsers.
There are ways to work smarter, without being limited by the browsers and the rules that we have put on ourselves. Standards should be there to inform what we do, not to constrain what we do.
Web geeks are the only ones that look at the site in multiple browsers…Nobody else cares about it! Most of them don’t even know there is more than one browser out there.
