IE7

> For anyone who is interested Microsoft have released an IE7 Readiness
> toolkit for web developers which can be downloaded from
>
click here

mailers

I have just found this little site: manbuild

It seems like a nice tool for designers to create html emails without the hassle of sending them out themselves.

Web Tracker Tools

Find the oversize of your webpage and how long it will take to render. All of these tools are not 100% accurate as some of them don't take into consideration the css images.

web analyze

speed checker

To find out for sure what images IE loads, you could a tool like Fiddler to monitor the page download and see exactly what’s being downloaded. Fiddler only works with IE
fiddler

For Firefox users the Tamper Data extension Tamper

css menus

a definative list of css menus on different sites

css menus

Virtual PC

Microsoft has set Virtual PC (http://www.microsoft.com/windows/virtualpc/default.mspx) free. The release makes me wonder if the folks in Redmond have taken notice of Apple’s free BootCamp (http://www.apple.com/macosx/bootcamp/) or Parallel’s Desktop (http://www.parallels.com/) app. You can use Virtual PC to “run multiple operating systems at the same time on the same physical computer. Switch between virtual machines with the click of a button. Use virtual machines to run legacy applications, provide support, train users, and enhance quality assurance.” This is great news for those of us developing on Windows boxes who want to test IE 7 (or for that matter, Vista (http://www.microsoft.com/windowsvista/)) without installing the beta on a production system. It will also prove useful once the full version is out, and we want to keep a version of IE 6 handy.

stylesheet switcher

a nice way to swtich stylesheets

centerkey

stylesheet switcher

a nice way to swtich stylesheets

http://www.centerkey.com/style/switcher/

styling tables

table styling
a different site with designs for tables

some are a bit ropey but others are ok

layout generator

I am never all that keen on using a predetermined layout but they are very helpful for people learning css or to use them as a start point.

layout gala has some nice and robust layouts with plenty to pick from.

Alternatively use the csscreator to automatically generate the layout that is desired.

Pop up window

greybox is a nice little javascript apllication that creates a neat pop-up window. Reminds me of the lightbox but obviously has a very different application

Javascript Scrollbars

Javascript scrollbar

A really nice way to do a scrollbar with style instead of using css overflow:auto, especailly as you can only style the bars in IE.

photo books

I was recently show a really lovely photo book that looked like it had been purchased in a shop. It was actuallly their photos developed by my publisher

Prices start from a reasonable £7 for a softback going up to about £40 for the linen hardcover, although the posting costs are pretty steep.

Very nice for holiday snaps or a wedding gift

Google Introduces Four New Products

seochat

The interesting one is Google trends :-



The new product that’s most likely to cause a major stir among SEOs and advertisers, though, is Google Trends (http://www.google.com/trends). One observer described it as rather like being given the keys to Google Zeitgeist. Mayer explained that “For the first time ever, Google is making it possible to sift through billions of search queries from around the world to see what people are thinking about.”

So what exactly does it do? A user can type in a search term, or several search terms separated by commas. Hit “enter,” and you get a page with several charts. The top chart shows how many searches were conducted for that particular term, and how frequently it was mentioned in the news, over a period of time. Drop-down menus let you adjust both the time period and the region of the world focused on, while if you use multiple terms they show up in different colors. Several clickable news items are highlighted to the right; letter-coded flags on the chart indicate when they were published, so you can match up certain spikes.

That’s not all. Below the chart I just described is another one, with tabs for cities, regions, and languages. This is a bar graph that allows you to compare how frequently terms are searched for.

chart

seo keyword suggestion tool

I am probably a little late in finding it but am now using SEO Book to find keywords for sites instead of the rather cumbersome overture

Design Brief

Overview
Is this a new site or redesign? If the site is a redesign how does it integrate with your other activities? Is this a complete overhaul or just a cosmetic makeover?


Aims and Objectives
What do you want to achieve by the website, e.g. is it a shop front, e-commerce site, information site etc.


Audience
Who is your intended audience – resist the temptation to say everyone as this leads to a website that satisfies nobody’s requirements.

Design Specifications
Are there any design requirements such as colours, fonts, images etc. How much text will appear on each page – maybe give example of websites you like?
List any assets that need to be supplied.


Functionality Specifications
How will your website work – maybe include a flow chart detailing how the pages interact. Are there any interactive elements, databases, specific functions: print page, email a friend, contact form etc.

Deliverables
Specify exactly what the designer must provide e.g. whole website or just templates, logos, a level of accessibility

Timetable
Specify a realistic timetable for the variable to be delivered, including time for checking and evaluation prior to launch.

redirects

For an asp use

<%
Response.Status = "301 Moved Permanently"
Response.AddHeader "Location", "http://www.example.com/yourpage.asp"
%>

If the page is html use a javascript (if mod-rewrite is not installed)

<SCRIPT LANGUAGE="JavaScript">

<!-- Script courtesy of http://www.web-source.net - Your Guide to Professional Web Site Design and Development

window.location="http://www.yourdomain.com/";

// -->

</script>

Tweaking the CSS

CSS Tweak

This handy little tool takes your css file and optimises it as it reduces the files size, thus making it faster to download.

Backgrounds, lists, borders and fonts are all given the shorthand treatment, whilst zero units are removed.

White space can also be removed, along with with comments, but I think this might be going a little too far

************************************************

I have found another application call clean css which also pretty much does the same thing

sIFR - Scalable Inman Flash Replacement

I have recently discovered sIFR and am loving it. It is basically a way of using Flash and javascript to style headers in any font the deisgner wants, and get rid of the annoying pixilation.


All of the explaintions and tutorials can be found on Mike Davidson's Website

I have also found sIFR Beauty which is a blog showcasing some of the work

Coding a Webpage for SEO purposes

A factor often overlooked when optimising a site for search engines is the actual coding of the pages. A well coded website will rank more highly in search engines than a poorly coded site and a high position in the search engines will be more effective then costly online advertising.

When designing or coding a website it is important to consider how it will appeal to search engines and whether it will appeal to visitors/perspective clients. When creating web pages search engines should be kept in mind but not going over the top purely for the sake of reaching top positions and losing a good user experience. Therefore a number of issues need to be taken into account:

• File Size – keeping the file size small for faster download times
• Layout – coding so that the robots read the content in the correct order (top
to bottom)
• Use of correct tags – utilising H1-H6 tags and using ASCII text
• Validation of code – validate code to W3C standards

File Size can be kept down by using style sheets instead of tables and inline style. Removing tables and instead using css for positioning makes download times faster and therefore the search engine spiders are able to find the content more easily. CSS rollovers should be used instead of javascript navigation as they take up less space and allows the search engine robots to crawl through them.

Layout of the pages should be functional for both the user and the search engine. Most search engines read from top to bottom so the things that the search engines look for in ranking a web site should be as close to the top as possible.
It is probably a good idea to have the logo as a background image so that is not before the H1 tag.


Tags should be used where possible.
Header tags H1 – H6 tags to be used for top level key words as more weight is placed on them from the search engines.
Alt tags should always be used to add associate keywords to images.
ASCII text to be used appropriately

Valid Code should always be used used and any junk text/code removed from the documents. XHTML and css shoudld be validated in accordance to W3C standards.

Links should include the most important keyword phrases within the hyperlink itself. Navigation should be ordered and structured that will make sense to the user and search engine alike.

Other things to consider are:
Title [include keywords in the title tag]
URL [have a URL with the key words in that are being targetted]
Page names [use key words with hyphens to replace spaces for the page names]
Image names [name images using keywords relating the page]
Use of capital letters [avoid the use of capital letters in the url, title and meta tags]

How to create a css double list

HTML

------------------------------------------------------------


<div id="midsection">

<div id="col1">

<h3>Title</h3>

<ul>

<li>Link 1</li>

<li>Link 2</li>

<li>Link 3</li>

<li>Link 4</li>

<li>Link 5</li>

</ul>

</div><!-- end col1 -->




<div id="col2">

<h3>Title 2</h3>

<ul>

<li>Link 6</li>

<li>Link 7</li>

<li>Link 8</li>

<li>Link 9</li>

<li>Link 10</li>

</ul>

</div><!-- end col2 -->

</div>







CSS

------------------------------------------------------------



#midsection {float: left;

width:670px;

text-align: left;

margin: 0px;

padding: 20px 5px 5px 5px;

border-top: 1px solid #999999;

border-bottom: 1px solid #999999;

}




#col1 {

float: left;

width: 420px;

}




#col2 {

float: left;

width: 240px;

}




h3{

font:13px ITC Avant Garde Gothic,Verdana, Arial, Sans-Serif, Tahoma, Geneva;

color: #000000;

font-weight: bold;

text-align: left;

padding: 0px 0px 0px 5px

}


this can be seen on one of my sites Priority Traveller