Archive for the ‘Design’ Category

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 :)

Jaymies Web Essentials

Monday, November 3rd, 2008

This is a list of links our wonderful x student Jaymie Jones from  Triverse Designs . Have a look at some or all of them and leave a comment to let everyone know what you think of them or if you feel there are other sites that should be on “best of bookmark list”.

Frameworks

Django
http://www.djangoproject.com/

CakePHP
http://cakephp.org/

Ruby On Rails

http://www.rubyonrails.org/

Content Management Systems

Drupal
http://drupal.org/

WordPress
http://wordpress.org/

Useful Addons

Jquery
http://www.jquery.com/

Mini Ajax
http://miniajax.com/

Mootools
http://mootools.net/

Prototype

http://www.prototypejs.org/

Thickbox
http://jquery.com/demo/thickbox/

Lightbox 2
http://www.lokeshdhakar.com/projects/lightbox2/

Useful Resources

Smashing Magazine
http://www.smashingmagazine.com/

Sitepoint

http://www.sitepoint.com/

Nettuts
http://nettuts.com/

PSDtuts
http://psdtuts.com/

Vectortuts

http://vectortuts.com/

Texture King
http://textureking.com/

Design Inspiration

Webcreme
http://www.webcreme.com/

Cssbased
http://www.cssbased.com/

Csselite
http://www.csselite.com/

Cssclip
http://www.cssclip.com/

Themeforest
http://themeforest.net/

Vector Art
http://vector-art.blogspot.com/search/label/Brushes?

Creattica Daily
http://daily.creattica.com/

Designers Toolbox

http://www.designerstoolbox.com/

Logopond
http://logopond.com/

Fontshop

http://www.fontshop.com/fonts/

Designers Talk
http://www.designerstalk.com/

Design Reviver
http://designreviver.com/

Logo Design Love
http://www.logodesignlove.com/

Fawnt
http://fawnt.com/

Faveup
http://faveup.com/

Blue Vertigo
http://bluevertigo.com.ar/bluevertigo.htm

Pattern Tap
http://patterntap.com/

960 Grid

http://960.gs/

Twenty Amazing Tutorials
http://nettuts.com/articles/web-roundups/the-twenty-most-earth-shattering-tutorials-on-nettuts/

Vector Stock
http://www.vectorstock.com/royalty-free-vectors/free-vectors

W3C Markup Validation

http://validator.w3.org/

Colours

Colour Lovers
http://www.colourlovers.com/

Krylon
http://www.krylon.com/color/

Colour Schemer
http://www.colorschemer.com/

Must Learn

Adobe Family Applications
Dreamweaver
Flash
Photoshop
Illustrator
InDesign

Design/Layout
Use Grids

Scripting Languages
PHP
CSS (advanced)
XML
Basic Actionscript
Javascript
Ajax
Jquery

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/

Same navigation code on every page –different look

Monday, September 8th, 2008

Most websites highlight the navigation item of the user’s location in the website, to help users orientate themselves. This is a fundamental requirement for basic usability, but can be a pain as you’ll need to tweak the HTML code behind the navigation for each and every page. So is it possible to have the navigation highlighted on every page, without having to tweak the HTML code on each and every page? Of course it is but the answers below require a lot more tweaking than is below if you are using Dreamweaver templates- but that’s for a post next week :)

But what you need to do is assign a class to each navigation item:

<ul>
<li><a href=”#” class=”home”>Home</a></li>
<li><a href=”#” class=”about”>About us</a></li>
<li><a href=”#” class=”contact”>Contact us</a></li>
</ul>

You’ll then need to insert an id into the <body> tag. The id should be representative of where users are in the site and should change when users move to a different site section. When in ‘Home’ it should read <body id=”home”>, in ‘About Us’ it should be <body id=”about”> and in ‘Contact Us’ <body id=”contact”> etc.

Next, you create a new CSS rule:

#home .home, #about .about, #contact .contact
{
css rules go here
}

This creates rules that only takes effect when class=”home” is contained within id=”home”, and when class=”about” is in id=”about” and class=”contact” is in id=”contact”. These situations will only occur when the user is on the appropriate page, seamlessly creating our highlighted navigation item. Pretty cool!

More of this type of thing can be found here.

http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml

beautiful web design book

Monday, September 1st, 2008

Our worlds greatest guest speaker brendon Sinclair is now also our most generous one as well. He has sent us a copy of “the Principles of Beautiful Web Design” by Jason Beaird which will be handy for those of us that are artistically challenged :)

the book has sections on :

  • the design process, from discovery to implementation
  • what makes good design
  • developing pleasing layouts
  • using colour effectively
  • and lots more

let me know if you’d like to have a look

Latest creative web design sites feedback

Wednesday, August 20th, 2008

This creative web design site exhibits an original colour scheme which I mean in the best possible way :) . Just as a note this site looks like it’s targeting Teven as a key word so maybe add it to the title.

I still haven’t updated my creative web design layout but I will be very soon.

More creative web design feedback

Sunday, August 17th, 2008

Margs page titled creative web design margaret is demonstrating lovely colour balance and also creativity in your banner which I thinks has huge potential. The concept of the monitor and it being the focus point is great without any competing elements is a good starting point.

I really like Garry‘s shopping bags but the page overall needs alot more work just like my creative web design page.

Kevs creative web design page is looking nice. Layout is simple but colour scheme is harmonious. Although on some monitors there won’t be enough contrast between the banner text and background colour. Also for the the search engine optimizations exercise it’ll be interesting to see if you have over loaded your key words of kevs creative web design but for the time being when I did a search on these words you came up number 4 so congratulations.