AJ McClary » Web Design

WHY don’t people get it? It IS all about design!

A.J. McClary — Tue, 25 Oct 2011 15:30:43 +0000

Time and time again, I ask myself “why don’t people get it?”

It really is all about design after all. So why doesn’t our industry reflect that. It has become abundantly clear, design rules. Design has become the determining factor on whether someone chooses to use a system or not. We all know that that bad design is the number one factor for usability, user acceptance, and overall adoption.

I know this firsthand: users are willing to except slow performance and system architecture issues because much of this they cannot see. While performance can be devastating to the over arching user experience of a website, the data indicates that if other factors are favorable, users are more than willing to wait-especially when there is a gratuitous payoff.

I’m not saying performance is not a usability issue-and I’m certainly not saying it’s not a huge user experience culprit-but system architects and engineers have a tendency to prioritize architectural issues over design issues.

I certainly believe we all have a place in system development. What I will not accept, however, is the omission of a great design feature that greatly improves the user experience, because the feature is not congruent with the established architecture. It’s almost 2012 people, we can do just about anything we put our mind to.

It’s time to begin to prioritize design with equal attention to architecture and engineering. The truth is we all have a place in the design of the system-but I know for a fact, and I know like I know like I know that: design rules nowadays.

Many people may argue that design is already prioritized in most development projects. If this is true, why is it that user experience designers are not the highest paid employees at companies-or at least the highest-paid contractors on development projects? In my experience user experience designers usually make less than six figures. Even worse, why is it the visual designers and web designers often make below $50K a year—when their responsible for an integral part of the customer experience? System architects, DBAs, and high-level system engineers can make significantly more than that. I’ve seen architects that make a quarter of $1 million a year and sometimes more.

Can anyone give me a definitive answer on why designers don’t make as much as engineers? I would really like to know. In the fashion industry, for example, designers are the top paid employees. Just look at the greats like Tom Ford, Ralph Lauren, Tommy Hilfiger, and Versace. What can we do in the software industry to be more design progressive?

How to Make Your Company Look Fabulous in 2009

A.J. McClary — Tue, 24 Feb 2009 01:33:04 +0000

When building a successful empire, branding is everything. So many businesses are brilliant at network marketing, talking the talk, walking the walk, and making sales. These qualities are good-and they work-but many companies don’t realize the huge mistakes that make them look inferior. Here are a few tips that will make any business look huge:

Hire a copywriter. Forget the grammar and spelling mistakes, I’m talking about something much deeper. How is your copy written? Are you attracting the right kind of customer with it? Do you sound like an industry leader or do you sound like an idiot? Good copy is extremely rare. Take advantage of this.
Hire a photographer. Does your website contain mug shots of your executives and employees? Nothing says amateur like a point-and-shoot camera. Invest in a photo studio that tailors to your needs, a photographer that brings out the best out of you, and a stylist that makes you look fantastic. This applies to men as well as women-you should be wearing some sort of makeup in your photos.
Hire a talented web designer. Having an ugly website is one of the biggest turn offs for anybody. Invest in a collection of high quality stock art and consistently use it within your website and the rest of your marketing materials. Remember, websites that are entirely done in Flash are rarely usable and look very template-like.
Screw the “About Us” page and the “Services” page. Replace it with ultra-relevant content tailored to industry researched keywords and phrases. Include biographies, white papers, resources, tools, tips, and tricks. Make your website worth going to. Include case studies, a list of your clients, testimonials, and the advantages/disadvantages of utilizing your company’s services vs. your competition. Make this your sales engine.
Turn your “Contact” page into a lead module. Throughout your website, you should have opportunities to collect information about a possible lead. You may want to use a CRM tool such as Salesforce to capture leads and integrate them into your sales lifecycle. Be sure to also collect behind-the-scenes information, like IP address, country, city, state, referring website, search terms, etc. The point here is to look smart in front of your customers. Know more than they think you know about them.

You should do an evaluation of some kind once per year to investigate how other people perceive you. It may be a good idea to have a third party assist with this so you can ensure transparency. Remember, perception is everything.

Configuring your website to work with JAWS

A.J. McClary — Tue, 17 Feb 2009 01:32:07 +0000

These are the Top 10 tips to making your website accessible to the blind or visually impaired using the world’s most popular screen reader.

Is your website optimized for screen readers? Have you tested it lately? Many webmasters don’t take into consideration design methods that allow visitors with disabilities to easily use their website.

By refraining to follow industry guidelines, they’re completely cutting off a significant portion of the population from accessing their online presence. While there are many levels of accessibility webmasters should follow, here are my top ten tips to making your website easier to use to blind and low-vision visitors:

Design your website completely in Cascading Style Sheets (CSS). Don’t simply use CSS to adjust colors, instead, use it as your design mechanism. Do not rely on the HTML code for design. Screen readers usually ignore CSS and read the HTML that is written on the page.
Don’t use color as your only method to describe information. If you must provide emphases to your content, use the STRONG or EM tag, and style them appropriately in CSS.
Include an ALT attribute within every IMG tag. This will read the description of the image instead of skipping it. This is also very helpful for Search Engine Optimization (SEO). You can also use the LONGDESC attribute if the description is longer than one sentence. While we’re on this topic, avoid using Image Maps if at all possible. They can be a nightmare.
Properly layout HTML tables so that screen readers understand the content the way it is intended to be understood. Begin by identifying the table using the CAPTION tag for the table’s title. You can use CSS to hide this caption if necessary.
Add the SUMMARY attribute to the TABLE tag and thoroughly describe what the table is. While we’re on the topic of tables, try to keep them as simple as possible. The more complex they are, the more difficult it is for blind people to understand them. Also, refrain for using tables to layout a webpage. Use the DIV tag and CSS properties to design page layouts instead.
Use the TH tag for all table headers and the TD tag for all table columns. Ensure the TH tag has an ID attribute that corresponds with the TD tag’s HEADER attribute.
To make things easier to understand, use the THEAD, TBODY, and TFOOT to group rows of a table. You can also use COL and COLGROUP to group columns of a table.
Make sure that you use a text-equivalent for anything that is not readable by a screen reader. This includes the NOSCRIPT tag for browsers that are not compatible with JavaScript, Applets, or Flash.
Ensure that all form elements are properly labeled with a LABEL tag and a corresponding FOR attribute for each form element’s ID attribute.
Use H1 – H6 tags to organize a hierarchy for your content. Properly label all paragraphs with P tags, and ensure every page has detailed TITLE and META tags. This is also an SEO must.

Here are a few bonus tips:

Allow navigation skipping so that blind users can skip straight to the content. You can do this by creating a bookmark with an anchor tag where the content begins and linking to that bookmark. If you do not want regular users to see the navigation skipping capability, simply surround it by a DIV tag, style it “position: relative;” and align it to -1000px to the left.
Use the TITLE attribute wherever possible, but remember that JAWS does not read the TITLE attribute by default. It has to be manually configured by holding INSERT-V, and adjusting the clickable elements setting.
Avoid using FRAMES and IFRAMES if at all possible.
If you do not have a copy of JAWS, try using a text based browser to navigate around. Such browsers include: Lynx, WebFormatter, and IBM Home Page Reader.
Another workaround is to use the Mozilla Firefox screen reader emulator: Fangs. This extension creates a textual representation of a web page similar to how the page would be read by a modern screen reader.
If you’re testing with JAWS, make sure you’re using the proper keyboard shortcuts. The number one mistake testers make is using the TAB key to navigate around a website. JAWS utilizes hundreds of possible key combinations to browse the web, so the TAB key is not always your friend.

While this article is intended for website owners using JAWS, the content is always relevant for users with Window-Eyes, EMACS Speak, Hal, MAGic, SuperNova, and ZoomText.

Building a PPC Friendly Website

A.J. McClary — Thu, 18 Dec 2008 22:55:51 +0000

Building a website for PPC is a much different process than building a search engine optimized website. Although a profitable website should be balanced to function well for PPC and SEO, since with PPC you’re spending your hard earned money on traffic, you need to make sure that your web design is achieving results.

Since you’re paying for your traffic, you can’t afford to have any distraction on your website whatsoever. I like to only use PPC for websites that are extremely targeted and in a niche market-otherwise you’re probably wasting your money. Here are a few steps you need to take to help optimize a website for PPC:

Remove advertising from your website. Nothing makes a customer want to leave more than visiting a website full of ads. Advertising also encourages your users to click on your ads and leave your website.
Case studies show that single column websites perform better for PPC websites. Perhaps you’ve seen these “squeeze” pages before, where all of the content on a website is incorporated into one large page? Believe it or not, this simplistic design performs very well and is one of the most effective ways to make a sale.
Make your sales pitch extremely targeted and do not sway from the point you’re trying to make.
Include a call to action and repeat that call to action throughout the page. This means if your call to action is to have the user sign up for your newsletter, mention it several times throughout your copy.
Most of the time, your headline is the only thing your visitor reads before they exit your website. Make sure that your headline matches exactly what existed in your advertisement.
Finally you need to use multivariate testing. This means that you test several different versions of a web page and see which one performs better. You should test the copy of the following items of your web page:
- Headline
- Calls to Action
- Caption Copy
- Graphical Elements
- Body Copy

