Calendar

  1. Week 1: Welcome, Tech Setup; Writing XHTML & CSS January 14

    In Class

    1. Review course policies & schedule
    2. Introduce first project
    3. XHTML & CSS basics

    For Next Class (January 28)

    To Read
    1. Stolley, How to Design and Write Web Pages: Ch. 1-5, 12, 9
    2. John Maeda, Laws of Simplicity: Laws 1, 2, 3, 4, 5, 6 & 10
    3. Wilson Miner, Setting Type on the Web
    4. 37signals, Getting Real (Free PDF book): “Build Less” (p. 13); “What’s Your Problem?” (p. 14); Words (all sections, p. 115)
    To Do
    1. Set up your computer with an editor of choice; Unix-style line endings (LF) and UTF-8 (Unicode) character encoding; two-space tab insertions
    2. Sign up for a GitHub account
    3. Sign up for a Twitter account
    4. (During week of January 21) Post to Campfire site: 1 Law of Simplicity you’ve put into practice + your Twitter username
    5. (During week of January 21) Email draft of Project 1 XHTML to Stolley for comments

    Week 2: No Class (MLK) January 21

  2. Week 3: Simplicity; Clean Markup, Typographic Grids January 28

    In Class

    1. Reading discussion (Simplicity, Getting Real)
    2. Lab setup: Editor, htdocs/ directory; Firefox + plugins
    3. Q&A about XHTML & CSS
    4. Source formatting/clean markup
    5. CSS Reset vs. CSS Normalize
    6. Typographic grids

    For Next Class

    To Read
    1. Maeda: Laws 7, 8 & 9 and Keys 1, 2, & 3
    2. Stolley: Ch. 10, 13, 16
    3. Connor Turnbull, Setting Web Type to a Baseline Grid
    4. Wilson Minor, Setting Type on the Web to a Baseline Grid
    5. Getting Real: “Interface First” (p. 92); “Epicenter Design” (p. 94); “Copywriting is Interface Design” (p. 101); “Less Software” (p. 104); “Optimize for Happiness” (p. 107)
    To Do
    1. Finish Project 1; send near-final draft to Stolley before Thursday 1/31 if you want any more feedback
    2. Prepare Project 1 presentation (5 mins. max)
  3. Week 4: Project 1 Due; Version Control, HTML5 February 4

    In Class

    1. Project 1 Presentations
    2. Git & GitHub setup
    3. Finding in-class examples
    4. Introduction to version control
    5. Project 1 into Git repository for Project 1 submission; tagged p1
    6. Project 1 pushed to GitHub; URL and memo emailed to Stolley by 11:59pm Weds. February 6
    7. Git branch: XHTML 1.0 Strict to HTML5

    For Next Class

    To Read
    1. Al Shaw, Get Started with Git
    2. Swicegood, Pragmatic Version Control Using Git: Preface; “Version Control the Git Way”; “Creating Your First Project”; and “Adding and Committing: Git Basics” (chapters 1,3,4/print; chapters 3,5,6/ePub)
    3. Stolley: Ch. 6; 11, 14, 15, 17
    4. Jeremy Keith, HTML5 for Web Designers: Semantics and Using HTML5 Today
    5. Wroblewski, Mobile First: Part 1
    To Do
    1. Set up Git & GitHub SSH keys on your computer; add public key to GitHub
    2. Clone your Project 1 repository, created in class, to your computer
    3. Decide whether to continue Project 1 repo, or start anew (all submissions and questions from here on out will be via Git/GitHub), for Project 2
  4. Week 5: Accessibility; Agile, Mobile-first Design February 11

    In Class

    1. Reading discussion

    For Next Class

    To Read
    1. Stolley: Ch. 7
    2. Wroblewski: Part 2
    3. Swicegood: “Understanding and Using Branches”; “Working with Git’s History” (chapters 5 and 6/print; chapters 7 and 8/ePub)
    4. Khoi Vinh, Ordering Disorder: Ch. 1 and 2
    5. Browse mediaqueri.es; use mobile devices and/or narrow browser windows
    To Do
    1. Begin working mobile-first techniques and principles into your project
  5. Week 6: Usability; Responsive Design & Grid-Based Layout February 18

    In Class

    1. Reading discussion

    For Next Class

    To Read
    1. Stolley: Ch. 8; 20
    2. Vinh: Ch. 3-5
    3. Ethan Marcotte, Responsive Web Design: Ch. 1, 2, & 4
    4. Swicegood: “Working with Remote Repositories”; “Organizing Your Repository”; “Beyond the Basics” (chapters 7, 8, 9/print; chapters 9, 10, 11/ePub)
    5. Grid systems: Look at 960.gs, 978.gs; search Google for other grid systems, especially responsive ones
    To Do
    1. Work on grid-based, responsive design sketches
  6. Week 7: Sustainability; SMACSS February 25

    In Class

    1. Student in-progress site presentations (2)
    2. Git issues: are you rocking it yet?
    3. Layouts and grid-based design
    4. SMACSS basics for stylesheet organization

    For Next Class

    To Read
    1. Marcotte: Ch. 3
    2. Jonathan Snook, Scalable and Modular Architecture for CSS: Categorizing CSS Rules, Base Rules, Layout Rules, Module Rules, Depth of Applicability
    3. Retina readings: Lemeden, Towards a Retina Web; Rupert, Mo' Pixels Mo' Problems; Gardner, Rieger, Wroblewski, & Koch, Vexing Viewports
    To Do
    1. Research retina displays; go to the Apple store and try one?
    2. Sketches, grids; on paper, and in HTML/CSS
    3. Latest work pushed to GitHub and shared with Stolley (GitHub URL via email) by Thursday, 2/28
  7. Week 8: Retina Displays; CSS3, Web Fonts March 4

    In Class

    1. Q&A
    2. Site architecture
    3. Reading Discussion

    For Next Class

    To Read
    1. Dan Cederholm, CSS3 for Web Designers: Ch. 1-5
    To Do
    1. Look for design elements in your Project 2 that can be replaced with CSS3
    2. Send instructor your Project 2 repo with questions & cries for help
  8. Week 9: Work Week March 11

    In Class

    1. Unstructured project work-time

    For Next Class (March 25)

    To Read
    1. Marcotte: Ch. 5
    2. Stolley: Ch. 23, 24
    To Do
    1. Develop a browser- and device-testing strategy

    Week 10: No Class (Spring Break) March 18

  9. Week 11: Hosting & Posting, Testing & Tweaking March 25

    In Class

    1. In-progress presentations (everyone)
    2. Hosting setup issues; domain registration, etc.
    3. Testing sites across platforms/devices

    For Next Class

    To Do
    1. Finish Project 2; prepare presentation
  10. Week 12: Work Week April 1

    In Class

    1. Project work time, Q&A

    For Next Class

    To Do
    1. Finish Project 2; prepare presentation
  11. Week 13: Project 2 Due; Presentations April 8

    In Class

    1. Project Presentations
    2. Introduce Project 3

    For Next Class

    To Read
    1. Stolley, Ch. 19
    2. learn.jquery.com: How jQuery Works
    3. learn.jquery.com: JavaScript 101 (all sections)
    To Do
    1. COM380/530 Students: Pitch Project 3 enhancement to Stolley via email by 4/12
    2. COM530 Students only: Pitch Project 4 to Stolley via email by 4/15
  12. Week 14: JavaScript, jQuery, & the DOM April 15

    In Class

    1. Time to complete course evals (Stolley out of room)
    2. Reading discussion
    3. jQuery/DOM example

    For Next Class

    To Read
    1. SASS tutorial at sass-lang.com
    To Do
    1. Project work
  13. Week 15: Sassy CSS & Work Week April 22

    In Class

    1. Working with Sassy CSS (aka SASS)
    2. Work time

    For Next Class

    To Do
    1. Finish final project(s)
  14. Week Sixteen: Site Enhancement Project Presentations April 29

    In Class

    1. Presentations
  15. Finals Week

    Site Enhancement Project due to instructor by 5:00pm on May 8, 2013

    (COM530 Only) Theming Project due to instructor by 5:00pm on May 10, 2013

