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

.ffexample { font-family: 'Lobster', arial, serif; text-align: center; color: #111; background: #fff; font-size: 2.2em; padding: .7em; margin: 4px 0 16px 0; }
.ffexample dfn { font-style: normal; }
.ffexample .shadow { text-shadow: 2px 2px 0 rgba(0,0,0,.2); }
.ffexample a { color: #6eb7e4; text-decoration: underline;
-webkit-transition: color 0.3s ease-in-out;
-moz-transition: color 0.3s ease-in-out;
-o-transition: color 0.3s ease-in-out;
transition: color 0.3s ease-in-out; }
.ffexample a:hover { color: #DC7536; }

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

Think Apps are All That Matters for Mobile? Think Again.

The buzz out there now is all about apps. Whether it’s for iPhone or Android, you can’t visit Yahoo.com or watch the local news without hearing all about the latest, greatest mobile app. Dedicated apps that users install from app stores have a lot of advantages and there are some out there we all can’t live without, but you can’t ignore the mobile web.

Two apps that are on most every smartphone user’s home screen are Twitter and Facebook. They’re two of the best designed apps out there and both have been in the top 25 free apps in the iTunes App Store consistently since launch. Knowing that you might think Facebook and Twitter users always take advantage of those great apps when they’re on the go, but the numbers say otherwise. Based on numbers aggregated by Luke Wroblewski, mobile usage of the top two social juggernauts continues to explode and much of it is on the mobile version of their websites:

  • 50% of the more than 500 million active Facebook users currently access Facebook through their mobile devices (250M) compared to 25% a year ago (100M out of 400M). 33% of Facebook posts are sent via mobile devices. (source)
  • Facebook’s top mobile client is m.facebook.com (Facebook’s mobile Web site) with 18% of total new Facebook posts. Android, iPhone, and Blackberry are next each with about 4% of total new Facebook posts. (source)
  • 50% of total active Twitter users are on multiple platforms (mobile) compared to 25% a year ago. 40% of all tweets are sent via mobile. (source)
  • Twitter’s top mobile client is m.twitter.com (Twitter’s mobile Web site) with 14% of total unique users. SMS is next with 8% of total unique users. Then Twitter for iPhone (8%) followed by Twitter for Blackberry (7%). (source)

For both sites, a much higher percentage of people are using the mobile website than any particular mobile app. On Twitter, even SMS is still ahead of the iPhone and Blackberry apps. Whether it’s because they’re on older phones or because they’re following links in an email or a search result (remember that links don’t open apps), it’s clear that just because you offer an app doesn’t mean your mobile web presence is any less important.