0
 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 genera...
www.jenkramer.org • jen@jenkramer.org ‹#› Build the design in 12 evenly-sized columns. Show versions of the design. Ask...
www.jenkramer.org • jen@jenkramer.org ‹#› Standardize on one browser for class. Teach HTML5. Teach CSS3 and all types o...
www.jenkramer.org • jen@jenkramer.org ‹#› The Open Source philosophy. Online portfolios Modifying/understanding someone...
www.jenkramer.org • jen@jenkramer.org ‹#›Jen KramerWaltham, MAPhone: 802-257-2657jen@jenkramer.orgwww.jenkramer.orgTwitter...
Upcoming SlideShare
Loading in...5
×

Teaching Responsive Design from the Beginning

2,475

Published on

We teach web design like it's 2005, not 2013. How can we teach our students to think about responsive web design from the beginning of their college careers, where they are first learning HTML? Here are some ideas.

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,475
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Teaching Responsive Design from the Beginning"

  1. 1.  Or how to update web design/HTML/CSS curricula for 2013
  2. 2. 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 thegraphics from the design into this page. Typically this is done withDreamweaver. Page is designed for a 960 px width. Widths, font sizes,padding, and margins are all designated with pixel widths. No mentionis made of flexible sizing, grid systems, or thinking about mobile. Send this page, and others like it, to their server via FTP.
  3. 3. 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.
  4. 4. 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 andpositioning, start teaching how to code a grid. Responsive design is now a little lecture, not a huge lecture. Now its time for browser compatibility issues. LESS and/or Sass are hot topics. Its not a bad idea to cover responsive design frameworks (Bootstrap,Foundation).
  5. 5. www.jenkramer.org • jen@jenkramer.org ‹#› The Open Source philosophy. Online portfolios Modifying/understanding someone elses code. Identify trends. Learning how to learn technology.
  6. 6. www.jenkramer.org • jen@jenkramer.org ‹#›Jen KramerWaltham, MAPhone: 802-257-2657jen@jenkramer.orgwww.jenkramer.orgTwitter: @jen4webFacebook: facebook.com/webdesignjenSlides available atwww.slideshare.net/jen4webThis presentation will beavailable as an article atSmashing Magazine RealSoon Now.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×