Monthly Archives: July 2015

Review Bad Websites and Learn What not to do

Every day millions of people depend on the internet for information like what’s on your website. Now this’ll blow your mind ─ there are millions and millions of websites out there and thousands of them echo your site.

Given the competition, the trick will be drawing as many readers as possible to your site. If you’re not on the first page of search results, the chances that they won’t see it at all. Then when they do, chances are they will only stay as long as it takes to see if what you have to offer is for them before they’re off to check out another site.

When you’re on that precious first page and your site name gets noticed , it’s imperative that you get and keep their attention at least long enough for them to decide whether you have the information they want, it’s time to hit them hard with your logo. Your Home Page needs to make an unforgettable impact, and a mind-sticking logo is a great tool.

Put your logo (a coast to coast visual (logo bar) demonstrating your site’s message) across the top of every page and then put it on everything with your company name on it. You’ve heard of “branding”? This is the first step, and you’ll be reinforcing it at the top of every webpage, on every handout, and on every letterhead, business card, invoice…

Now that the logo bar is in place, let’s put the rest of it together so that it will get their attention and keep it.

Step One: Identify your readers. For our purposes, let’s say you want to create a site that attracts people with disabilities and their caregivers. Now think of every possible word or word phrase (Key words and Keyword Phrases) that the disabled and their caregivers may use in an internet search. Disabled, handicapped, wheelchair, walker, physical therapy, Easter Seals, and MDA Telethon are a few, and once you get started you’ll be surprised to find out how many you find. These are the words you’ll use as many times as possible on every page of your site.

Step Two: Outline your message. As in, “I want to create a database of links to help sources where a person with a disability or a caregiver can locate the help they need.

Step Three: Break this umbrella topic into smaller more manageable subtopics and then put them in the order you want your readers to see them.

Step Four: Create a navigation bar across the top or down the side of your webpage. It makes it easy for your readers to get around the site and quickly find the information they came for.

It will look something like this:

  • Home Page: Where to get help
  • Federal Government Agencies
  • Local Government Agencies
  • Organizations
  • Chat Room
  • About Us/Contact Us

Step Five: Beginning with your Home Page (where you introduce your topic and outline your site’s message and content), create page for each subject on your Navigation Bar. Next, do an internet search for the links you think will be of help to your readers and paste them onto the appropriate pages. Remember those keywords and keyword phrases? Use them in the navigation bar at the top of each page putting them in each page’s title. Your keyword tells your readers at a glance what information they will find on a particular page. The idea is make it easy for your readers to find the information they came for; they will appreciate this more than you can imagine. Let’s say a person in a wheelchair wants to know where to go to find service organizations in his city, county, or state, or maybe he or his caregiver wants to learn about federal laws designed to make his or her life easier. These folks don’t have time to wade through page after page looking for links to organizations like Suncoast Center for Independent Living or government sites like The Department of Justice to read about the Americans with Disabilities Act. Tell readers right up front what to expect on each page.

Step Six: Then sprinkle at least six of them throughout each and every page of your site.

In short, salting your website with keywords and keyword phrases beginning with the title, straight through the navigation bar and at least six times per webpage will bring web traffic to your door.

Follow these six easy steps to designing your website and attract the readers you want to your site.

Website Design Best Practices Using Title and Descriptions Tags Effectively

It is surprising how little attention is paid to page title tags and meta description tags during a website’s design process. In fact, when pressed on the subject, few website designers, let alone site owners, know too many details about them beyond some very basic concepts. However, both tags are quite important in terms of attracting visitors and increasing the click-through-ratio of organic search. This article defines these terms and reviews why they are a key component of effective website design. It also includes details regarding how to write attractive tags, as well as what to avoid from a design and marketing point of view.

When executing search on any of the major search engines, results are presented with the most relevant websites showing up in descending order (that is the more relevant results show up first). In Google, the contents of each page is presented with a title in large blue font, as well as a short description in smaller black font. In website design jargon, the blue text is the title tag and the black text is the meta description, both of which are found in the site’s html code.  At first sight it looks like both Yahoo! and Bing present search results like Google with the same blue-black font nomenclature. But looks can be deceiving; while they might all look identical, there are some subtle differences to be aware of.