I cannot stress enough about relevancy and how important it is to the success of your online business. Here is my formula for success and it has worked for so many. Just remember the following:

Success = The Search Query + The Advertisement +
The Headline of Website + The Copy

All of the above should match up completely in relevancy. If a person types in “how to design a website” into Google, they should see an advertisement that reads “how to design a website” and then the web page he clicks should read somewhere in the headline “how to design a website”. The copy of the web page should contain everything about your “how to design a website” product. This is where most people run into problems with PPC advertising. The secret is to keep everything as relevant as possible.

Section 508 Checklist

A.J. McClary — Thu, 19 Jun 2008 12:33:02 +0000

The following checklist covers all aspects of Section 508. Use this as a guide to ensure your application is in compliance.

Multimedia

Designing content accessible to those with audio or visual disabilities

For all pages that contain audio or video:

o Does it address auditory issues for those with hearing disabilities?

¨ If not, create a detailed transcript describing the presentation.

o Does it address visual issues for those with visual disabilities?

¨ If not, create voiceovers for the presentation.

Color

Designing content accessible to the color blind

For all pages that use color to emphasize important text:

o Are hyperlinks styled with a significantly different color than regular text?

¨ If not, change the text color to show a strong contrast between hyperlinks and regular content.

o Is color used to describe numbers?

¨ If so, use symbols or labels to clearly distinguish the characteristic of the number.

o Are you using color to signify a special meaning? For example, using red to denote a required field.

¨ If so, clearly describe what the meaning. If a field is required, use an asterisk “*” and describe at the top the meaning of the symbol.

Accessibility without Style Sheets

Designing content that is readable without a style sheet

For all pages that use a style sheet:

o Is all content readable when the style sheet is removed?

¨ If not, rewrite the HTML code using standards compliant techniques so that all of the information renders correctly.

o Does your page use CSS for positioning?

¨ Consider using relative positioning only. Utilize headers, paragraphs, lists, and tables to ensure that the content is readable if a style sheet were not present, rather than using frequent

and tags that are confusing if a style sheet isn’t available.

o Does your page use CSS to describe something?

¨ CSS, by itself anyways, should never be used to describe the importance of content. If the style sheet were to be removed, the user should be able to distinguish the importance of what was being styled. To emphasize content with CSS, consider using or tags to describe the information and then style those tags in CSS.

Image Maps

Designing content that describes the geometric shapes within an image map

For all pages that utilize image maps:

o Does the page use server-side image maps?

¨ If so, convert your server-side image maps to client-side image maps.

o Does the tag contain an ALT attribute?

¨ If not, describe the appearance of the image map in the ALT attribute.

o Does the tag contain an ALT attribute?

¨ If not, describe the hyperlink of the geometric shape in the ALT attribute.

o Does the page include an alternative text link for those who cannot handle image maps?

¨ If not, create a counterpart for every hyperlink within the image map.

Tables

Designing content that describes header and data cells for tables

For all pages that utilize tables:

o Does your table contain actual data?

¨ If not, consider moving the content into a

rather than using it as a layout mechanism.
o Does your table utilize column headers to describe the data?
¨ If not, change the cells that describe data from tags to tags. Use ID and HEADER attributes to associate the headers with content.
o Does your table utilize row headers to describe data
¨ If not, use and tags to show a relationship with the content. While you cannot use the tag as a row header, you can use ID and HEADER attributes to describe the relationship within the table.
o Does your table have two or more logical levels of row or column headers?
¨ If so, use ID, SCOPE, and HEADER attributes to describe the data in each column and row. Also, utilize , , , and tags to better describe and format the content.
Frames
Designing content that properly uses frames
For all pages that utilize frames:
o Does your page clearly define the purpose of each frame and are frames even necessary?
¨ If not, either (1) remove frames entirely because most assistive technologies do not support frames, or if absolutely necessary (2) add text to the body of each frame that clearly identifies its purpose.
o Do the and tags include a TITLE attribute?
¨ If not, detail what type of content is included within each frame.
o Do the hyperlinks within each frame properly target the correct frame?
¨ If not, be sure to add the TARGET attribute within every hyperlink that isn’t intended to open in the current frame.
o Is your page available in a format that doesn’t require frames?
¨ If not, give the user the option to break out of frames and include (within the