Or how to update web design/HTML/CSS curricula for 2013

www.jenkramer.org • jen@jenkramer.org ‹#›

Draw a 960 px-wide design in Photoshop or Fireworks. Slice this comp to generate graphics. Lay out a static HTML web page using XHTML and incorporates the

graphics from the design into this page. Typically this is done with Dreamweaver. Page is designed for a 960 px width. Widths, font sizes, padding, and margins are all designated with pixel widths. No mention is made of flexible sizing, grid systems, or thinking about mobile.

Send this page, and others like it, to their server via FTP.

www.jenkramer.org • jen@jenkramer.org ‹#›

Build the design in 12 evenly-sized columns. Show versions of the design. Ask questions about photos. Encourage students to think about touch. De-emphasize slicing.

www.jenkramer.org • jen@jenkramer.org ‹#›

Standardize on one browser for class. Teach HTML5. Teach CSS3 and all types of selectors. Incorporate grid-based thinking early. As soon as students have a solid understanding of floats and

positioning, start teaching how to code a grid. Responsive design is now a little lecture, not a huge lecture. Now it's time for browser compatibility issues. LESS and/or Sass are hot topics. It's not a bad idea to cover responsive design frameworks (Bootstrap,

Foundation).

www.jenkramer.org • jen@jenkramer.org ‹#›

The Open Source philosophy. Online portfolios Modifying/understanding someone else's code. Identify trends. Learning how to learn technology.

www.jenkramer.org • jen@jenkramer.org ‹#›

Jen Kramer Waltham, MA Phone: 802-257-2657 jen@jenkramer.org www.jenkramer.org Twitter: @jen4web Facebook: facebook.com/webdesignjen

Slides available at www.slideshare.net/jen4web

This presentation will be available as an article at Smashing Magazine Real Soon Now.