- Responsive Web Design with HTML5 and CSS3
- Responsive Web Design with HTML5 and CSS3
- Credits
- About the Author
- About the Reviewers
- www.PacktPub.com
- Preface
- 1. Getting Started with HTML5, CSS3, and Responsive Web Design
- Why smart phones are important (and old IE isn't)
- Are there times when a responsive design isn't the right choice?
- Defining responsive web design
- Why stop at responsive design?
- Examples of responsive web design
- HTML5—why it's so good
- CSS3 enables responsive designs and more
- Look Ma'—no images!
- Can HTML5 and CSS3 work for us today?
- Responsive web designs are not magic bullets
- Educating our clients that websites shouldn't look the same in all browsers
- Summary
- 2. Media Queries: Supporting Differing Viewports
- You can use media queries today
- Why responsive designs need media queries?
- Our first responsive design
- Stopping modern mobile browsers from auto-resizing the page
- Fixing the design for different viewport widths
- With responsive designs, content should always come first
- Media queries—only part of the solution
- Summary
- 3. Embracing Fluid Layouts
- Fixed layouts aren't future proof
- Why proportional layouts are essential for responsive designs
- Amending a design from fixed to proportional layout
- Using ems rather than pixels for typography
- Fluid images
- Serving different images for different screen sizes
- Where fluid grids and media queries come together
- CSS Grid systems
- Summary
- 4. HTML5 for Responsive Designs
- What parts of HTML5 can we use today?
- How to write HTML5 pages
- New semantic elements in HTML5
- Practical usage of HTML5's structural elements
- HTML5 text-level semantics
- Adding accessibility to your site with WAI-ARIA
- Embedding media in HTML5
- Adding video and audio the HTML5 way
- Responsive video
- Offline Web applications
- Summary
- 5. CSS3: Selectors, Typography, and Color Modes
- What CSS3 offers the frontend developer
- Anatomy of a CSS rule
- Vendor prefixes and how to use them
- Quick and useful CSS3 tricks
- New CSS3 selectors and how to use them
- Custom web typography
- Help—my CSS3 @font-face headings look messy
- New CSS3 color formats and alpha transparency
- Summary
- 6. Stunning Aesthetics with CSS3
- 7. CSS3 Transitions, Transformations, and Animations
- 8. Conquer Forms with HTML5 and CSS3
- 9. Solving Cross-browser Responsive Challenges
A responsive web design will handle the flow of our page content as viewports change but let's go further. HTML5 offers us more than HTML 4 ever could and it's more meaningful semantic elements will form the basis of our markup. CSS3 media queries are an essential ingredient to a responsive design but additional CSS3 modules empower us with previously unseen levels of flexibility. We'll be ditching swathes of background graphics and complicated JavaScript, replacing them with lean CSS3 gradients, shadows, typography, animations and transformations.
Before we get on with creating a responsive HTML5 and CSS3 powered web design, let's first look at some examples of what we should aspire to. Who is already doing a good job with all this new fangled responsive HTML5 and CSS3 malarkey and what can we learn from their pioneering efforts?
-
No Comment