售 价：¥
9.8
温馨提示：数字商品不支持退换货，不提供源文件，不支持导出打印
为你推荐
Mastering Responsive Web Design
Table of Contents
Mastering Responsive Web Design
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
买过这本书的人还买过
读了这本书的人还在读
同类图书排行榜
购物车
个人中心
