ForJournalism / fj-responsive-design

Responsive Design for Journalism

Part 1 - Basics

1. Designing for a multi-device world

• Brief internet and web history
• Intro to project: Show inspection center in a final form and on multiple devices
• Intro to tools: Viewing source, using inspectors, responsive design view

2. HTML

Basic tags: Go forth into your CMS and maketh things bold

• elements are made of tags
  • div vs. span (block vs. inline)
  • h1-h6, p
  • strong vs. b, em vs. i
• links
  • a href, with relative and absolute paths
  • title and target attributes
  • using element IDs for internal targeting
  • mailto: and tel:
• img
  • src
  • align, width, height
  • title attribute
• lists
  • ul
  • ol
  • dl
• table
  • tr, th, td
  • thead, tbody

Structure: Organizing an HTML document

• head, body
• Intro to HTML5: header, footer, nav, article, section

3. CSS

The style attribute: Changing the way those HTML elements look

• styling text with font-family, font-size, font-style, text-align, text-transform, text-decoration line-height, letter-spacing
• styling elements with color, background-color, borders, margins, padding, height, width
• styling boxes with rounded corners and shadows

Class and ID: Using selectors to target elements

• Targeting multiple elements with style on a page
• Pseudo-classes like :hover, :first-child, :last-child; using [attribute=value]
• Inheritance: children get styles from their parents

Organization

• Using to reference an external stylesheet
• External stylesheet vs. embedded style vs. inline style attribute

Part 2 - Code and Strategy

4. JavaScript

A splash of jQuery (tease to full javascript course)

• Using CSS selector syntax to trigger basic interactions like .show(), .hide(), .toggle(), .addClass(), .css()
• Adding an event listener with .on()

5. Layout

The box model

• Everything's a rectangle (normalizing across browsers with box-sizing: border-box)
• Display: block, inline, inline-block, none

Document flow and element placement

• Floats and clears
• Relative and absolute positioning

6. Typography

Hierarchy

• Using font-family and font-size to create a hierarchy

Webfonts

• Using Google Fonts, Font-Awesome, StateFace

7. Imagery

8. UI

Part 3 - Project Building

9. Git for Journalism

Intro to Git: Don't lose your work!

10. IA

11. Detail pages

12. List pages

13. Front page

Appendices

• Testing
• Distribution
• Analytics
• Performance