Mastering Responsive Web Design

Push your HTML and CSS skills to the limit and build professional grade, responsive websites
Preview in Mapt

Mastering Responsive Web Design

Ricardo Zea

1 customer reviews
Push your HTML and CSS skills to the limit and build professional grade, responsive websites
Mapt Subscription
FREE
$29.99/m after trial
eBook
$28.00
RRP $39.99
Save 29%
Print + eBook
$49.99
RRP $49.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$28.00
$49.99
$29.99p/m after trial
RRP $39.99
RRP $49.99
Subscription
eBook
Print + eBook
Start 30 Day Trial

Frequently bought together


Mastering Responsive Web Design Book Cover
Mastering Responsive Web Design
$ 39.99
$ 28.00
Responsive Web Design: Advancing your Design to the Modern Web [Video] Book Cover
Responsive Web Design: Advancing your Design to the Modern Web [Video]
$ 74.99
$ 63.75
Buy 2 for $35.00
Save $79.98
Add to Cart
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 

Book Details

ISBN 139781783550234
Paperback334 pages

Book Description

Building powerful and accessible websites and apps using HTML5 and CSS3 is a must if we want to create memorable experiences for our users. In the ever-changing world of web design and development, being proficient in responsive web design is no longer an option: it is mandatory.

Each chapter will take you one step closer to becoming an expert in RWD. Right from the start your skills will be pushed as we introduce you to the power of Sass, the CSS preprocessor, to increase the speed of writing repetitive CSS tasks. We’ll then use simple but meaningful HTML examples, and add ARIA roles to increase accessibility. We’ll also cover when desktop-first or mobile-first approaches are ideal, and strategies to implement a mobile-first approach in your HTML builds.

After this we will learn how to use an easily scalable CSS grid or, if you prefer, how to use Flexbox instead. We also cover how to implement images and video in both responsive and responsible ways. Finally, we build a solid and elegant typographic scale, and make sure your messages and communications display correctly with responsive emails.

Table of Contents

Chapter 1: Harness the Power of Sass for Responsive Web Design
How does Sass work?
The basic concepts of Sass for RWD
Summary
Chapter 2: Marking Our Content with HTML5
The <main> element
The <article> element
The <section> element
The <aside> element
The <header> element
The <footer> element
The <nav> element
Using WAI-ARIA landmark roles to increase accessibility
A full HTML5 example page with ARIA roles and meta tags
Output screenshots for desktop and mobile
Summary
Chapter 3: Mobile-first or Desktop-first?
Create your designs in a desktop-first view, but implement them with mobile-first
Sass mixins for the mobile-first and desktop-first media queries
Dealing with legacy browsers
How to deal with high-density screens
Sometimes RWD is not necessarily the right solution
Retrofitting an old website with RWD
Retrofitting with AWD
Retrofitting with RWD
Summary
Chapter 4: CSS Grids, CSS Frameworks, UI Kits, and Flexbox for RWD
What is a grid?
CSS grids
CSS frameworks
UI kits
The pros and cons of CSS frameworks for RWD
Creating a custom CSS grid
Building a sample page with the custom CSS grid
Stop using CSS grids, use Flexbox!
Summary
Chapter 5: Designing Small UIs Driven by Large Finger
The ideal target sizes on small UIs
The posture patterns and the touch zones
The nav icon – basic guidelines to consider for RWD
The navigation patterns for RWD
Summary
Chapter 6: Working with Images and Videos in Responsive Web Design
Tips for reducing the file size in images for RWD
Third-party image resizing services
The <picture> element and the srcset and sizes attributes
Replacing 1x images with 2x images on the fly with Retina.js
Making videos responsive
The Vector Formats
Summary
Chapter 7: Meaningful Typography for Responsive Web Design
Pixels, ems, or rems for typography?
Calculating relative font sizes
Creating a Modular Scale for a harmonious typography
Using the Modular Scale for typography
Web fonts and how they affect RWD
Sass mixin for implementing web fonts
Using FlowType.js for increased legibility
Summary
Chapter 8: Responsive E-mails
Why do we need to worry about responsive e-mails?
Don't overlook your analytics
Recommendations for building better responsive e-mails
Responsive e-mail build
Third-party services
Summary

