I have just finished a web site design for an engineering company close to where I live.
Screenshot of www.monabri-engineering.co.uk
I was asked by a very talented individual to spice up his blog theme, and here is the result.
Screenshot of www.joeyschusler.com
In one of my previous posts “An Insight into What Search Engines like”, I discussed a point on having a clear information hierarchy.
Clear information hierarchies are obtained by writing mark-up semantically, if not written semantically when the search engine scans the content of a web page it cannot identify the most important aspects of the page and index appropriately.
Writing Semantic mark-up is a process of choosing the tags that communicate the hierarchy of information contained in the page and placing them in a logical order.
<h1> tag
The <h1> tag should only ever be used once on a page at a time. It signifies the top, most important piece of information in the document and is generally reserved for the name of the site / author or owner and their logo.
<h2> tag
The <h2> tag should be treated with the same respect as the <h1> tag and its usage be limited. <h2> are commonly used for page titles.
<h3> to <h6>
<h3> to <h6> are the lower heading tags and can be used multiple times within the page. They don’t have the same importance as their older siblings but gain more importance with search engines than regular paragraph copy. They can be used for navigation and headings within content replacing the <strong> tag.
A must for semantics is the need for the tags to be placed in order within the mark-up, a typical example could be.
<h1>The Semantic Mark-up Co.</h1>
<h2>How to create Semantic Mark-up</h2>
<ul>
<li id=”nav1″>
<h3><a href=”index.html” title=”The Semantic Mark-up Home page”>Semantic Mark-up Co</a></h3>
</li>
<li id=”nav2″>
<h3><a href=”tutorials.html” title=”Semantic Mark-up Tutorials”>Tutorial</a></h3>
</li>
</ul>
<h4>Step 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius, magna fermentum scelerisque faucibus, dui quam vehicula magna, ut semper neque libero eget purus</p>
<h4>Step 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius, magna fermentum scelerisque faucibus, dui quam vehicula magna, ut semper neque libero eget purus</p>
In my previous post “An insight into what Search Engines like” I discussed a point on search engines liking content that does not have meta barriers.
These can include
<meta name=”ROBOTS” content=”NOINDEX, NOFOLLOW” />
<meta name=”ROBOTS” content=”NOARCHIVE” />
Some Meta data is vital for Search Engines indexing the page and building descriptions in search results.
These tags include
Description
<meta name=”description” content=”Insert your fascinating description of the page here” />
Keyword
<meta name=”keyword” content=”keyword 1, keyword 2, keyword 3, etc” />
Keywords can be singular words or phrases related to the specific page.
A general rule to consider with adding keywords is to limit the amount of keywords used, add specific targeted keywords for the type of site, its location and to make sure the content of the page has those keywords appearing often.
Keywords can be placed within other parts of the mark-up including elements used for accessibility to provide areas for keywords.
This can be done using the title attribute on a variety of tags.
a href
The title tag within the a href link allows for a description to appear in a small tool tip when hovering over a link.
<a href=”about-me.html” title=”About the Web Designer Ryan McNair”>About Ryan</a>
acronym and abbreviations
If your site includes acronyms and abbreviations within the content and uses them as keywords, this may pose problems when potential visitors may search for the non-abbreviated phrase.
A solution for this is to use
<acronym title=”Search Engine Optimisation”>SEO</a>
<abbr title=”Information”>Info</a>
Image
Instead of using the title attribute within the tag, the alt tag is used to convey the text information relevant to the keywords.
Other Meta tags you may consider adding are
Author
<meta name=”author” content=”Ryan McNair” />
Copyright
<meta name=”copyright” content=”Copyright 2009 Ryan McNair, All Rights Reserved” />
Although adding these two meta tags to the mark-up of your site will not increase your position in search engine results they do give extra information to the page
Search Engine Optimisation is an important part of any successful Website design.
The Success of your Search Engine Optimisation depends on the understanding of what a search engine likes.
Search Engines like :
Basal is a simple and clean 2-column Wordpress theme, I have created.
It is an image free design with a minimal structure and layout for your blog’s content.
I am releasing this theme under the GPL license, you can if you wish make any alterations to it for your blogging needs.
Basal has a new update, 1.0.6 primarily fixes issues with the CSS like the navigation and widget titles, thanks to all those who have downloaded Basal so far.
1. Comment your code
Commenting code is a practice often overlooked when working to a deadline.
Using comments on any web source coding language can easily distinguish each part of the design you are working on. Helping further down the line when maintenance or tweaking is needed to inject life into your site.
fig 1. (CSS Comments)
/* This is an example of a CSS comment than can span over
several paragraphs */
// This is used for single lines only
2. (Shorthand CSS)
Shorthand CSS is a method of writing CSS code in more condensed manner
fig 1. (Long hand CSS)
#example {
margin-top: 0;
margin-right: 1px;
margin-bottom: 2px;
margin-left: 3px;
}
fig 2. (Short hand CSS)
#example {
margin: 0 1px 2px 3px;
}
The CSS code created using shorthand is smaller in file size in comparison to using the longer version in fig 1.
When using shorthand notice that when a value of 0px is needed that it is written using just a 0 without the px value at the end.
Shorthand can be used with the margin, border and padding delimeters.
The CSS can be further shortened to
#example {
margin: 0 1px 2px;
}
this will give the margin properties of
#example {
margin-top: 0;
margin-right: 1px;
margin-bottom: 2px;
margin-left: 2px;
}
also using only two values in the shorthand will give
#example {
margin: 0 1px;
}
versus
#example {
margin-top: 0;
margin-right: 1px;
margin-bottom: 0;
margin-left: 1px;
}
Finally only using one value in shorthand will give a uniform value for all four declarations of the delimeter.
3. Abandon Inline styles and migrate to external sheets
Using external style sheets will allow for your web pages to load faster, less code = less time.
By grouping common styles in classes together in a separate file the mark-up language used to generate each page is reduced and not repeated making redesign and maintenance easier and less of a headache for you later on.
To use an external style sheet simply place the following code within the head portion of your html document.
<style type=”text/css”>@import url(monochrome.css);</style>
Maintenance and Updatability of webpages are a high priority, with a little JavaScript your pages can be self-updating.
Create a new JavaScript file, call it jsyear.js and type the following code.
var theDate=new Date()
document.write(theDate.getFullYear())
Add the script to your footer
<div id=”footer”>© Your Name 2000-<script type=”text/javascript” src=”jsyear.js”>, All rights Reserved</div>
This will call each time the page is loaded to get the current year and display the year in your footer, the script is useful were lots of pages have been created and the laborious task of correcting the year is needed.
With fancier newer and fresher browsers isn’t it time you let go of IE6 and embrace better browsers.
Old IE6 is a nightmare for cross browser relations, it takes up to 20% of the market share and renders websites awfully, leaving designers with headaches.
CSS Hacks and tricks are needed to get the site to look identical to each other browser.
Why not save developers and designers precious time and resort to a newer more accessible browser like Firefox 3, Chrome, Safari or Opera.
Here are a few hacks and filters that can help IE6 render your webpage.
1. Conditional comment hack/filter
<!--[if IE6]>
/*insert style declarations (these will only be seen by microsoft IE6 browser)*/
width:200px;
<![endif]-->
2. Tan hack
*html .boxModel {
width: 230px;
width: 200px;
height: 130px;
height: 100px;
}
The backslash within the height and width is not readable by IE5 using Windows, but does affect IE5 for Mac and IE6 for Windows.
The differences in the two hack filters are more noticeable, the conditional comment filter can support more style declarations than the tan hack. However with both filters they are not valid CSS. The conditional comment can be used in-line and doesn’t invalidate the majority of CSS created.