A2 Codesigner

The UX Web Summit

Nathan — Wed, 21 Apr 2010 21:50:41 +0000

Attending the UX Web Summit today was a great refresher on the topic of User Experience. The web conference hosted by Environments for Humans was the first I have attended and won’t be the last. The conference covered User Experience at every stage of the development process, from the original concept down to the final design. Majority of the techniques covered at the conference are all taught at Washtenaw Community College in the Internet Professional Program (my alma mater). Some new techniques that caught my eye were the use of Page Descriptions Diagrams and Content Strategy, both brought up by Nick Finck of BlueFlavor.com. Two techniques that I will most definitely add to my arsenal of Usability Research.

Overall I enjoyed the conference and the great presenters who all have years experience working for successful companies. Instead of having the users experience in the back of my mind during some stages of development it will be at the front during every stage of the development process.

Is Your Website Accessible?

Nathan — Mon, 14 Dec 2009 18:52:58 +0000

Making your website accessible to all users is not only great for business it is the right thing to do. Disrespecting users with disabilities may not be against the law in the United States (unless your a Federal Government website) but it is illegal in some countries. Your not going to get in any trouble unless you live in one of those countries, but you will lose a lot of potential users as well as business. Developing an accessible website from the beginning only takes a few minutes, on the other hand making an inaccessible website accessible could take a few hours.

Here are some essential accessibility practices all websites should implement:

Simplicity and Clarity

The design should emphasize focus on important areas of the layout as well as provide scannable content that is straight to the point. Distracting elements that could be confusing to users should be always be avoided. Keep your color contrast ratio for text to background around 4.5 : 1, you can always check the hex numbers at Juicy Studios.

Supporting Visual and Non Visual Navigation

Navigation should be clear and efficient for users with visual disabilities as well as for users with out visual disabilities. The design and opportunistic within page links are essential for accessibility.

Proper Structural Markup

Logical document structure assists adaptive technology in interpreting a document and conveying that to the user. Screen readers for blind users strongly benefit from proper document and content markup. Important information should always be properly marked up for meaningful access to all users.

Providing Content and Context

Since many disabled users experience content in a non-visual way, it is important that they have a proper context for interpreting the information as well as access to the content. Summaries, captions, and transcripts for certain media and information provide necessary access to all information pertaining to the website.

Device Independence

Requiring users to have a given input device such as a mouse ignores the fact that not all users will be able to use or even possess all input devices. Make sure you can tab through your website.

Graceful Degradation

The user experience must be maintained even when certain technologies are not used or upgraded on every users browsing device. Adaptive technologies should still function properly.

Allowing User Control

Control over the interface is essential for disabled users; any aspects out of their control could be detrimental to their experience.

Provide Clear Warnings

Let the user know they are trying to access a page that isn’t on your website and guide them back. Default error pages are confusing to users with cognitive issues. Provide a custom 404 page as well as other error pages that will guide the user back to the website.

Useful Accessibility Documents: Sample Accessibility Inspection and Accessibility Inspection Template

Useful Accessibility Blogs

http://www.theaccessibility.com/

http://webaxe.blogspot.com/

CSS3 Overview

Nathan — Sat, 14 Nov 2009 21:15:03 +0000

Even though we all know the sluggish pace of the W3C and the cross browser compatitibility issues, web sites all over are starting to use these new styling properties. Majority of the ones being used are the cool ones and are of course propietary using the -moz for Firefox and -webkit for Safari properties. Luckily the presentation gracefully degrades with inferior browsers. Properties such as rounded corners border-radius:, text-shadow:, border-image:, and box-shadow are becoming very popular.

It will still be a few years before we can all adopt some of the more useful CSS3 properties and functionality such as column: for sturdy multi-column layouts. Clearing floats and positioning issues will be a thing of the past. Media queries which allow you to pass different style sheets based on the browsers screen size. Extremely useful for growing number of mobile internet users as well as users with large monitors at higher resolutions.

There are already some great resources available if you feel like using some CSS3 on your new websites or start practicing for future reference.

CSS3 Introduction. A great article by Design Shack introducing the basics of of CSS3.

CSS3.info. One stop shop for everything about CSS3. A list of all the properties, examples, browser compatibility, and selector test for your browser.

CSS3 Cheat Sheet. PDF (123K) created by Smashing Magazine.

Of course the W3C has their working draft on the CSS3 specs but as usual it’s cryptic and isn’t to useful. So have some fun writing invalid code for the future.

5 Web Sites with Free Design Tools

Nathan — Sat, 31 Oct 2009 21:07:51 +0000

1.Kuler
Kuler is filled with great color schemes. Users can browse through a variety of quality color schemes as well as create their own schemes to save and share with other designers. The only draw back is having to update your flash player all the time. It’s always good practice to see your color schemes on the web before you start designing away in Photoshop due to the mysterious color shift.

2.Search Free Fonts
This is best place to find free fonts on the web. Search Free Fonts has whopping 13,000 you can download. You can even type in the words you are using to see the font in a live preview as well as an alphabetical listing of each font character.

3.Brusheezy
Updated daily this site offers the most popular Photoshop brushes around. Users can upload and download custom brushes as well as vote for the top brushes on the site. They have brushes in a variety of categories such as smoke, grunge, nature, spatter, and much more.

4.Texture Lovers
The name says it all and it’s hard to find a pixel on the site that doesn’t contain some sort of texture on it. Providing a variety of free texture packs and quality design tutorials this site offers a lot more than just quality textures.

5.Stock.xchng
Finding quality royalty free photos on the web is always a hassle and Stock.xchng is the best free photo site I’ve come across. They have a few hundred thousand photos that can be downloaded in a variety of sizes. They won’t always have the images you may be seeking but they are all free and most of them are in good enough shape to used for quality web site designs.

5 Useful Firefox Add ons for up and coming Web Developers

Nathan — Thu, 08 Oct 2009 14:43:19 +0000

I have found all of these add ons very useful for developing web sites and inspecting other developers web sites. I am also assuming that all the new web developers out there already have Firefox, if your using Internet Explorer for anything other than testing, you still have a lot to learn.

1. Firebug

Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. If you only get one of these add ons make it this one.

2. Web Developer

Along with Firebug this tool box has everything you need to inspect and edit code on any website.

3. YSlow

Optimize the performance and download time of your websites with this tool.

4. Accessibility Extension

Support web developers and people with disabilities in accessing and testing web resources for accessibility features.

5. Operator

Operator leverages microformats and other semantic data that are already available on many web pages to provide new ways to interact with web services.

Search the full list of Firefox Add Ons.

About Me

Nathan — Sun, 04 Oct 2009 02:59:10 +0000

Newb to the scene. This is the first website / blog combo that I have designed, developed, and published on my own. My name is Nathan Olmstead and I have created XHTML and CSS templates for multiple websites as well as WordPress CMS for others. I am a freelance Web Developer based in Ann Arbor, Michigan who loves to design and code effective websites.

For the last eight years I have been an assistant kitchen manager at Metzger’s Restaurant as well as a cook for many more. My passion for good food and creative dishes has not diminished, but my new passion for web development has become stronger than ever. It is time for a career change.

I started going to school at Washtenaw Community College for Graphic Design in 2001 and I will graduate December of this year as an Internet Professional. An arsenal of graphic design classes along with some programming classes led to my interest in web development. I love both worlds as well as an enriched user experience.

My spare time (what little I have) consist of watching movies, hanging out with friends, learning more about modern web design, and watching my Wii and PS3 accumulate dust. I also enjoy cooking great food with local ingredients for small crowds as well as consuming it.