Teaching Responsive Design from the Beginning

  • 2,354 views
Uploaded 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 …

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.

More in: Education , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,354
On Slideshare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
8
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1.  Or how to update web design/HTML/CSS curricula for 2013
  • 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. 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. 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. 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. 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.