|  Register|  Log In

Event Detail

Details
Name: Responsive Web Design
Date: 12/08/2017, 1 day(s)
Time: 9am-4pm
Place: San Jose, 2350 Mission College
Price: Member - $316
Non-Member - $395


Web sites are being viewed on a wide variety of devices, both larger and smaller, including desktop, tablet and mobile. Sites should have a "responsive" architecture - design that responds to any device size. Responsive design is about serving one HTML document to countless browsers and devices, but using flexible layouts and media queries to ensure that design is as portable and accessible as possible.

Your instructor will teach you the three core ingredients to create a responsive website: a fluid grid-based layout; flexible images and media; and Media Queries, a module from the CSS3 specification that allows your layout to adapt to the viewer's device. Learn best practices for preparing the HTML document for responsive design. You can't change the design with a different stylesheet if your HTML is cluttered with layout attributes and design tags. Learn to create clean semantic markup so that your layout can respond to various devices and give the user a tailored web experience. You'll create a responsive web design that can adapt to the constraints of the browser window or device that renders it, seeming to respond to the user's needs. Please note, these exercises are done with pure HTML & CSS code, without a WYSIWYG editor.


Understanding Responsive Web Design
  • The rapid spread of mobile devices has dramatically changed the word of web design
  • Web designers need to ensure their websites look good not only on a big screen, but also on a tiny phone and everything in between
  • You will learn about reference websites, online tools and more to help you create adaptive web designs that are optimized for mobile devices
Flexible Typography
  • Calculating relative type sizes
  • Responsive text styles that respond to device sizes and orientations
  • Converting pixel-perfect layouts to scaling dimensions
Using Fluid Grid Layouts to Adapt to Device Viewports
  • Flexible column widths and margins
  • Working with borders in fluid layouts and nested sections
  • Setting limits to scalability with minimum and maximum widths
Automatic Scaling Images and Media
  • Flexible images and resizing video
  • Automatic scaling background images
  • Supporting IE 8 and older with a background-size polyfill
  • Fixing browser-specific issues with flexible images, including AlphaImageLoader
CSS3 Media Queries
  • Learn about max-width and min-width Media Queries, so that pages automatically adapt to mobile, tablet and desktops
  • Setting the Viewport meta tag
  • Constraining the design at "break points" in your page layout
  • Using a polyfill to get Media Queries working in IE 7 & 8
Mobile Design
  • Learn to optimize pages for faster download on mobile devices by using CSS3 instead of graphics
  • Preventing images from loading on mobile
  • Designing with a "Mobile First" approach
  • Using JavaScript to redirect to a mobile site

Prerequisites:

  • Familiarity with CSS: classes, IDs, selectors, and rules
Responsive Web Design training is offered at these locations:
  • Responsive Web Design training in San Francisco


Sorry! There are no events scheduled for this week. Click here to see all upcoming events.
Date Duration Member/
Non-Member
Location
12/08 1 day(s) $316/ $395 San Jose, 2350 Mission College Register >
VMA Sponsors
VMA Partners