What You Will Learn

  • Install and use Sass with SCSS syntax to create your CSS
  • Use HTML5 tags the right way, for the right type of content
  • Enhance the experience of users with assistive technology with ARIA roles
  • Design with a desktop-first approach, but implement with mobile-first methodology
  • Master your layouts by creating your own scalable CSS grid, or using Flexbox for total layout ‘flexibility’
  • Retrofit your old web sites with your new responsive design skills
  • Deal with legacy browsers, and learn how to keep your designs consistent
  • Implement widely used responsive patterns, such as the “drawer navigation”, the “off-canvas” and the “flexbox-based” navigation patterns
  • Find the best way to serve the right type of image and how to make videos responsive
  • Build custom responsive emails to ensure the message gets across regardless of the device

Authors

Table of Contents

Chapter 1: Harness the Power of Sass for Responsive Web Design
How does Sass work?
The basic concepts of Sass for RWD
Summary
Chapter 2: Marking Our Content with HTML5
The <main> element
The <article> element
The <section> element
The <aside> element
The <header> element
The <footer> element
The <nav> element
Using WAI-ARIA landmark roles to increase accessibility
A full HTML5 example page with ARIA roles and meta tags
Output screenshots for desktop and mobile
Summary
Chapter 3: Mobile-first or Desktop-first?
Create your designs in a desktop-first view, but implement them with mobile-first
Sass mixins for the mobile-first and desktop-first media queries
Dealing with legacy browsers
How to deal with high-density screens
Sometimes RWD is not necessarily the right solution
Retrofitting an old website with RWD
Retrofitting with AWD
Retrofitting with RWD
Summary
Chapter 4: CSS Grids, CSS Frameworks, UI Kits, and Flexbox for RWD
What is a grid?
CSS grids
CSS frameworks
UI kits
The pros and cons of CSS frameworks for RWD
Creating a custom CSS grid
Building a sample page with the custom CSS grid
Stop using CSS grids, use Flexbox!
Summary
Chapter 5: Designing Small UIs Driven by Large Finger
The ideal target sizes on small UIs
The posture patterns and the touch zones
The nav icon – basic guidelines to consider for RWD
The navigation patterns for RWD
Summary
Chapter 6: Working with Images and Videos in Responsive Web Design
Tips for reducing the file size in images for RWD
Third-party image resizing services
The <picture> element and the srcset and sizes attributes
Replacing 1x images with 2x images on the fly with Retina.js
Making videos responsive
The Vector Formats
Summary
Chapter 7: Meaningful Typography for Responsive Web Design
Pixels, ems, or rems for typography?
Calculating relative font sizes
Creating a Modular Scale for a harmonious typography
Using the Modular Scale for typography
Web fonts and how they affect RWD
Sass mixin for implementing web fonts
Using FlowType.js for increased legibility
Summary
Chapter 8: Responsive E-mails
Why do we need to worry about responsive e-mails?
Don't overlook your analytics
Recommendations for building better responsive e-mails
Responsive e-mail build
Third-party services
Summary

Book Details

ISBN 139781783550234
Paperback334 pages
Read More
From 1 reviews

Read More Reviews

Recommended for You

Instant HTML5 Responsive Table Design How-to Book Cover
Instant HTML5 Responsive Table Design How-to
$ 12.99
$ 9.10
Responsive Web Design with HTML5 and CSS3 Book Cover
Responsive Web Design with HTML5 and CSS3
$ 23.99
$ 4.80
Responsive Web Design with HTML5 and CSS3 - Second Edition Book Cover
Responsive Web Design with HTML5 and CSS3 - Second Edition
$ 31.99
$ 22.40
Mastering Web Application Development with AngularJS Book Cover
Mastering Web Application Development with AngularJS
$ 26.99
$ 5.40
Bootstrap Site Blueprints Book Cover
Bootstrap Site Blueprints
$ 26.99
$ 18.90
Object-Oriented JavaScript - Second Edition Book Cover
Object-Oriented JavaScript - Second Edition
$ 29.99
$ 21.00