Responsive Web Development

$1,850.00

Duration Three Days

Description

Duration: 3 Days

Description

This instructor-led course will teach developers and designers how to build a single responsive site that can be viewed across all devices by applying the latest HTML5 techniques and strategies.

Learning Objectives

At course completion, attendees will have experience with:

  •  Building responsive sites with fluid grids, media, and media queries
  •  Learn to implement the appropriate layout patterns for your content
  •  Learn to apply a responsive image strategy
  •  Learn to build a responsive navigation menu
  •  Learn to create responsive typography with percentages, ems and rems
  •  Use feature-detection and server-side enhancement to provide a richer experience
  •  Learn responsive workflow patterns including: Bento box, Nested doll, Append around, and Ajax-include
  •  Learn how to apply adaptive techniques to create truly unique user experiences
  •  Learn about tools and frameworks that help simplify responsive web development
  •  Learn performance strategies that keep your sites lean, fast, and responsive
  •  Learn to apply the fundamentals we learn in class by building responsive solutions for five classroom exercises
  •  Gain real-world experience as we convert your own corporate or client homepage into a responsive site during the all-day workshop on day three

Audience

This course is intended for developers and designers who want to start creating a single site that displays and functions well across our diverse landscape of devices including mobile phones, tablets and desktop browsers.

Prerequisites

Before attending this course, the student should have experience with:

  •  HTML knowledge
  •  CSS knowledge
  •  JavaScript basic preferred

Course Outline

  •  Responsive Advantages
  •  Responsive Building Blocks
    •  Fluid Grids
    •  Fluid Images/Media
    •  Media Queries
    •  Breakpoints
  •  Layout Patterns
    •  Mostly Fluid Pattern
    •  Column Drop Pattern
    •  Layout Shifter Pattern
    •  Mondrian Pattern
    •  Basic Gallery Pattern
  •  Exercise #1: Building a Responsive Layout
  •  Responsive Images
    •  Picturefill
    •  Sencha.io Src
  •  Exercise #2: Adding Responsive Images
  •  Responsible Icons
    •  Grunticon
  •  Responsive Navigation
  •  Exercise #3: Adding Responsive Navigation
  •  Responsive Typography
  •  Exercise #4: Adding Responsive Fonts
  •  Responsive with Server-side Support (RESS)
  •  Responsive Workflow Patterns
  •  Adaptive Design
  •  Responsive + Adaptive = Awesomeness
  •  Responsive Layouts with Flexbox
  •  Responsive Templates & Frameworks
  •  RWD with jQuery Mobile
  •  RWD with Twitter Bootstrap
  •  Responsive Testing Tools
  •  Responsive Wireframing Tools
  •  Performance Advantage
    •  Responsive Implications
    •  Analysis Tools
    •  Tuning
    •  Remote Debugging
  •  Inspiration
  • Resources