As Web 2.0 Expo New York speaker Denise Jacobs says, CSS3 is set to display your sites in multiple devices right now. Her session, CSS3: Ripe and Ready to Respond, covers the gamut of CSS3 properties from colors, web fonts, and visual effects, to transitions, animations and media queries.
“CSS3 is the best thing since sliced bread for web design and development,” Jacobs, a designer and much more, said. “If you’re not doing it now it doesn’t take that much to get up to speed.”
Front end developers previously needed to bend over backwards to achieve certain affects: rounded corners, text shadows, gradients, animations, transitions, etc. CSS3 changes all that.
“It’s exciting if you’ve been in the web for any period of time over the last 5 years – you’ve seen kind of a progress and growth of what you’re able to do in terms of web design and now there’s all these sophisticated designs that are much nicer experiences.”
One important feature of CSS3 is media queries, the ability to tailor design presentations to different outputs – desktop vs. mobile for instance – in separate stylesheets. (Jacobs recommended reading Ethan Marcotte’s essay Responsive Web Design for more information.)
CSS3 also means we’ll also see more animations literally built in the browser, she said. Additionally, we’re likely to witness more print-style designs online so far as use of space, imagery, and typography go. We’ll certainly move even further away from animated gifs and Flash only websites. Jacobs said this will result in us getting back to true design ethos – and designs that truly attract users.
“You’ve experienced it yourself where you saw something and you kind of fell in love with it,” Jacobs said. “It appealed to your senses.”
Great design can cause people to actually have relationships with websites, products, and objects (think Apple). Consider how many times you’ve said you “loved” a product or site. Design can appeal to your sense of affinity.
Jacobs said the little things can cause this love affair. For instance, nice typography or drop shadow on text can make it more legible, rounded corners that the user likes on some subliminal level, or a form element where the color box pulses when you move the mouse over it, waiting for you to click.
These changes may not be quantifiable per se – maybe through A/B testing – but these subtle differences can make a big impact, especially if your competition doesn’t have it.
Learn more about CSS3 from Jacobs tomorrow at Web 2.0 Expo New York. Register with code BLG20 to save 20%.