This Week in CSS—November 11, 2013

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 :smiley: )
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.

Source

Hey you should disable right-click on your website so everyone will hate you.

Source

[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. :slight_smile:

You can also view a list of previous posts here.

I love the way Google created their coloured loading circles :slight_smile: Here you can see the tutorial :slight_smile:

That’s pretty clever. Nice link. :slight_smile:

I’m glad you like it :slight_smile: It’s really effective :slight_smile:

I’ve been using that for about 10 years lol and surprised that not many people still know about it.

I remarked about it (in the comments) a few months ago where the method was missed from this round up of techniques.

I was pretty sure I’d seen you using that before, but was sure it would be in your cannon, anyway. The link was suggested to me, but it’s nice to have the roundup, too. Thanks Paul. :slight_smile:

@ A Spot of Wisdom

With responsive web design, content is the elephant in the room.

Why not throw away the content? Then the whole room is for the design. :smiley:

But there is an alternative:

With responsive web design, design is the elephant in the room.

Source: [U]the ultimate responsive design[/U]

Back to basic! :wink:

Indeed. :slight_smile:

Of course mobiles will still scale that as though it was 960px unless you tell them not to:)

I was wondering about that a while back, but it seemed that as long as you just give a max-width and not a width, the mobile browser is flexible about it and the content just fills the width of the screen. At least, that’s what Francky’s example does on the iPhone.

No, I think you’ll find it’s still scaling :slight_smile:

(without meta tag)
http://www.pmob.co.uk/temp/mob-widthtest.htm

(with meta tag)
http://www.pmob.co.uk/temp/mob-widthtest2.htm

The text is much smaller in the first example but doesn’t look bad on the iphone but in some mobiles it will be scaled very small. (The same happens on the ipad.)

OK, thanks for the demo, Paul. That’s what I originally thought, but obviously fooled myself with a faulty test. :rolleyes:

I had to look twice as the new mac iphone emulator is now in large size and so it doesn’t really notice when text is small. The space at the side of the layout was the give-away:)

When I compare the 2 testpages with Chris Pederick’s Developers Toolbar (Resize > View responsive layouts), with the FF menu (Extra > Webdeveloper > Responsive Design View), with [U]mobiletest.me[/U], with [URL=“http://iphone4simulator.com/”][U]iphone4simulator.com[/U], with [URL=“http://testiphone.com/”][U]testiphone.com[/U] or with [URL=“http://mobiele-website-emulator.nl/”][U]mobiele-website-emulator.nl[/U], I don’t see any difference …

It seems all these simulators are just shrinking the sizes, without taking account of the viewport meta. :frowning:

Walking a street length behind, I don’t have an iPod or iPad or other mobile device. :rolleyes:

@Paul O’B (“Of course mobiles will still scale that as though it was 960px unless you tell them not to”)
Where the 960px come from?

Yes all those are just treating the code as though you made your desktop window smaller. They don’t emulate real devices.

If you have a mac you can install the mac emulator which is a part of the complete SDK package for developing apps etc and is 99.9% accurate. Also the Opera mobile emulator (available on a PC) does a pretty good job also. See screenshots attached.

Walking a street length behind, I don’t have an iPod or iPad or other mobile device. :rolleyes:

No I don’t have an iphone either (nor a mobile phone) but luckily my wife has an iphone and an ipad which I borrow for testing (when she’s not out) :slight_smile:

@Paul O’B (“Of course mobiles will still scale that as though it was 960px unless you tell them not to”)
Where the 960px come from?

Well some sources say 960px and some say 980px but you can read about it here.

More info here.

Ha, thanks for the links - I definitively have to read more. :wink:

… the Opera mobile emulator (available on a PC) does a pretty good job also.

Splendid!

  • Just downloaded the [U]Opera mobile emulator[/U] from the Opera site, looks fine! :slight_smile:
  • I remember older Opera browsers had a “View small device” option in their menu, but that was gone some versions ago. Didn’t know the Opera mobile emulator was the improved successor.

Here’s another option for responsive emails: http://designinstruct.com/tool/responsive-html-email-framework-zurb-ink/

It includes a framework to help you along.