Instructor

Projects

Project 1: Website Foundations Due February 4

This project will be an introduction to standards-based web design. You will be creating two valid, well-formed XHTML 1.0 Strict web pages: your resume or curriculum vitae, and one item from your professional portfolio.

Both of your pages will be styled via two stylesheets written in CSS: one for screen (media="screen") and one for print (media="print"). For this project, you only have to style basic page typography and colors. (You will work on more advanced layout and design matters in the Professional Web Presence project.)

Project Goals

  • Develop a clean, effective web-writing style: both in your text content, and in your source code
  • Begin to develop a foundation in XHTML for accurately describing the structure of text
  • Begin to develop a foundation in CSS for describing the typography and color of content structured in XHTML

Deliverables & Milestones

  1. 2 XHTML files (resume/vita and portfolio page) and 2 CSS files (screen and print) draft by 1/24; final on 2/4)
  2. A self-critique memo that evaluates your project and your progress in the class to this point (2-3 paragraphs; due 2/4 via email or as a README.md in your GitHub repository for the project)
  3. A GitHub repository of your files, tagged as p1 (we will do this together in class on 2/4)

Requirements

Your XHTML pages must:
  • Validate against the XHTML 1.0 Strict DOCTYPE
  • Use only valid, structural tags (e.g., headers, paragraphs, and lists) and class/id attributes
  • Be hand-written and original; do not use Dreamweaver’s WYSIWYG editor or any pre-made templates, although you can start with this bare-bones skeletal XHTML file
  • Not use tables, except for tabular data (if you have any)
  • Validate against the W3C Markup Validation Service
