Warning: date() [function.date]: It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'UTC' for 'UTC/0.0/no DST' instead in /var/www/html/include/func/func.logging.php on line 510
Warning: date() [function.date]: It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'UTC' for 'UTC/0.0/no DST' instead in /var/www/html/include/logging.php on line 54
Warning: date() [function.date]: It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'UTC' for 'UTC/0.0/no DST' instead in /var/www/html/include/logging.php on line 60
Warning: date() [function.date]: It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'UTC' for 'UTC/0.0/no DST' instead in /var/www/html/init.php on line 481
Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/include/func/func.logging.php:510) in /var/www/html/include/sessions.php on line 74
Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/include/func/func.logging.php:510) in /var/www/html/include/sessions.php on line 76
Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/include/func/func.logging.php:510) in /var/www/html/include/sessions.php on line 85
Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/include/func/func.logging.php:510) in /var/www/html/include/sessions.php on line 86
Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/include/func/func.logging.php:510) in /var/www/html/include/sessions.php on line 93
Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/include/func/func.logging.php:510) in /var/www/html/include/func/func.core.php on line 1836
Warning: date() [function.date]: It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'UTC' for 'UTC/0.0/no DST' instead in /var/www/html/cron.php on line 105
Warning: date() [function.date]: It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'UTC' for 'UTC/0.0/no DST' instead in /var/www/html/include/func/func.logging.php on line 49
Warning: date() [function.date]: It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'UTC' for 'UTC/0.0/no DST' instead in /var/www/html/include/func/func.logging.php on line 79
Warning: date() [function.date]: It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'UTC' for 'UTC/0.0/no DST' instead in /var/www/html/include/func/func.logging.php on line 86
Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/include/func/func.logging.php:510) in /var/www/html/include/get_language.php on line 165
Warning: date() [function.date]: It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'UTC' for 'UTC/0.0/no DST' instead in /var/www/html/product.php on line 82
INVALID SQL: 1064 : You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'OPTION SQL_BIG_SELECTS=1' at line 1
SQL QUERY FAILURE:SET OPTION SQL_BIG_SELECTS=1
INVALID SQL: 1064 : You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'OPTION SQL_BIG_SELECTS=1' at line 1
SQL QUERY FAILURE:SET OPTION SQL_BIG_SELECTS=1
eClasses.org�::�Course Catalog�::�Responsive Web Design
eClasses.org :: Course Catalog :: Responsive Web Design

Responsive Web Design (D500)

Whether you design for mobile devices as a primary target or as a nice extra, you can use the power of CSS to ensure that the same content can be accessed across all hardware platforms, from mobile phones to wide-screen high-resolution displays.

    Three key technical features are the heart of responsive Web design:
  • Media queries and media query listeners
  • A flexible grid-based layout that uses relative sizing
  • Flexible images and media, through dynamic resizing or CSS

Truly responsive Web design requires all three features to be implemented.

While mobile devices are changing the display landscape, with the appearance of more and more small screens, don’t forget what’s happening at the other end of the spectrum. Displays are also getting larger and larger.

Having to serve both segments shouldn’t stop designers from being innovative which is why Responsive Design is now the standard in creating web sites today.

    Objectives for this class:
  • Understand the main components of responsive design.
  • Use of media queries
  • Know the importance of the viewport
  • The importance of a mobile first design
  • How to apply a grid system
  • Use the various HTML5 semantic elements
  • Learn the most up-to-date responsive image techniques
  • How typography can be made responsive
  • Use of polyfills for legacy browsers
  • Mobile menu techniques
  • How to fully test a responsive design
  • Learn about web components

Who Should Attend: This course is for anybody who wants to know how to create websites that will display its content appropriately for all types of mobile and desktop devices.

Outline
Week 1 - Responsive Design Concepts
  • What is Responsive Design?
  • Mobile First concepts
  • Core Concepts
    • fluid grids
    • flexible images
    • media queries
  • Examples
  • Viewport Meta Tag
  • Testing tools
Week 2: Responsive Content and Media Queries
  • Content Strategy
  • Developing Content
    • How users read
    • Headings
    • Content Parity
  • Responsive Content
    • Dynamic loading (ie. lazy loading)
    • Selective loading
  • Viewport
  • Separating Content from Presentation
  • Media Queries
    • Syntax
    • embedded vs external
    • Determining breakpoints
  • Navigation
    • Types
    • Navigation Patterns
    • Examples
Week 3: Grids, Typography and Responsive Images
  • Grid overview
  • Absolute and relative font sizes
    • Ems
    • Rems
    • Converting pixel to ems/rems
  • Responsive Images
    • Retina screens (high resolution)
    • DPR
    • Issues with fixed-width sizing
    • srcset and sizes attribute
    • element
    • Best solutions and pitfalls
    • Polyfills
    • What is supported today?
Week 4: Testing and Debugging
  • Testing techniques overview
    • Browser
    • Device testing
    • Unit testing
    • Visual Regression testing
    • Automated testing
  • Common problems with RWD testing
Week 5: Bootstrap Frameworks Overview
  • Overview of CSS frameworks
  • Bootstrap highlights
  • How Bootstrap Grid works
  • Other fun components
Week 6: Creating a Responsive Site from Scratch
  • We will review step-by-step the creation of a simple responsive website with custom CSS (no CSS frameworks).
Prerequisites
  • Students should be knowledgeable in HTML5, CSS, and JavaScript
Requirements

Books:
 No Textbook Required

Additional information:

Your place in the course is confirmed by your payment. Introductory courses are intended for students with no experience in the subject matter and are seeking beginner level training.

Refund Policy: Please read our Terms and Refund Policy before registering for this course.

Additional Cost: Book and software might be required for the course. Read the Requirements and Book section for more information. Course fee does not include the book and software cost .

How eClasses Work:Instructors post lectures (text-based, no video or audio), reading selections, and hands-on assignments once a week in the online classroom. Students can discuss the assignments with the instructor and amongst themselves in the classroom area. This format has no set meeting time, which allows students to attend class at a time most convenient to them, yet still provides logically organized communication between class participants. Students can apply for the completion certificate after finishing the class.

Student CenterStudent Center
Cart is empty
Responsive Web Design
Price: $240.00
Item No.: D500
Instructor: Frank Stepanski
Open Courses: No other sessions are scheduled for this course. You can add to your wish list and you will be notified when other sessions are scheduled.

Instructor's ProfileInstructor
Frank Stepanski has a Masters in software engineering and has over 10 years experience in web development. Frank has worked with technologies such as ASP.NET, SQL Server, PHP, MySQL, as well as HTML, CSS and JavaScript.
Before you register for this class, please read the Outline, Prerequisites, Requirements, Books, and Refund Policy sections carefully.
 

Testimonials

Rating
No testimonial available!