Here are some nice links that we’ve gathered for you this week:
Articles
One of the toughest tasks for web designers is to code HTML emails … which seem like they are still, frustratingly, stuck in the 1990s while the rest of the web moves on. Nevertheless, it is possible to apply some of the new coolness to emails, such as responsive design (which is increasingly important, given that at least 40% of emails are opened on a mobile device). Here are some pointers for doing just that:
Media Queries in HTML Email: Cover all your bases
CampaignMonitor’s Guide to Responsive Email Design
Responsive emails infographic
How Zurb made its emails responsive
Responsive HTML Emails: a Different Strategy
Luke Wroblewski points out a gotcha in designing for screen sizes in Responsive Web Design: Relying Too Much on Screen Size.
These days, with advances in CSS, it’s getting easier to create non-rectangular layouts. Here are two articles on how:
Creating Non-Rectangular Layouts with CSS Shapes
Using CSS Shapes to Enhance Visual Storytelling
You might like to check out some recent experiments with “Responsive Icons” (links courtesy of the Responsive Design weekly newsletter):
Responsive Icons demo
Responsive Icons (a responsive article to the above )
Responsive Icons with SVG
12 Awesome CSS3 Features That You Can Finally Start Using
Tips and Tricks
Craig Buckler looks at some new inheritance features in CSS3 Inheritance Tips and Tricks.
Check out this cool 3D Opening Type demo, all done with CSS.
There are many approaches to, and articles on, horizontal and vertical centering with CSS, but it never hurts to have another one, right? In that case, take a look at this “Absolute Centering” method.
Here’s a useful warning about what they are calling “the Double Breakpoint Bug”. (Basically, don’t use the same values for “min” & “max” media-queries.)
Inspiration
Chris Coyier’s Responsive Accordion
Responsive Menu using CSS3 Regions
Chrome icons created with CSS
Hexagonal Buttons
CSS3 pulsating heart
Peeking into the Crystal Ball
Here’s an interesting (and slightly weird?) glimpse of a possible CSS4 feature: Responding to environmental lighting with CSS Media Queries. What do you think of this? Is it something you think you’ll want to use?
A Spot of Wisdom
With responsive web design, content is the elephant in the room. Especially if your content is a giant photo of an elephant.
Hey you should disable right-click on your website so everyone will hate you.
[rule=100%]orange[/rule]
Take a look at any or all of the links above and tell us what you think! And feel free to PM me if you have an great links for the next issue.
You can also view a list of previous posts here.