Responsive Web Design for Designers

On this page…

    Note that all the presentations on this page are available under a Creative Commons Attribution-ShareAlike License. You can use these slides in many ways, provided you follow the terms of the license.

    Scott & Jans: An Intro

    Scott. Jans. Lovecraft. An outline.

    Design Theory for Designers: The Vitruvian Triad

    How do you judge the quality of a website? Firmness, Commodity, & Delight. Some very bad websites.

    Design Patterns

    Design patterns: what they are & why they’re useful. From architecture to computer science to Web development.

    CSS Typography: Fonts & Formatting

    Types. Measure. Leading. Scale. Operating system defaults. Web browser defaults. Core Fonts for the Web. ClearType Font Collection. Font properties. Font stacks. Text properties. Line box properties. Multi-column layout. Generated content. Font formats. @font-face. Licensing.

    CSS for Designers: Capabilities to Know & Pitfalls to Avoid

    Boxes Boxes Boxes. Box Model. Content, Padding, Border, Margin. Overflow. Floats. Backgrounds. Layers. Gradients. Border Effects. Opacity. Animation. Media-Specific CSS.

    Fixed to Fluid to Responsive: Grids in Design

    Grids in design. 960. Unsemantic. Foundation. Twitter Bootstrap. Fixed layouts. Fluid layouts. Responsive layouts.

    Bootstrap: A Quick Introduction

    Installation. Using Bootstrap. Template. Grid system.

    WebSanity Top Secret