Prof. Annette Weintraub

Design for the Web 2

49540 SPRING 2011

Week 13

Other interesting CSS3

New CSS3 Animation tool

http://animatable.com/demos/madmanimation/ Mad Man animation using HTML5

http://animatable.com/ Mad Man animation using HTML5

CSS3 Animations

http://www.the-art-of-the-web.com/css/css-animation/ CSS Animations

http://webdesignerwall.com/trends/47-amazing-css3-animation-demos CSS Animations

http://slodive.com/web-development/best-css3-animation-demos-tutorials/ CSS Animations

CSS3 Transitions

http://24ways.org/2009/going-nuts-with-css-transitions CSS Transitions

http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/ CSS Sliding panel

Mobile Pages

www.lovelyui.com Mobile Interface examples

http://www.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/ Approach to designing for Mobiles

FONTS AND LAYOUT

Web Fonts

http://sprungmarker.de/wp-content/uploads/webfont-services/ Web font Services Overview

http://ffffallback.com/ Bulletproof Web Font Stacks

Image Placeholders

http://lorempixum.com/ Generates Placeholders

http://www.theuxbookmark.com/2010/08/interaction-design/a-monster-list-of-ui-guidelines-style-guides Examples of branding for the web, user interface [UI] guides

Multiple Column Layouts

http://desandro.com/resources/jquery-masonry/ Multi-column layouts, vertical alignment: JQuery

http://sickdesigner.com/index.php/2011/html-css/masonry-css-getting-awesome-with-css3/ Multi-column layouts, vertical alignment, CSS only

Creating a Vignette with CSS3

http://sickdesigner.com/index.php/2010/html-css/css3-vignette-a-wicked-cool-technique/Using CSS3 to create a vignette

Implementing CSS3 with Fallbacks

http://www.smashingmagazine.com/2011/05/03/using-css3-older-browsers-and-common-considerations/A list of CSS3 elements that can be implemented with fallback practices for older browsers

MOBILE STYLE SHEETS & iPHONE WEB PAGES [links from previous weeks]

http://www.alistapart.com/articles/putyourcontentinmypocket/ iPhone pages

http://www.alistapart.com/articles/putyourcontentinmypocketpart2/ iPhone dev continued

http://www.alistapart.com/articles/return-of-the-mobile-stylesheet/ iPhone dev continued

GOOD PRACTICES

http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/ Workflow and good practices

http://www.smashingmagazine.com/2008/08/18/7-principles-of-clean-and-optimized-css-code/ Making your code clean

http://www.smashingmagazine.com/2008/02/21/powerful-css-techniques-for-effective-coding/ more ideas for better coding

http://reinholdweber.com/?p=1 50+ CSS Best Practices and Coding Guidelines