The first major difference is character length.  While these are subject to change at the whim of the search sites, currently Google displays 70 characters for title tags and 150 for meta descriptions. Yahoo! and Bing in turn display 72 and 65 title tags and 161 and 150 meta descriptions respectively. These are important to know because exceeding the limits will result in the search engines cutting the amount of text displayed. And of course if not displayed, the text will be useless in terms of attracting visitors.

The second noticeable difference is which words are bolded in the page title tags. All search engines bold the keywords of a search term. For example, a search for “website design” will result in the bolding of this search query each time it appears in both the title tags and meta descriptions. And Google leaves it at that. Yahoo! on the other hand, in addition to bolding the actual keywords, also uses a geo-coding algorithm to bold the city in which the search is located. So a search completed in Seattle, WA for the term “website design” will result in the city “Seattle” being bolded anywhere it appears in the title tags and meta descriptions. Bing for their part does not bold by geography, but the search engine does bold each instance of a search word even if the words are not together. For example, the search term “website design” will result in the bolding of the words “website” and “design” even if they do not appear side-by-side.

Understanding these subtle differences is important to website design as the poor wording or lengthy tags can dramatically impact what text looks like and how much of the text is visible to anyone conducting a search on the internet. Keep in mind that Google has 64.4% market share of all search (Yahoo! has 17.7% and Bing 11.8%), so it will probably make sense to satisfy this search engine’s requirements before all others.

While title and description tags pull very little weight in terms of search engine optimization, they are relevant from a raw marketing point of view because it is the very first part of a website potential visitors see. Especially first-time visitors will make click or no-click decisions based on what the tags say. They set expectations about what the user will find on a site. In most cases, the search engines do a pretty good job of returning relevant websites for a given search term, however, in some cases this can be ambiguous. For example, the search term “frames” gets 5 million global searches a month on Google and it will be up to the title and description tags to specify whether the site deals with eyeglasses, digital movies or picture frames. Well written tags can quickly clarify this.

It may be helpful to think of title and description tags as a billboard display; an attractive billboard will attract passersby, while an unremarkable one will be quickly forgotten. Furthermore what may be considered a norm in one industry may not be acceptable in another. The next section of this article provides tips on how to write good tags.

The most important rule is to remember that title tags and meta descriptions will be read by humans who will then make a decision whether or not to click on a particular search result. Therefore, they must clearly state what the site is about. It is recommended that the site owner not leave this task up to the website developers. Instead, it should be a joint effort. A developer best understands how to design websites, while the site owner best understands their industry.

A useful technique is to closely study competitor tags of a given keyword. What are they putting in their tags? What are they omitting? Do the tags clearly state what the visitor will find on a site? How can your site do this more effectively? Once this is clearly understood, the site designer and owner can brainstorm ideas that will be noticed and get the most clicks.

A particular point to consider is whether or not to include the website URL in the tag. Generally, the rule to follow is that the more well-known a brand is, the less need there is to include the URL in the tag. For example, everybody knows Toyota Motors, but how many people have ever heard of Tata Motors?

As far as pitfalls and things to avoid, thankfully many website designers today know about these. First and foremost, do not clutter the tags up with keywords in hopes of obtaining better search rankings. This worked in the pre-Google era of the 1990’s. Always remember to write them for a human and never for a machine.

Another, perhaps less known tip, is not to change the tags once they are set. Title tags and meta descriptions should only be written once. This is because the search engines will be lead to believe that some sort of spamming activity is going on and this in turn will result in an immediate drop in rankings. Even well ranking sites that have old URL will drop if they start changing the headers and description tags each time the site is crawled. This point is a bit counter-intuitive since in other aspects of successful website marketing, such as Adwords, experimentation is not only welcomed, but encouraged by the search engines.

Designing Accessible Websites

For more than 40,000,000 in the US the vast majority of Websites are either completely or partially inaccessible.

The idea of a Website that excludes Latinos or African Americans is unthinkable, yet Americans with disabilities are constantly faced with Websites that don’t take their needs into account. Fortunately, many of the world’s most popular Websites, such as Wikipedia, YouTube, Google, and Yahoo! are working hard to become accessible to disabled users, but there are still many more sites out there that have a long way to go.

