Posts Tagged ‘web design’

why adhere to web standards?

Tuesday, August 4th, 2009

Ten reasons to learn and use web standards

If you’re a web developer or designer new to the concept of web standards and are undecided on whether you should spend the time to learn all about them or not, here are some of the most important reasons for doing so.

This is also a useful list reason for when you need to validate why you work to web standards even if other don’t.

1. You look more professional

Other web professionals, prospective employers and clients  can look at your work and know that you are a person who likes to keep up with changes in technology and make sure that your knowledge and skills are always current. It will make you look like a real web professional.

2.You’ll make your clients look good

Use web standards combined with best practices for accessibility and give your clients a chance to talk about how they cater to all people, and how they find it important that everybody can use their services or find information about their products. You will also avoid the bad publicity that can be caused by shutting out visitors like disabled people, Mac users, and mobile phone users. Remember when a user has a good experience on your web site they tell one person if they have a bad experience they’ll tell 10!!!

3. your maximising the number of potential visitors

You don’t know which device visitors will use to access your site. You may think you know, but unless you’re building an Intranet for a company that controls what browsers are installed on all machines then you really have no idea what device or technologies your users are using so by adhering to standards you have more chance of ensuring that your web pages look as you expect.

By using web standards properly you make sure that you have done your part in making your site work with the largest possible number of browsing devices.

4. Faster loading and reduced bandwidth usage

Well-structured markup that separates structure and content from presentation is generally much more compact than table-and-spacer-image-based tag soup. Documents will be smaller and faster for visitors to download. Like it or not, there are still many, many people connecting to the Internet through dialup.

5. Provide the foundation for accessibility

Using web standards does not guarantee that all aspects of your site will be accessible to people with disabilities, but it is a very good start. Make sure your documents are valid, well-structured, and semantic, and you’re well on the way towards having an accessible site.

6. Improve search engine rankings

Well-written content delivered through clean, well-structured, and semantic markup is delicious food for search engine spiders and will help your rankings. This, of course, will lead to increased traffic, which is what most website owners want.

7. Make your markup easier to maintain

Would you rather wade through many kilobytes of multiply nested tables and spacer images or just browse through a clean and well-structured document when you need to update your site?

Removing, inserting or editing presentation-free content is much easier and more efficient than having to make sure you get all the presentational cruft right. Using CSS to control layout also makes it much easier to make site-wide design changes.

8. Future-proof content

There is no way anyone can guarantee with 100% certainty that the documents created and stored electronically today will be readable in a hundred years. Or even fifty years. But if you separate content from presentation and use current web standards, you have done the best you can to ensure that your content can still be read even after you’re gone.

9. Good business sense

Why would any business owner say no to more visitors? A faster site? Improved search engine rankings? Potential good publicity? It doesn’t make sense to do so.

10. It’s the right way to do things

The web standards way is the way we should have built the web from the beginning. And now that we can, why not do something the right way and have a really excellent reason to feel good about yourself.

Identifying your websites target audience

Thursday, July 30th, 2009

If your first answer to “who is your websites target audience” is EVERYONE- then you’ve just fallen into the biggest trap !!!

Because instead of being “everything to everyone” your website will more likely end up being “nothing to anyone”. You may be saying to your self www.yourfavoritewebsite.com (a fictitious web address that you can replace with your personal favourite) has a target audience of everyone and is satisfying the needs of everyone very nicely thank you!! But if you look carefully at these sites you’ll find they actually have websites within websites with each catering to individual target audience groups.

Identifying your target audience is a fundamental aspect of website planning and analysis. Once you have identified your target audience you should be able to identify what they want from your website and then be able to plan a website that fulfill their needs.

rss

When you do your audience analysis you should define at least 3 audience definitions that are clear and precisely.

Defining your target audience will allow you to focus on your most important customers requirements.

Note the qualities that define your target audience:

  • What is their age, gender, location, income, job etc?
  • What is your current relationship with them?
  • Are they experienced with the Internet?
  • What are their online spending habits?
  • What are their needs?
  • Is the buyer the user?
  • Why they are coming to your site?
  • What are they hoping to find?
  • How often are they online?
  • What do they generally use the web for?
  • What is the primary “action” they should take when coming to your site (i.e. purchase, search for information)?
  • What are the key reasons why they will choose your company’s products / services (i.e. cost, service, value)?
  • Are they existing or prospective customers.
  • How they will be accessing your website eg computer or phone.
  • Which browser
  • Family situation
  • Household situation

List of well designed websites

Thursday, July 23rd, 2009

Below are a few simple but well designed sites and Why!!

  • Mozilla.com
  • Iconbuffet.com
  • Boldchat.com
  • Enhancedlabs.com
  • Protolize.org
  • Sumagency.com
  • www.teamviget.com

