It's just that LAZY! Easy template for LAZY coding!
- This template is HTML5 semantic, but you can swap the tags to <div>.
- It is a 10-grid system.
- It targets common tablet and mobile devices.
- On Tablet it shows max 3 columns for major content blocks.
- On Mobile it shows only 1 column.
- The entire template is less than 15KB.
- It uses FLEXBOX and serves no due delegence for old IEs.
To switch things on and off - the LAZY way:
- To remove aside, simply insert class "remove" onto <aside>.
- To reverse aside to the right, simply insert class "reverse" onto <body>.
- To turn specific row of columns into full width for responsive views, simply insert class "full" onto the row element.
- You can turn the logo area into a nav menu if you like.
LAZY and easy enough? Huh? :-P
I've done most of the work for you, included calculating all percentages and proportions!
It's sooo simple that you can easily add anything on top of this layout structure.
Preview for default layout: http://zoechang.me/lazy-webpage.html
CSS only file is also available in this repo. Enjoy!
Afraid of bloated code for your email template due to the gigantic list of email clients you need to support?
No worries! This email template works for major email clients without the need of complex coding.
It renders perfectly on:
- Outlook (2011-2016)
- All Gmails and Apps
- Apple Mail
- Outlook.com
- Yahoo.com
- AOL
- iOS
- Android (5-7)
- iPhone
- iPad
- OSX (10+)
- Windows (7+)
- Comcast
- Thunderbird
Now, the LAZY method can help putting your mind at ease :-)
Preview for default layout: http://zoechang.me/lazy-email.html
Special thanks to the QA Tester of this project: André Martinez @ableandre.
Cheers,
Zoe