Your CSS files must:
  • Be built over the top of a reset CSS file, such as the Yahoo! Reset-Min CSS
  • Use only valid CSS 1 & 2 selectors, properties, and attributes (CSS3 will be covered in the next project)
  • Be loaded into your XHTML pages via the <link> tag in the head area (no inline styles via the style="" attribute or embedded in the head with the <style> tag) using the appropriate media attribute value.
  • Be hand-written and original; do not use Dreamweaver’s CSS property dialog boxes or any pre-made templates, although you should use the Yahoo! reset-min.css file.
  • Validate against the W3C CSS Validation Service

Project 2: Professional Web Presence Due April 1

This is the major project of Standards-Based Web Design: the creation of your full professional web presence in a way that will allow you to continue to add to and revise the site into the future. Your site should include a content-rich overview page (no splash pages), an “about me”/biography page, your resume or vita, and at least 5 pages of portfolio items. You will also use CSS to add a compelling layout to your pages, enhance your navigation, and increase the accessibility and usability of your pages. DOM scripting might also be a part of your pages in a way that progressively enhances either their visual presentation or interactivity.

At least two students will present each night of class prior to 4/1; if at least two students do not volunteer, the instructor will just call on people to present. Always come prepared to show new work to the class.

Deliverables & Milestones

  1. Your complete site at your own openly-available URL (preferably yourname.com; due 4/1)
  2. Your site’s Git repository, hosted at GitHub.com (updated regularly; final due 4/1)
  3. A self-critique memo that evaluates your project and your progress in the class to this point (due 4/1 via email or as a README.md in your GitHub repository for the project)
  4. Final presentation of your project (due 4/1)
  5. At least one in-progress presentation of your work to the class (due before 4/1)

Requirements

Your site must:
  • Be hosted and appear at your own openly-available URL (preferably yourname.com)
  • Have its source hosted at GitHub or another Git-based project host; if you opt to protect your repository, the instructor must be given access for grading purposes
  • Use a meaningful, search-engine-friendly URL structure
