The Wayback Machine - https://web.archive.org/web/20150906080022/https://www.packtpub.com/web-development/mastering-responsive-web-design-html5-and-css3

Mastering Responsive Web Design with HTML5 and CSS3

Become a master in RWD with this practical, engaging guide

Mastering Responsive Web Design with HTML5 and CSS3

Mastering
Ricardo Zea

Become a master in RWD with this practical, engaging guide
$39.99
$49.99
RRP $39.99
RRP $49.99
eBook
Print + eBook
$12.99 p/month

Get Access

Get Unlimited Access to every Packt eBook and Video course

Enjoy full and instant access to over 3000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781783550234
Paperback334 pages

About This Book

  • Build responsive designs with solid yet simple HTML5 and CSS3 best practices
  • Use CSS preprocessors (Sass) to speed up the creation of CSS
  • Each chapter covers a different feature of RWD with carefully chosen, interesting examples, including the latest developments in responsive design

Who This Book Is For

If you already know some HTML and CSS and understand the principles of responsive web design, this book is for you. There’s something here for you to learn regardless of if you’re a web designer or web developer, or whether you’re a seasoned expert web professional.

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 desktop-first approach but implement with mobile-first methodology
  • For your layouts, either create and use your own scalable CSS grid, or use Flexbox
  • Create three types of navigation for small screen devices
  • Find the best way to serve the best type of image and how to make videos responsive
  • Build custom responsive emails to ensure the message gets across regardless of the device

In Detail

Responsive web design is getting more complex day by day and without the necessary design and development skill sets, it’s a matter of time before we’re left behind.

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

Whether you’re a web designer or web developer, or a seasoned expert web professional, this book will bolster your HTML and CSS skills to a master level.

The book is designed in a way that each chapter will take you one step closer to becoming an expert in RWD. The book begins with introducing you to the power of CSS preprocessors, Sass in this case, to increase the speed of writing repetitive CSS tasks, then use simple but meaningful HTML examples; and add ARIA roles to increase accessibility. You will also understand why a mobile-first approach is ideal.

Next, you will learn how to use an easily scalable CSS grid or if you prefer, use Flexbox instead. Create navigations for small screen devices using the “drawer navigation,” “off-canvas” or “toggle” navigation patterns, and also implement images and media in both responsive and responsible ways. Finally, you will build a solid and meaningful typographic scale and make sure your messages and communications display correctly with responsive emails.

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

Recommended for You