Mobile Design Strategies, in Podcast Form

The next Breaking Development conference gets underway next week in Orlando, but you don’t need to travel to the most magical place on Earth to get access to some of the top minds on mobile. Audio of the great talks from the Breaking Development in Nashville last year are now available for your listening pleasure (and education) on Huffduffer. You can download individual talks as MP3s or grab the iTunes feed to get all of them as a podcast. Breaking Development is a great resource on mobile design, development, and marketing so it is definitely worth listening to every single one of these.

Link: bdconf on Huffduffer

Mobile Users Don’t Do That

There are many common misconceptions about mobile web and app design. The most pervasive of these usually center around assumptions about where, when, and how people use mobile devices. Making any assumptions about what your visitors will or won’t do just because they’re on a mobile device will have you headed down the wrong path.

“Mobile users won’t want to do that, they’re ‘on the go’ and will be in a hurry or want a quick distraction.”

Mobile user experience expert Stephanie Rieger has written a great blog post busting some of those myths about the “typical” mobile user. People don’t just use their smartphones while on the go. They use them throughout their daily lives. They use them in quick bursts and for long stretches of engaged reading. They use them while distracted by the TV, traffic, the kids, or by nothing at all. Assuming your mobile visitors will always want to do less on your site just because of the device they’re using is a huge (and common) mistake.

Of course a good number of users will be looking to get in and back out accomplishing their task as quickly as possible. Your mobile experience (and your desktop site too by the way) should feature these common tasks and make them as easy as possible to use. But that doesn’t mean you should remove content or features that some of your best users are interested in.

As Stephanie puts it in her article, if a user is willing to suffer through a complex or broken feature on their tiny screen they’re either desperate or one of your power users. Two groups that have higher conversion rates than most. Don’t prevent them from doing what they want to do by removing the complicated feature from your mobile site, make it easier to accomplish.

Our Favorite Web Design Trends of 2011

Last year was yet another huge one on the Web as things continued to move forward at a breakneck pace. The explosive growth of traffic from mobile devices influenced everything and meant huge advances in both technology and new ideas. Here are some of our favorite trends of 2011:

Responsive Design Goes Big Time

boston-globe-responsiveA responsive website uses fluid layouts, flexible images, and media queries to deliver an experience adapted for whatever width browser or device is being used. With the increasing number of mobile and desktop resolutions that must be accounted for, true responsive design solutions use CSS and media queries to flex to handle any width and adjusted layouts for popular breakpoints.

Coined by Ethan Marcotte back in 2010, responsive web design went all the way from unproven concept to misused buzzword in 2011. When the responsively redesigned BostonGlobe.com launched in September it signified loud and clear that responsive design wasn’t just for designer portfolio sites anymore. Responsive concepts can and should be considered for any new site developed in 2012.

Learn more: Responsive Web Design: What It Is and How To Use It, Responsive Web Design: The Book

@font-face Brings Beautiful Type to the Web

typekitWeb typography has been something designers have been forced to struggle with from the earliest days of the Web. As a developer, reminding the design team that they need to choose a web safe font and their options are still just “Arial or Verdana” always results in dropped heads. No more. The ability to embed nearly any font you want using @font-face puts all the power and creativity back into the designer’s hands. Add to it CSS3 properties such as text-shadow and tools such as Lettering.js and FitText, and suddenly the Web is a more beautiful place.

A technology that was around long before 2011, embedding web fonts using @font-face exploded last year and saw some major advances as more type foundries licensed their fonts for web embedding. With more quality fonts available (and many available for free), most projects that MarketNet works on now end up including embedded fonts for headings or navigation elements.

Also in 2011, Typekit, an innovator and leader in hosted web fonts, was acquired by Adobe. The acquisition signifies broad support for @font-face and should mean the inclusion of Typekit capabilities in future releases of Adobe’s Creative Suite tools.

Learn more: Modern Techniques for Web Typography, The Essential Guide to @font-face, @font-face face off

Constant (and Automatic) Browser Updates

firefox-updateInternet Explorer 6 was released over 10 years ago and it’s lack of capabilities and bugs could still end up restricting a web project in 2011. Crazy, right? Fortunately a similar issue shouldn’t be able to occur again. Web browsers are finally updating as quickly as web technology and ideas are, and more importantly they’re doing it automatically without needing users to be savvy enough to know that they need to update their computers.

Google Chrome has been pushing out autoupdates for a while now (and still does it the best), but in 2011 the teams behind both Firefox and Internet Explorer announced they would be doing the same. Now on an aggressive six-week release cycle, Firefox went from version 4.0 to version 9.01 between April and the end of the year. In December, joyous noises were heard from developers across the globe as Microsoft joined the party with the news that Internet Explorer all the way back to Windows XP would now autoupgrade to the latest available version.

Learn more: Mozilla’s Right: Bring on the Browser Updates, IE to Start Automatic Upgrades across Windows XP, Windows Vista, and Windows 7

What Will Be the Trends of 2012?

What new tech will be out in 2012? Will Google TV or the rumored new Apple TV set make an impact? How will Android Ice Cream Sandwich influence mobile design? Mobile will continue to grow and will influence many companies to target mobile first when launching new projects.

2012 New Year’s Resolutions

It’s a new year and that means it’s time to reflect on 2011 and set resolutions for 2012.

Here at MarketNet, the resolutions we’re focused on for the new year are 1280×800, 1366×768, 1280×1024, 480×320, 320×480, and good old 1024×768. Oh and also 1440×900, 1920×1080, 1680×1050, 800×600, 2560×1440, and 480×360. And 320×240. Those are just some of the hundreds of different screen resolutions of visitors to this blog. In the top 10 alone the widths range from 320 to 2,560 pixels.

Still think your 995 pixel wide site is the best experience for every visitor? How well does your primary messaging come across when viewed zoomed all the way out on a mobile phone? And what kind of new experiences could you be delivering to people taking advantage of a beautiful 27″ high-res monitor?

Continue reading “2012 New Year’s Resolutions”

Color Thief

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?

Esquire eNews email design
What is important here? What is all that tiny, blurry stuff at the top? Is Gisele with Eli Manning now, I thought she was married to Tom Brady?

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

Infojocks Tosu

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.