Your pages must:
  • Display appropriately (though not necessarily exactly the same) in Lynx, Firefox, Safari (or Google Chrome, if you have no Mac access), and Internet Explorer 8+ (IE);
  • Use responsive web-design techniques (e.g., media queries, scalable images, flexible layouts) to display on mobile, tablet, and desktop devices
  • Use pixel-doubled images for retina displays
  • Make use of conditional comments to load CSS for IE, when necessary
Your HTML must:
  • Feature semantic markup in a sensible source order (structured for content, not presentation/design)
  • Include accessibility features, such as links for skipping to navigation or content sections
  • Use the HTML5 DOCTYPE
  • Use valid, structural tags (e.g., headers, paragraphs, and lists) and class/id attributes, written in XHTML-Strict style; new, well-supported HTML5 semantic tags are acceptable
  • Be hand-written and original; do not use Dreamweaver’s WYSIWYG editor or any pre-made templates, although you can start with the Rapid Prototyping Kit or another site foundation/grid system of your choice (seek approval from instructor first)
  • Not use tables, except for tabular data (if you have any)
  • Validate as HTML5 against the W3C Markup Validation Service
Your CSS must:
  • Be built over the top of a reset CSS file, such as the Yahoo! Reset-Min CSS or a CSS normalization file
  • Use only valid CSS 1 & 2 and widely-supported CSS3 selectors, properties, and attributes (CSS3 should only be used on the experience layer, and with all necessary vendor prefixes; see the Cederholm book)
  • Not use hacks; use conditional comments instead
  • Be loaded into your HTML pages via the <link> tag in the head area (no inline styles via the style="" attribute or embedded in the head with the <style> tag) using the appropriate media attribute value.
  • Be hand-written and original; do not use Dreamweaver's CSS property dialog boxes or any pre-made templates, although you should use the Yahoo! reset-min.css file.
  • Make use of media-queries for responsive design across mobile, tablet, desktop, and other screens
  • Validate against the W3C CSS Validation Service (for the requisite CSS3 vendor prefixes, set Vendor Extensions to show as Warnings on the validator site)
If you include any JavaScript/DOM Scripting, it must:
  • Be built using jQuery, MooTools, or another actively developed, standards-compliant library/framework
  • Adhere to progressive enhancement design principles (in other words, your site must still work in JavaScript-less environments)
  • Not throw any errors (e.g., in the Web Developer add-on)

Project Goals

  • Establish a solid and sound representation of yourself and your skills, based on your career or field of study/area of expertise
  • Organize and style your professional site using responsive design techniques for maximum rhetorical effect under particular viewing conditions (mobile, tablet, desktop)
  • Learn to prepare and organize appropriate materials to represent yourself on the web
  • Learn to use CSS to control the layout and design of HTML pages, using grid-based design methods for layout and typography
  • Use, if necessary, JavaScript on the DOM to progressively enhance your pages for JavaScript-capable browsers and devices
  • Learn to develop your site in a baseline browser, test in other browsers, and use conditional comments to address the oddities of Internet Explorer
  • Use a version control system (Git) for agile incremental development of your site, including feature branches for experimentation and parallel development

Project 3: Website Enhancement Due April 1

For project three, you will extend your website from project two in some way. Some possibilities include: social media integration (e.g., displaying your Twitter feed); adding a blogging component; or enhancing the functionality of your pages with JavaScript. You will propose the enhancement to the instructor, who will approve or make suggestions on your idea.

Deliverables & Milestones

  1. Proposal memo emailed to instructor (due 4/12)
  2. Final presentation of your project (due 4/1)
  3. At least one in-progress presentation of your work to the class (due before 4/29)
  4. Your complete site at your own openly-available URL (preferably yourname.com; due 5/8)
  5. Your site’s Git repository, hosted at GitHub.com (updated regularly; final due 5/8)
  6. A self-critique memo that evaluates your project and your overall work in the class this semester (due 5/8 via email)

Requirements

All of the requirements for Project 2 apply to Project 3.

