Design, Development & the User Experience
Andy Brewer.net
Actual Size Business Card
by
Actual Size Creative
Actual Size Business Card
by
Actual Size Creative
When I’m doing an orientation for a new web developer, I like to run down a list of free websites, Firefox extensions and tools that can help them do their job better and faster. Most of our developers are on Windows machines, so the resources below are targeted towards that environment.
An RSS aggregator should be a developer’s first stop on the web each morning. My flavor of choice is Netvibes. From a handful of tabs, I can get headlines from all of the top blogs in the web industry.
How important is an RSS aggregator? Well, monitoring the top web development blogs is like a free education, but better. There are no tests, you learn at your own pace and what you learn about happened today, not months or years ago.
If you’ve tried Netvibes and aren’t a fan, Google has another popular RSS aggregator. If you do like Netvibes, you can watch the same blogs I’m watching by subscribing to my tabs here: Web Development, Web Design, Design Inspiration, Ruby on Rails and Marketing and Project Management.
I like to get all of my developers set up on the company’s Delicious account. When they stumble upon a good resource, they add it to our collective, company knowledge. It’s a great way to promote work related interaction and discussion among employees. Feel free to browse my personal Delicious bookmarks.
Most developers on the market have some knowledge of accessibility, but this website is a great comprehensive resource. It’ll open their eyes to the responsibility of both developers and designers when building websites accessible to all users.
I recommend that all of our developers use Firefox as their default browser, not just for the browser’s rendering abilities, but also for the extremely helpful add-ons that have been created for the web development community. The plugins listed below have been used the most frequently in our company with the greatest benefit.
The Web Developer Toolbar is the first Firefox plugin you should install as a developer. It has everything you’ll need from checking accessibility to measuring the size of elements. A must have!
When you need to replicate a color exactly but don’t want to waste the time loading up Photoshop, this little tool certainly comes in handy. We’ve found that it’s most useful for developers who need to grab color values when they’re writing CSS.
This plugin allows our developers to synch directly into the company’s Delicious account from their browser. Just click the big Delicious button anytime you want to save something and it'll automatically be added to the associated Delicious account.
Another great Firefox extension from Yahoo. This handy plugin allows you to troubleshoot slow loading websites. The reports are based on of Yahoo's rules for high performance web sites. If you're developing web applications or websites with a lot of multimedia, this plugin is a must have.
If your JavaScript or AJAX has gone south on you, Firebug is a must for getting the project back on track. This addon is enormously powerful and is an essential tool for troubleshooting your code.
This plugin allows you to switch from Mozilla's rendering engine to IE's from right within Firefox! Great tool for a quick QA.
Great tool for developers and Project Managers. Just click the "Check Links" button and the links on the page will light up green for valid URIs, red for broken links.
As a Project Manager, I ask all of my developers to send links to me whenever they submit their work. This plugin generates an Email template for you with a link to the webpage already embedded in the message body. It's a simple, but frequently useful little tool.
Fire Shot allows you to take screenshots of the current webpage. I like to use this plugin when we finish a project that is going to be added to our company's portfolio page. It’s much easier than taking a full screen shot and trying to edit out the browser.
If you're just getting into Rails, Instant Rails is probably the easiest way to get up and running. It's a one click installer complete with Ruby, Rails, Mongrel, Apache and MySQL support.
Once you have Instant Rails installed, you'll need an IDE. I've tried a few of the top Rails IDE's, but for me Apatana has been the easiest to use. It comes complete with built in shortcuts (and the ability to add new ones), just like the popular TextMate for Macs. Aptana also comes with a GUI interface for all of the popular Rails generators, which is a great time saver. No more typing "ruby script/generate ...".
If you're not into Rails yet or still maintain some PHP sites, XAMPP is to PHP as Instant Rails is to Ruby on Rails. It's a great one click installer that's always worked well for me. There are a couple things that need to be configured, but there can all be accomplished through the XAMPP start page that you'll see once you're up and running.
Version control is a must even if you're working solo on a project. We’re currently using Tortoise SVN and Subversion to version control our project with good results. Installation and use of Subversion can be a little bit tricky the first time around, but the website has some useful documentation that you may want to take a look at to avoid hours of frustration.
Putty is a free Telnet / SSH Client. If you're into Rails, PuTTY is usually a must have.
A W3C standard and a general best practice is a color contrast ratio of 5:1 (10:1 is ideal). The CCA can help you identify exactly where your background / foreground color combos stand. This tool is especially useful for designers that are accessibility conscious.
You've just built a killer website, but does it degrade gracefully? Nothing will put your site to the test like a good old text based browser. Lynx is probably the most popular text browser and easiest to use.
JAWS is typically the screen reader of choice for users of assistive technology. Trying to use JAWS to navigate your website could help identify some hard to find accessibility issues that may not be uncovered by other means of Accessibility QA. The demo is full featured, but will only run for 20 minutes in a single session. Once your computer is restarted, it will run again for a full 20 minutes.
We QA in Firefox, IE 6, IE 7, Opera and Safari. Since IE6 and IE7 can’t live on the same Windows machine, I’ll have the developer install IE6. In most cases, if the layout works in IE 6, it’ll work in IE 7 as well. As a backup, we have a QA station with IE 7 on it.
While some developers will need additional, specialized tools, getting them setup with the above is a great starting point that I've found success with.
It’s not how many visitors you get; it’s what you do with them. When analyzing the success (or lack thereof) of a website, the conversion ratio should be your first stop.
A site’s conversion ratio is calculated by dividing the number of successes by the total number of attempts at a specified goal. For example, if you own an eCommerce site, your goal is to create customer orders. In this scenario, your conversion ratio would be the number of orders divided by the total number of unique visitors to the site in a given period. If in a month you had 10 orders and 200 unique visitors, you’d have a 5% conversion ratio.
Every website has a goal and therefore a conversion ratio. If you run a blog for example, your goal might be to have people click the link to subscribe to your RSS feed. Again, you would calculate the number of clicks per unique visitor to get your conversion ratio.
So why is the conversion ratio so important? For starters, because driving traffic to your website is typically costly and time consuming. It’s much more expensive to run a pay per click advertising campaign than to increase your conversion ratio. Besides, if you were converting 5% of your users today, wouldn’t you want to try to get this up to 7% before you started your ad campaign?
So how do you improve your conversion ratio? Through user experience and goal driven design. No matter what your goal is, you need to make accomplishing that task as easy and as attractive as possible for your users. Make it exciting or convincing, but make it drop dead simple.
On your next project, before you start development and before you even start your design, identify the key goals of the website that you’re going to measure with your conversion ratio. Capture and track this data, as it will serve as the pulse of your website.
Welcome to my new blog about design, development and user experience on the web. I created AndyBrewer.net for a lot of reasons, but most importantly I hope to create an online resource that will help educate and inspire people working in the web industry.
In any line of work and especially in the web industry, developing your professional self into a comprehensive informational and strategic resource is often a catalyst for success. Success for your clients. Success for your company. Success for your career. And it’s the first step towards the complete, continuous success that we’re all striving for in our projects. While we can never reach this “absolute success”, we can pursue it through the use of proper strategy, project planning and measurable success criteria.
As you read this blog and others like it, I would encourage you to absorb little pieces of as many different topics as you can. Branch out into something new and learn how it impacts what you’re already good at. Expand your knowledge base and become a diverse, highly proficient professional. I hope that my blog will help you in this pursuit and in your pursuit of projects that you can call an absolute success.
My name is Andy Brewer. I'm the founder of an Internet Marketing Agency in Silicon Valley called UpTrending.
This blog is about bringing creativity, innovation and success to your web projects.
Read more about me.
1. Web Design
2. Web Development
3. User Experience
4. Research
5. Online Marketing
6. Announcments
7. Inspiration
8. Business
Subscribe to my blog posts.
# Comments
No comments yet.
Leave a Comment