
Mastering Responsive Web Design
Description
Alles über E-Books | Antworten auf Fragen rund um E-Books, Kopierschutz und Dateiformate finden Sie in unserem Info- & Hilfebereich.
- 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
Book DescriptionBuilding 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.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
Who this book is forIf 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.
More details
Other editions
Additional editions

Person
Ricardo Zea hails originally from Medelln, Colombia. He is a passionate and seasoned full-stack designer who is now located in Dayton, Ohio, USA. He is always looking for ways to level up his skills and those around him. Constantly wondering how things are made on the Web, how they work, and why, have made Ricardo a very technical designer, allowing him to explain to others the intricacies of design and the technicalities of the Web in ways that are very easy to understand and assimilate. Ricardo has a master's degree in publicity and advertising and has deep passion for understanding human behavior. He also has a fiercely competitive PC gaming hunger. Together, all this has allowed him to switch from the creative side of the brain to the rational side very easily, allowing him to visualize and create technically sound web and mobile designs that are responsive, perform well, and convey the proper message through design. Ricardo is the author of Mastering Responsive Web Design, Packt Publishing. He's also the organizer of the CodePen Dayton meetup group. He's a member of the Dayton web developers and UX Dayton meetup groups. He's also one of the first members of SitePoint's Ambassadors program. He's also the author of the monthly web design and development newletter Level Up!. He was also a technical reviewer for Sass and Compass, Designers Cookbook, and Sass Essentials, all by Packt Publishing. For several years, he was also a Flash and CorelDRAW professor at different universities in his home country, Colombia. Ricardo has 15 years of experience in web design and 20 years of experience in visual and graphic design.
Content
- Cover
- Copyright
- Credits
- About the Author
- Acknowledgment
- About the Reviewers
- www.PacktPub.com
- Table of Contents
- Preface
- Chapter 1: Harness the Power of Sass for Responsive Web Design
- How does Sass work?
- Installing Sass
- Downloading the Ruby installer
- Opening the command line
- Installing the Sass gem
- Using Sass
- The basic concepts of Sass for RWD
- Sass or SCSS
- The Sass syntax
- The SCSS syntax
- Sass variables
- Sass mixins
- Sass arguments
- How to use several arguments in the same mixin
- Setting default values in multiple arguments
- Nesting in Sass
- Partial files (partials) in Sass
- The Sass extend/inherit feature
- Sass comments
- Vendor prefixing
- The order of vendor prefixing
- Automating vendor prefixing
- Using a third-party program to compile
- The Prepros app
- One compiler only
- Sass mixins to house our media queries
- Media queries mixin methods
- Summary
- Chapter 2: Marking Our Content with HTML5
- The &main& element
- The &article& element
- The §ion& element
- The &aside& element
- The &header& element
- The &footer& element
- The &nav& element
- Using WAI-ARIA landmark roles to increase accessibility
- WAI-ARIA landmark roles
- The banner role
- The navigation role
- The main role
- The contentinfo role
- The search role
- The form role
- The complementary role
- Important meta tags to consider for RWD
- The viewport meta tag
- The X-UA-Compatible meta tag
- The charset meta tag
- 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
- Why create designs in a desktop-first view?
- Why implement with mobile-first?
- Sass mixins for the mobile-first and desktop-first media queries
- The mobile-first mixin
- The desktop-first mixin
- Dealing with legacy browsers
- How to use Respond.js for RWD
- The days of an IE-specific style sheet are dead
- Other benefits of not using an IE-specific style sheet
- How to deal with high-density screens
- Bitmaps or vectors for high-density screens?
- Sometimes RWD is not necessarily the right solution
- Retrofitting an old website with RWD
- The base page
- HTML
- CSS/SCSS
- Creating the _980gs.scss file
- Retrofitting with AWD
- Creating the styles.scss file
- 980px to 768px (AWD)
- 768px to 640px (AWD)
- 640px to 480px (AWD)
- 480px to 320px (AWD)
- Retrofitting with RWD
- The RWD magic formula
- The main container
- The Header and Footer sections
- The Nav section
- The Content section
- 980px to 768px (RWD)
- 768px to 640px (RWD)
- 640px to 480px (RWD)
- 480px to 320px (RWD)
- Summary
- Chapter 4: CSS Grids, CSS Frameworks, UI Kits, and Flexbox for RWD
- What is a grid?
- CSS grids
- The pros and cons of CSS grids for RWD
- CSS frameworks
- UI kits
- The pros and cons of CSS frameworks for RWD
- Creating a custom CSS grid
- Doing the math
- Adding the UTF-8 character set directive and a Credits section
- Including the box-sizing property and the mobile-first mixin
- The main container and converting 10px to percentage value
- Making it mobile-first
- Adding the row and float clearing rules
- Building a sample page with the custom CSS grid
- Nested containers
- Stop using CSS grids, use Flexbox!
- Building a sample page with Flexbox
- The HTML
- The SCSS
- Adding the Flexbox container
- The Header, Footer, Nav, and Section Containers
- Nested containers
- Supporting old IEs
- 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 posture patterns
- The touch zones
- The nav icon - basic guidelines to consider for RWD
- The hamburger icon
- The word Menu
- The hamburger icon plus the word Menu
- The navigation patterns for RWD
- Design
- Scope
- Third-party demos
- The Off-Canvas or Off-Screen navigation
- The Toggle navigation
- The Flexbox-based navigation
- Summary
- Chapter 6: Working with Images and Videos in Responsive Web Design
- Tips for reducing the file size in images for RWD
- Resizing
- Blurring the background
- Darkening or lightening the less important areas
- Optimizing an image
- Using Adobe Fireworks (optional)
- Compressing the image
- Third-party image resizing services
- The &picture& element and the srcset and sizes attributes
- When to use &picture& and when to use srcset
- Implementing the Picturefill polyfill
- Using the &picture& element
- Using the srcset and sizes attributes
- Targeting high-density screens with srcset
- &picture& versus srcset
- Replacing 1x images with 2x images on the fly with Retina.js
- Retina.js - a JavaScript solution
- Excluding images
- Retina.js - a Sass mixin solution
- Making videos responsive
- Responsive videos with HTML and CSS
- Responsive videos with jQuery
- Responsive videos with plain JavaScript
- Third-party services to embed video
- The Vector Formats
- Vectors or bitmaps/raster images
- Icon fonts
- Implementing icon fonts
- Scalable Vector Graphics
- Inline via the &svg& tag
- File-based with the xlink:href and src attributes
- 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
- Defining the first base number
- Defining the second base number
- Choosing a ratio
- Using the Modular Scale for typography
- The rems-to-pixels Sass mixin
- Web fonts and how they affect RWD
- Sass mixin for implementing web fonts
- Using FlowType.js for increased legibility
- Defining thresholds
- Threshold widths
- Threshold font sizes
- 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
- 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
- Litmus's PutsMail
- CSS inliners
- Advanced e-mail frameworks
- Responsive e-mail template services
- See how an email was built
- Summary
- Index
System requirements
File format: PDF
Copy-Protection: Adobe-DRM (Digital Rights Management)
System requirements:
- Computer (Windows; MacOS X; Linux): Install the free reader Adobe Digital Editions prior to download (see eBook Help).
- Tablet/smartphone (Android; iOS): Install the free app Adobe Digital Editions or the app PocketBook before downloading (see eBook Help).
- E-reader: Bookeen, Kobo, Pocketbook, Sony, Tolino and many more (only limited: Kindle).
The file format PDF always displays a book page identically on any hardware. This makes PDF suitable for complex layouts such as those used in textbooks and reference books (images, tables, columns, footnotes). Unfortunately, on the small screens of e-readers or smartphones, PDFs are rather annoying, requiring too much scrolling.
This eBook uses Adobe-DRM, a „hard” copy protection. If the necessary requirements are not met, unfortunately you will not be able to open the eBook. You will therefore need to prepare your reading hardware before downloading.
Please note: We strongly recommend that you authorise using your personal Adobe ID after installation of any reading software.
For more information, see our eBook Help page.