Book description
Push your HTML and CSS skills to the limit and build professional grade, responsive websites
About This Book
- Take your RWD skills to the next level with HTML5 and CSS3 best practices that will give you a solid foundation to build out from
- Harness the power of the CSS pre-processor Sass to speed up the creation of your CSS
- Each chapter dives deep in to different aspects of RWD and is designed to get you up to speed with the latest developments in professional web design
Who This Book Is For
If you're already building responsive designs and are looking to level up your skills, then Mastering Responsive Web Design is the book for you. Regardless of whether you're a web designer, or web developer, you'll find something here to help you in your responsive design journey.
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
In Detail
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.
Style and approach
Designing and developing for the web should be fun, and that's the tone used in the book. This book is written in a step-by-step format with clean-cut examples. You will also find tips and notes all over the book to help clarify those small and simple details most books and tutorials assume you already know.
Table of contents
-
Mastering Responsive Web Design
- Table of Contents
- Mastering Responsive Web Design
- Credits
- About the Author
- Acknowledgment
- About the Reviewers
- www.PacktPub.com
- Preface
- 1. Harness the Power of Sass for Responsive Web Design
-
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
-
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
- 4. CSS Grids, CSS Frameworks, UI Kits, and Flexbox for RWD
- 5. Designing Small UIs Driven by Large Finger
-
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
- 7. Meaningful Typography for Responsive Web Design
-
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
- Modular Scale for typography
- Design – large and small screen views
-
Setting up a basic HTML template
- Using CSS reset to normalize display
- Adding the e-mail content
- Third-party services
- Summary
- Index
Product information
- Title: Mastering Responsive Web Design
- Author(s):
- Release date: August 2015
- Publisher(s): Packt Publishing
- ISBN: 9781783550234
You might also like
video
Learning Responsive Web Design
A quick, easy-to-understand video course for beginners on the fundamentals of responsive web design Description Learning …
book
Learning Responsive Web Design
Deliver an optimal user experience to all devices—including tablets, smartphones, feature phones, laptops, and large screens—by …
book
Responsive Web Design, Second Edition
Since its groundbreaking release in 2011, Responsive Web Design remains a fundamental resource for anyone working …
book
Jump Start Responsive Web Design, 2nd Edition
It used to be so simple. You made a website or application to work on a …