Developers seem to think that they can’t use the new cool technologies simply because they’re not accessible as opposed to looking at these new technologies and making them accessible. So it’s as if people don’t see an accessible interface as an opportunity to make a better interface, but rather as something that is preventing you from doing what you really want to do.

In fact, however, accessibility isn’t at all at odds with attractiveness or performance. An accessible Website is a well designed Website and one that far more people than the disabled can enjoy. Websites designed with accessibility in mind also work better with dial up connections and hand held devices such as iPhones and BlackBerries. As an added bonus, they’re also usually better indexed by search engines such as Google.

It’s noteworthy that there may even be negative consequences of ignoring accessibility. Target recently paid out more than $6,000,000 as part of a class action lawsuit filed by the National Federation for the Blind. The retailer’s Website could not be used by blind users, and the court ruled that this violated the Americans with Disabilities Act.

However, no one should be strong armed into designing an accessible Website out of fear of being sued. The lesson to be taken from the lawsuit is that Target lost a lot more than just $6,000,000 million: It also lost millions of potential customers, not to mention the respect of a lot of people, disabled and able bodied alike.

The right attitude is to approach Web design, particularly with the goal of accessibility, with a passion for originality and an open mind. Sometimes setting boundaries can result in you becoming more innovative.
As a designer, the constraints that you are under are key. Without constraints, it is very easy to get lost. You need to use the constraints to your advantage.

The website BBC Ouch! Is an example of a successful, attractive, website that works within the restrictions of accessibility. The website, which centers around everyday disability issues, is an example of the sort of strong Web designs that everyone, especially the disabled, can appreciate.

At first glance, the website looks no different from most others. It’s visually appealing and is rich with media such as podcasts and images; However, the website also offers high contrast and text only versions that are unobtrusive but easy to locate locations. These sorts of accessibility friendly options are prevalent throughout the website.

The website provides a thoughtful service to blind visitors that many Websites would neglect to include. Clearly, if you take the website as an example, accessibility and attractive functionality are not mutually exclusive.

The more unfortunate thing is that inaccessible websites are not designed that way on purpose. It’s the result of a lack of awareness and knowledge. People are just ignorant of just how easy it is to make it work for everybody. All it takes is a lack of awareness and thought and things can go horribly wrong.

In an effort to keep things from going astray, it’s important to know who you should you are designing for. You need to consider people with vision problems, including those who have weak eyesight, color blindness, or complete blindness. The blind may use hardware that converts online text to Braille or screen readers, however, web users who are farsighted can simply use screen magnification software to enlarge onscreen text. Enlarged text, particularly links, is also helpful for people who have a stroke, MS, Parkinson’s disease, or cerebral palsy, since they cannot use a mouse with precision. Some disabled users may not be able to use a mouse at all. Instead they us speech recognition software, and single switch access devices.

Another major group to keep in mind is the hard of hearing, who relies on written transcripts, sign language, and closed captioning to fully enjoy video and audio. It’s also important to remember that people who are susceptible to seizures may not be able to view flashing screens, and that those with dyscalculia and dyslexia may have difficulty reading the content that is provided.

The most helpful additions you can make to your website are text only and high contrast versions, as well as full transcripts of any audio and other multimedia that appears. Although it’s helpful to understand the different kinds of disabilities your Web page may encounter, don’t think about designing for accessibility as a checklist of types of disabilities.

It’s way more than that. One of the most important things to remember is that making a website properly accessible is that it makes it easier for everyone to use.

The reason for this is that accessible websites operate on the principals of proper Web design. It’s all about flexibility and structure. If your site works without JavaScript or a style sheet, while providing a proper structure, then you have taken a great step towards a good product.

This means that your website needs to use (X)HTML that is semantically correct for content, structure, and CSS for your layout. The (X)HTML content should be grouped in a coherent fashion and should be structured logically. This is especially important for people who use screen readers, which read page text in order and get confused by bad (X)HTML such as designs that are table based. Screen readers also can’t read JavaScript or Flash, so you should make sure that all of your text and links are accessible by means of good, old fashioned (X)HTML.

It is important that if you have something that refreshes a page, have a real link that points to a real document, and not just some random Flash or JavaScript movie file.

