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

sticking the footer to the bottom of the page

I found this on the man in blue website. It bascially tells you how to have the footer stuck to the bottom of the page rather than just using lots of paragraph or break tags!!

http://www.themaninblue.com/writing/perspective/2005/08/29

I will be trying this out on some websites I have already made and see how it goes.

css showcases

There are lots of css showcases out there (most being duplicates of others) but here are some nice and simple ones I like to visit:

css mania - one of my favourites as they just have a screenshot and link, none of this discussion stuff!!
http://cssmania.com

css liquidA different take as this one just features fluid css designs


css vault - one of the first but since being bought has lost its touch


css beauty - another oldie but still quite a goodie

tom's screenblog not really a css showcase but a blog of nice designs


others

css thesis

css import

weekly standards

devils details

cw order

design discussions

This site discusses the trends and colours in web design
http://www.designmeltdown.com/

Thoughts and examples on web design trends
http://fadtastic.aspiramedia.com/

A magazine type design site
http://www.designorati.com/