Three developer resources for the inspired-less

Inspiration is hard, and at times seems impossible.

There are times when everything I put together feels great; I have one of those Mozart moments where that first version is the best version and the last version. Then of course there are times when getting something as simple as a donate button or a 125x125 ad to look the way I want it to seems impossible. It’s simple to do, but when it just doesn’t look like something you want to take credit for – inspiration feels completely unattainable.

To reduce these moments of frustration (and the accompanying mouse banging) I made it a point recently to include design blogs and resources into my daily feeds and "reads", and while I’ve yet to put together any awe-inspiring donate buttons, the exposure has done a lot to get ideas boiling. I’d like to share 3 of my new favorite resources.

Webdesigner Depot

Of all the websites I cover, Webdesigner is the one I frequent the most. They’re consistent with getting an interesting post up every day, and they tweet (http://twitter.com/DesignerDepot) several times a day, often linking to designs/photos/images and tutorials I would not have come across unless I was following them.

Beyond being a design blog however, the real hook for me to this site is that everything isn’t just centered on designing, but design.  An example of this can be seen in a recent post titled “Apple vs Microsoft  - A Website Usability Study” [link]. Typically, comparison of these 2 companies puts their respective OS’s against each other (which in turn starts a flame war in the comments section with Apple fanboys and Microsoft users), but instead, this post compared their product websites. Each “pride themselves on producing cutting edge consumer and business products”, but which reflected it better on their website? Which had a better search function? Which showcased their products best? Which flowed best? But most importantly – why and how did they achieve it?

WebDesigner Wall

I often wish I knew everything there is to know about web design. To be like a Superman, tights, cape and all (while sitting at my desk), but instead of super powers, I’d be a super web designer. Back to reality though, there’s just no time.

WebDesigner Wall topics are wide ranging include product reviews, giveaways and job listings, but my favorite thing here are the tutorials, all categorized perfectly in their tag cloud. Topic tags include core elements like SEO, design trends and design processes – all easy to filter through and find on the sidebar. Now when I have 30 minutes to spare, rather than getting lost in Digg, I find performing their quick tutorials hugely helpful. (That is to say, Digg is my kryptonite, and WebDesigner Wall is my Lois Lane.)

Six Revisions

Six Revisions to me is less like a blog, and more like an online magazine.

Like the last two, it has tutorials and freebies, but it offers it in a more robust way. The articles are longer, that is, they’re usually more thorough and the freebies (mostly textures and Photoshop brushes) are displayes and hosted for download on their own site. My favorite thing about Six Revisions is that the topics, while still web design and development focused, are all so randomly relevant. That is, one day it’s an article about improving web development [link], another day about time tracking apps for billing [link], and then the next day they're providing links to shortcut and design cheat sheets [link].

Staying up to date with topics that come up often as a developer has been much easier with since discovering Six Revision. (It also helps that their founder is on Twitter (twitter.com/jggube).)

Keyword Madness Solved

These days, it seems everyone struggles with their keywords; they just seem to grasp at anything in their site's content that may have the slightest possibility of helping them generate traffic. I think people over thinking the problem, so I want to share one of my solutions for generating great keywords.

I use a site Keyword Spy which allows you to type in a site or keyword and get a large amount of relevant information that you can use to generate larger list and better target your audience through search engines.

If you type a keyword into the search box, the site will give you the number of search results for that keyword and the number of clicks a day it generates, along with the average cost per click on ppc campaigns, and the sites using that keyword in their ppc campaigns.

From there, you can dig deeper so you can look at the list of people advertising on that keyword and see what other keywords they are advertising on.  For example, I did a search on the keyword "water", which returned the results you can see in the image above.  Now looking down the list of those who pay for advertising on that word, we find several companies and nonprofits, so by clicking on one of those sites we can get information on just how that site is doing, its advertising items, including a list of the paid and organic keywords being used to generate traffic.

This is where is gets really handy, and where we answer the question which keywords to use. Keyword Spy will give you a list of the keywords combined with a rating for their return on investment, search ranking position, competition ranking, average clicks per day and the average cost per click for every keyword in the list.  This will help you determine exactly which keywords are going to help you more and which ones you are going to be competing a little more on.

Now for those using ppc campaigns to drive traffic to your site, you can even get a list of ad variations that articular site is using, which can help you get ideas for how to word your own ads.

Finally, it will let you export the list of keywords to either a text or Excel document so that you can save them and use them wherever you like, however you prefer.

Now Keyword Spy does have two levels of membership: the first is free, which is honestly all that I use since it gives you quite a bit of information there.  If you decide you need more, then upgrade to the Pro account, which is $139.95 a month.  But, for the average nonprofit just looking to drive more traffic and awareness, I think this is a bit extreme. Anyway, give it a try and let me know what you think. It has always worked well for me.

Free Lunch with Google - Google Analytics

So you've satisfied your visitors with the option to donate to your cause easily using Google Checkout, and you've made it easier than ever to make sure your visitors can find what they need by implementing Google Custom Search. Well, I've saved the best tool for last. This tool is not even for your visitors, but for you - the webmaster (and a favorite tool at onLine). Enter Google Analytics.

Google describes Analytics modestly as a tool that will help you "learn more about where your visitors come from and how they interact with your site". However, the way Analytics presents its data and the detail by which it does so makes the tool much more powerful. (Consider that ISPs hosting a site often offer the same information, but I've yet to see one that goes into the depth that Analytics does.)

Like the previous tools covered, implementation is fast. One Google account can manage several sites, and each produces a unique code that is inserted immediately before the page's </body> tag. Once that tag is inserted, you receive immediate feedback from your (highly customizable) Analytics dashboard that the code is being read correctly.

What can Analytics do. Well, in short, in can all answer these questions for you:

• What visitors are searching for within your site?
• What search engine is bringing in most of your visitors?
• What keywords in those search engines are bringing in your visitors?
• Track and compare all your partnership conversions. Are referrals from other sites working well compared to paid ads?
• Which pages result in lost conversions?
• Where are visitors staying the longest?
• GeoTargeting, find out where in the world are most of your donors coming from. Did a recent news piece on your foundation in Detroit produce an increase in visitors? Donors?
• Which links on your site get the most clicks?

Oh, and did I mention - it's all free.

Sign up to Analytics here.
Learn more, watch videos here.

Why You Should Upgrade Your Web Browser

Ask any web developer and they will tell you one of their largest annoyances is testing their work in multiple browsers.  In my work I find myself now testing sites in 3 versions of IE, 2 versions of Firefox as well as Google's Chrome and Apple Inc.'s Safari.  Now this may just sound like a mild inconvenience to everyone else but there are extremely good reasons why you should upgrade your personal web browser.

I am not going to go into all of the flaws and fixes for previous browsers, this has been covered by endless articles online for each browser currently and previously available.  If you would like to find the specific on your current browser I find Google to be a great tool as well as the site for the developer of your browser.

Here is what Microsoft says to the question "Why Should I Upgrade"?

"Microsoft has redesigned Internet Explorer from the ground up, with better security, new capabilities, and a whole new interface. Many changes resulted from the feedback of millions of users who tested pre-release versions of the new browser.

For me, the most compelling reason to upgrade is the improved security. The Internet of today is not the Internet of five years ago. There are dangers that simply didn't exist back in 2001, when Internet Explorer 6 was released to the world. Internet Explorer 7 makes surfing the web fundamentally safer by offering greater protection against viruses, spyware, and other online risks."

One of the most crucial reasons to upgrade your browser is security.  Internet Explorer 6 is one of the most targeted browsers for attacks known as browser hijacking.  Browser hijacking though only one of the issues in browsers is the most common, it includes things like having your homepage set and links added to pages you would normally avoid, a barrage of pop up ads and new toolbars being added.  Newer browsers include security fixes to close loopholes which are taken advantage of by those with malicious intent.

Another ever growing improvement in browsers is their pop up blockers.  There was a time when you needed a separate piece of software to eliminate pop up ads from your browsing experience now these are built directly in to make your experience that much better.  As the web develops, people exploit new ways to give you these wonderfully annoying ads to you, the software developers who create these programs are following close behind to stop them.   By upgrading your browser and keeping up to date with the security updates you keep yourself on top of the game.

Browsers are also growing to keep up with the expanding capabilities of web programing, so by keeping your browser updated you can insure that you view sites the way they were intended.  Older browsers respond differently to some scripting languages and do not always support the same layout methods as newer browsers.  These growing methods have come around to provide better experiences to everyone, including not only the visual and interactive aspect of the site but usability and performance as well. 

Currently the most outdated browser I find myself dealing with is Internet Explorer 6 which was release in August of 2001.  Some of the major flaws with IE6 include no support for transparent PNG files, poor support for web standards compliant code, slow operating performance, outdated pop up blocker and no support for tabbed browsing.  IE7 the replacement was released in 2006, and now the newest version IE8 had it's first public release candidate in Jan of 2009.

There is really no good reason not to upgrade your web browser.  Browsers are free, you can download the latest version and updates from the developer then have it installed in less than 10 min.

Here is a list of the most popular browsers, if you install one I do recommend checking for updates to insure you have the most recent patches.
Mozilla Firefox 3
Microsoft Internet Explorer 7
Apple Safari 3
Google Chrome

Homepage: The Big Five

There's been a lot of focus on social media, networking, and pushing out content. However, a recent examination through 40+ Inspirational Non-Profit Website Designs and some recent grumblings on Twitter made me think about good design: it's always in demand and always necessary. I always enjoy when an organization launches a new website design and really nails it: the color, layout, and message just work together. I'm not a designer, but I love good design.
Of course, I always go by five rules when looking at a nonprofit's homepage. Even the most awe-inspiring design needs to get these five things right in order for me to get that warm-fuzzy feeling about the rest of the design:

• Consistent branding and compelling imagery
• Simple navigation
• Timely information
• Constituent registration area (newsletter, advocacy, etc)
• The "Donate" button

Its easy to agree with these points, but much more difficult to ensure these points with your website's designer. These aren't subjective points (like a shade of blue or the type of photo); these should be hard points that will keep your organization's homepage simple, timely, and interactive. The best video or the coolest Flash application means nothing if a designer can't pull these "big five" into the design.
 
Stop reading now and look at your organization's or your favorite organization's homepage. Did they get these big fve right? If so, good. Now, enjoy the rest of the design and feel comfortable knowing that the organization is putting their best face forward.

Free Lunch with Google - Google Custom Search

[Part 2 in my "Free Lunch with Google" posts series]

Now that your website can accept donations and sell products to benefit your non profit, its now time to focus on your website's usability.

At onLine, we review a lot of non profit websites, so we're always on the look out for the elements every website should have, the large donate button, the non-pixelated logo, the mission statement, etc. One feature that surprisingly is not often available is the "search bar".

It use to be that for a site to be able to have a search bar, code more complicated than basic HTML was required. Or, if you're non profit that was built on a CMS platform, an additional fee was likely required to activate it. Well, Google is sharing their search expertise with everyone for free. Enter Google Custom Search.

From Google Search Engine product page:
With Custom Search Engine, you can harness the power of Google to create a search engine tailored to your needs.

With several pages of galleries, on the field stories, board members, and products on your website, inserting Google Custom Search will help make things easy for the visitor to your site find exactly what they are looking for. To view some examples, visit Google's Picks, a list of businesses and organizations using GCS [link].

Setting up is uber-easy. After you've created your account, your control panel lists several customization options including "Look and feel", "On demand indexing" (allows you to submit a select number of pages to be quickly indexed) and "Code" (includes the HTML code that you can insert into your site wherever you want the search bar to appear).

Typically, like most of Google's offerings, the tool displays advertisements that would appear along with your search result unless you upgrade to the paid version, Google Site Search. However, for non profits and educational institutions, Google allows you to disable advertisements. Which is great! In doing this, Google gives you the option to have a clean search results page, or if you want to bring in some additional funds to you non profit, you can keep the advertisements and make money on your searches (this requires signing up to Google's Adsense for Search program [link]).

Why Linking Works

A website without links is like a bicycle without a chain (or a million other metaphors): nonfunctional and pointless. The Web was created for hyperlinks; seems like a given. However, some organizations worry about sending away traffic to other organizations and groups. So, they want to remove links on their website-- a few links or even all of them.

Creating and managing external links is an important part of building and maintaining any website. Organizations want to maximize their links to corporate partners, other NGOs, and other online resources without losing traffic and driving potential donors and registrants to other websites. Many organizations struggle over how to prepare and manage their external links. However, few organizations devise programs or best practices to help with this process.

The Internet is a web because of how links are put together; to simply ignore linking takes away for the dynamic qualities of this medium and can hinder Search Engine Optimization (SEO) practices.  A website needs to connect to other resources to be part of that connected web of sites that string together the Internet. Ignoring link opportunities or removing them from a website leaves a very flat experience and does little to ensure that visitors stay longer on the website. It also gives the appearance of an organization with few connections to other resources.

Your organization can devise a simple list of best practice or link policy to build and maintain external links and maintain a navigable and well-connected online presence:

Reciprocity: Ensure links to corporate partners, other organizations and NGOs, foundations, or any other resources will feature reciprocal links. Linking improves SEO and helps market the organization to other resources.

Open New Windows: Links to resources not affiliated directly with pertinent content can open a new browser window with the "target="_BLANK". For example, a link to other organizations can open a new window. Be very careful with opening new windows, as it makes for poor accessibility for visitors with impairments.

List Resources: Post resources at the bottom of articles and pages, rather than link with copy. For example, list "Other Resources" at the end of a story or piece of content, then display a small message that the link will open a new window. 

Use Copy Links: When you link with copy, avoid phrases such as "click here" or "read more". Instead, make strategic links, such as "Visit XXXXXX's website". This linked copy will help boost search results for  related to that group or company can improve SEO ratings.
 
Use Logos and Visuals: Linking to corporate and nonprofit partners with their logos and visuals provides a very professional appearance and can be used as leverage to creating meaningful partnerships with other corporate or organization brands. Corporate branding offers a substantial link presence and can be leveraged for strong, reciprocal partnerships.

Make Your Website a Resource Center: Having a links page can provide a resource for anyone interested in hunger-related or global development-related issues and need to locate resources. This links page can be created with tools such as Delicious to combine online bookmarks, syndication feeds, and social networking tools. A good example of this resource can be found on the KnowH2O website.

Watch your Google Analytics or other web log reports and pay attention to your top exit pages. If these pages feature a lot of external links, you might want to revise how many links are on these pages. Check your referrer logs to make sure your partners are driving traffic your way, too.  Don't be afraid to be part of the larger whole; have confidence in your message and show the world that your organization is an important resource in the vast sea of websites.  

Ways of Sharing Video Online

It is pretty common for everyone to want to share videos of what their organization is doing so that their constituents and volunteers can keep actively involved in the efforts.  So today I figured I would give a few options of how to share a video on your site, which is best for you is really based on your needs and specific circumstances.

The first is YouTube.  I think by now almost everyone is at least familiar with what YouTube is and how it works but for those who are not let me explain.  YouTube is an online service that will allow you to create an account which you can upload your video to and share it with the world across the interenet.  The reason I like to use YouTube is that it is very viral, meaning videos spread fast and have the ability to be shared really anywhere else online while not causing you to deal with huge bandwidth costs on your hosting server.

Another nice way to host your videos online is Vimeo. Vimeo offers some features similar to YouTube in that they will host the video and provide an embedd code so that others can show your video on their own site.  While this helps to spread the video Vimeo unfortunately does not have as large of a community as YouTube which can cause it to spread a little slower.

Finally you can host the video yourself.   For this I prefer to convert the video to work with an FLV format, and use the JW FLV Player to run the video.  I like this player for how easy it is to set up and get running on a site.  It is not as simple as YouTube or Vimeo but in the instance where you cannot for whatever reason place the video on a third parties platform this is a great solution.  The basics of setting up th eplayer are to upload the files that control the player, the video and then insert a script into the code of the page you want to display the video.  Realizing this may not be an quick task for those with little to know coding experience they have created a great installation guide with code you can just copy and paste where you need it.

Of course there are more ways to share videos online and play them on your site, these are simply the ones I use the most often. 

Accessibility Now

Beginning in 2006, Target, Inc. has been involved in a class action lawsuit with the National Federation of the Blind (NFB) and other plaintiffs, claiming that Target's website does not meet the minimal standards for web users browsing with screen readers. Specifically, the website does not allow blind customers to purchase or perform functions available to sighted customers. Its layout, lack of tab or cursor browsing, and inconsistent use of alt text tags apparently positioned the site in violation of the Americans Disabled Persons Act and California's Disabled Person Act- where the lawsuit was filed. As a result, Target will be re-working their website (view press release) to make it fully accessible by February 28, 2009. Unfortunately, Target will also be paying out upwards of $6 million to all individuals who submit valid claims, $3,500 per claimant, per incident (the maximum is set at $7,000 for 2 incidents per claimant).

An expensive lesson for Target, but a highly valuable one for web designers.

Target is now the example of why it's important to make your site accessible. The win for NFB was on the basis that the web (i.e., world wide web, web-o-sphere, the internet, etc.) is a "public" place - and in doing so violated an ADA 1990 law that requires "retailers" and other "public places" to accommodate people with disabilities. (Target argued that the law only covered physical spaces, but still lost.) Based on this ruling, all web sites not accommodating screen-readers are theoretically liable, and risk violating this same ADA law.

Initially, it may seem overhauling your website is the next step- but in fact,  small tweaks and good habits can go a long way. Also, free tools are available to help with testing your site.

The World Wide Web Consortium (W3C), the international consortium that develops protocols and guidelines that help develop web standards, has a thorough section on accessibility. In their section on accessibility, there is a summarized version of the Web Content Accessibility Guidelines 2.0 (link) that list 10 quick tips and techniques that serve as good guidance when designing- paraphrased here:

1. Use alt text tag for images and animations.
2. For image maps, use client side and alt text for the hot spots.
3. Provide captioning and transcripts of audio, and descriptions for video.
4. When creating a hyperlink, use text that makes sense when read out of context. For example, avoid "click here."
5. Stick to a consistent structure, and use CSS for layout and style where possible.
6. Summarize graphs and charts with a longdesc attribute.
7. With respect to scripts and plug-ins, provide alternative content in case active features are inaccessible or unsupported.
8. Use the noframes element and meaningful titles.
9. When using tables, make line-by-line reading sensible.
10. Use tools to check your work.

With respect to quick tip #10, W3C links to a list of tools to help you test your site. Three that I found were easy to use are listed below:

1. Functional Accessibility Evaluator, provided by the University of Illinois at Urbana-Champaign [link]
2. HERA 2.0, HERA is a tool to check the accessibility of Web pages according to the specification Web Content Accessibility Guidelines (WCAG 1.0). HERA performs a preliminary set of tests on the page and identifies any automatically detectable errors or checkpoints met, and which checkpoints need further manual verification. [link]
3. TAW (Web Accessibility Test) is a tool for the analysis of Web sites, based on the W3C. It goes a little further than the others listed by providing an overlay on the inserted web address. [link]

To go even further, you can do your own hands on testing by downloading 2 free tools. The first is WebbIE [link], a web browser for the blind and visually-impaired people. The second is the Thunder Screen Reader [link], an award-winning talking software for the blind and visually impaired.

Browsing your site with both these tools activated (and your monitor off) can help you better understand the experience and the problems that may plague your site from a blind perspective.

Useful and relevant links:

• Section 508: www.section508.gov
• W3C Accessibility: www.w3.org/WAI
• NFB Target lawsuit site: www.nfbtargetlawsuit.com

Articles:

• Target Settles Website Accessibility Suit
• Target sued because of bad website
• Target Lawsuit Spotlights Web Access for the Blind

Maybe the right answer is "Coal Miner"

Small talk with a web designer.

Source: Monster-Munch