Training

 

 

Popular Courses

Browse Our Free Resources

  • whitepapers
  • whitepapers
  • webinars
  • blogs

Our Locations

Training Centres

Vancouver, BC
Calgary, AB
Edmonton, AB
Toronto, ON
Ottawa, ON
Montreal, QC
Hunt Valley
Columbia

locations map

Calgary

550 6th Av SW
Suite 475
Calgary, AB
T2P 0S2

Toronto

821A Bloor Street West
Toronto, ON
M6G 1M1

Vancouver

409 Granville St
Suite 902
Vancouver, BC
V6C 1T2

U.S. Office

436 York Road
Suite 1
Jenkintown, PA
19046

Other Locations

Dallas, TX
Miami, FL

Home > Training > Web Development > Responsive Web Development Deep Dive Training

Responsive Web Development Deep Dive Training

Course#: WA2401

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.

Topics

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

Duration

2 days

Outline of WA2401 Responsive Web Development Deep Dive Training

  • Responsive Advantages
  • Grab the code
  • Responsive Building Blocks
    • Fluid Layouts
    • 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 Fluid Layout
  • Exercise #2: Building a Responsive Layout
  • Responsive Images
    • Picturefill
    • Use Cases
    • Responsible Icons
  • Responsive Videos
  • Responsive Maps
  • Exercise #3: Responsive Media
  • Responsive Content
    • Flexible Fonts
    • Elastic Layouts
    • Responsive Fonts
    • Ajax-Include Pattern
    • Content Ordering
  • Exercise #4: Responsive Typography
  • Responsive Navigation
    • Toggle Navigation
    • Off -Canvas Flyout Navigation
  • Exercise #5: Responsive Navigation
  • Responsive with Server-side Support (RESS)
    • User Agent Detection
    • Feature Detection
  • Responsive Workflow Patterns
  • Adaptive Design
  • Responsive + Adaptive = Awesomeness
  • Responsive Frameworks
    • jQuery Mobile
    • Twitter Bootstrap
    • Foundation
  • Responsive Style Guides
  • Responsive Testing Tools
    • Actual Devices
    • Emulators
    • Simulators
  • Responsive Performance
  • Securing Responsive Sites
  • Responsive Project Strategies
  • Responsive Email
  • Responsive Ads
  • Analytics
  • Responsive WireframingTools
  • Responsive Layouts with Flexbox
  • Resources
We regularly offer classes in these and other cities. Atlanta, Austin, Baltimore, Calgary, Chicago, Cleveland, Dallas, Denver, Detroit, Houston, Jacksonville, Miami, Montreal, New York City, Orlando, Ottawa, Philadelphia, Phoenix, Pittsburgh, Seattle, Toronto, Vancouver, Washington DC.
*Your name:

*Your e-mail:

*Phone:

*Company name:

Additional notes:

We have received your message. A sales representative will contact you soon.

Thank you!.

more details
buy this course

Register for a courseware sample

It's simple, and free.

 

Thank You!

You will receive an email shortly containing a link to download the requested sample of the labs for this course.