Once you dig through a thousand icons for the ten or so that you need for a project, you need to fiddle with the sizing of them, and then clutter up your HTML with a bunch of <img> elements. While there’s nothing hard, or really time consuming about this, I’ve always found it a bit more involved than it needed to be, and things only get worse when you need to resize the icons. Maybe half way into a project you realize those icons all need to be bigger, or smaller, or you need them at multiple sizes. Do we really need three separate files just for three sizes of an icon? What if after all that, the client wants to change the color scheme of the site, and the icons no longer match? Suddenly you can find yourself recreating dozens, if not hundreds, of assets for something that seems like a simple change.

Whether you’re a designer, a developer, or even a client getting a website made, what you really want are assets that are scalable, so they can be as flexible as the website is, and adapt based on user or client feedback. What we need is a single icon that can grow and change size at a moment’s notice, and ideally, change color as well.

Scalable Vector Graphics (SVG) are one approach to this problem, but for all the buzz worthiness, the pitfalls out weigh the awesomeness. Vector graphics are infinitely scalable (yay!), but there’s nothing magical we can do to change the color on the fly, and browser support is iffy at best.

There is another solution that’s rapidly been gaining in popularity that addresses all of these issues, and it’s called Icon Fonts. With an Icon Font, you have a single file where instead of a bunch of letters making up the font, you have icons instead. You might type the letter “B” but you’ll get a bicycle instead. After all, as far as the computer’s concerned, a B is just as hard to draw as a bicycle.

Once we treat icons as letters, the advantages and possibilities start to become apparent. Just like letters, they can be any size you need them to be, or any color, or accept any fancy CSS3 text effect property so you can even add back some of the pizzaz if you don’t want a flat color, or be positioned in any way. Because all the icons are in one file, it can be compressed more and load faster, which is especially great on mobile devices. And of course, just like text, these Icon Fonts work in every browser, even ol’ Internet Explorer.

As awesome as all that is, my favorite aspect of Icon Fonts is the scalability. In the desktop computing world, despite the growing size of screens, screen resolution has been roughly the same for well over a decade. But in the mobile world, screen sizes and their resolutions are all over the place. When using non-scalable images, this can be a headache as one phone might display something nice and crisp, yet another phone has to scale it up, so it looks blurry. This is especially important on high resolution screens, such as the Retina Display found in the iPhone 4/4S and the new iPad 3. Traditionally, you’d need to make higher resolution files to compensate for this, but with Icon Fonts, they’ll just scale up to be as big and sharp as they need to be.

All that said, there are some drawbacks of course. Just like with text, Internet Explorer isn’t great at how smoothly it shows Icon Fonts, so you need a little more consideration to get it looking great, and if you need it really small, there might not be anything you can do to make it look good. Screen readers for the visually-impaired also have trouble looking at an Icon Font and seeing the icon instead of its base letter — we see a bicycle, but the screen reader sees a B. There are ways around that, but hey, that’s another show blog post.

With all these new mobile devices, and their bespoke screens and resolutions, we need everything to be scalable, so they can adapt for their displays. Text has always been scalable, and now Icon Fonts let our fonts become scalable as well. The more scalable, the fewer assets we have, so development is faster, updating is faster, performance is better, and appearance is sharper and prettier across hundreds of devices.

If design is about finding solutions and creating them to have appeal, then it is logical to conclude that appeal, the subjective part of the theory, is important. Why?

Ask yourself this:

• How many books have you decided to read because of the cover?

• When you buy a car, how much does the color and design factor into your choice?

• How inclined are you to take a website’s information and content seriously—or even read it—if it appears ill-designed?

The truth is, designers are the same. We know how you think because we are just like you. Remember, from statement #1, we have to know the psychology behind behaviors. So, what makes us different? I need design, but why do I need a designer?

Designers live for a personal triumph that most people forget: beautiful and unexpected things are born from creativity and inspiration. We are actually motivated by the challenge to merge creativity and inspiration to produce an appealing solution.

Design is a necessary thing, but do not mistake it for a simple task. Designers are fine tuned professionals trained to find the appealing solution for you, similar to a doctor that is trained to find tumors or fractures and then prescribe a course of treatment. Designers employ a process. We tap into our ideas, drain them dry of all possibilities, and then go back to the problem and ask it to walk the border of our brains, between the left and the right, to present a final result that rings true.