Project Goals

  • Learn to revise your website beyond its initial state from Project 2
  • Develop skills to learn new web-design technologies independently

(COM530 Students Only) Project 4: Design to Theme

For Project 4, you will translate your design from Project 2/3 onto some themeable system, such as Tumblr, WordPress, Drupal, or any other database-driven content management or blogging system of your choice. This is an opportunity to improve your abilities with SMACSS, and learn the challenges of doing front-end design over the top of someone else’s system.

Deliverables & Milestones

  1. Proposal memo emailed to instructor (due 4/15).
  2. GitHub repository that includes a) your theme CSS & images, if any; and b) a static HTML version of the markup as generated your system of choice (e.g., choose View & Source from a page of your blog posts from Tumblr); and c) the template file/files for generating the markup (due 5/10).
  3. For hosted services (e.g., Tumblr or Blogger.com), a link to the hosted service that you have customized; for self-hosted services (e.g., a Drupal installation), either a link or a second GitHub repository, showing the customizations that you made to the templates in order to generate the static HTML (due 5/10).

Requirements

  • All HTML and CSS that you create should be valid and standards-compliant; however, as a README.md file in your repository, point out any system-generated elements that do not validate (this is an issue on Tumblr, for example), if applicable.

Project Goals

  • Learn to work with the markup of a CMS or blogging system
  • Gain exposure to embedded, non-HTML elements (e.g., PHP tags in WordPress, or the template tags from Tumblr)
  • Become more adept at creating portable CSS styles by following SMACSS or another reusable architecture for stylesheets

