Events  Deals  Jobs  NFT NYC 2024 
    Sign in  
 
 
Responsive web design detects a device's screen size & adjusts accordingly. It's a hot new technology all web designers should know; we'll teach you how to use it.
Wed, Oct 29, 2014 @ 09:00 AM   $975   Noble Desktop, 594 Broadway, Ste 1202
 
     
 
 
              

      
 
Sign up for our awesome New York
Tech Events weekly email newsletter.
   
LOCATION
EVENT DETAILS
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 Web Development Level 2 class is required, as is experience with hand coding HTML/CSS. Experience with HTML5 & CSS3 is also highly recommended.

WHAT YOU'LL LEARN

SECTION 1

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

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

Web Design Principles
Topics
Grid Based Web Design
General Design Principles
How to Create a Balanced Layout
Page structure
The homepage

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
 
 
 
 
© 2024 GarysGuide      About    Feedback    Press    Terms