From the creator of the original javascript lightbox comes Color Thief, a jQuery plugin that analyzes the colors in a given image and returns the dominant color and the color palette. Has some incredible usage possibilites both from from a design angle and also in improving usability. Definitely looking for an excuse to use this on a project.
Mobile Email Design 101
Depending on when you send and who makes up your audience, mobile devices will account for 10 – 30% of all email opens (source). Let me repeat that: 10 – 30% of your emails are being read on a mobile device.
Have you even looked at your company’s marketing emails on an iPhone?
It might not be pretty. That could mean that those emails you think are going to be big hits are instead big duds with around one out of every five of your customers, regardless of how well thought out your messaging, imagery, or marketing plan is. Your emails could be broken, hard to read, overly complicated, or just plain ugly. If you didn’t design your email with mobile in mind then there’s a good chance you’re leaving conversions on the table with your email marketing campaigns.
The same email will be displayed on all HTML-based email clients including smartphones, so take the time to make sure you’re communicating as effectively as possible to all of those in your email lists. Some basic design changes to your emails can make a huge difference in the usability and success of your emails.
Sure, iPhones and Android phones in general do a great job rendering even complicated email designs. The default clients on modern smartphones actually do a much better job of displaying CSS (including CSS3) emails than the most popular desktop and webmail clients. That doesn’t mean, however, that they display emails in a way that is going to make your subscribers want to read your content or click the links you want them to click. Depending on your text size, layout, and image selection, there is a chance that subscribers won’t even see the most important parts of your email.
As with webpages, the email clients simply either zoom out to fit the entire width of an HTML email design into 320 pixels or with simpler emails arbitrarily increase all the font sizes. There is more that you can and should be doing to make your emails successful on mobile devices.
The first steps to a successful mobile email strategy include following some general mobile best practices and focusing on the readability, impact, and primary conversion of your email. By implementing these tips you can make your emails more effective regardless of where your subscribers check their email.
Continue reading for tips on the best practices in mobile email design.
Infojocks Sports Graphics
I love sports. I love designs. I lust infographics. What could be better than an awesomely designed poster that beautifully and nerdily displays detailed sports statistics? Designer Jeremy Yingling creates and sells great looking posters and prints that illustrate sports history through various types of data visualization techniques. The logo is great too. Definitely a Ohio/Pennsylvania area bias right now (Jeremy is an Ohio U grad), but hopefully Infojocks will add some Texas stuff so I have an excuse to give him some money.
Screen Resolution != Browser Window
Something I’ve been preaching for years, but just because your web analytics say everyone visiting your site has as screen resolution of 4,000 pixels by 4,000 pixels doesn’t actually mean their browser is that size. Screen resolution size is not the same as browser window size. Most users, including myself, surf the web with their browser window at only a fraction of their screen resolution.
Responsive web design trending, mobile first still lagging
Jason Grigsby of CloudFour has posted an interesting (as always) article on the latest trends in mobile first responsive web design and the numbers show the majority of responsive designs provide very little, if any, file size savings for their mobile versions.
Bypass Lane: Skip the concessions line with an app
Bypass Lane is a service that lets you use your phone to order food and then skip the concessions line at ballparks. It’s a great looking app and well designed website too. There’s an HTML5 web app along with native apps for iPhone, Android, and Blackberry. I originally saw it advertised at the Ballpark in Arlington. I didn’t get to try the app at the game (the service isn’t available up in the cheap seats) but it seems like a great idea to avoid long lines at a big game.
Dribbble introduces Browse by Color
Incredible. Pick a color use the color picker, browse pages and pages of shots that use that color. You can even define your own hex value, color variance, and color minimum. Great source of inspiration. Check out the blog post describing how it works.
Using Modern Techniques for Great Web Typography
Great typography use is one of the most important factors in creating beautiful design. Unfortunately, at the same time web typography has been the most limiting and frustrating technology in web design and development for some time. Not too long ago, nearly every creative brief or brand conversation with clients would include the topic of which fonts we could use on their website. The answer would always lead to the depressing answer of choosing between Arial, Verdana, or a half dozen other typically supported fonts. Modern browsers and modern techniques are finally changing that.
There have been many different font replacement techniques over the years but each has had critical limitations that made them only practical for certain uses with certain designs. Image replacement using CSS looks and works great and is great for SEO but it could only be used sparingly because it requires creation of a new image and CSS changes to implement. sIFR was an ingenious workaround using Flash to replace text on the fly with beautifully rendered text, but alas it had many performance and occasional display issues and was difficult to maintain as new browser updates were released.
So, are we just stuck with Georgia headings until the end of time? Thankfully, no…
CSS3 and @font-face to the Rescue.
There are finally new tools at our disposal (and more importantly browsers that actually support them) that are helping create a more beautiful web. Newly supported CSS3 properties and some clever web services give us the ability to easily and securely embed thousands of different fonts that we were never able to use before. And using the @font-face rule these fonts are treated no differently* by the browser from the websafe fonts we’ve been using for so long.
Check out this example using CSS (rendered in your browser):
The quick brown fox jumps over the lazy dog.
As you can see from the example, there is a lot of power in using regular HTML text and CSS for the typography. And almost all of it works in every modern browser. The cool Lobster font is embedded from Google and then just like any other text we’re able add a link with a hover effect, a CSS3 text-shadow, and a dotted underline with a tooltip to define the word. And of course it’s as easy to change as any other text on the website using a CMS.
Continue reading “Using Modern Techniques for Great Web Typography”
I really, really want a Microsoft Courier tablet/portfolio
Please, please buy this new tablet/portfolio thingy for me for Christmas…
Wow. It’s been a long time since a piece of electronics has excited me this much. And I’m pretty damn nerdy and pretty damn excitable. But the Microsoft Courier, or whatever it’s really called, is beautiful and everything I’ve ever wanted. This thing is perfect for the creative professional or for a student. I really hope they don’t cut corners in order to put this at a more palatable price. I want what is exactly in this video regardless of price. Watch this concept video and be amazed…
How absolutely incredible is this thing? Tons more photos and a little more info on Gizmodo.
Hello world!
New WordPress blog finally installed, old Movable Type version retired.
View the old blog at brianbehrend.com/blog. Stay tuned for more updates via automation of links, photos, videos, twitter, etc.