Michael Doyle | Blog » HTML

Web Development – Inishross House

Michael Doyle — Sat, 01 Aug 2009 09:48:55 +0000

Finished the Inishross House web site. It was built with the 960 grid system. All pages validate except for where lightwindow is used. The pages use a Transitional DOCTYPE, a custom XHTML DTD should be made to sort this issue out. A List Apart has a good tutorial on how to do this.

http://www.alistapart.com/articles/customdtd/

Web Development – Developing from a PS design

Design – Web Page Headers

Michael Doyle — Tue, 21 Jul 2009 17:48:08 +0000

I'm begining to redesign my portfolio. I'm basing it on the 960 grid system. I've placed an notice on my site which has the basic color scheme of things at the moment. The typography needs further work, but I'll leave it for the moment.

I'll be pixel obsessing for a while. First thing's first, I found a good article on the size of headers in web pages:

http://desizntech.info/2009/03/how-improtant-the-header-is/

CSS – Styling Forms

Michael Doyle — Wed, 10 Jun 2009 14:50:03 +0000

Found a great resource listing different articles and tutorials on how to style HTML forms using CSS. http://socialcmsbuzz.com/40-css-web-form-style-tutorials-for-web-developers-14082008/ Related posts:Web Development – Developing from a PS design Web Design – Creating the Web 2.0 Look Web Testing – Fixing Layout Problems in IE Related posts:

Google Maps – Remove Bubble

Michael Doyle — Tue, 09 Jun 2009 16:40:46 +0000

One problem I have come across when using the google maps iFrame in a small div is the bubble pop up. It looks fine for a large map, but when space is a problem it causes the map to scroll to fit in the bubble which is unnecessary at times. To fix this, paste

iwloc=near&addr&

into the iframe code and the bubble dissappears! This information was found here

Web Development – Developing from a PS design

Michael Doyle — Tue, 09 Jun 2009 15:00:55 +0000

I mentioned previously that sixrevisions.com gave a good tutorial on how to create the Web 2.0 look in photoshop. They've now followed up on that article with a tutorial on how to code it in CSS and XHTML.

http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-clean-web-20-style-web-design-from-photoshop/

One concern about this tutorial is the heavy reliance on images for the design rather than CSS.

SEO – Internal Linking

Michael Doyle — Sun, 17 May 2009 17:51:09 +0000

Quick summary of it all....

To internally link pages, keywords should be used for the link and the page it's linking to should have the same title
Emboldening keywords should be done
If keywords appear in text paragraphs, try and link them to the associated parts of the website. For example, if there is a gallery of photos, mention it in the body text, link it to the gallery page. The gallery page should have a title of gallery and a heading of gallery. The main body of text should have some mention of it being the gallery and it should be bold.
This method also counts the internal links as votes.

The way I look at it all, it's just creating good clean metadata. Google indexes your pages so it knows the location of them all. Inserting metadata (title, headings, alt text, etc.) into these locations allows Google to know what it's indexing.

SEO – Meta Tag Analyzer

Michael Doyle — Fri, 15 May 2009 16:25:24 +0000

SeoCentro provide a very good resource for checking your meta tags http://www.seocentro.com/tools/search-engines/metatag-analyzer.html Related posts:SEO – Case Study: adobe.com SEO – On Page Optimizations SEO – Getting banned by Google Related posts:

SEO – On Page Optimizations

Michael Doyle — Thu, 14 May 2009 23:40:49 +0000

I know search engines crawls through web sites and index pages based on their content and keywords. That's about it, SEO is huge business these days so I'm reaading into it at the moment. The first book I got is Brad Callen's "Search Engine Optimization Made Easy". I' m going to discuss this book and the main points in it along with other resources on the net.

A good (free) keyword research and management tool to use is Good Keywords.

PageRank

PageRank is Google's way of giving a popularity rating for a website. It is based on "votes", a vote is a link from one website to yours. The more votes you have, the higher page ranking your website will have. PageRanking is one of the factors Google looks at when ranking websites.

Another factor is the sites that link to your website. A website with a high PageRank linking to yours increases your website PageRank more than a low PageRanked website would. The quantity of pages that link to your website also affects your PageRank.

To find your sites Google Page Rank, download the Google Toolbar.

The page rank for my site (http://www.michaeldoyle.eu) is 0/10, which doesn't come as a surprise, however, it will provide me with a blank canvas to use SEO techniques. When seearching Google for the term "Michael Doyle", a wikipaedia entry is the first result. It's PageRank is 4/10. Callen's guide idicates this is low page rank and it'll be easy to gain a higher ranking. However, the only way to increasethe PageRank is to get other sites to cast your site a vote.

Google Toolbar showing PageRank

There are two search engine optimization methods: on page and off page optimization.

On page Optimization

Title

The page's title is the most important piece of text as this is what appears in the search results. It has to encourage users to click on your site. The title should be descriptive using the least amount of words as possible. Words like "and", "the" etc. should not be used. Keywords must be used.

Headers

H1 should be used to define the most important section of your website. It should be placed at the top of the page as Google reads text from top left to bottom right. Using your primary keywords is recommended if possible.

H2 & H3 should be used to define the sub-headings. Secondary keywords should be used where possible.

Text Styles - Bold, Italicise

Use on keywords in a paragraph, however, do not over do it. Google may penalise you for it.

Images

Give your image files appropriate names (not 01.jpg), try to use keywords in the image file names. Use keywords with ALT text, but add in "image" or "graphic" as well. If not, Google may see it as spam. This applies to the filename also. Always include the title tag in the image (this is the tool tip text that appears).

Forcing Google to read your content first

If you have a two-column layout using the leftmost for navigation, Google will read this first. However, placing in an empty div at the top of this column should force Google to read the right content (the main body) first.

Summary

On page optimization won't have a huge affect on your PageRank, however, a well formed page will be more easily accessible to search engines as well as your visitors. Many falsely believe that tweaking their Keyword Density and where those keywords are placed will have a big effect on your rankings. Keyword Density refers to the amount of time a keywords appear on a page, compared to the total number of words on the page. Off page optimization makes a huge difference to the sucess of your site compared to on page.

Flash – Transparent Backgrounds

Michael Doyle — Tue, 28 Apr 2009 05:45:08 +0000

Trying to finish my Graphic design project tonight and discovered how to make a swf with a transparent background. HTML code is:

Add these parameters to the "param" tag:

param name="wmode" value="transparent"

Add this parameter to the embed tag:

wmode="transparent"

So the full code I used to embed a swf file called "brain.swf" is:

This works in Firefox 3 and IE 7, haven't tested it out on any other browsers yet. Flash 6 or higher is needed.

Flash – Cheat Sheet