Web Design Training Blog

I have just deleted 284 spams which some sad spammer sent to this blog hoping they might get some benefit from it. No way. But I have had to disable comments because I do not have time to waste deleting spam.

Spam is the scourge of the Internet. It is criminal activity undertaken by people who dont care about anyhing but their own useless activities.

Spamming makes very little money for the people who engage in it. It costs legitimate businesses huge amounts of money.

It is time to clean up the Internet and start kicking spammers off the Internet

Many of these spams originate in countries that are not taking the Internet seriously and are making no efforts to police what is happening in their own back yard. These countries ought to have their Internet connections turn off until they start doing something about the problems their users are causing to the rest of the world.

Sadly no one will be able to comment on my outburst but hey you can blame the spammers for that.

Today I got the Firefox SEO facility - and wow - its great !

Firefox is a browser - for me, it’s my default browser. They have launched a set of search engine optimisation tools that are incredibly useful. You can get them too by going to the FireFox SEO page. Once added to your FireFox browser, this tool puts a load of really useful data into each search result. You can, for example, check the page rank for any listed website, find out the age of the site (quite an important factor) and find out how many links there are to that site in several of the most important search engines. I am so glad I found this tool.

What is an RSS Feed?

Check out the Wikipedia definition

See the article on RSS in WebReference

RSS stands for REally Simple Syndication - very basicly its a way of distributing news (broadly defined).

It enables content to be shared - principally among web sites. Most fo the major broadcasting companies (e.g. BBC, CNN) provide news feeds to web sites around the world.

This blog article discusses how RSS feeds can be introduced into web sites. A future article dicusses how web authors can create their own RSS feeds which can then be piped to other web sites.

Combining feeds together (from various sources) is called “aggregation” and the mechanisms for doing this are referred to as “RSS Aggregators”.

As the above quoted article in WebReference says, “RSS democratizes news distribution by making everyone a potential news provider.”

Bear in mind that “news” in this context does not necessarily refer to the stuff that newspapers turn out - it can be any form of written content, about anything.

There is an example of news feeds on the BBC News web site

As this article explains, news feeds enable someone to see when websites have added new content. It is possible therefore to receive information without having to go to a web site and read it.

Incoming news requires a “news reader”. The newsreader software shows the latest headlines and articles. So if you have a reader and what to get articles about a specific subject, you can subscribe to that subject (e.g. from the BBC feeds).

Web site authors can put news feeds on to their web sites. Usually this is free because publishers want people to add their feeds.

Although the idea of the second generation www has been around for some years (probably since 2004), it is still a very active part of the community that works on the web.

Web 2.0 represents a major trend on the web towards Interactive content. One of the more authoritative sources is O’Reilly’s pages. To give you an idea of the difference between the traditional www and the concept of web 2.0, here is a quote from that site

This article is an attempt to clarify just what we mean by Web 2.0.

“In our initial brainstorming, we formulated our sense of Web 2.0 by example:

What we see here is an emphasis on content rich web sites, and user contribution to web content.

Another listing gives a more detailed picture of what is considered to be Web 2.0 about a web site

* Uses python?
* Is in public beta?
* Uses inline AJAX?
* Is Shadows-aware?
* Uses the prefix “meta” or “micro”?
* Uses Cascading Style Sheets?
* Rocks out to the dance noise of Chinese Forehead ?
* Mentions startup ?
* Refers to mash-ups ?
* Mentions Less is More ?
* Has favicon ?
* Appears to be web 3.0 ?
* Attempts to be XHTML Strict ?
* Uses Google Maps API?
* Uses tags ?
* Has a Blogline blogroll ?
* Refers to the Web 2.0 Validator’s ruleset ?
* Mentions an “architecture of participation”?
* Appears to use AJAX ?
* Makes reference to Technorati ?
* Appears to be built using Ruby on Rails ?
* Refers to VCs ?
* Refers to Flickr ?
* Links Slashdot and Digg ?
* Mentions Ruby?
* Mentions The Long Tail ?
* Mentions Nitro ?
* Possibly contains bytes ?
* Appears to use MonoRail ?
* Refers to podcasting ?
* Creative Commons license ?
* Has prototype.js ?
* Mentions Ruby ?
* Uses microformats ?
* Actually mentions Web 2.0 ?
* Use Catalyst ?
* Refers to web2.0validator ?
* Uses Semantic Markup?
* Mentions RDF and the Semantic Web?
* Refers to Rocketboom ?
* Refers to del.icio.us ?
* References Firefox?
* Validates as XHTML 1.1 ?
* References isometric.sixsided.org?
* Appears to over-punctuate ?
* Mentions 30 Second Rule and Web 2.0 ?
* Uses the “blink” tag?
* Appears to have Adsense ?

