Index
A
- <article> element
- defining / The <article> element
- <aside> element
- defining / The <aside> element
- Adaptive Images
- Adaptive Web Design (AWD)
- Adobe Edge Web Fonts
- analytics
- observing / Don't overlook your analytics
- assistive technology (AT)
- about / The hamburger icon
- Autoprefixer
- advantages / Using Autoprefixer
- disadvantages / Using Autoprefixer
- URL / Using Autoprefixer
- AWD
- retrofitting / Retrofitting with AWD
- styles.scss file, creating / Creating the styles.scss file
B
- BEE Free
- Best E-mail Editor (BEE)
- bitmap or raster image / Vectors or bitmaps/raster images
- Bourbon
- URL / Using Compass
- breakpoints
- defining / Let the content define the breakpoints
- Bulletproof Accessible Icon Fonts
- URL / Icon fonts
C
- Call to Action (CTA)
- Campaign Monitor
- URL / CSS inliners
- CodePen
- about / Sometimes RWD is not necessarily the right solution
- URL / Nested containers, The hamburger icon plus the word Menu, The Off-Canvas or Off-Screen navigation, The Toggle navigation, The Flexbox-based navigation, Using the <picture> element, Targeting high-density screens with srcset, Retina.js – a Sass mixin solution, Responsive videos with jQuery, Responsive videos with plain JavaScript, Third-party services to embed video, Using a pseudo-element, Using an extra HTML element, Using the Modular Scale for typography, The rems-to-pixels Sass mixin, Sass mixin for implementing web fonts
- CodePen, with icon fonts
- URL / Using a pseudo-element
- color names, by categories
- Compass
- URL / Using Compass
- considerations / Using Compass
- compiler
- using / One compiler only
- conditional classes
- using, in <html> tag / Use conditional classes in the <html> tag
- Content section, RWD
- 980px to 768px (RWD) / 980px to 768px (RWD)
- 768px to 640px (RWD) / 768px to 640px (RWD)
- 640px to 480px (RWD) / 640px to 480px (RWD)
- 480px to 320px (RWD) / 480px to 320px (RWD)
- CSS/SCSS
- _980gs.scss file, creating / Creating the _980gs.scss file
- CSS framework
- about / CSS frameworks
- features / CSS frameworks
- characteristics / CSS frameworks
- pros, for RWD / The pros and cons of CSS frameworks for RWD
- cons, for RWD / The pros and cons of CSS frameworks for RWD
- CSS grid
- requirements / Adding the row and float clearing rules
- CSS grids
- about / CSS grids
- pros, for RWD / The pros and cons of CSS grids for RWD
- cons, for RWD / The pros and cons of CSS grids for RWD
- CSS inliner
- advantages / CSS inliners
- disadvantages / CSS inliners
- MailChimp / CSS inliners
- Campaign Monitor / CSS inliners
- Premailer, Dialect / CSS inliners
- Inliner, Zurb / CSS inliners
- custom CSS grid
- creating / Creating a custom CSS grid
- RWD magic formula, using / Doing the math
- UTF-8 character set directive, adding / Adding the UTF-8 character set directive and a Credits section
- Credits section, adding / Adding the UTF-8 character set directive and a Credits section
- box-sizing property, including / Including the box-sizing property and the mobile-first mixin
- mobile-first mixin, including / Including the box-sizing property and the mobile-first mixin
- 10px, converting to percentage value / The main container and converting 10px to percentage value
- mobile-first mixin, making / Making it mobile-first
- row clearing rule, adding / Adding the row and float clearing rules
- float clearing rule, adding / Adding the row and float clearing rules
- sample page, building with / Building a sample page with the custom CSS grid
- nested Containers / Nested containers
D
- Density-independent Pixel (DP/DiP)
- Design/Comp
- designs
- creating, in desktop-first view / Create your designs in a desktop-first view, but implement them with mobile-first, Why create designs in a desktop-first view?
- implementing, in mobile-first view / Create your designs in a desktop-first view, but implement them with mobile-first
- implementing, with mobile-first view / Why implement with mobile-first?
- desktop-first mixin
- defining / The desktop-first mixin
- desktop-first view
- designs, creating / Why create designs in a desktop-first view?
- Dialect's Premailer
- URL / CSS inliners
- Document Object Model (DOM)
- about / Responsive videos with jQuery
- Dots Per Inch (DPI)
- dp
- DRY
- about / The SCSS syntax
E
- e-mail content
- adding / Adding the e-mail content
- 100 percent Wide Wrapping Table, creating / Creating a 100 percent wide wrapping table
- 600px inner table, creating / Creating the 600px inner table
- header image, adding / Adding the header image
- Content Wrapping Table, creating / Creating the content wrapping table and all its content
- Outlook 2007/2010/2013 Conditional Comments hacks, adding / Adding the Outlook 2007/2010/2013 Conditional Comments hacks
- Conditional Comments, for background image / Conditional Comments for the background image in the footer
- Conditional Comments, for CTA buttons / Conditional Comments for the CTA buttons
- media queries, adding / Adding media queries
- Outlook web font fallback style / Outlook web font fallback style
- e-mail clients, screenshot / Screenshot of various e-mail clients
- e-mail frameworks
- advantages / Advanced e-mail frameworks
- disadvantages / Advanced e-mail frameworks
- references / Advanced e-mail frameworks
- Email Blueprints
- Emmet
- considerations / Using Emmet
- URL / Using Emmet
- ems
- using, for typography / Pixels, ems, or rems for typography?
- extending, in Sass
- about / The Sass extend/inherit feature
F
- <footer> element
- defining / The <footer> element
- <foreignObject> tag
- fallback images
- providing, to legacy browsers for inline SVGs / Providing fallback images to legacy browsers for inline SVGs
- file size, in images
- reducing, for RWD / Tips for reducing the file size in images for RWD
- image, resizing / Resizing
- background, blurring / Blurring the background
- less important areas, darkening / Darkening or lightening the less important areas
- less important areas, lightening / Darkening or lightening the less important areas
- image, optimizing / Optimizing an image
- FitVids JavaScript file
- Flash Of Fallback Text (FOFT)
- Flash Of Faux Text (FOFT)
- Flash Of Invisible Text (FOIT)
- Flash of Unstyled Content (FOUC)
- about / Using -prefix-free
- Flash Of Unstyled Text (FOUT)
- Flexbox
- using / Stop using CSS grids, use Flexbox!
- defining / Stop using CSS grids, use Flexbox!
- references / Stop using CSS grids, use Flexbox!
- sample page, building with / Building a sample page with Flexbox
- URL / Building a sample page with Flexbox
- Flexbox Container
- float clearing technique
- FlowType.js
- using / Using FlowType.js for increased legibility
- URL / Using FlowType.js for increased legibility, Threshold font sizes
- thresholds, defining / Defining thresholds
- threshold widths / Threshold widths
- threshold font sizes / Threshold font sizes
- Fludivids JavaScript file
- Font Squirrel
G
- 960 Grid System
- 980 Grid System (980GS)
- about / CSS grids
- 1140 Grid System
- Google Fonts
- grid
- about / What is a grid?
- benefits / What is a grid?
- Grunt Email Workflow
H
- <header> element
- defining / The <header> element
- hamburger icon
- URL / The hamburger icon
- advantages / The hamburger icon
- disadvantages / The hamburger icon
- hamburger icon plus Menu
- advantages / The hamburger icon plus the word Menu
- disadvantage / The hamburger icon plus the word Menu
- harmonious typography
- Modular Scale, creating for / Creating a Modular Scale for a harmonious typography
- high-density screens
- dealing with / How to deal with high-density screens
- bitmaps, used for / Bitmaps or vectors for high-density screens?
- vectors, used for / Bitmaps or vectors for high-density screens?
- HTML5 example page
- with ARIA roles / A full HTML5 example page with ARIA roles and meta tags
- with meta tags / A full HTML5 example page with ARIA roles and meta tags
- HTML mockup
- HTML template
- about / Create your designs in a desktop-first view, but implement them with mobile-first
- setting up / Setting up a basic HTML template
- CSS reset styles, adding / Using CSS reset to normalize display
- e-mail content, adding / Adding the e-mail content
I
- <image> tag
- using / Using an <image> tag
- <img> tag
- icon fonts
- about / Icon fonts
- advantages / Icon fonts
- disadvantages / Icon fonts
- implementing / Implementing icon fonts
- implementing, pseudo-element used / Using a pseudo-element
- implementing, extra HTML element used / Using an extra HTML element
- IE-specific style sheet
- file management / The days of an IE-specific style sheet are dead
- scalability / The days of an IE-specific style sheet are dead
- organization / The days of an IE-specific style sheet are dead
- performance / The days of an IE-specific style sheet are dead
- URL / Use conditional classes in the <html> tag
- IE-specific style sheets
- avoiding / The days of an IE-specific style sheet are dead
- avoiding, benefits / Other benefits of not using an IE-specific style sheet
- image optimization
- defining / Optimizing an image
- Adobe Fireworks, using / Using Adobe Fireworks (optional)
- image, compressing / Compressing the image
- Imulus
- IndustryDive.com
- inheriting
- about / The Sass extend/inherit feature
L
- legacy browsers
- dealing with / Dealing with legacy browsers
- Litmus
- Litmus's Slate
- lossy compression
- references / Compressing the image
- Luke Wroblewski
M
- <main> element
- defining / The <main> element
- MailChimp
- URL / CSS inliners
- Main Container
- masthead
- about / The <header> element
- Menu
- advantages / The word Menu
- disadvantages / The word Menu
- meta tags, for RWD
- defining / Important meta tags to consider for RWD
- viewport meta tag / The viewport meta tag
- X-UA-Compatible meta tag / The X-UA-Compatible meta tag
- charset meta tag / The charset meta tag
- Microsoft Developer Network (MSDN)
- mixin
- about / Mixin
- using / The basic mixin
- advantages / The basic mixin
- mixins
- about / Sass mixins
- mobile-first
- implementing with / Why implement with mobile-first?
- mobile-first mixin
- defining / The mobile-first mixin
- Modular Scale
- creating, for harmonious typography / Creating a Modular Scale for a harmonious typography
- URL / Creating a Modular Scale for a harmonious typography, Modular Scale for typography
- first base number, defining / Defining the first base number
- second base number, defining / Defining the second base number
- ratio, selecting / Choosing a ratio
- using, for typography / Using the Modular Scale for typography
- Rems-to-pixels Sass mixin / The rems-to-pixels Sass mixin
- Mozilla Developer Network (MDN)
- about / The <main> element
N
- <nav> element
- defining / The <nav> element
- named media queries
- about / Named media queries
- nav icon
- defining / The nav icon – basic guidelines to consider for RWD
- hamburger icon / The hamburger icon
- Menu / The word Menu
- hamburger icon plus Menu / The hamburger icon plus the word Menu
- navigation patterns, for RWD
- defining / The navigation patterns for RWD
- Toggle navigation / The navigation patterns for RWD, The Toggle navigation
- references / The navigation patterns for RWD
- Off-Canvas navigation / The navigation patterns for RWD, The Off-Canvas or Off-Screen navigation
- Off-Screen navigation / The navigation patterns for RWD, The Off-Canvas or Off-Screen navigation
- Flexbox-based navigation / The navigation patterns for RWD, The Flexbox-based navigation
- design / Design
- scope / Scope
- third-party demos / Third-party demos
- non-high density screens
- dimensions / The ideal target sizes on small UIs
- normalizing
O
- old IEs
- rules, defining / One rule to rule them all
- rules, for IE8 / Rules for both IE8 and IE9
- rules, for IE9 / Rules for both IE8 and IE9
- specific rules, for IE9 / Specific rules for IE8 and IE9
- specific rules, for IE8 / Specific rules for IE8 and IE9
- old website
- retrofitting, with RWD / Retrofitting an old website with RWD
- old website, with RWD
- base page / The base page
- HTML / HTML
- CSS/SCSS / CSS/SCSS
- Opera blog
P
- -prefix-free project
- URL / Using -prefix-free
- using / Using -prefix-free
- 960px
- about / The base page
- <picture> element
- about / The <picture> element and the srcset and sizes attributes
- using / When to use <picture> and when to use srcset, Using the <picture> element
- versus srcset attribute / <picture> versus srcset
- Picturefill
- Picturefill polyfill
- PicturePolyfill
- pixels
- using, for typography / Pixels, ems, or rems for typography?
- Pixels Per Inch (PPI)
- Pleeease
- considerations / Using Pleeease
- URL / Using Pleeease
- posture patterns
- about / The posture patterns and the touch zones
- defining / The posture patterns
- Prepros app
- about / The Prepros app
- URL / The Prepros app
- expanded output / Expanded output
- nested output / Nested output
- compact output / Compact output
- compressed output / Compressed output
- CSS, adding / Add some CSS and let the Prepros app do the rest!
- legacy browser versions, defining / Defining how many legacy browser versions to support for prefixing
R
- Radical Image Optimization Tool (RIOT)
- about / Compressing the image
- relative font sizes
- calculating / Calculating relative font sizes
- rems
- using, for typography / Pixels, ems, or rems for typography?
- respimage
- Respond.js
- using, for RWD / How to use Respond.js for RWD
- about / How to use Respond.js for RWD
- URL / How to use Respond.js for RWD
- responsive e-mail build
- about / Responsive e-mail build
- Modular Scale, for typography / Modular Scale for typography
- e-mail, in large screen / Design – large and small screen views
- e-mail, in small screen / Design – large and small screen views
- HTML template, setting up / Setting up a basic HTML template
- responsive e-mails
- defining / Why do we need to worry about responsive e-mails?
- references / Why do we need to worry about responsive e-mails?
- recommendations, for building / Recommendations for building better responsive e-mails
- responsive e-mail templates services
- advantages / Responsive e-mail template services
- disadvantages / Responsive e-mail template services
- Responsive Email Patterns
- responsive images
- Responsive Images Community Group (RICG)
- responsive videos
- creating / Making videos responsive
- with HTML and CSS / Responsive videos with HTML and CSS
- with jQuery / Responsive videos with jQuery
- with plain JavaScript / Responsive videos with plain JavaScript
- embedding, third-party services used / Third-party services to embed video
- URL / Third-party services to embed video
- ReSRC
- RESS.io
- Retina.js script
- JavaScript solution / Retina.js – a JavaScript solution
- URL / Retina.js – a JavaScript solution
- images, excluding / Excluding images
- Sass mixin solution / Retina.js – a Sass mixin solution
- Ruby installer
- RWD
- implementing / The basic concepts of Sass for RWD
- defining / Sometimes RWD is not necessarily the right solution
- retrofitting with / Retrofitting with RWD
- formula / The RWD magic formula
- Main Container / The main container
- Header and Footer sections / The Header and Footer sections
- Nav section / The Nav section
- Content section / The Content section
- about / The touch zones
S
- <section> element
- defining / The <section> element
- sample page
- building, with custom CSS grid / Building a sample page with the custom CSS grid
- sample page, Flexbox
- HTML / The HTML
- SCSS / The SCSS, Adding the Flexbox container
- Header / The Header, Footer, Nav, and Section Containers
- Footer / The Header, Footer, Nav, and Section Containers
- Nav and Section Containers / The Header, Footer, Nav, and Section Containers
- nested Containers / Nested containers
- old IEs, supporting / Supporting old IEs
- Sass
- working / How does Sass work?
- installing / Installing Sass
- Ruby installer, downloading / Downloading the Ruby installer
- command line, opening / Opening the command line
- gem, installing / Installing the Sass gem
- using / Using Sass
- about / The basic concepts of Sass for RWD
- nesting / Nesting in Sass
- partial files / Partial files (partials) in Sass
- extend/inherit feature / The Sass extend/inherit feature
- comments / Sass comments
- Sass, for RWD
- about / The basic concepts of Sass for RWD
- third-party program used, for compiling / Using a third-party program to compile
- Sass-style CSS
- Sass syntax / Sass or SCSS
- SCSS syntax / Sass or SCSS
- Sass arguments
- about / Sass arguments
- using, in same mixin / How to use several arguments in the same mixin
- default values, setting in multiple arguments / Setting default values in multiple arguments
- Sass mixin
- used, for implementing web fonts / Sass mixin for implementing web fonts
- Sass mixins
- about / Sass mixins
- used, for housing media queries / Sass mixins to house our media queries
- methods, for naming media queries / Media queries mixin methods
- for mobile-first media query / Sass mixins for the mobile-first and desktop-first media queries
- for desktop-first media query / Sass mixins for the mobile-first and desktop-first media queries
- Sass syntax
- about / The Sass syntax
- Sass variables
- about / Sass variables
- Sassy CSS
- about / The SCSS syntax
- scalable vector graphic
- about / Scalable Vector Graphics
- advantages / Scalable Vector Graphics
- disadvantages / Scalable Vector Graphics
- inline, via <svg> tag / Inline via the <svg> tag
- file-based with xlink$href attribute / File-based with the xlink:href and src attributes, Other sources to learn about SVG
- file-based with src attribute / File-based with the xlink:href and src attributes, Other sources to learn about SVG
- Scalable Vector Graphics (SVG)
- about / The Vector Formats
- Scope site
- screenshots, for desktop
- screenshots, for mobile
- script
- SCSS syntax
- about / The SCSS syntax
- Sencha.io Src
- sizes attribute
- srcset attribute
- about / The <picture> element and the srcset and sizes attributes
- using / When to use <picture> and when to use srcset, Using the srcset and sizes attributes
- high-density screens, targeting with / Targeting high-density screens with srcset
- versus <picture> element / <picture> versus srcset
- Stamplia Builder
- styled page
- styles.scss file
- 980px to 768px (AWD) / 980px to 768px (AWD)
- 768px to 640px (AWD) / 768px to 640px (AWD)
- 640px to 480px (AWD) / 640px to 480px (AWD)
- 480px to 320px (AWD) / 480px to 320px (AWD)
- SVG
- references / Other sources to learn about SVG
- SVG fallbacks
- SVG markup
- drawbacks / Inline via the <svg> tag
- syntax, meta tag
- about / The viewport meta tag
T
- target sizes, in small UIs
- defining / The ideal target sizes on small UIs
- third-party application
- considerations / Using a third-party application
- third-party image resizing services
- about / Third-party image resizing services
- Sencha.io Src / Third-party image resizing services
- ReSRC / Third-party image resizing services
- WURFL / Third-party image resizing services
- third-party services
- defining / Third-party services
- PutsMail, Litmus / Litmus's PutsMail
- CSS inliners / CSS inliners
- advanced e-mail frameworks / Advanced e-mail frameworks
- responsive e-mail templates services / Responsive e-mail template services
- e-mail template, building / See how an e-mail was built
- Toggle Navigation functionality
- URL / The Toggle navigation
- touch zones
- about / The posture patterns and the touch zones
- defining / The touch zones
- travel sites
- references / Sometimes RWD is not necessarily the right solution
U
- UI kits
- UTF-8 (Unicode Transformation Format-8) / The charset meta tag
V
- vector formats
- vector image / Vectors or bitmaps/raster images
- bitmap or raster image / Vectors or bitmaps/raster images
- defining / Vectors or bitmaps/raster images
- vector image / Vectors or bitmaps/raster images
- vendor prefixing
- about / Vendor prefixing
- order / The order of vendor prefixing
- automating / Automating vendor prefixing
- Compass, using / Using Compass
- -prefix-free, using / Using -prefix-free
- Autoprefixer, using / Using Autoprefixer
- Pleeease, using / Using Pleeease
- Emmet, using / Using Emmet
- third-party application, using / Using a third-party application
- method / The recommended vendor prefixing method
- viewport meta tag
- URL / The viewport meta tag
W
- .woff font
- WAI-ARIA
- WAI-ARIA landmark roles
- used, for increasing accessibility / Using WAI-ARIA landmark roles to increase accessibility
- about / Using WAI-ARIA landmark roles to increase accessibility
- defining / WAI-ARIA landmark roles
- banner role / The banner role
- navigation role / The navigation role
- main role / The main role
- contentinfo role / The contentinfo role
- search role / The search role
- form role / The form role
- complementary role / The complementary role
- WAI-ARIA roles
- URL / The complementary role
- web font resources
- Font Squirrel / Web fonts and how they affect RWD
- Google Fonts / Web fonts and how they affect RWD
- Adobe Edge Web Fonts / Web fonts and how they affect RWD
- web fonts
- defining / Web fonts and how they affect RWD
- working with RWD / Web fonts and how they affect RWD
- advantages / Web fonts and how they affect RWD
- disadvantages / Web fonts and how they affect RWD
- wireframe
- wireframe page
- WURFL Image Tailor
X
- 1x images
- replacing, with 2x images on fly with Retina.js / Replacing 1x images with 2x images on the fly with Retina.js
Z
- Zenith framework
- Zurb's Inliner
- URL / CSS inliners
- Zurb Ink