responsive themes and ID

Jay Thornton (wcfay, Collective Bias, slides, all presentations)

Responsive design is about building a design that reacts to the screen size of any browser. Answer the question “What if I don’t know what size screen all users will be using?” impacts your design thinking. Continue reading “responsive themes and ID”

compass/sass/less: tips, tricks, and best practices

[ SXSW Bios ] #sxsw #compass (Archive)

Brief

Sass & Compass are quickly becoming a standard for authoring and maintaining the styles (CSS) of many of popular websites. A derivative of these languages may someday replace CSS as the default language for styling html. As with using any new technology, a full understanding of how it works, how to use it efficiently, pitfalls to avoid, and patterns for success will benefit any user. Continue reading “compass/sass/less: tips, tricks, and best practices”

mad css3 skillz

In this one hour tutorial workshop, you will become skilled in CSS3 selectors, transforms, transitions and animations. We will work through an animation examples, creating different paths, timing and effects, exploring linear gradients opacity, alpha transparency, border-radius, text-shadows, transforms, transitions and mostly animations. The code example will be provided participants can play with the code, going from novice to skilled without heavy note taking.

[ SXSW Bios ] #sxsw #css3 (Archive)

Brief

In this one hour tutorial workshop, you will become skilled in CSS3 selectors, transforms, transitions and animations. We will work through an animation examples, creating different paths, timing and effects, exploring linear gradients opacity, alpha transparency, border-radius, text-shadows, transforms, transitions and mostly animations. The code example will be provided participants can play with the code, going from novice to skilled without heavy note taking. Continue reading “mad css3 skillz”

get the look–use @font-face and CSS3 like the stars

A design system is anything that turns an idea into a form (a specific embodiment). Design systems can be channel-based (print design system, web design system, mobile design system, etc.)—different in the details but still sourced from the same idea.

Unfortunately, we tend to go from an original form to a new form without a new design system tied back to a core idea. Don’t imitate forms: translate ideas.

[ SXSW Bios ] #sxsw #sexytype (Archive)

Brief

A rounded sans-serif with a letterpress look? A chunky slab serif in three-dimensional perspective? Grungy, patterned, or even blurred text? These effects (and more) used to be the domain of print designers or gigantic, inflexible PNG images. But no more! Using CSS3 and @font-face, I’ll show you how to get these looks with live demonstrations and discussion.With growing support for @font-face and CSS3 in all of the mainstream browsers, advanced typographic and visual effects are now possible on the web. Even better, the text remains SEO friendly and easily editable and translatable as well.In this session, we’ll take a look at some well-known (and little-known) examples of great typographic and visual style from print and online. We’ll delve into the typographic origins of these looks to help us understand why they work, and we’ll explore exactly how you can use web standards to get the same look on your site. Continue reading “get the look–use @font-face and CSS3 like the stars”

drawing back the curtains on css implementation

[ SXSW Bios ] #sxcss

  • @mollydotcom
  • @fantasai
  • @tabatkins
  • @davidbaron
  • @sgalineau

Brief

In this session, representatives from major browser vendors including Chrome, Microsoft, Opera and the W3C will pull back the curtain revealing some of the challenges with implementation and interoperability. The goal is to have designers and developers get a glimpse into how CSS has struggled and finally gained its footing as the presentation layer in everything we do for the Web. Continue reading “drawing back the curtains on css implementation”

designing our way through web forms

Forms suck. Creating a style guide for form design is difficult.

Presenters
Christopher Schmitt – Heat Vision
Eric Ellis – Bank of America
Kimberly Blessing – Comcast Interactive Media
Date
Sunday, March 15
Sites
web form elements research
jquery validation
moz monkey

Continue reading “designing our way through web forms”

CSS3: what’s now, what’s new, and what’s not?

Let the W3C be with you. Woo! Cross-browser compatibility problems should end.

Presenters
Molly Holzschlag – Opera Software
David Baron – Mozilla
Hakon Wium Lie – Opera Software
Sylvain Galineau – Microsoft
Date
Sunday, March 15
Sites
david baron
molly holzschalg
Jonathan Snook

Continue reading “CSS3: what’s now, what’s new, and what’s not?”

tables don't kill people, they just kill accessibility.

At least, tables (can) kill accessibility in web portals.

Accessibility in a portal has always been a challenge. It has to do (initially) with boxes.

Many early portals used quite hideous tables to layout the screen. Hey, a portal is a set of boxes, right? Oracle Portal still enforces a level of table-as-layout. Tables aren’t evil, but as layout devices they make it difficult to control keyboard interaction on a screen. You have to really implement them right to keep them accessible.

But my main problem with tables as a way to arrange a set of boxes is that the boxes (portlets) on a page are not always neat, tabular data in common rows and columns. Tables are for arranging tabular data. That means there are common relationships among the data sets.

A portlet is too complex an interaction to always fit as “tabular data”. The ways I want to navigate a table of numeric data is usually different from the way I want to interact with a portlet or group of portlets. For example, do I have to tab through every portlet (and inside through the inner elements) on the screen in order to get to the one I want (with the keyboard)? Or can I jump through HTML headers like every other well-formed webpage I encounter?

The other problem with tables is styling. Think about how difficult it is to style your own profile at MySpace. Nested tables to the nth degree. Portals are susceptible to this trap as well. Taking a beautiful Photoshop design of a portal interface and then attempting to style unclassed table cells (when tables themselves tend to break certain CSS layout rules–or better yet, when there is inline CSS inside a table definition that you cannot override!) is an exercise in insanity. I mention this because the level of design control I have over my content is usually closely related to the level of accessibility I can ensure in a page.

So the first accessibility challenge for portals is having enough control over the page layout interface to display portlets on a page in a way that is semantic and easy to interact with via a keyboard. The second is having enough freedom to make it look great.