An Overview of The CSS Summit
Aug
7
To put it bluntly, the CSS Summit on July 18th was a mind-melting, daylong marathon of cramming more CSS knowledge into your brain than you could ever stuff into a single head tag.
Sounds great, right? It gets better.
The Summit Series is entirely online, meaning you can skip the hotel reservations, the 5-hour flight delays and those little bags of peanuts the airlines give you while they secretly lose and/or destroy your luggage.
Our office purchased the meeting pass and watched the Summit in our conference room, but attendees are certainly allowed to participate from the comfort of their own home or office.
The CSS Summit, the first installment of the Summit Series put together by Christopher Schmitt and Environments for Humans, featured CSS-specific presentations from some of the top names in the business like Molly Holzschlag, Dave McFarland, Jason Cranford-Teague, and others.
Here’s a summary of some of the key takeaways from each of the speakers at the conference:
CSS and Troubleshooting IE6 with Kimberly Blessing
“Support does not mean that everybody gets the same thing”. Kim led her presentation off with this quote because it’s such an important point to remember when troubleshooting cross-browser inconsistencies. *cough* IE6 *cough*
The goal when troubleshooting IE6 is not to match the look pixel-for-pixel, but rather to try to preserve a similar and enjoyable user experience across all browsers. In order to do this you need to do determine what level of support you are going to give IE6, decide which factors will influence when support for IE6 will end, and document a technical strategy to cover coding techniques for dealing with IE6.
Kimberly also mentioned End of Life messages (EOLs), which are basically scripts that display a message prompting IE6 users to upgrade their browser. She mentioned a few sites that use this technique like YouTube and Facebook, but she didn’t officially condone them
Object-oriented CSS with Nicole Sullivan
Nicole’s three-prong web development philosophy is simple:
- Work out of respect for the design
- Designers make our code beautiful and clever on the outside as it is on the inside
- Respect the original design vision. Consistent design = clean code = fast site
Object-oriented CSS is all about leaner code and easier maintenance. Elements like headings should be treated as the most basic reusable building blocks of a site. Anytime you can reuse them, you’re getting a performance freebie. You should avoid location-dependent style because it can easily lead to code bloating down the road.
One great suggestion to promote lean code Nicole shared was to create modules. In a module you would separate an object’s code into two parts: 1. A container and the content and 2. The structure and skin. One class solves the browser bugs, positioning, presentational elements and generally does the heavy lifting of CSS. The other class “skins” the object, adding the style. The goal is very predictable skins in which the complexity is absorbed.
Tomorrow’s CSS3 Today with Dave McFarland
Dave covered some of the highlights of CSS3 including advanced CSS3 selectors as well as some of the CSS3 properties that you can begin using today. the key takeaway frmo his talk was that while the modern browsers (Safari 4, Firefox 3, Chrome, etc…) are beginning to ship with increasing CSS3 support, these versions of the browsers simply don’t have a great enough market share to warrant widespread use of CSS3.
In short, use CSS3 at your own risk. If you believe your target audience is likely to use browsers with adequate CSS3 support, then using CSS3 properties and selectors to enhance to your designs may not be a bad idea. However, if your analytics show that many of your users are still browsing with IE6/IE7 and older versions of other popular browsers, then it’s probably only going to hinder your sites usability.
The key is to use CSS3 sparingly to progressively enhance your designs while making sure that you don’t alienate or hinder your users that aren’t using a modern browser with CSS3 support. For more information on CSS3 selectors and properties, visit http://www.css.info or www.w3.org/Style/CSS/current-work.
CSS & Fluid Width Typography with Jason Cranford-Teague
The main focus of Jason’s presentation was the future of web typography. Scalable Inman Flash Replacement (sIFR) has been the popular pick for accessible custom typography since its release in 2005, but its drawbacks, namely its requirement of both Flash and javascript to be enabled in the user’s browser, clearly leave the door open for something better to come along.
Enter the @font-face rule.
The implementation is simple. Embed the font of your choice with the @font-face rule, then call it with the font-family property like you would any standard browser font. The problem lies in the file formats. Modern browsers, besides IE, are beginning to support the Trutype (.ttf) and OpenType (.otf) formats (IE only supports Embedded Open Type .eot). However, fonts are considered intellectual property meaning, of course, that embedding them through @font-face is subject to EULAs (End User License Agreements).
Another stalemate for the time being? Perhaps, but these are exciting times for the future of web-native fonts. Jason pointed to Small Batch, Inc.’s Typekit service, Kernest.com, and Cufon as evidence that a new era in web typography is coming soon.
CSS & Flexible Layouts with Zoe Gillenwater
Why bother with flexible layouts? Zoe Gillenwater asks, “why not?”
The benefits of flexible layouts are pretty clear: they respect the user’s preferences, they increase usability, readability and accessibility, they maximize typographic control, and they take advantage of screen real estate while preserving design proportions.
Reaping these benefits, however, takes a good deal of planning. It’s important to realize that not every comp can be successfully turned into a liquid or elastic layout. You have to design the site differently from the start, taking into consideration which features are not compatible with a fluid-width layout such as fixed heights for anything containing text.
When putting together a site with a flexible layout there are a few general techniques to stay away from: irregular shapes defining a text area, text matched with images that can’t expand, and horizontal alignment across columns, just to name a few. Instead, try using scalable images or images that can slide along with the resizing of the window.
CSS & Coding Layouts with Stephanie Sullivan
Great design is all about overcoming challenges and making things work. A website is made up of its content; the information, sales, marketing, etc… If the content is the core of any website, doesn’t it make sense the layout of that content is key in any website’s design?
Think about these questions when drawing up your next wireframe or comp: How do you best present this content? How do you want your user to interact with this content? Make sure to be logical and create a flow through the site.
CSS & The Open Web: A Brave New World with Molly Holzschlag
Last, but certainly not least, was Molly Holzschlag. Author of over 30 books on Web Design and related topics, Molly brought her experience in to discuss the ever-growing importance of open standards on the web. As the popularity of web apps continues to grow, standards are becoming more and more vital.
Designing with a foundation in standards not only helps to ensure more positive user experiences across the board, but can also prove to be cost effective. Some of the benefits of designing with standards are that it provides infrastructure and process, it offers a variety of content delivery options and allows for effective scaling and growth.
Next Up: The DIY Summit
If you missed out on the CSS Summit, don’t worry, the Summit Series continues on Sept. 17. with the DIY Summit. According to the event description, the DIY Summit is “for those who go it alone, designing and managing entire websites by themselves, either by choice or by chance. Whether they are freelancers or in-house webmasters in a larger company or university, our goal for the DIY Summit is to streamline the workflow for those who don’t have a team to fall back on.” Register now! You won’t be sorry.
Leave a Reply