Policies

  1. Course Description

    This course introduces the theory and practice of standards-based web design and development. The course focuses on an agile, incremental approach to building accessible, usable, and sustainable web pages that work across all modern browsers and web-enabled mobile devices. Beyond web design, the course provides a rhetorical and technological foundation for quickly establishing competencies in other areas of digital communication, such as web application development.

  2. Course Goals

    • Learn to create, prepare, and maintain web- and audience-appropriate text and media
    • Learn to structure web pages that are both valid and well-formed according to the Extensible Hypertext Markup Language (XHTML) and HTML5
    • Learn to create page designs using the Cascading Style Sheet (CSS) design language
    • Understand and implement web standards from the World Wide Web Consortium (W3C), Ecma, ISO, and other standards-issuing groups
    • Understand and apply progressive enhancement and responsive design in web development
    • Develop an agile approach to web writing and design, supplemented by the use of a version control system (Git)
    • Apply course concepts and adjust/extend course projects to fit your own academic and professional interests
  3. Materials and Technologies

    Required Texts

    • Cederholm, D. (2010). CSS3 for web designers. New York, NY: A Book Apart. (available for purchase from A Book Apart)
    • Maeda, J. (2006). The laws of simplicity: Design, business, technology, life. Cambridge, MA: The MIT Press.
    • Marcotte, E. (2011). Responsive web design. New York, NY: A Book Apart. (available for purchase from A Book Apart)
    • Stolley, K. (2011). How to design and write web pages today. Santa Barbara, CA: Greenwood Press.
    • Swicegood, T. (2008). Pragmatic version control using Git. Pragmatic Bookshelf. (available at the bookstore or as an ebook from Pragmatic Bookshelf
    • Vinh, K. (2011). Ordering disorder: Grid principles for web design. Berkeley, CA: New Riders.
    • Wroblewski, L. (2012) Mobile first. New York, NY: A Book Apart. (available for purchase from A Book Apart)
    • Plus other electronic books, articles, and materials linked to from the course calendar

    Required Technologies

    • Ad-free, commercially hosted Web space that you control and the domain of your name
    • A GitHub account (free/public or pay/private)
    • A private/public RSA key pair (we will create these in class if you don't yet have them)
    • Firefox, Google Chrome, and other non-Internet Explorer browsers
    • XAMPP or a similar web server for testing, installed on a USB stick or your computer
    • A sketchbook

    Recommended Technologies

    • A Ubuntu installation (or Ubuntu Live CD) to run Ubuntu Linux on your own computer
    • A Twitter account
    • A Delicious or Diigo account for social bookmarking
  4. Grading Policy: COM381 Students

    • Project 1: 20pts
    • Project 2: 50pts
    • Project 3: 10pts
    • Class Participation: 20pts
    • TOTAL: 100pts

    A = 90+ pts; B = 80-89pts; C = 70-79pts; D = 60-69pts; E =< 59 pts

    Grading Criteria

    • A - Student has turned in all required components of a project, the work is exceptional in quality, and reflects the student’s dedication to adjusting the project to his or her own interests.
    • B - Student has turned in all required components of a project, and the work is exceptional for undergraduate work.
    • C - Student has turned in all required components of a project and submitted work that is acceptable as undergraduate level.
    • D - Student has turned in all required components of a project, but the work is below undergraduate level.
    • E - Student has not turned in all required components of a project.
  5. Grading Policy: COM530 Students

    • Project 1: 20pts
    • Project 2: 50pts
    • Project 3: 10pts
    • Project 4: 10pts
    • Class Participation: 10pts
    • TOTAL: 100pts

    A = 90+ pts; B= 80-89pts; C=70-79pts; E =< 69 pts

    Grading Criteria

    • A - Student has turned in all required components of a project, the work is exceptional in quality, and reflects the student's dedication to adjusting the project to his or her own interests.
    • B - Student has turned in all required components of a project and submitted work that is acceptable as graduate level.
    • C - Student has turned in all required components of a project, but the work is below graduate level.
    • E - Student has not turned in all required components of a project.
  6. Course Technology Policy

    Because technology is an essential part of web design and development, it is essential to this class. You are just as responsible for learning to command various technologies (HTML and CSS in particular, as well as Git) as for any other course content. Difficulty with technology is not an acceptable excuse for being unprepared for class.

    If you are having trouble with technology or any other material covered in this course, it is your professional responsibility to do research beyond the resources and guidance provided in class and find materials that work for you. I also encourage all students to meet with me during my office hours or at another arranged time outside of class or to contact me via email or GChat, or our Campfire room, well in advance of project deadlines.

    Note that coming to class with broken or malfunctioning work is far better than showing up with nothing but an excuse like “I just didn’t get it.” For most of the semester, it is expected that you’ll show up with broken work. When you’re learning, effort is more important than perfection. Just be sure to put in the effort early, and not the night before a project is due.

  7. Attendance and Participation

    Your attendance and active participation are required both for your own success in the class, and for the success of the class as a whole. However, if you absolutely must miss, please contact me ahead of time via email.

  8. Academic Honesty

    As with any course at IIT, you are expected to uphold the Code of Academic Honesty as described in the IIT Student Handbook). All work for this course must be your own original effort, including print and digital page design and computer code. Summarizations and quotations of text, as well as any use of open-source code libraries and images not of your own making, should be clearly cited as legally and ethically warranted and rhetorically appropriate.

    If you are at all uncertain as to whether you are submitting work that in whole or in part may violate the Code of Academic Honesty, please contact me immediately and before the work is due. The consequences of academic dishonesty are severe. Any student who violates the Code of Academic Honesty will be subject to expulsion from this course with a failing grade, and I will report the student to the Chair of the Department of Humanities and the Associate Dean of Graduate Academic Affairs, who may take additional disciplinary action.

  9. Special Needs Statement

    Reasonable accommodations will be made for students with documented disabilities. In order to receive accommodations, students must obtain a letter of accommodation from the Center for Disability Resources. The Center for Disability Resources (CDR) is located in IIT Tower, 3424 S. State Street - 1C3-2. Contact the Center by telephone at 312-567-5744 or via email at disabilities@iit.edu

    Students who have any difficulty (either permanent or temporary) that might affect their ability to perform in class should contact me privately, either in person or via email, at the start of the semester. Methods, materials, or deadlines will be adapted as required to ensure equitable participation.