Source: Web 2.0 validator

This is an eclectic list where some items are vastly more important than others.
According to the authors of the Web 2.0 site, the definition of web two is made by the people who use it and it changes on a daily basis. Not unlike the original www!

What is important about this is the focus interactivity between the web page and the user and the pre-eminence of dynamic content. Content is developed collaboratively. Information is contributed by a wide area of users and organised by labelling topic areas with tags. Tagging allows users to find the material they are looking for by use of what are, in essence, keywords. Tags also allow content to be associated with authors.

The format of contributions varies considerably, from text blocks through to images, and can include blogs, web sites and music.

Because the www is (some would say) a library of information, a variety of referencing systems (web sites) have grown up to allow users to share their bookmarks (favorites) with others. A primary web 2 example of this is del.icio.us. This has achieved a considerable reputation and is seen as setting the standard for “social bookmarking”.

As people explore the web they can mark their web addresses and share them through the medium of the social bookmarking site. An early example that I used was Blackflip. As I surfed the web and bookmarked the web sites I wanted to go back to, I could upload my web addresses to this site and store and organise them there. I could then access my (large) collection of web sites via any computer linked to the Internet.

Another thing to do with web 2 I am coming to terms with is AJAX. Its a sort of programming language for developing interactive web applications. It enables web designers to make web pages that can exchange data so the the user can make changes to the content of a web page without the page having to be reloaded each time.

Whilst the term “ajax” is thought to have been coined in 2005, there are numerous precoursers, including the “Iframe”, which appeared as far as back at 1996.

AJAX works by generating HTML content within the browser, thus reducing the need to download large amounts of data. Its advantage is the ability to allow users to interact with and contribute to the page. An AJAX driven web site reacts faster to input by the user because some of the processing is done on the users computer. In traditional web pages, input from the user needs to be sent back to the web server for processing before being reloaded back into the users machine. AJAX is thus able to speed up this process and give the user a richer experience.

There are web sites that allow users to create their own content - they do this via the browser window, clicking on options and choosing what they want to display on their site.  I made up one in a few minutes and called it Webby’s Kitchen.

RSS (news) feeds

RSS news syndications News feed have been around a long time but the technology is maturing now and they are everywhere. News is distributed to web sites via RSS or ATOM. These technologies syndicate news - regularly distributed textual content.

This is dejavu for me because one of my first serious jobs was as a reporter for REUTERS in Fleet Street (London) where I was employed to feed data into the world’s first economic data systems (long before the invention of the personal computer).

REUTERS became a world leader in the global dissemination of news and market intelligence.

The process of sending information out to web sites is called “syndication” and one of the tools that is used to do this is a “news reader” (sometimes called an “aggregator”). I have been putting news feeds on to web sites for a long time. I have never actually set one up though - but hey! Being a web designer I hope to learn something new every day.

News can be drawn from a variety of sources and fed into a web page. In some respects news feeders are like book marks - they provide headlines which are linked to articles.

Somewhere in the region of 80% of all web sites that are veiwed are found through search engines. As a trainer I often ask people to look at a web site and I give them the full web address. I have watched them type the full web address into the search engine box and get to the web site that way, rather than typing it into the address bar of their browser.

Using search engines has become a basic procedure for all users of the www. Search engine tool bars are now widely incorporated into web browsers.

In my experience, most businesses need to be found in search engines. For some businesses, being found in results is mission critical to their business. Some of my clients trade on the Internet and only on the Internet. If they do not get traffic on to their web sites, they do not get business.

Read postings to Google’s user forums if you want to see heart rending pleas from online traders whose sites have dropped out of the top ten.

BTW, I should have said “search engines and directories”, although the majority of users wouldn’t know the difference between them.

Bear in mind that there are many thousands of ’search engines’ on the Internet. But … 90% of all searches are done in under 10% of search engines.

The most highly used seach engine is Google. It carries much more usage than MSN or Yahoo. For many webmasters, getting found on the WWW is about getting found in Google.

A whole industry as grown up around search engines. There are companies who make a living from search engine optimisation of web sites - and that is ALL they do. Many web designers and trainers (like me) include search engine configuration in our work. When I build a web site I build it to be found in search engines. It is not an optional extra. It is not an add on you pay extra for!! It is a standard part of the job.

One of the world’s key web sites about search engines is Search Engine Watch

This website also has a blog.

In the UK it is now a legal requirement to make web sites accessible to people with disabilities, particularly those with visual visual impairment and those who are blind.

