Who we are

Sam Richard

UI Architect, IBM Watson

• drupal.org/u/snugug
• twitter.com/snugug
• github.com/Snugug

Ian Carrico

Backend of Frontend Developer, Four Kitchens

• drupal.org/u/iamcarrico
• twitter.com/iamcarrico
• github.com/iamcarrico

Chris Ruppel

Frontend Developer, Four Kitchens

• drupal.org/u/rupl
• twitter.com/rupl
• github.com/rupl

What This Class Is

• Advanced level class on Responsive Web Design
• Look at modern tools, techniques, and best practices
• More than just code

What This Class Isn't

• Introduction to Responsive Web Design
• Introduction to Front End Development (HTML/CSS/JS/Sass, etc…)
• Training on CSS Systems (like Twitter Bootstrap or Zurb Foundation)
• Drupal Theming

Agenda

• Modern Standards and Best Practices
• Content Strategy
• Modern Tools and Techniques
• Style Prototyping
• Creating Components and Layouts

Myth #1

A Squishy Site is a Responsive Site

Fact

Responsive sites need to be:

• Fast
• Performant
• Available
• Progressively Enhanced
• Gracefully Degradable
• Device Agnostic
• Content First

Myth #2

It's about Devices

Fact

Users are the same REGARDLESS OF THEIR DEVICE

The actual device is irrelevant, in order to be Future Friendly, we need to design to capabilities, not UA strings

Responsive Web Design is about building experiences that showcase our content, all of our content, across any device

Myth #3

Pictures of Pages Are Good Enough

Fact

Design starts at the content, not the page

Pictures fail to provide any context and cannot adapt the the large (and growing) number of variables that must be designed for

The "page" is (mostly) irrelevant; it's ever changing. Tying your design to the idea of a page will harm your user experience

Design your content.

Then, build systems of design to support your content.

Content strategy is the process by which content is analyzed, sorted, constructed, and placed. Users come to a site for its content first and foremost, so it is the most important part of a site.

Before any discussion of design or development, an understanding of a product owner's content is imperative in order to produce not only an effective website, but lay an effective foundation for any and all future endeavors, from apps to ads to printed material.

The entirety of a finished product is determined by this initial step, from what content actually is put onto pages to what components get built to what the final site looks like.

Now What

Roles and Responsibilities

Who Is Working On This Site?

• Product Owner - The individual tasked with making decisions for the project on behalf of the commissioning party
• Project Manager - The individual in charge of ensuring the product design and development cycle is being kept on track
• Designer - The individual(s) tasked with creating the visual and user experience designs for a project
• Developer - The individual(s) tasked with creating code to power a project
• Quality Assurance - The individual(s) tasked with ensuring design and code are ready for production

Project Vision

Who Is This Site For?

The grounding point of a project, the Project Vision is a single sentence source of truth around which all decisions will be made

Questions to Answer

• What is the Product Owner's Goal for this site?
• Who is the site built for? What do we want our audience to learn?
• Who is maintaining the site? What will they need to be able to do?
• What is critical to success? What are these dependent on?

User Personas

Who Uses This Site?

A User Persona Is

• A Caricature of a type of user that will be accessing the site
• A hypothesis of types of users that are already on the site, using analytics data (if available)
• Usable after, through user interviews, we are able to confirm or update our hypothesis

A User Persona Contains

• A name, either real (Sally Smith) or caricature (Loyal Customer). The later is prefered
• Their motivator for using the product (primary, secondary, tertiary needs, etc…)
• Their typical use of the product
• Their pain points with the product

Content Inventory

What's On The Current Site?

• An Objective, Broad Strokes look at Currently Avaialble Content
• Not just pages or screens, but the attributes and piece that make up larger pieces of content
• Should contain both intrinsic (title, owner, last updated) and analytics (page views, rank, notes) data

Content Audit

Does My Current Content Make Sense?

• Is the content too long, too short, or just right? Can longer content be cut into shorter chunks and still make sense?
• Is the copy wordy? Does it ramble? Can it be cleaned up without losing its meaning?
• Does each page or chunk get to the point quickly?
• Is content even broken up into chunks?
• Is the content relevant and important?

Gap Analysis

• Keep as-is
• Revise and edit to tighten up copy and content types
• Delete because it's irrelevant, not useful, or outdated
• Create New where new business goals don't meet existing content. New content types may be gleaned from needs discovered in user interviews.

Content Modeling

What Is My Content?

• Each model is an overview of a type of content available
• Models must contain at least one user persona's benefit statement with value
• Good models include both visible and structural attributes (chunks that make up a piece of content)
• Attributes should be determined by content inventory and content audit
• Should be presentation independent

Content Models Must Be Valuable To At Least One Persona. If It Isn't, Don't Include It!

Information Architecture

What Pieces Of What Content Go Where?

Design Source Order and Value

• Most valuable content should be most prominent
• Should be consistent and predictable across pages
• Avoid clutter and reduce complication

Revises Content Model

• Truncation is not a content strate…
• Build Systems of Content
• Make Content Easy to Navigate
• Make All Content Available, Always

  * Site Header
  * Branding
    * Site Logo
      - Brand : Logo
      - 300x50
    * Site Name
      - Brand : Title
  * Navigation
    * Sections
      - Taxonomy : Title
      - filter: Sections
* Content Area
  * Main Content
    - Article : Title
    - Article : Body
    - Article : Author
    - 1
* Site Footer
  * Copyright
    - Brand : Copyright

• Scaffolds out new projects or pieces of projects
• Runs on Node.js
• Powered by generators
• Just run yo

