Responsive Web Development Deep Dive
Course
Inhouse
Description
-
Type
Course
-
Methodology
Inhouse
-
Start date
Different dates available
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.
Facilities
Location
Start date
Start date
About this course
Building responsive sites with fluid grids, media, and media queriesLearn to implement the appropriate layout patterns for your contentLearn to apply a responsive image strategyLearn to build a responsive navigation menuLearn to create responsive typography with percentages, ems and remsUse feature-detection and server-side enhancement to provide a richer experienceLearn responsive workflow patterns including: Bento box, Nested doll, Append around, and Ajax-includeLearn how to apply adaptive techniques to create truly unique user experiencesLearn about tools and frameworks that help simplify responsive web developmentLearn performance strategies that keep your sites lean, fast, and responsiveLearn to apply the fundamentals we learn in class by building responsive solutions for five classroom exercisesGain real-world experience as we convert your own corporate or client homepage into a responsive site during the all-day workshop on day three
Web Developers
Some Web Development Experience
Reviews
This centre's achievements
All courses are up to date
The average rating is higher than 3.7
More than 50 reviews in the last 12 months
This centre has featured on Emagister for 6 years
Subjects
- Layout
- Web
- Media
- Web Development
Course programme
#text-block-8 { margin-bottom:0px; text-align:left; }
#text-block-11 { margin-bottom:0px; text-align:left; }
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
#text-block-12 { margin-bottom:0px; text-align:left; }
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
Responsive Web Development Deep Dive