A useful starting point and reference for this aspect of web design would be the W3C page on “Evaluating web sites for Accessibility“.

Some very basic techniques for ensuring that web pages meet with the accessibility standards would include:

• Ensuring that images have alt statements
• Fonts should have a relative rather than absolute size measure. This allows them to be increased in size on the screen using the browsers increase text size capabilities.
• When expressing the size of fonts in style sheets do not use pixels (an absolute measure). The measure that I use is “ems” which is fully scalable. Find out more about ems. Definition of ems
• Ensure that there is sufficient contrast between text and its background. Find out more about colour contrast.
• You can check your web pages using this accessibility checker.

Another aspect of accessibility is the way that the web page functions for people who are unable to use a mouse. It should be possible to use the tab key to reach and operate the links and form controls on a page. The links should incidate what they lead to, either by having explanatory text or alt statements.

I came across an article which explains how to create boxes in web pages. Specifically boxes with round corners.

Adding fluid borders to your box

This article explains how it is possible to create rounded corners without the use of images.

Interesting eh!

One other aspect of CSS is its use in the preparation of formatted (html) EMAIL

How to Create Great HTML Emails with CS

Microsoft has launched its new version of the Internet Explorer Browser: IE7. Far from being greeted with adulation, its arrival on the web gave rise to widespread fear and loathing. We downloaded it to see what all the fuss was about. We also have IE6 which is used for testing sites in the old version.

We are told that some sites would fall apart in the new IE7 - happily we have not noticed any problems with our web sites (so far!).

This article discusses why problems occur with web sites in IE7 and how to fix them

Internet Explorer Version 7 - were you ready?

Actually we are enthusiastic users of Mozilla Firefox! The new version of IE7 changes the layout of the tools and is more difficult to use - but hey its what you’r used to, as they say. There is not much that is new - it’s just rearranging the deckchairs. The main new thing is the introduction of tabs rather than having to open new windows.

Netscape and Mozilla pioneered tabs as a way of switching easily between web pages. Microsoft realised how useful this technique is and followed suit.

One noval feature is that you can see thumbnails of all the tabs you have open - just in case you have so many you have forgotted which one is which.

The web is about words

I am a great believer in the “content is king” school of web design. I found a blog about web design and from there I found a link to a web site about typography.  I like this web page, it does something for me

Web design is 95% typography

Having nailed my colours to the mast and put my head on the line — I just know someone is going to start correcting my spelling mistakes (i.e. typographical errors).   I have a good knowledge of spelling and typography (I used to work as a typesetter before computers were invented) … but I have to admit I am not a good typist.   I type too fast and my eye sight is not so good.  But I am working at a rate at which I don’t take the time to proof read what I have done.

Having said all that - I so hate seeing spelling mistakes and typographical errors on web pages - especially my own!

Modern web sites use html to layout a web page and css to style and format the content.

CSS stands for “cascading style sheets”. In most cases the CSS file is external to all the html pages and a style is linked to each page of the website.

CSS can be applied to web pages in two ways:

1. External Style Sheets

External style sheets are independent files and can be used with multiple web pages. External style sheets have the advantage that changes made to them are effected throughout the web site. Since you can use them with multiple pages, you can easily keep a consistent style throughout your web pages. An external style sheet has to be linked from your webpage using a tag in the head section of the html.

2. Inline Styles

Inline styles can be used directly in the element tag; no external pages or files are needed. To use inline styles, you would just need your web page and elements: a, img, div, span, etc. This is fine if that style applies only to that one page. Inline styles can be applied in addition to external style sheets but care needs to be taken to avoid a conflict between an external style sheet and an in line style.

Where the styles apply to all pages or most pages of the web site they should be created in an external style sheet - this file will have the suffix .css

External style sheets are simply text files. You can create them with a text editor such as notepad. Any file name can be given as long as the file ends in .css

Usually, the style sheet or sheets are stored in the root directory along with the home page (index.htm) and other main web pages.

The authoritative source for the rules relating to style sheets can be found at

W3 web site

Notes and jottings - not in any order

Whilst it is possible to express colours with names (e.g. “yellow”), this practice is not recommended. It is not supported by all browsers and their versions. It is better to express colours using their hex code.
Font sizes should not be expressed in pixels; the “ems” measure is recommended.

Page elements such as a table may be given an “id” name and styles applied to that “id”. This is done using the hash character.

Styles can be applied using the div tag and an “id”.

The application of style classes to tags should be minimised in preference to setting classes that can be used with tags.

More than one style sheet can be applied to any one web page. It is convenient to separate general styling from the styles created for navigation elements.

All pages in a web site need to be connected from the home page in links that spiders can follow. Hence, the home page should have plain text links to all other pages in the web site.