• System for creating Pattern Libraries
• Distributed as a Yeoman Generator
• Node in the back, Angular in the front
• Just run yo style-prototype

Prompt Options

• Project Name - The name of your project, spaces and special characters allowed
• Base Folder Structure - The initial folder structure you'd like to use (more sections can be added/removed later). Options are to follow North, Atomic Design, or start with an empty project.

Command Line Options

• --skip-install - Skips dependency installation after creation
• --git - Initializes the repository as a Git repository and commits in the initial items
• --init - Scaffolds into the current directory instead of a new directory by the name of your project
• --demo - Includes demonstration patterns and pages to get a feel for the project

Sub Generators

• yo style-prototype:pattern - Scaffolds out a pattern, including HTML, Sass, and optionally JavaScript
• yo style-prototype:section - Scaffolds out a new section and updates config/sections.yml (need to restart server after creating a new section)

Activity

Create a Style Prototype for your design!

$ yo style-prototype --demo --skip-install

• Keeps track of Ruby gem versions via Gemfile
• Run bundle install Bundler will get and install all dependencies
• bundle update will update gems
• Run all commands with bundle exec to tie to Bundler versions

source 'http://rubygems.org'

gem 'compass', '~>1.0.0.alpha.17'
gem 'toolkit', '~>2.0'
gem 'breakpoint', '~>2.4'
gem 'singularitygs', '~>1.2'

Activity

Install your Style Prototype Ruby dependencies

$ cd {{project-name}}
$ bundle install --path vendor

• Node.js Package Manager
• Primairly for backend packages (in our case, our task runner)
• package.json will manage dependencies
• gitignore your node_modules folder

Activity

Install your Style Prototype Node dependencies

$ npm install

• Front-End Package Manager
• bower.json will manage dependencies
• gitignore your bower_components folder; compile dependencies into output files

Activity

Install your Style Prototype Bower dependencies

$ bower install

• Task Runner for awesome automation
• Node.js based
• Huge community support
• JSON configuration based

• Task Runner for awesome automation
• Node.js based
• New, but large and fast growing community
• Function and stream based
• (Style Prototypes uses this)

BrowserSync

• Cross-Browser URL and Action synchronizing
• Code Syncing (Live Reloading)
• Task runner integration
• Node.js based server
• Can work with any fronted (with snippet)
• (Style Prototypes uses this)

  
               /\\
              //@\\
             // @@\\
            //  @@@\\
           //   @@@@\\
          //    @@@@@\\         ___   ___    _____    ______    _________   ___  ___
          //    @@@@@\\        |NNN\ |NNN|  /O.-.O\  |RRRRRR\  |TTTTTTTTT| |HHH||HHH|
         //     @@@@@@\\        |NNN\ |N|  |O|   |O|  |R|__)R| |T| |T| |T|  |H|__|H|
        //      @@@@@@@\\       |N|\N\|N|  |O|   |O|  |RRRRR/      |T|      |HHHHHH|
       //       @@@@@@@@\\      |N| \NNN|  |OO`-'OO|  |R|  \R\_    |T|      |H|  |H|
       //       @@@@@@@@\\     |NNN| \NN|   \OOOOO/  |RRR| |RRR|  |TTT|    |HHH||HHH|
      //        @@@@@@@@@\\
     //         @@@@@@@@@@\\
    //        // \\@@@@@@@@\\
   //      //       \\@@@@@@\\
  //  //                 \\@@\\
  ////                     \\\\
  

• Yeoman generator to support North
• Full Project scaffolding (yo north)
• Component/Layout partial scaffolding (yo north:component, yo north:layout)
• Options to use Grunt or Gulp for task running
• Options to include a BrowserSync based server

Style Tiles

yo sketch:template

eq.js

github.com/snugug/eq.js

Lightweight JavaScript powered element queries.

<div class="component" data-eq-pts="small: 400, medium: 600, large: 900">
  <h1>Hello World</h1>
</div>

@import "eq";

.container {
  @include eq('small') {
    font-size: 1.5em;
  }
  @include eq('medium') {
    font-size: 1em;
  }
}

Toolkit

github.com/Team-Sass/toolkit

A set of tools for you to use on your site, helpful mixins and fucntions.

@import 'toolkit';
@import 'toolkit/kickstart';

Creating Components

Create new component with Style Prototypes

yo style-prototype:pattern

Select "component", and choose a name.

Edit your markup

Step 1: Go to the file "/components/{name-of-your-component}/{name-of-your-component}.html"

Step 2: Edit that file.

Style Your Component

All your partials are in /sass/partials/components/{name-of-your-component}/

Create Your Own Components

Layouts

Create new layout with Style Prototypes

yo style-prototype:pattern

Select "layout", and choose a name.

Breakpoint

Simplify your media queries.

$bp-navigation-large: 650px;

@include breakpoint($bp-navigation-large) {
  nav {
    width: 100%;
  }
}

@media (min-width: 650px) {
  nav {
    width: 100%;
  }
}

Singularity GS

We can use Singularity GS to create amazing 100% custom grids.

@include add-grid(2);
@include add-grid(6 at 600px);
@include add-grid(8 3 at 900px);

@include add-gutter(1/3);

This gives us:

• a two column grid at our base
• at 600px give us a 6 column grid
• at 900px give us a TWO column grid with a ratio of 8:3.

Creating Your Grid

.l-my-layout {
  .row {
    @include grid-span(1, 1);

    @include breakpoint($bp-navigation-large) {
      @include grid-span(1, 1);
    }

    @include breakpoint(1000px) {
      @include grid-span(1, 1);
    }
  }
}

Create Your Own Layout