Mastering Responsive Web Design With HTML5 and CSS3 by Zea, Ricardo -- Read -- Imperial Library of Trantor

Index

Mastering Responsive Web Design with HTML5 and CSS3

Table of Contents Mastering Responsive Web Design with HTML5 and CSS3 Credits About the Author Acknowledgment About the Reviewers www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe? Free access for Packt account holders

Preface

What this book covers What you need for this book Who this book is for Conventions Reader feedback Customer support

Downloading the example code Downloading the color images of this book Errata Piracy Questions

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 Compass Using -prefix-free Using Autoprefixer Using Pleeease Using Emmet Using a third-party application The recommended vendor prefixing method

Using a third-party program to compile

The Prepros app

Expanded output Nested output Compact output Compressed output Add some CSS and let the Prepros app do the rest! Defining how many legacy browser versions to support for prefixing

One compiler only

Sass mixins to house our media queries

Media queries mixin methods

Let the content define the breakpoints

Mixin

Named media queries The basic mixin

Summary

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

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

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

Use conditional classes in the <html> tag

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

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

DIVs inside the Flexbox container

The Header, Footer, Nav, and Section Containers Nested containers Supporting old IEs

One rule to rule them all Rules for both IE8 and IE9 Specific rules for IE8 and IE9

Summary

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

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

Using a pseudo-element Using an extra HTML element

Scalable Vector Graphics

Inline via the <svg> tag

Providing fallback images to legacy browsers for inline SVGs

Using the <foreignObject> and <img> tags Using an <image> tag

File-based with the xlink:href and src attributes

Other sources to learn about SVG

Summary

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

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

Creating a 100 percent wide wrapping table Creating the 600px inner table Adding the header image Creating the content wrapping table and all its content Adding the Outlook 2007/2010/2013 Conditional Comments hacks

Conditional Comments for the background image in the footer Conditional Comments for the CTA buttons

Adding media queries Outlook web font fallback style

Screenshot of various e-mail clients

Third-party services

Litmus's PutsMail CSS inliners Advanced e-mail frameworks Responsive e-mail template services See how an e-mail was built

Summary

Index

← Prev
Back
Next →

← Prev
Back
Next →