Mozilla.com

Clear, open, fresh, simple. When you arrive at this site, you’re under no doubt what the site does, or where to start looking for what you want. The design is positive and happy.

mozilla.com screenshot

Iconbuffet.com

The site sells icons, so it lets the icons rule, showing its wares from the first page.

The colours and typography are solid & strong, projecting a trustworthy brand while not getting in the way of the proposition.

iconbuffet.com screenshot

Boldchat.com

Boldchat provide a great live chat service for web sites, which is a very wide market to address.

So the site design is clean, smart, and shiny, using clean copy and smart imagery to communicate the core messages in a compact space.

boldchat.com screenshot

EnhancedLabs.com

Another icon maker, doing bigger, richer icons, so the the site showcases them bigger & richer.

Bold, flattish colour creates a strong first impression and still lets the product stand out.

enhancedlabs.com screenshot

Protolize.org

Tony Yoo’s collection of recommended web resources is a great example of strong graphic elements balancing to make a site that’s bold and easy to use.

Big text, simple nav, high usability, all wrapped in strong colour and finished off with nice graphical touches.

protolize.org screenshot

Sumagency.com

Acres of balanced white space, easy-read text and cute content graphics combining to tell a simple story.

sumagency.com screenshot

I just love the concept with the wall metahpor that this website uses. I also think that the way this site works with all the interaction and movement being done with CSS is very cleaver.

vignet

What Do you think?
When you go to a website that you like do you know why you like it?
Do you even think about why you like it :)

A possible information architecture process:

Wednesday, March 18th, 2009

Collect and organize product requirements.

You should focus on more than the list of desired functions. You need to investigate the stated and implicit factors that the organisation or website owner considers to be most significant in the product’s success.

Collect and organize user needs and expectations.

Either using existing research or by performing an comprehensive user research and persona creation process, you identify what the products’ users want from it and how they expect to use it. You put this information together into a mental model of the user, an understanding of the user’s wants, needs and expectations.

Perform a content audit.

The depth of the audit depends on the final outcome-high-level navigation redesign requires only auditing a sample of content, whereas a CMS migration necessitates a rigorous page-by-page inventory. The audit is the analyzed to define primary content types, which are then laid out in a Content Map.

Create a new information architecture

By coupling the content audit analysis with your understanding of users’ mental models and the product’s business goals. This architecture will define the overarching user experience of the site and will be documented in a diagram specifying every step of the user experience within the section under review.

Prepare the documents that define the foundation of the new information Architecture

Provide detailed navigation specifications indicating the navigation elements required for every page, in order to guide the implementation of the new architecture.

These specifications will be supplemented by wireframe schematics indicating the placement of all navigation elements. You can also provide a style guide that will outline naming conventions for key content areas, URL conventions, and conventions for site-wide way-finding cues.

More resources

http://adaptivepath.com/events/training/complete/files.php

http://www.iainstitute.org/tools/

Website Favicons

Tuesday, October 14th, 2008

A favicon (short for favorites icon) is an icon associated with a particular website or webpage. They are also know as website icon, shortcut icon, url icon, or bookmark icon. You can your favicon and use it with your website (or webpage) by several means, and most web browsers will then use it. Browsers which support favicons typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks. New browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title.

Favicon image types

Most modern browsers will recognize PNG, GIF, and JPG formats for favicons, but Internet Explorer doesn’t so it is best to use the ICO format, which works in all browsers.

How to make a favicon file

I generally use a free online favicon creator site like http://www.faviconprime.com where you can upload a jpg png or gif and have the site create an ico file for you to download and upload to your website.

There is also an ico creator plugin for Photoshop as well as other pieces of software that you can use to create your ico file.

Code for your favicon

Once you have your favicon, you need to add this line of code to the within the head of your HTML document so your favicon can be found:

<link rel=“shortcut icon” href=“favicon.ico” type=“image/x-icon” />

and voila you should have your own nice favicon for your website.

CSS vs Tables

Thursday, October 2nd, 2008

Before I begin I must admit there are many site that I really like that uses tables for layout rather than css but I think this is a reflection on the designers rather than tables therefore below are a few reason why I think website development should use css rather than tables.

  1. Separation of formatting information from content- better for updating and maintaining sites
  2. Faster page loading
  3. Redesigns are more efficient
  4. Easier for teams to maintain (and individuals)
  5. Easier for site development to be team based
  6. Accessibility
  7. Quick website-wide updates
  8. Better for SEO
  9. CSS sites download faster than tables
  10. css sites can be viewed on more devices such as mobile phones so have a greater reach and potential audience

Here are some good articles on the subject of CSS vs Tables

why-a-css-website-layout-will-make-you-money

13-reasons-why-css-is-superior-to-tables-in-website-design/