Design may be subjective, but it is objective fact that the world needs design. Designers are able to see the objective problem and address it in a subjective manner, which can convince an audience of its efficacy. It is a balancing act to be able to employ both sides of your brain to produce a solution, serve a need, and make the world a bit grander in the process, but we, designers, get really nerdy about it. It is what we are happy to do. And honestly, who wants a boring solution to a problem when you can have a beautiful aide to life?

Do you have anything to add? Why do you think the world needs design?

After you enjoy these mind-blowing links, Tweet, write on our wall or leave a comment below to let us know what you think.

Marketing

Samsung reveals tablet launch details.

iPad, iPhone and iPod Touch to get wireless printing with iOS 4.2.

Facebook passed Google in “time spent,” so what does that mean?

How to generate links through media relations.

What moms can teach us about the Internet.

Business writing for the Web: 27 ways to write more better-like.

The anatomy and evolution of Google Search results listings.

Matt Cutts acknowledges SEO 2.0 tactic of linking out as a ranking factor.

Design

A design is only as deep as it is usable.

What businesses can learn from designers.

Don’t make me wait. You wouldn’t like me when I’m angry.

Everyone who tried to convince me to use Vim was wrong.

Charts of the Yay!

Bing beats Yahoo for number two spot in search rankings.

Google’s Search share flatlines.

The ugly outlook for Nokia’s new CEO.

Oh, and remember to check out our delicious tags to see what else we’re looking at.

All I could think about at that moment was, “Wait. What? How are they going to pull that off without everything exploding?” What would he announce next? Cats and dogs living together in harmony?

The advantage that Steve Jobs kept hammering home was that by doubling the number of dots on the screen that create what you see (aka pixels) while keeping the screen the same size, text on the screen would look as good as it does on paper. This is something display engineers have been trying to achieve for decades.

And Jobs was right; text looks great. But because text has no intrinsic size, when you make a font size larger, it still looks great. We all know what happens when you try to resize an image; it gets blurry and pixelated and all around nasty. Instead of gaining detail, you lose it.

So when I heard about this Retina display – which basically doubles the density of everything (think of the difference between skim milk and mmm whole milk) – my thoughts turned to images. Text would look better, but images would look worse.

SCALABILITY AND DESIGN IN A MOBILE WORLD

So what’s this have to do with mobile web and application design? Well, the iPhone 4’s not the first phone to have a high-resolution screen. In the Android world, screens can be anywhere from 3” to nearly 5” with a variety of resolutions, and screen densities to match. What the iPhone 4 did, along with this year’s bevy of Android phones in all shapes and sizes, was bring a certain situation to a head that user interface designers had been dancing around for years — Scalability.

Mobile users have become accustomed to special websites and apps that fill the screen and are tailor made for their given device. You don’t resize windows or adjust things to your preference; you expect it to be perfect. So what do you do when you have to design something tailor made for screens between 3” and 5,” that varies from 120dpi to 326dpi, and needs to display on phones from six different manufacturers? That’s the very problem I had when I sat down to redesign the mobile template for our Docsites, a design option for some of our specialty clients.

This redesign was for a template that’d be in use for hundreds of websites. So, in addition to the display scalability problem, there were also issues of color and content scalability – as well as the need to keep the site petite so it would load quickly on slow mobile connections. One design for dozens of different screen types, for hundreds of websites. Piece of cake…

BROWSER POWER AND CSS3

One of the great things about designing for the mobile Web is the modernity of the browsers that you find on a phone. iPhones, Androids, and even Nokia’s Symbian based phones have browsers based on WebKit, the same core that powers Safari and Chrome — the most modern browsers on the web. Blackberry, prior to the new OS6-powered Torch (which uses WebKit as well), is pretty antiquated. However, it could be worse (I’m looking at you Windows Mobile). Even as bad as the Blackberry browser is, it’s still more predictable and less buggy than the #1 browser on the desktop web — the 10 year old IE6. Because of these advanced, nimble, powerful mobile browsers, you can count on modern features like CSS3, SVG, and HTML5, which are web technologies perfectly suited for tackling the three design considerations needed to create our scalable website.

Throughout 2010, CSS3, an update to the language that designers use to style websites, has been gaining popularity and use – thanks to modern browsers, such Safari, Chrome, and Firefox on the desktop, as well as the iPhone and Android in the mobility space. Even Internet Explorer 9 and Blackberry OS6 have joined the party as of this month. For designers this is a huge win, as the more CSS3 support there is, the more creative we can be in a shorter amount of time.

