Gmail Will Support CSS Media Queries

gmail-mediaqueries

Announced yesterday (Sept 14, 2016) on their Google Apps Developer Blog says that Gmail will soon be able to handle CSS media queries.

Later this month, you’ll be able to use CSS media queries with Gmail and Inbox by Gmail to ensure that your message is formatted the way you intended, whether it’s viewed on a computer, a phone in portrait mode, or a tablet in landscape mode. You’ll be able to change styles based on width, rotation, and resolution, allowing for more responsive formatting to optimize your email for every device.

In my mind this has rather large implications, because like web standards, as a designer and developer I’d love it if one day the language of the web is language of email too. I know inline CSS works, but imagine one day just being able to copy over your CSS base styles and use that in your email blasts.

I look forward to seeing how, if at all, this is handled by locally based email clients.

Think Again About Using Your Phone While Driving

Just thought I’d share this rather powerful PSA put out by @SummerBreak.

 

An even more to-the-point PSA on the same topic put out by the Ontario Government’s Youtube Channel below.

Vox: How Stranger Things Got Its Retro Title Sequence

The show was really good and checked many satisfying boxes for me. One of those boxes was the title sequence. Here’s a look from Vox at the making of the title sequence. Anyone else know the font was from the Choose Your Own Adventure books?

Broken Images on Web Pages: Web Developer Browser Tools

broken images web developer

Earlier today I was tasked with finding and fixing broken images on a retailer’s website, where there were of course thousands of images to go through. Here’s what I did to see and fix all the broken images (and the links pointing to them)…

In this case all image links were stored in a database that I was able to access via phpMyadmin. As I could see all the field names I was able to create a “background” webpage on the site that just looped through all the results found when the image link field name was queried. So one webpage that spat out all 8500+ images on one page. Yes it was massive in file size and took about two minutes to render them all.

I was right away able to see all the images on one page and scroll down through them all to find the missing links images. But even doing this quickly, the scrolling still would have taken an hour or more. Fortunately I remembered a setting in the Web Developer Toolbar I use from time to time.

That’s right… with the seemingly never-ending page loaded in front of me, I was able to right-click and choose Web Developer > Images > Find Broken Images. The plugin whirred away for a moment and then beautifully displayed the information I was looking for.

I suspect web developers all ready know of the Web Developer Tools by Chris Pederick. I’m just posting this today as reminder so that one day you may be faced with a gargantuan task which can be reduced to a few clicks. Thanks Chris!

If anyone knows if the above task can be accomplished in the regular browser dev tools please let me know below in the comments. I’m most familiar with Chrome and Firefox dev tools.

Clean Up Double Line Spacing Code View in Dreamweaver

When downloading files from your server to edit in code view in Dreamweaver you’ll sometimes be looking at code that is all double spaced. You can fix this by doing a find/replace right in Dreamweaver.

With the page open, hit CTRL-F and enter \n\s*\n and type Ctrl-Enter in the replace box, making sure the “Use regular expressions” box is ticked.

This should clean things right up for you.

If you’re wondering why this double spacing happens it’s because you’re downloading files from the server that has differently encoded line returns in it. For example your server is Unix and your local environment is Windows.

You can (supposedly) permanently fix these compatibility issues under your Dreamweaver preferences options. Go to Preferences, Code Format, and make sure your Line Break Type is set to the same as your server. I haven’t always had luck with this but wanted you to know the option is there.