Your web site needs to be linked to other web sites that are indexed in google and which have content similar to your own.

Title tags should be written for each page and should use keywords to describe the content of each page.

Though not essential it is prudent to have a robot.txt file in the root of the web space, especially if spiders are not be told not to index certain pages.

Work on keywords to list words and phrases that people are most likely to type into search engines. Use online keywording resources to find out what people actually have typed into searche engines. These phrases must then appear in the body text of your home pages and other major pages of your web site.

Enter a meta tag description into the head tags of your web site code. You need not bother with meta tag keywords unless you are really keen on pleasing bots (roboting spiders - there no evidence that google reads meta tag keywords).

Looking at the home page for webworkerskitchen.co.uk, I see there is a need to re-structure the content to make it easier for people to use.

The navigation bar on the left of the window has a number of page names but these are not intuitive. I never get any feedback from users (possibly because I haven’t asked them for any !) so I dont know what people want to look for.

If I guess about use, I would say there are two kinds of use of the web site:  (a) people who want a structured approach to learning about web design and (b) people who want to find out about specific things.

The site currently has both kinds of content. There are pages with a lot of links to other web sites.  This is useful and convenient as a way of knowing where to go for what.

Other pages are geared more to explaining how to do things.

One of the problems with a site like this is that bits get added all the time. So, there is a lot of stuff in the right hand column about pages that have been added recently.

What I am thinking about now is changing the first menu item in the main folders bar from “Design links” to “Web Design - basics”.  On that page I can go through the basics of planning, designing and working on a new web site. This structures the material according to the process of working on a web site.
The link lower down currently called “Web design” would handle material relating to specific aspects of web work.

I think also that some of the content might be transferred away from the web site into this blog.

I have relied a lot on links because I dont see the point of putting up writing about something if someone else has made a good job of the same thing on another site.  Well that is what the www is all about - links.

If you are a user of webworkerskitchen.co.uk, feel free to comment and feedback on how best to organise the site and what you would wantto use it for.

When starting to make a new web site, the first thing you should do is to get some pens and paper. Web sites are built on a computer but they are planned on a desk. Young and inexperienced web design students sit down at the keyboard and start making a web site with only a vague idea in their head as to what it is going to be. Websites do not begin life on at the keyboard.

Serious web designers begin with paper and they plan before they touch a keyboard.

The bigger the web site the more time needs to be spent in planning. If you are building a web site for a client, you have to carry the client with you all through the build phase. They have to be satisfied with what you are doing. I usually create a web address called “work in progress” and customers can actually watch the web site as it is being built.

The one thing I don’t want is to spend a lot of time working on a site and for the client to come back to me and say they don’t like what I have done and they want some major changes. That wastes time and decreases my profit margin.

Stages in planning a web site

Planning and styling – working on paper - work on paper to plan your site – use storyboards – do a rough page layout - think through the look and feel and try alternative colour schemes.

Site mapping and navigation - how many pages, what is each page called, what is it about.  Draw a site map (sometimes called a storyboard).  Each page is a box and the links between pages are drawn as arrows.  Set the title of the page and the file name. This helps when designing the navigation.

Creative design and colouring - reasons for choosing colour schemes, how many colours to use, what to use those colours for

Collecting and managing images - company logo, stock photos, product photos, pictures of staff

Preparing the text - getting draft copy from the client, desk editing text to make it suitable for the web, editing text for keyword density.

Creating a master file (sometimes called a template)

Create a master file from which all other pages in the web site will be copied. Make sure that the code, structure and layout are correct and that the style sheets are connected up. Use file save as to create each page. Make sure you use the correct format for file names. This is my protocol for file names: DO NOT put spaces into file names and use only lower case letters. Use underscores instead of spaces. These rules help to keep broken links down to a minimum. This applies both to web page filenames and to image file names.

Use FILE SAVEAS to make each new page. Check your navigational links in the browser to ensure that all the images work.

Create a project plan or check list to make sure you are completing each step of the build.

External style sheet created

• Document type is present on each page - check you have the correct DTD for the elements you are using.
  
• All styles are correct
• Styles are applied to appropriate elements
  
• Links in menu bars are checked and correct
• Alt statements set for all images
  
• Title tag set to generic statement - this will need to be modified for each page
  
• Codes has been checked for errors
• Copying (replicating) the master file to create the pages of the web site
• Testing the navigation
• Putting in the content
• Testing

Site finalisation checklist and quality control

Publication

Post-publication procedures

Testing - validation - robots txt file uploaded - favicon in place - submit site to ICRA for content rating.

Submission to search engines.