Making buttons or other assets with any personality, such as color gradients and rounded corners, used to require opening up a graphics programs like Photoshop, Fireworks, or Illustrator. But with CSS3, artwork that used to require an expensive program and hours of work can now be done in much less time and with just a few lines of styling code. Not only does this eliminate tedious design tasks, it also allows the designer to focus more on the design than the implementation. It requires less upkeep as you add more buttons and headers. Likewise, because the design is defined in CSS, rather than absolute pixels, it’s easy to adapt to other websites, change colors, and modify for any need.

You can also make text more interesting by adjusting text shadow properties to give you a nice drop shadow or a subtle letterpress look — again, without relying on fixed, absolute graphics. CSS3 also supports multiple backgrounds, allowing you to layer and position additional assets into a button or header when you can’t do it all in just CSS. When you put all these features together, you have the power to design, maintain, and make portable website elements without the use of images. A button made for website A, can be tweaked in just minutes to work on website B, while still looking bespoke, and without requiring anyone to open any programs and hunt for the original artwork. And because there are no files generated, the website will load much faster.

WINNING THE IMAGE BATTLE: RESOLUTION VERSUS SIZE

Scalable Vector Graphics (or SVG) are a type of graphic that has existed in the digital graphics realm since the dawn of the industry, but have never really been seen in a web browser. In general, vector graphics don’t define an image by using fixed pixels, but instead use coordinates and math. As a result, when you resize a vector image, shapes get recalculated and redrawn at a larger size, and there is no quality loss. While complicated images like photographs can’t be represented as vectors, illustrations, such as icons, can be.

As more and more high-resolution screens come to market, the importance of maintaining high quality graphics with detail becomes difficult. Non-vector (or bitmap) icons that might look fine on a normal computer screen will look blurry and jagged on a high-resolution screen, such as professional monitors, or newer iPhones and Android phones. With vectors though, no matter the screen size or resolution, icons will look razor sharp and perfectly detailed. The advantage here is that you don’t have to settle for cruddy looking graphics on high-resolution screens, nor do you need to create multiple versions of the same icons for low and high resolutions. One graphic, with all needed information displayed at any size, is used instead, so there’s no need to go back and make higher quality artwork in the future. As screens get better and more detailed, so will your icons without any work down the road.

CACHE, CAPTURE, AND SAVE

Lastly, HTML5, an update to the core language that defines every webpage ever created, provides us with an incredibly useful feature for this design: Offline Storage. Despite CSS3 and SVG reducing the number of files that are needed to create a website, there are still going to be some required. Icons, photos, and maps, for example, are all things that still need images to be downloaded every time you go to a site, or do they?

HTML5’s spiffy new offline storage feature allows for something called a Cache Manifest. A Cache Manifest list is a list of files that you instruct the browser to download in a normal manner, but then retain and save to the hard drive, or into a phone’s internal storage. Using this feature, any icons, photos, or maps, for example, can be saved without ever needing to be re-downloaded again. Every time you visit the site after the first time, those large files won’t need to be downloaded.

Combine that with CSS3 styles and SVG graphics and you have a site that downloads quickly, looks great on any phone (no matter the size), can be easily updated, and can almost self-maintain over the years as technologies advance.

The good news is: we can’t help it. …Of course, I’m referring to the fact that the general web-surfing public ‘judges the book by its cover’.  No doubt, if the capabilities of the Internet continue to expand at the current rate, we might just be nestled into our Wall-E style hover chairs by the end of this year.

The old-fashioned way of getting to know the people behind a product or service is becoming obsolete. Sad as this may be – we can’t go back; and understanding how design affects your desired audience’s ‘rapid decision making,’ may mean the difference between sinking or swimming.

IT’S ABOUT DESIGN!

As humans, we rely on our senses (sight, taste, touch, smell, feeling) to make judgments and decisions. Surprisingly, our decision-making is based on the feelings conveyed, rather than on the actual information presented. The way something is designed causes an almost involuntary reaction in our brains. This reaction determines how we feel about said thing, and thus heavily (HEAVILY), weighs on our decision-making process.

This is why people are willing to pay more for ice cream packaged in round containers than in square, why Coke always beats Pepsi (even when blind taste tests have proven Pepsi to be the tastier beverage), or why a single gas pump can be seen as solely responsible for all of the oil in the Gulf…

Even when that one gas pump has clearly been obeying the rules and just wants to help give you gas to get where you’re going.

GETTING THERE…

And speaking of getting to where we’re going… All this matters because (in such a fast-paced market, where you only have a few seconds to grab your audience’s attention) DESIGN is our/your only chance! Don’t doubt that the hover chairs are coming; and if your presence on the web doesn’t convey your value (VISUALLY), you can be sure they’ll zoom right past, filled with consumers watching YouTube and enjoying a tasty beverage (probably a Coke).

