Teaching Responsive Design from the Beginning
Upcoming SlideShare
Loading in...5
×
 

Teaching Responsive Design from the Beginning

on

  • 2,750 views

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.

Statistics

Views

Total Views
2,750
Slideshare-icon Views on SlideShare
1,450
Embed Views
1,300

Actions

Likes
0
Downloads
7
Comments
0

9 Embeds 1,300

http://www.jenkramer.org 986
http://jenkramer.org 260
http://www.jenkramer.com 22
http://jenkramer.com 21
http://www.thejoomlateacher.com 4
http://thejoomlateacher.net 3
http://www.focusedconsulting.com 2
http://www.thejoomlateacher.net 1
http://focusedconsulting.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Teaching Responsive Design from the Beginning Teaching Responsive Design from the Beginning Presentation Transcript

    •  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 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.
    • 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 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).
    • www.jenkramer.org • jen@jenkramer.org ‹#› The Open Source philosophy. Online portfolios Modifying/understanding someone elses code. Identify trends. Learning how to learn technology.
    • 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.