JR5
What are your favorite resources for learning about responsive design?
I've met a few people at #TEDC13 that want to learn more about responsive email design.
So, what do you think are the best resources around?
Here are a few of my favorites:
Litmus' Favorite Resources
Campaign Monitor's Responsive Email Guide
MailChimp Email Template Reference
Brian Graves' Responsive Email Patterns
I learned responsive design a couple years ago through Treehouse's Media Queries course. That course in particular really elevated my CSS game to a new level. I've been a customer for over 2 years now and can't recommend this service enough to learn all things web design/development.
I was looking at their programs to sharpen my skills. They look fantastic.
I find the easiest way for me to learn is to look at how others are doing things. If you're new to coding responsive emails, looking at a framework like Zurb's Ink (http://zurb.com/ink/) or Mailchimp's Email Blueprints (https://github.com/mailchimp/Email-Blueprints) can show you what can be done and how to accomplish it. Jason's book, Modern HTML Email (http://modernhtmlemail.com/) is also full of good info on designing and coding responsive emails.
Thanks for the nod! I agree that looking at how other people do things is the best way. I scope a ton of emails to peak at what designers are doing behind the scenes.
I found Brian's responsive patterns really useful. They are quick and easy to understand and it saved me a lot of time trying to figure things out. I've used a couple of these patterns now and they all work brilliantly; a great reference.
I learned responsive html email after learning it as applied to web design. I was lucky enough to find an in-person class at my local community college; the resource we mainly used was of course Ethan Marcotte's book, Responsive Web Design. In my case it was helpful to understand where responsive email was coming by grasping it in terms of the web design since I'm a front-end developer like many email designers.
I use Firefox's built-in Responsive View to see my html page in the mobile view (or simply resize your browser window). I've found that if I can get it looking right in Firefox and Chrome, it usually renders the exact same way through Litmus on an iPhone/Android.
I LOVE Firefox's responsive view - one of my favorite tools of the last few years. If you liked Ethan Marcotte's book, you would probably love Implementing Responsive Design by Tim Kadlec. It builds on the principles outlined by Ethan with a lot more practical applications and code examples, he does a really great job explaining the reasoning behind some of his code, which is great. It's geared towards web design, but is a great way to learn more about the principles of RWD.
Another good book that's more web focused but that has a lot of valuable information that can be applied to email is Responsive Design Workflow by Stephen Hay. Covers a lot of info on designing around content, determining breakpoints, and presenting responsive designs to clients.
Same way I learnt and was introduced to responsive emails - through web design and Ethan Marcotte's book. Such a great resource for responsive design. It helped me get around the math of responsive design!
Tend to use http://resizemybrowser.com/ just so I can check the break points of my emails, as I tend to go for seeing where the email breaks, rather than conventional device widths. Also recently found http://responsiveemailpatterns.com/ which showcases some neat responsive email patterns which I like having a play around with every now and then.
W3schools is my fav site to learn the design, development and responsive design.
https://www.w3schools.com/booTsTrap/default.asp
Hi, I would like to suggest https://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978
Litmus & Mailchimp has good tutorials, usually perfectly enough for me.
If not I just Google the question and looking at Stackoverflow discussions
Sir, I have bought your course name "HTML Email Development, v2". I understand your "Code Examples".
Sir, in "Hybrid Examples" Folder, I see that there 12 fluid template example (e.g. 2columnfluid, 2columnfluidgutters, 3columnfluid, 3columnfluidgutter etc). But that 12 template has no Style into <style type="text/css"> </style> section.
So now my question is that within <style type="text/css"> </style> is it no need to use style???
Sir, For email campaign, could you please combined 2columnfluidgutters and 3columnfluid this two section?
Thus I can understand it clearly.
Thanks.
Highly recommend checking out http://coursehorse.com if you live in nyc or la area.
Here are their responsive design classes