There is another basic design that tends to get lost in the fray is the use of alternative tags for graphics and images. You should always incorporate context that is appropriate for your images and the text that surrounds them. That doesn’t mean that you should include some vague description that slows down your narration, but it’s good practice to make sure your text and pictures work in conjunction with each other.

Similarly, never try to compensate for weak content with superfluous visual elements. There’s no substitute for well written, clear content. Even without good writing abilities, there’s no excuse for errors in spelling. Spell checking is not only a good idea in general, but it’s also important to remember that typos can mess up screen readers, which obfuscates your meaning even more.

Perhaps the most important design tool to remember when designing for accessibility is progressive enhancement. When you take away the CSS, the JavaScript, the high level layers, and the high level interaction it should still work. It’s not really a hard thing to do, but it requires thinking about it from the beginning and building it in that layered form.

It’s not all that hard. These design practices are not difficult and they won’t hurt you. It’ll actually make your life easier. You just have to have an open mind about it.

Mobile Responsive Web Design

Mobile Web Design: What it is and What it Means
By 2014, mobile Internet usage is predicted to overtake desktop Internet usage. For those not already on board with mobile web design, the train is now officially leaving the station. However, mobile design is not merely a matter of making objects smaller. Instead, mobile design calls for an entirely different philosophy and perspective. Some of these differences are obvious and some less so.

“Flavors” of Mobile Web Design
Two primary techniques comprise mobile web design in 2013, each with advantages and disadvantages. These techniques are discussed in detail below:

Responsive Web Design
A responsive design detects the user’s device type (desktop, mobile, tablet) and adjusts layout properties accordingly. Among the advantages of responsive web design is that only a single URL is necessary. Similarly, the look and feel of the site is the same regardless of device, an important aspect of building brand loyalty and recognition. On the other hand, a responsive web design is rarely optimized for mobile users. Because the HTML is the same for both the desktop and mobile instances of the site, the content is essentially the same as well. However, mobile users often have different expectations and needs. Slower performance and navigation are also potential drawbacks of responsive web design.

Understand the End User
It sounds like an oversimplification to say that mobile web users are different from desktop web users, but this one fact is probably the most important takeaway when designing for mobile platforms. Mobile users are predominantly goal-oriented. They’re looking for a restaurant, checking on a reservation, seeing what movies are playing, etc. Mobile users are “intentional”: Their browsing typically is purposeful. Good designers understand this and ensure that all design elements contribute to the site’s purpose.

Prioritize Functionality
Above all, a mobile site has to work. Slow response, broken links, a wonky interface and bugs will all deep-six the best intentions of any mobile developer. Designers have one chance to capture a visitor’s attention. On the desktop, a stunning layout and aesthetics alone can sometimes do the trick. For mobile web purposes, however, the site must be fast, easy and perform exactly as expected, every time.

Balancing Performance with Design
Despite the advances in Smartphone hardware, they are still relative lightweights compared to the most powerful desktop computers. Web designers have to be aware of the limitations of handheld and tablet devices. Too much code, too many bells and whistles and the mobile site will slog to a halt. Screen size is probably the most obvious limitation. The content present on a desktop site will never fit on a mobile site. For that reason, traditional menus and options simply don’t work. Designers have to be creative and selective. An example of this might be an air travel booking website. Whereas the desktop site will be a virtual library of information, pictures, calendars, etc., the mobile site might consist merely of flight schedules at the nearest airport. After all, most mobile users are checking on a flight with their smartphones, not booking one or investigating the tourist hotspots at their destination.

Because mobile users are on the move, bandwidth changes from one location to the next. Good mobile web design copes well with periods of weak data signal by not over-relying on dynamic content.

Concentrate on Branding
At the end of the day, branding and content are the cornerstones of any company. Mobile web design cannot neglect the identity of its parent organization. Mobile users frequently navigate directly to a specific site rather than searching, so name recognition is essential. Even if the brand already has strong market penetration, ensuring a quality experience for all mobile users will help maintain and build brand loyalty.

Will Desktops Be Left Behind?
The short answer is no. The more complicated answer is that no one can be sure of the evolution of web design 5 or 10 years from now. It’s possible that the best practices of mobile design will subsume desktop design, bringing simpler and more efficient interfaces to users everywhere. However, it’s hard to imagine the need for information-dense, substance-over-style design philosophies becoming obsolete.