Name: Mastering Responsive Web Design
Author: Ricardo Zea
ISBN: 9781783550241

微信读书书城Mastering Responsive Web Design

首页我的书架登录

翻译完成

切换

Mastering Responsive Web Design

Ricardo Zea

扉页
coverpage
+书签
Mastering Responsive Web Design
Credits
About the Author
Acknowledgment
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers, and more
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
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
Index

简介

版权

Mastering Responsive Web Design