Good day folks,
I've been piecing together a simple framework to help develop emails a bit quicker and recently put it up on Github. I'm calling it Grid 600. It's a work in progress and, if you find it interesting, I'd love to hear your ideas of how it could be improved or strengthened. The current project includes:
Table-based Grid Components
Inspired by the simple, rapid web development made possible by CSS Frameworks such as the 960 Grid System and Blueprint CSS, this is a work in progress to try to simplify and modularize development of HTML emails.
HTML Email Reset CSS
An attempt at a dumbed down reset.css to standardize the limited and archaic scope of HTML elements across email clients.
While waiting on assets, drop a few dummy images into your templates, including the amazing lightish-red!
HTML Email Design Template
A PSD Template which hopes to integrate a reminder of the limits and trade-offs of emails into the design process.
Cheers, Ben - this is excellent work! We have a couple of suggestions as to how the template can be improved (techniques from our mobile design template come to mind), so let us know if you would be keen for us to fork your work, or pass on some of our tips to you personally :)
Thanks a lot Rosanne. We should definitely roll the wisdom of the mobile design template into this!
I'm a bit new to social coding so if you'd like to send any ideas to me personally I'm happy to hear them and try to incorporate them. Otherwise, if you want to fork the work, make a few updates, and send me a pull request, I'd be more than happy to accept any improvements to the code. I'd like this to be as bulletproof as possible and really trust you folks as an authority on these topics.
The concept is great! I also worked on something similar which included gutters between columns and add-ons to aid designing.
I'm happy to share what I have if you would like to get in touch - email@example.com