- 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
Ben Frain has been a freelance frontend web designer/developer for over a decade, working directly with clients and alongside design agencies worldwide. He also works as a technology journalist, contributing regularly to a number of diverse publications on the Mac platform, future technology, website design and technology systems in the Aviation industry.
Before that, he worked as an underrated (and modest) TV Actor, having graduated from Salford University with a degree in Media and Performance. He has written four equally underrated (his opinion) screenplays and still harbors the (fading) belief he might sell one. Outside of work, he enjoys playing indoor football whilst his body (and wife) still allow it.
Visit him online at www.benfrain.com and follow him on Twitter at twitter.com/benfrain.
Thanks first and foremost to the web community. Without their combined brilliance and generosity in documenting and sharing solutions I wouldn't be able to make things I'm even slightly proud of on the Web.
Next, I'd like to thank the father of responsive web design: Ethan Marcotte. A man I've never met or spoken to but whose methodology now affects the way I build websites on a day-to-day basis. It goes without saying that any imperfections or errors in the way I have presented responsive methodology are entirely mine.
Finally, thanks to my family. Anyone who's watched the (also underrated) Wyatt Earp, already knows, "Nothing counts so much as blood. The rest are just strangers."
-
No Comment