COMING SOON:

EVERYONE ON THE WEB IS DISOBEYING THEIR MOTHER: PART 2

-OR-

A DESIGNER’S GUIDE ON MAKING YOUR AUDIENCE DISOBEY THEIR MOTHERS

After you enjoy all of these awesome links, Tweet, write on our wall or leave a comment below to let us know what you think.

Programming

Riding Rails: Rails 3.0: It’s Ready!

CSS3 Gradient Generator.

Google Code University.

Marketing

Dan Cobley: What physics taught me about marketing.

Tempo, tempo, line and length.

Online content doesn’t have an expiration date.

Gmail Priority Inbox launches: Your email will never be the same.

How to use social media monitoring tools for outreach marketing.

How to write a whitepaper that will capture leads.

Design

60 high quality Photoshop PSD files for designers.

Design is a drug.

But wait, there’s more!  Check out our delicious tags to see what else we’re looking at.

We want to know what you think of our links.  Tweet, write on our wall or leave a comment below.

Design

Give users some credit.  They are not (all) idiots.

250 beautiful typography t-shirts.

Applying LEED principals to graphic design.

Marketing

Why tumblr trumps micro blogging.

Infographic: The Geosocial Universe

SEO

23 awesome SEO blogs everyone should read.

New marketing data: Top SEO objectives.

How long until Facebook passes Google in traffic.

It’s official: Yahoo’s results now come from Bing.

Qualitative web analytics: Heuristic evaluations rock!

Programming

Spritely: Flash-like animation with jQuery.

Seth Priebatsch: The game layer on top of the world.

12 standard screen patterns.

And don’t forget to check out our delicious tags to see what else we’re looking at.

We want to know what you think.  Tweet, write on our wall or leave a comment below.

Facebook

Make sense of Facebook Places.

Hide Facebook content from non-fans and show it to fans.

Foursquare experiences record signups after the launch of Facebook Places.

Design

Typekit teams up with Adobe to offer more web fonts.

iPad fonts petition.

Tips and tricks for a less tedious workflow using the hidden magic of Photoshop Scripts.

A handy guide to image resolutions in print design.

Finch: Adventures in Design.

Programming

Pure CSS Icons: Make the madness stop.

Terminal tips and tricks for Mac OS X.

Marketing

12 amazing SEO infographics.

If you care about SEO, you need to know about video.

5 items to delete from your website today.

What different sorting algorithms sound like.

And don’t forget to check out our delicious tags to see what else we’re looking at.

We want to know what you think.  Tweet, write on our wall or leave a comment below.

Search

An in-depth look at search auto-suggestions.

Readers who liked this article also read…

Yahoo News testing related search results on news stories.

A Joint Policy Proposal for an open Internet.

Bringing sexy back to search.

Feeling lucky?

Using Google Earth to graffiti the planet.

Programming

Contrary to new survey, you should investigate location-based apps.

Ideas for iPhone apps.

Flip! A jQuery plugin v0.9.9.

Dynamic FAQ Section w/jQuery, YQL & Google Docs.

App icons on iPad and iPhone.

Marketing

Do we really need to be social on social media?

Take a walk on the client side.

3 ways Facebook’s pending page changes affect marketers.

Design

A man, a plan and a Sharpie: “The Great Typo Hunt.”

100 pages of images, fonts, & amusement!

Showcase of delicious coffee websites.

Beyond “I hate green:” Managing Productive Visual Design Reviews.

And don’t forget to check out our delicious tags to see what else we’re looking at.

We want to know what you think.  Tweet, write on our wall or leave a comment below.

Design

Why 37signals’ Advice is irrelevant.

Listen to your mother and drink your Design Milk every day.

Learn how to Design the Experience.

Alphabet Book’s Visual Index of New Orleans.

For more local designs, check out Good’s New Orleans Issue.

Social Media

15 Excellent Corporate Blogs to learn from.

The origin of Twitter’s “Fail Whale.”

The 4 Hottest Social Media Marketing Trends explained.

How Social Media is Turning Us Into Responsible Voters.

Programming

An HTML5 Video Player in CSS with Silverlight and Flash.

An example of MarkerClusterer v3.

Marketing

How to demonstrate and deliver Lead-Nurturing ROI.

Mobile Video is expected to Double Reach by 2013.

An update on rankings for long-tail searches.

SEO

Do 301 redirects Dilute PageRank?

Google’s search party is over.

Can’t wait for the next link roundup? Check back here everyday to see what topics interest us.