Get Schedule and Pricing Other Adobe Dreamweaver training courses
2486

Adobe Mobile & Responsive Web Design Training Course

Mobile & Responsive Web Design Training Schedule

Mobile & Responsive Web Design Training Course Synopsis

In this hands - on instructor led course you'll be taken step-by-step through a variety of exercises that teach you Mobile & Responsive Web Design. You’ll start by learning important issues for mobile-optimized websites. Then you’ll work on a responsive site that will adapt 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. Please note, these exercises are done in pure code, without Dreamweaver.

Prerequisites for this Mobile & Responsive Web Design Training Course

Knowledge of your operating system and basic computer navigation is required for all classes. You should have some familiarity with HTML, the concepts of semantic markup. You should also have had exposure to JavaScript and be familiar with the terms DOM and API.

What You Will Learn in This Mobile & Responsive Web Design Training Course

  • Styling a Mobile - Friendly Nav
  • Mobile First
  • Jive Factory: Adding the Background
  • Jive Factory: More Responsive Issues

Mobile & Responsive Web Design Training Course Length and Time

This class is 2 days long. Class time is 9:00 a.m.- 4:00 p.m. Breaks are scheduled throughout the day and lunch is typically scheduled 12-1. Students provide their own lunch.

Mobile & Responsive Web Design Enrollment

Please see our Enrollment Page (http://www.ledet.com/enroll) for our enrollment form.

Locations for this Training Course

We have training centers in Atlanta, Houston, Chicago, Denver, San Diego and Washington DC. We also offer classes at a network of rental facilities. We offer private onsite training and instructor-led, live online training. If coming to a rental facility, please double-check the location of your class with our office to make sure you get to the right location.

Goals for this Mobile & Responsive Web Design Training Course

Sterling Ledet and Associates realizes the importance of education and we take pride in being able to offer you classes that are more custom fit to your needs. Call us at (877) 819-2665 if you have any special questions or e-mail us at sales@ledet.com.

Lesson 1 - Learning the basics

  • Setting Up Class Files
  • The Viewport Meta Tag
  • device-width
  • initial-scale
  • maximum-scale
  • Double-Resolution Images (Retina Graphics)
  • Setting Width to Half the Image’s Width
  • CSS3 Gradients and Shadows
  • Real Web Fonts
  • Creating a Horizontal Scrollable Area
  • Optimizing the Scrolling for iOS Touch Devices
  • >

Lesson 2 - Styling a Mobile - Friendly Nav

  • Mobile-Friendly Nav
  • Text Shadow
  • Input Types (Search & Email)
  • Making CSS Background Gradients Fill the Page
  • Media Queries
  • Loading Hi-Res Images for Retina Display Devices
  • Fluid Widths
  • Max-Width Media Queries
  • >

Lesson 3 - Mobile First

  • Mobile First Thinking
  • Min-Width Media Queries
  • HTML5 Boilerplate
  • Adding Placeholder Content
  • Setting Up “Mobile First” Media Queries
  • Structuring the Page for Various Sizes/Devices
  • Min and Max-Width Media Queries
  • Hiding Elements for Specific Sizes/Devices

Lesson 4 - Jive Factory: Adding the Background

  • Adding a Visual Indicator for Each Media Query
  • Styling the Page’s Background
  • Adding Custom Web Fonts
  • Adding the Logo & Nav
  • Styling the Logo & Nav for Various Sizes/Devices
  •  
  • Adding Images for Large Screens Only (Don’t Load on Mobile)
  • Styling the Header
  • Adding a Placeholder Slideshow

Lesson 5 - Jive Factory: More Responsive Issues

  • Styling the Upcoming Shows for Various Sizes/Devices
  • Using min-height to Ensure Element Heights Match
  • Setting Max-Widths
  • Constraining the Design at Certain Break Points
  • Centering the Design at Certain Screen Sizes
  • Getting the Slideshow Working
  • Styling the Slideshow Content and Controls
  • reventing the Images from Loading on Mobile
  • Supporting IE 8 and Older with a Background-Size Polyfill

Lesson 6 - Jive Factory: Respond.js Polyfill for IE

  • Using a Polyfill to get Media Queries Working in IE 7 & 8
  • Final Code Cleanup
  • Twitter Bootstrap
  • Using the Bootstrap Grid System
  • Using Bootstrap’s Fluid Layout
  • Nesting Sections
  • Using the Responsive Bootstrap Styles

Bonus Exercises - Bootstrap: Adding a Slideshow

  • Adding a Slideshow Using the Bootstrap Carousel
  • Adding Slideshow Controls
  • Using JavaScript to Redirect to a Mobile Site
  • Setting Cookies
  • Adding a Link to the Full Site

Disclaimer

Our goal is to make sure your class meets your objectives, not ours. Therefore, all of our outlines are treated as guides to help steer the workshop. This outline does not guarantee that all the topics listed will be covered in the time allowed. The amount of material covered is based on the skill level of the student audience. We may change or alter course topics to best suit the classroom situation.

Upcoming Classes

Call to schedule