Archive for March, 2009
Free Icons and Fonts to Get You Past Your Creative Block
Web designers, like those in any other creative professions, occasionally hit walls when it comes to being creative or coming up with new and interesting ideas. The Internet is like the school bully that cares–it’s there to slap you around, steal your lunch money, and give you a Super Atomic Wedgie, but at the same time it’s willing to lend you a helping hand when you’re down or need inspiration.
Consider me your caring bully. I’m here to show you several good sites that will inspire you the next time you find yourself stuffed in a locker or hanging from the flagpole by your undies:
Smashing Magazine Fonts
Smashing Magazine has great collections of freebies–their free font round-up should be more than enough to spark your creative fire.
http://www.smashingmagazine.com/category/fonts/
Fam Fam Fam Icons
Over 1000 free pixel-perfect icons for use in your web sites and applications. These little icons are great for adding subtle touches to menus or actions–and all come on transparent PNG backgrounds that allow you to easily integrate them into your site.
IconsPedia
Where Fam Fam Fam lacks in size (most of their icons are 16 x 16), the icons at IconsPedia make up for it with 256 x 256 glossy-ness. These icons are high-quality, and most all of them come in sizes from 32px by 32px all the way up to 256 x 256. As a bonus, IconsPedia has a great search feature that lets you search for keywords or themes relating to icons.
Woork: The All-In-One Solution
As my final act of bully-kindness, I’ll introduce you to Antonio and his blog, Woork. Woork has great tutorials and resources for both designers and programmers–and most of the stuff he has is free and very well documented on how to use it in your own projects.
Got your own web-design-writer’s-block cures? Leave us your best resources in the comments below!
What do you get when you cross a website and a mobile phone?
For the most part: chaos…… but it doesn’t have to be!
Not only are you getting online on your home and office computers anymore… for most of us, it’s glued to our pockets 24/7, allowing us to always have access to the internet whether were at the movies, in line to buy groceries, waiting for a concert to start or sitting at the airport about to board a plane. Today’s generation requires internet usage every second we have to spare; that’s simply just what we’ve become. So thank goodness for internet integration on current cell phones. After all, how else would we be surviving right now?
At first, this whole concept of viewing a website on a cell phone was just simple text, and minimal photos. It was just enough information for you to “get the point” and read the content you needed to read. It wasn’t what you saw on your home computer, but you still got the gist of what you were looking at. Well needless to say, as with anything else, we have come quite a ways, to the time that actual websites, in “for-real” format can now be viewed on your cell phone. You can now see yahoo.com on your phone the exact same way you view it on your home machine. How awesome is that?
But what is the ratio of sites you pull up on your phone that look like what they “should” and ones where mobile-compatibility totally wasn’t taken into consideration? I’d say 1:100. Just a rough guess, but I’m sure somewhere around there.
Being a web developer, I have to stay on top of things like this, as clients are beginning to ask “Why does my website look terrible on my cell phone?” It was only a matter of time before we had to step back and say, “OK, it’s time to do something about this.” Whether you’re a web designer, developer, or the person looking into buying a website, here is what I would consider to be the top 10 things to take into consideration when trying to create the same “effect” with your website, whether the user is viewing it on a 23 inch flat screen monitor at home or the cell phone they carry on them daily.
10. Flash, to be or not to be? Flash is great! It’s cool looking, it moves around on your screen, it’s an attention grabber, and it’s just “flashy”. But are we more concerned about the information we’re getting to our client or how we deliver it? Let’s think twice about all-flash websites, and even using flash elements within our websites, as all mobile phones have yet to integrate any flash capabilities. It’s one thing to get a big box with an “x” in the middle of it, if its just a simple photo rotation, when viewing your site on a mobile phone, but what happens when that flash piece is your navigation, your company logo, or even the entrance to your website? You just lost what could have been a million dollar sale…. but oh well, guess you’ll never know.
9. Navigation, does direction matter? Something to think about when choosing placement and functionality of your navigation is how a website scrolls. Typically you want to stick to “one-direction” scrolling. Meaning generally when you look at a website, you are scrolling up and down (top to bottom) and not horizontally…. well hopefully. This being said, in order to get your navigation to function as properly on your cell phone as it does on your computer, you may want to consider vertical navigation opposed to horizontal. After all, you don’t have a lot of room to work with as it is, however you have unlimited space vertically, as this is the direction the site scrolls.
8. Tables: good, bad or indifferent? Well a little of each I’d say. Seems as though a developer either loves them or hates them, and for the most part people either build solely using tables or stay away from them all together. Fact of the matter when it comes to mobile compatibility is you can use them, just don’t over-use them. For overall layout, its best to stick to a CSS “shell” for your site if possible, but if you must use tables, by all means go ahead. But there will be a catch in doing so… just don’t nest! A table here or there will allow for proper functionality, just don’t get carried away. Keep your tables to main level only, and stay away from nesting within. Keep it to a minimum and you should be good to go.
7. Click Click: Links are of utmost importance when designing a website in general, but especially when taking mobile-compatibility into consideration. Think of how long it takes to load pages on your cell phone… now think of how many times you want to do that? I take it not many. Get the user to where they need to be, and do it fast. Make sure you think about how many clicks it takes to get to the more popular pages, and if its more than 2 or 3, rethink the path to that page. You wouldn’t want to go through 6 links to get to information, why would your user? Keep it simple, or you risk the client losing patience.
6. Position:Absolute, I think not - With internet on our phones, we want to make sure the way we build our websites is very “fluid”. We’re limited to how many tables we’re using to begin with, which results in a mostly CSS driven site. What you definitely want to stay away from is positioning elements “absolute”. Make sure when using positioning in your CSS you are doing things that allow for more movement, to accommodate the constraints of your resolution size. Position things relatively, or float, or don’t position at all. Just what ever you do end up deciding, stay away from absolute, as it is too “definite” and unmovable… the opposite of fluid.
5. Lions & Tigers & Popups, Oh my… As if popup windows aren’t annoying as it is, in the cell phone world they are non-existent. So the good news for the user is we don’t have to avoid them any more, the bad news for the developer that created one, your information just got lost. So try and think outside the box, and stay away from the use of popup windows! Finally, an easy way around them: no compatibility.
4. Frames, that’s so last year. Ok, more like 10 years ago, but you get the point. Let’s get away from older technologies, as mobile compatibility is fairly “newer”, therefore integrating “newer” advances in the industry. Stay away from frames, as you are limited to a small amount of screen real estate, and once your screen cuts off, so does your content. Frames allow you to scroll multiple areas of a website without the rest of it moving. Well not on a cell phone. You’ve got 1 scroll to use, and 1 scroll only…. Use it wisely.
3. Color Madness: It’s bad enough we have to take into consideration the color differences amongst every computer monitor on earth, but now we throw cell phones into the mix. How many times have you designed an awesome looking purple site, only for the client to call and say, “I hate the blue on my website” or you do a pastel looking yellow only to hear, “That dark orange is horrendous”. Color is an issue we in the creative industry deal with daily, if not hourly. What you see on your computer isn’t what your neighbor sees, or your parents, or your best friend. News flash, all monitors are different. But now we have to be especially considerate of the cell phone population as the quality isn’t nearly as good, the size is a much smaller proportion, and overall color is not as vivid and bright. So when choosing site colors, make sure you take great contrast into consideration, what colors really “pop” against one another. If you have text on a colored background, make sure the two colors create readability, and that if a cell phone only displays in black and white, your site can still be viewed correctly. So before you do a site in all green and blues, you may want to reconsider.
2. Content, how much is too much? Chances are if you’re asking yourself this question, you have too much. The reality of it is, no one is reading it all, so why not give them just the basics? Minimize your content and only give the user what is important and what you think they need. Put the most crucial information towards the top, and the less important towards the bottom. Because of loading time and scrolling, you want to make sure the part they need to read is easiest to get to. All the fluff than follows!
1. Images, images, images… Enough said. What better way to get your point across than with images? It’s not gonna do you any good on a cell phone unless you’re smart about it. First of all size…. yes, it does matter. Your cell phone is already working as hard as it can to even browse the internet, don’t make it choke on a high-res photo. Keep your photo size and quality to a minimal, stay away from high resolutions and big graphics. If possible, the combined image size on a single page should be under 10 MB. Secondly, in your image code, make sure you are specifying the height and width of your image, this is something we can get away with not having for the everyday computer, but cell phones must have it to ensure its displayed properly. Also, within that same line of code, make sure to always use ALT tags just as a back up plan, in case the images aren’t displayed. Better to be safe than sorry. Lastly, make sure you are using supported formats, stick to .JPG and .GIF to be on the safe side. After all, what good is a website without all the pretty graphics, just make sure not to forget about load time, the way it displays, and functionality.
Now you should have no excuses as to why your website displays terribly on a mobile phone. Just these 10 points to consider can make a world of difference. Go on, try it!
Stop and Think
We are going to step away from techno-coolness for just a second and dive into the wide world of ideas…
Here’s an interesting thought… most of the technology that powers the modern and innovative sites on the internet are at least 10 years old. Ajax, that new thing everyone’s been using the last 3 years is about that old. DHTML, the set of technologies that turns static text and images into a moving and dynamic interface is even older. The reason that these technologies have taken 7-10 years to mature isn’t that they are that hard to use; it’s because it’s taken that long for designers and developers to realize their potential.
It comes down to ideas. Someone took the time to say, “Wouldn’t this be great!” They stopped long enough to let ideas flow. They didn’t ask the question, “How has this been done before?” They asked, “How can this be done better?”
I’m sure that somewhere out there in the blogosphere someone is thinking, “That’s nice, but the economy is bad! I don’t have time to sit around and ruminate, I need to keep my business afloat!” That’s a valid point. You’ve gotta do what you’ve gotta do. However, the companies that are making money hand over fist today are NOT the ones sitting and wondering how to keep their head above water or sticking to the status quo. Success is found by companies that have taken the time to think about the situation.
Take Apple for example: A few years ago they were trying to sell expensive computers in a market that was focused on reducing the cost of PC’s in order to gain market share. They didn’t just jump on the band wagon, they stopped and thought. Out of that thought process came great successes like the iMac, OS X, the iPod and the iPhone. They went from living on the fringes of a Microsoft based PC market to creating and/or leading several completely new markets.
It’s all because they were willing to stop and think.
So here is a question for the reader. Is your market saturated? Do you feel that your products and brand are lost in the mix? If so (or even if not) it’s time to ask some questions and then answer them honestly, setting your ego aside:
- How can I tweak my product or service so that marketing that product comes naturally?
- What emotion is evoked by the product I’m selling (a sense of security, a feeling of exhilaration, relaxation, etc.) and how can I weave that into every aspect of the product or service?
- How can I break the status quo with positive change?
- What would I do if there were unlimited resources and time? How much of that can you do with the resources and time you have now?
Free Stuff
For so many entrepreneurs, the idea of giving away something for free sounds antithetical to good business.
But it can actually prove a smart strategy, especially for companies looking to strengthen their online presence.
There are a couple different reasons why giveaways make good sense. The key is making sure that, one, the initiative is cost effective and, two, that you’ve got a solid plan for capitalizing on the influx of information headed your way.
The idea behind the freebie is simple - expand your reach and possibly garner new customers who enjoy your offering, all in a no-pressure environment. In the world of online marketing, it’s also an excellent opportunity to build up your databases with new email addresses, websites, blogs and demographic information (although there’s only so much you can infer about your users from free and anonymous registration).
So, in effect, you’re not giving away something for nothing. You’re getting information in return, which you, in turn, can use to further expand your reach.
Also, make sure to take the time to specifically target bloggers related to your industry or who would be interested in your giveaway. Giving free stuff to people with a following is always a good idea. It’s human nature - we’re more apt to say nice things about someone who’s given us a free goodie.
Along with attracting new consumers, giveaways are also beneficial when it comes to retaining existing customers. Providing a tool, a service or a simple mindless gift for those long-time, trusted consumers is an easy way of saying thanks, as well as a great indication to fledgling and prospective customers that you offer more than a commodity.
These are avenues for strengthening identity and instilling loyalty.
User Telepathy
When we build a site we all have the grandiose visions that 90% of a site’s visitors are clicking, buying, and filling out every piece of information, right down to their first born child.
Ahhhh…and then we wake up.
If only this could be true. The unfortunate fact remains that you might not ever be able to quite figure out what every user had in mind when they visit your site. Many factors play into this; such as the referral source of the user, content displayed on the page, relevancy of the page they land on, and how much the background colors resemble the same color of Chardonnay they had too much of last night. The best anyone can do is utilize some of these simple techniques to help guide users to the promised land (or conversion area for the less dramatic).
1. Make your conversions the focus.
Is your site selling chrome widgets? Make sure when users come to your site that it is unmistakable where to click to purchase or find out more about chrome widgets. Large buttons and the right color patterns are one of several tactics that get people to click.
2. Make content enticing, not boring.
Instead of long drawn out paragraphs, try using bullet points, bolding, and caps to draw attention where necessary. The key is not to overkill attention getters as it will just blend in, however still give access to larger sections of content through sub pages of the full information. While most users won’t read it, there may still be some people that may want to see this.
3. Keep your conversion areas throughout.
Use every page of your site to highlight your conversions and focus. Don’t let your users get deep into your site without constantly presenting an opportunity for them to transition into a conversion. The odds are that the more pages they visit, the more interested they are in your site and therefore your site needs to make it as easy as possible for them to convert.
4. Use Google Analytics.
No, Google didn’t pay me for this but it’s free and it is awesome. Need I say more? Google Analytics allows you to see reports ranging from the user source, landing pages, to exiting pages. You can also view statistics such as average time on site, bounce rate, and more. These kinds of statistics can give you plenty of information on what you can do to beef up your conversion rate.
Sign up for a free account here: http://www.google.com/analytics/
If Politicians Were Programming Languages
This is one of the most exciting political periods in our time. Many Americans have found within themselves a renewed interest in politics, and it’s got me thinking about the recent candidates in terms of programming languages. So, in no particular order…
Hillary Clinton is Javascript.
Before I offend anyone that thinks I’m relegating her to a small and insignificant language, think about Javascript. It’s loosely based off of a programming monster, Java (aka Bill Clinton). It’s the heart and soul of a lot of stuff you see on the web today, like AJAX or JQuery. A lot of those fancy things you love about sites like Flickr or Facebook are filled with Javascript. And, just like Javascript, she’s got the backing of a lot of big players and the pedigree of a respected and well-tested precursor.
Mitt Romney is .NET
Romney is one of the more well-funded candidates on the campaign trail. Like Romney, deep-pocketed Microsoft’s .NET languages have features that are admired by many, but its colleagues seem to be growing tired of its rhetoric, and often team up against it much like the candidates at the New Hampshire debates teamed up against Romney. It’s losing ground to open-source, grass roots languages like PHP and Ruby on Rails, but .NET still holds significance to many people.
Mike Huckabee is PHP.
If only for the reason that Huckabee has Chuck Norris as his biggest “Hollywood” supporter, Huckabee is the tough and no-nonsense PHP. Like its conservative counterpart, PHP is known for providing a solid set of tools and having a vocal group of ardent supporters. It’s relatively extendable, easy to like, and performs well in public–just look at Facebook for PHP in action.
Fred Thompson is Flash.
If Flash had a counterpart in the political realm, it would be one-time senator and part-time actor, Fred Thompson. Granted, Mr. Thompson himself isn’t all that flashy, but Hollywood is. And you can compare Flash’s ActionScript with Thompson’s turn in “action thrillers” like Die Hard 2 and The Hunt for Red October. Like Flash, Thompson has his niche, and even though he didn’t win the race, he is still useful and interesting nonetheless.
John McCain is Perl.
Perl is your dad’s pocket knife that’s been handed down for a few generations. It’s seen a lot, been in a few scrapes, and is always better for the wear. Perl as McCain is old and slowly losing its effectiveness, but provides those who know how to use it a vast amount of influence and power. Aging well, it shows that no matter who or what steps forward as a new leader, Perl will always be around as a stalwart alternative.
Barak Obama is Ruby on Rails.
If you’ve been programming for anytime at all, you’ve heard about the Rails framework. And whether you wanted to or not, you’ve noticed Barak Obama as well. Obama’s splash came at the 2004 Democratic National Convention, when the relative newcomer burst onto the scene as the keynote speaker, enamoring a section of voters that had become tired of the typical political monotony. Rails, too, was announced in 2004, and has quickly emerged as a leading contender because of its ease of use, youthful loyal following, and ability to combine old programming styles with newer streamlined methods. Who doesn’t like the apps from 37signals, which are done with RoR?
Rudy Giuliani is Visual Basic.
What is Giuliani–a conservative Democrat or liberal Republican? What is Visual Basic? A Windows-based application language or an internet VBScript language? I’ve always had a fondness for Basic, since it was my first programming language, and Visual Basic was always intriguing to me because I could easily build usable Windows apps. In a similar way, most of the nation developed a fondness for Giuliani during the immediate aftermath of 9/11, and he’s hoping they still love him when he decides to run for an office again.
Dennis Kucinich is Smalltalk.
Look, I don’t know anything about Smalltalk, but this joke just writes itself.

