Win a Free Class!

Join our email list for a chance to win

Mobile & Responsive Web Design

Adapt Sites for Tablets, Mobile & More

Websites can be viewed on a variety of devices, from mobile phones, to tablets to desktop computers. Designing and building these sites require new skills and a new approach to their design. Responsive web design detects a device’s screen size and adjusts accordingly. It’s a hot new technology all web designers should know; we'll teach you how to use it.

In this training you’ll start by learning important issues for mobile-optimized websites. Then you’ll work on a responsive site that will adapts to a device’s screen size. Learn to optimize pages for faster download on mobile devices by using CSS3 instead of graphics, how to deal with Retina displays, CSS media queries (break points), new HTML5 form elements and more.

This advanced level course is for people who have experience coding webpages. Knowledge equivalent to our Dreamweaver Level 2 class is required, as is some experience with hand coding. Experience with HTML5 & CSS3 is also highly recommended.

  • Pages automatically adapt to Mobile, Tablet, and Desktops.

  • Mobile friendly sites that look great and download fast.

What You’ll Learn

Section 1
Setting Up For Class: Do This Exercise First!

Topics

  • Setting Up Class Files
Flix: Setting the Viewport Meta Tag

Topics

  • The Viewport Meta Tag
  • device-width
  • initial-scale
  • maximum-scale
Flix: Hi-Res Images

Topics

  • Double-Resolution Images (Retina Graphics)
  • Setting Width to Half the Image’s Width
Flix: Using CSS3 for Hi-Res Effects

Topics

  • CSS3 Gradients and Shadows
Flix: Adding Custom Fonts

Topics

  • Real Web Fonts
  • @font-face
Flix: Creating a Scrollable Area

Topics

  • Creating a Horizontal Scrollable Area
  • Optimizing the Scrolling for iOS Touch Devices

Upcoming Classes

Price: $975 Click for Discounts

  • 18 hours of Hands-On Training
  • Custom Written Workbook Included
  • Mac or PC

We Literally Wrote the Book!

Mobile and Responsive Web Design Workbook

To make the perfect class we had to write our own workbooks which are included with each class.

Can’t take a class? Our workbooks are the next best thing.

Buy Workbook

Other Web Dev Classes

Section 2
Flix: Styling a Mobile-Friendly Nav

Topics

  • Mobile-Friendly Nav
  • Text Shadow
Flix: Mobile-Friendly Forms

Topics

  • Input Types (Search & Email)
  • Making CSS Background Gradients Fill the Page
Flix: Media Queries For Retina Graphics

Topics

  • Media Queries
  • Loading Hi-Res Images for Retina Display Devices
Simple Responsive Site

Topics

  • Fluid Widths
  • Max-Width Media Queries
Section 3
Mobile First

Topics

  • Mobile First Thinking
  • Min-Width Media Queries
Jive Factory: Creating a Basic Wireframe

Topics

  • HTML5 Boilerplate
  • Wireframing the Basic Jive Factory Layout
  • Adding Placeholder Content
  • Setting Up “Mobile First” Media Queries
Jive Factory: Finishing the Wireframe

Topics

  • Structuring the Page for Various Sizes/Devices
  • Min and Max-Width Media Queries
  • Hiding Elements for Specific Sizes/Devices
Section 4
Jive Factory: Adding the Background

Topics

  • Adding a Visual Indicator for Each Media Query
  • Styling the Page’s Background
  • Adding Custom Web Fonts
Jive Factory: Start the Header

Topics

  • Adding the Logo & Nav
  • Styling the Logo & Nav for Various Sizes/Devices
  • Adding Images for Large Screens Only (Don’t Load on Mobile)
Jive Factory: Finish Header & Add Slideshow

Topics

  • Styling the Header
  • Adding a Placeholder Slideshow

Section 5
Jive Factory: More Responsive Issues

Topics

  • Styling the Upcoming Shows for Various Sizes/Devices
  • Using min-height to Ensure Element Heights Match
Jive Factory: Limiting Flexible Content

Topics

  • Setting Max-Widths
  • Constraining the Design at Certain Break Points
  • Centering the Design at Certain Screen Sizes
Jive Factory: Responsive Slideshow

Topics

  • Getting the Slideshow Working
  • Styling the Slideshow Content and Controls
  • Preventing the Images from Loading on Mobile
  • Supporting IE 8 and Older with a Background-Size Polyfill
Section 6
Jive Factory: Respond.js Polyfill for IE

Topics

  • Using a Polyfill to get Media Queries Working in IE 7 & 8
  • Final Code Cleanup
Bootstrap: Grids for Responsive Prototyping

Topics

  • Twitter Bootstrap
  • Using the Bootstrap Grid System
Bootstrap: Fluid and Nested Layouts

Topics

  • Using Bootstrap’s Fluid Layout
  • Nesting Sections
Bootstrap: Making it Responsive

Topics

  • Using the Responsive Bootstrap Styles