Search icon Close icon
Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Checkout

Change country

Modal Close icon
Country selected Country selected
country flag Germany
Country selected
country flag Slovakia
Country selected
country flag Canada
Country selected
country flag Brazil
Country selected
country flag Singapore
Country selected
country flag Hungary
Country selected
country flag Philippines
Country selected
country flag Mexico
Country selected
country flag Thailand
Country selected
country flag Ukraine
Country selected
country flag Luxembourg
Country selected
country flag Estonia
Country selected
country flag Lithuania
Country selected
country flag Norway
Country selected
country flag Chile
Country selected
country flag United States
Country selected
country flag Great Britain
Country selected
country flag India
Country selected
country flag Spain
Country selected
country flag South Korea
Country selected
country flag Ecuador
Country selected
country flag Colombia
Country selected
country flag Taiwan
Country selected
country flag Switzerland
Country selected
country flag Indonesia
Country selected
country flag Cyprus
Country selected
country flag Denmark
Country selected
country flag Finland
Country selected
country flag Poland
Country selected
country flag Malta
Country selected
country flag Czechia
Country selected
country flag New Zealand
Country selected
country flag Austria
Country selected
country flag Turkey
Country selected
country flag France
Country selected
country flag Sweden
Country selected
country flag Italy
Country selected
country flag Egypt
Country selected
country flag Belgium
Country selected
country flag Portugal
Country selected
country flag Slovenia
Country selected
country flag Ireland
Country selected
country flag Romania
Country selected
country flag Greece
Country selected
country flag Argentina
Country selected
country flag Malaysia
Country selected
country flag South Africa
Country selected
country flag Netherlands
Country selected
country flag Bulgaria
Country selected
country flag Latvia
Country selected
country flag Australia
Country selected
country flag Japan
Country selected
country flag Russia
Country selected
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Mastering Responsive Web Design

You're reading from   Mastering Responsive Web Design Push your HTML and CSS skills to the limit and build professional grade, responsive websites

Arrow left icon
Product type Paperback
Published in Aug 2015
Publisher
ISBN-13 9781783550234
Length 334 pages
Edition 1st Edition
Languages
Tools
Concepts
Arrow right icon
Author (1):
Arrow left icon
Ricardo Zea Ricardo Zea
Author Profile Icon Ricardo Zea
Ricardo Zea
Ricardo Zea hails originally from Medelln, Colombia. He is a passionate and seasoned full-stack designer who is now located in Dayton, Ohio, USA. He is always looking for ways to level up his skills and those around him. Constantly wondering how things are made on the Web, how they work, and why, have made Ricardo a very technical designer, allowing him to explain to others the intricacies of design and the technicalities of the Web in ways that are very easy to understand and assimilate. Ricardo has a master's degree in publicity and advertising and has deep passion for understanding human behavior. He also has a fiercely competitive PC gaming hunger. Together, all this has allowed him to switch from the creative side of the brain to the rational side very easily, allowing him to visualize and create technically sound web and mobile designs that are responsive, perform well, and convey the proper message through design. Ricardo is the author of Mastering Responsive Web Design, Packt Publishing. He's also the organizer of the CodePen Dayton meetup group. He's a member of the Dayton web developers and UX Dayton meetup groups. He's also one of the first members of SitePoint's Ambassadors program. He's also the author of the monthly web design and development newletter Level Up!. He was also a technical reviewer for Sass and Compass, Designers Cookbook, and Sass Essentials, all by Packt Publishing. For several years, he was also a Flash and CorelDRAW professor at different universities in his home country, Colombia. Ricardo has 15 years of experience in web design and 20 years of experience in visual and graphic design.
Read more
See other products by Ricardo Zea
Arrow right icon
View More author details
Toc

Table of Contents (10) Chapters Close

Preface 1. Harness the Power of Sass for Responsive Web Design FREE CHAPTER 2. Marking Our Content with HTML5 3. Mobile-first or Desktop-first? 4. CSS Grids, CSS Frameworks, UI Kits, and Flexbox for RWD 5. Designing Small UIs Driven by Large Finger 6. Working with Images and Videos in Responsive Web Design 7. Meaningful Typography for Responsive Web Design 8. Responsive E-mails Index

Recommendations for building better responsive e-mails

Although some e-mail clients are getting better at rendering e-mails, there are other e-mail clients that are not really as good as they should be. This means that we need to build something basic and progressively enhance it for better e-mail clients.

There are a few guidelines that are important to consider when building responsive e-mails:

  • Define the e-mail client with the least CSS and HTML support: Knowing which e-mail client has the least HTML and CSS support will save us unnecessary headaches and time during testing. Again, this is where analytics are crucial.
  • Use progressive enhancement: First, design and build for the e-mail client that has the least CSS and HTML support. Then, we enhance the design and experience using that core base.
  • Stay within a width of 550px to 600px: This is very important because most e-mail clients have very narrow preview panes. Moreover, 600px or less will look good on desktop clients and web browsers...
lock icon The rest of the chapter is locked
arrow left Previous Section
Section 4 of 7
Next Section arrow right
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Sign up now
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Start free trial
Renews at $19.99/month. Cancel anytime

Authors (1)

Profile icon Zea
Zea
Ricardo Zea hails originally from Medelln, Colombia. He is a passionate and seasoned full-stack designer who is now located in Dayton, Ohio, USA. He is always looking for ways to level up his skills and those around him. Constantly wondering how things are made on the Web, how they work, and why, have made Ricardo a very technical designer, allowing him to explain to others the intricacies of design and the technicalities of the Web in ways that are very easy to understand and assimilate. Ricardo has a master's degree in publicity and advertising and has deep passion for understanding human behavior. He also has a fiercely competitive PC gaming hunger. Together, all this has allowed him to switch from the creative side of the brain to the rational side very easily, allowing him to visualize and create technically sound web and mobile designs that are responsive, perform well, and convey the proper message through design. Ricardo is the author of Mastering Responsive Web Design, Packt Publishing. He's also the organizer of the CodePen Dayton meetup group. He's a member of the Dayton web developers and UX Dayton meetup groups. He's also one of the first members of SitePoint's Ambassadors program. He's also the author of the monthly web design and development newletter Level Up!. He was also a technical reviewer for Sass and Compass, Designers Cookbook, and Sass Essentials, all by Packt Publishing. For several years, he was also a Flash and CorelDRAW professor at different universities in his home country, Colombia. Ricardo has 15 years of experience in web design and 20 years of experience in visual and graphic design.
Read more
See other products by Zea

Personalised recommendations for you

Based on your interests and search pattern
Left arrow icon
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Modern Full-Stack React Projects
Modern Full-Stack React Projects
Read more
Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.
Read more
Jun 2024 16h 52m
Mastering Node.js Web Development
Mastering Node.js Web Development
Read more
Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.
Read more
Jun 2024 25h 56m
Mastering Node.js Web Development
Mastering Node.js Web Development
Read more
Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.
Read more
Jun 2024 25h 56m
Mastering Node.js Web Development
Mastering Node.js Web Development
Read more
Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.
Read more
Jun 2024 25h 56m
Mastering Node.js Web Development
Mastering Node.js Web Development
Read more
Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.
Read more
Jun 2024 25h 56m
Right arrow icon