What is HTML5 and how will it affect web content creators?
The presentation on HTML5 – Download Here.
What is HTML 5?
HTML (Hypertext Markup Language) is a formatting language the use for structure and creates documents of the web page. HTML5 is the next major revision of HTML such as HTML 4.01 and XHTML 1.0. HTML5 introduces numbers of new features that improve website performance. It has specific rules that allow placement and format of text, graphic, video and audio on a web page. Thurs, these can be useful for developers to produce web page with more unique and creative ways. (r4)
HTML5 also has numbers of important new elements for web content structure such as <article>, <section> and <header> elements. As a result, these new elements will improve page segmentations as pages can be divided into different part. Therefore, these make each part much more recognisable to search engine. (r8)
Moreover, HTML5 is backward compatible. It provides many new features that are essential part for modern web application. HTML5 provide many new attribute and tags built specifically for web application. (r2 & r6)
New features of HTML 5
These are examples of the new important features of HTML5:
Video elements & audio element- – This allow web pages to display videos or music online without the use of third-party plug-in such as Flash or QuickTime.
Geolocation – This method allow gathering a user’s location information from WiFi tower and GPS. The geolocation element can be important when targeting users from abroad.
The method can also be implemented by the used of IP address detection to gather user’s information. However, this method is more reliable on using HTML5 geolocation element.
Offline web application – This allow user to select web page files to be cached. Therefore, this will allow web page to work offline. The users can to continue interacting with web application and document without available of network connection. For example the user can check their e-mail locally without internet connection or install an external client.
Browsers that support new features of HTML 5
This graph below displays the list of all the new elements or features of HTML5 with short descriptions. The graph also shows how each browser able to support HTML5 features and how they will improves their support in the future. (r4)
(Note: Click on the image to view in full size.)
Each browser has its own rules and each one has different capacity to adapt HTML5 at its own rate. The graphic display different colours that illustrate how each browser can support on each feature of HTML5.
According to the graphic, it shows that most of popular browser such as Firefox, chrome and safari are able to support most of the HMTL5 features. However, the only major issue is the Internet Explorer 8.0, which it can support only few features of HTML5. For example, if we implement new elements of HTML5 such as video element. As a result, this video element will not be able to display on internet explorer 8.0 or older version of internet explorer.
Nevertheless, IE 9.0 has official released in 14 March 2011. (r5) It has new improvement to able to adopt with some of the new feature of HTML5. However, it is still a new browser, which we should take to consideration that not every users to have IE9 installed in their computer.
Therefore, it is essential for the users to have modern web browser to run the websites that developed in HTML5.
Example of HTML5 websites
(Please note: These websites might not work in older version of Internet Explorer)
This is one good example of e-commerce website, which developed on HTML5. This site uses Dragging and Dropping element, which allows the user to drag the items and drop into the green area. The user can then click on “Checkout” button to purchase the items. This technique will improve the user’s experience for the future of online shopping.
Difference in DOCTYPE for XTHML, HTML 4 and HTML5
These are prior DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
HTML5 has more simplified doctype than HTML4 and XHTML doctype.
Different between HTML4 & HTML5 (r2)
In order to understand the semantic mark-up in HTML5, it is essential differentiate the different between HTML4 and HTML5 mark-up.
HTML4 mainly use div on as commonly used on semantic mark-up.
Example in HTML4
<div id= ”hearder” > <h1>Introduction</h1> <p>more information</p> </header>
In HTML5, the div element and id attribute has no defined semantic. Therefore HTML5 define a <header> as an element for this purpose. (r2. page 41)
For example, instead of using <div id=”header”>, we can replace it to <header> in HTML5 mark-up.
Example in HTML5
<hearder> <h1>Introduction</h1> <p>more <p>information</p> </header>
How will HTML5 affect web content creators?
HTML5 introduces numbers of new elements for both media and web content structure. However, the main benefit of using HTML5 for web content are it gives content much more semantic meaning and able to support content that falls outside of the concept of documents.
The new elements in HTML5 effect on how web content creators are able to structure the content of the web page. Therefore, it is essential to understand each of the new elements on HTML5 as it has unique characteristic to help differentiate the most comment area on a modern website. (r3)
These are the following new elements for content structure in HTML5 specification: (According to Mark Pilgrim, (2010), HTML5 Up and Running, Book)
The article element represents a self-contained composition in a document, page, application, or site that intended to be independently distributable or reusable. For example, this could be for forum post, magazine, newspaper article, blog entry, user-submitted comment, or any other independent item of content.
The section element represents a generic section of a document or application. It is a main grouping of content. For example, a web page could be divided into different sections for the introduction, news products and contact detail. Moreover, the section element is suitable for divide the <article> element into smaller divisions. (r1. page 213)
The header elements represent a group of introductory. For example, header element can be used to wrap a section’s content, search form, logos, navigation, heading, other any other content that associate with a header.
The hgroup element represents the heading section. This element used to group a set of multiple heading elements (h1-h6). This element can be use for content that has both a heading and subheading.
The footer element represents footer for its nearest ancestor sectioning content. A footer element can contain information such as copyright, detail about who created the site and links to related documents.
The nav element represents a section of a page that links to other pages of the website or links within the page: a section navigation links. For example, the nav element is use to contain the navigation bar of the website. It is normally found within the header element.
The aside element represents the sections of a content that is related to the content surrounding it. For example, the element can be used for typographical effects such as pull quotes or sidebars for advertising.
(According to, Mark Pilgrim, (2010), HTML5 Up and Running, Book)
An example of HTML5 semantic mark-up
This is an example of HTML5 semantic mark-up including the entire new elements for web content structure. However, the new elements have its own rules on how web content should be structure in the correct systematic method.
These are line by line analysis of HTML5 mark-up. (r1 & r3)
This is an example of my HTML5 web page
<!DOCTYPE HTML> HTML5 has more simplified doctype than prior Doctype.
<head> Open head element
<title>Example of HTML5s</title> The title element will display the title bar of browser windows.
</head> End head element
<body> The main content of the web page goes within body element.
<header> Everything related to header include website name and navigation bar.
<h1>Example of HTML5</h1> This h1 element display the name of the website
<nav> This element is for navigation bar.
<ul> This is unordered list inorder to structure the navigation menu
<li><a href="/Page 2/">Page 2</a></li>
<li><a href="/About-Us/">About Us</a></li>
<li><a href="/Contact/">Contact</a></li> These are the links of navigation bar
</ul> End navigation link items
</nav> End the navigation bar
</header> End header
<section> The section element is use for divide the article element into different divisions.
<article> This article is the first independent items within section content.
<header> Open up a new header of first article. The header element here contain metadata
<hgroup> This element is suitable for multiple heading.
</hgroup> End hgroup element
</header> End header element
<p>Garden furniture is available in all varieties of meta and wood designs. One can select from a wide and exclusive range of rustic metals to cedar and oak designed garden furniture. This can be chosen and matched with your environment surroundings.</p>
<p>Shopping on line provides you the pleasure of selecting an amazing range of outdoor furniture. Rustic chairs, wooden outdoor chairs, the variety is unlimited, leaving the shopper muddled. But while deciding on a particular type of furniture, one must remember to make sure of the elements, his furniture is going to face and brook bravely. The furniture, you choose, should be suitable for your environment; whether it is rainy, snowy, or sunny.</p> Simple paragraphs give the summery of the content.
</article> The first article now completed.
<article> This article element is the second independent item of the content.
<p>Garden furniture is available in all varieties of meta and wood designs. One can select from a wide and exclusive range of rustic metals to cedar and oak designed garden furniture. This can be chosen and matched with your environment surroundings.</p>
<p>Shopping on line provides you the pleasure of selecting an amazing range of outdoor furniture. Rustic chairs, wooden outdoor chairs, the variety is unlimited, leaving the shopper muddled. But while deciding on a particular type of furniture, one must remember to make sure of the elements, his furniture is going to face and brook bravely. The furniture, you choose, should be suitable for your environment; whether it is rainy, snowy, or sunny.</p>
</article> end second article.
<aside> We start using aside element as it directly related to the content around it.
<h2>Subscribe to the RSS feed</h2>
</aside> End aside element
</section> End content section.
<footer> This element can contain copyright details and any other content in the footer area.
<p>Copyright 2011 By Annop</p>
</footer> End footer element
</body> End body element as all the contents are now completed
How will HTML5 affect SEO (Search Engine Optimisation)?
The new elements of HTML5 have improved page segmentation, as it divided into several different parts such as header, main content, footer, link section, nav, etc. Search engines have started applying page segmentation and determined each part as separate entries from different elements. Therefore, these help search engine to identify where main content is located and to increase the relevancy of search result. However, it is essential for web content creators to understand the new elements of HTML5 that will affect web content.
These are the following new elements on HTML5 that will affect on SEO.
The article element is the most important elements in order to optimize website’s rank in the search engine for on page SEO. This is because the <article> element has reduced the need of using div tags and it makes the HTML code much cleaner. Therefore, search engine will put more focus to the content inside <article> element than other content used in other part of the page.
The section element is used to separate sections of many contents on a web page. Furthermore, each section can have many different heading and content within the article elements. Therefore, search engine will pay more attention to the contents of separate section.
The header element is also very important for search engine, as it has similar to the <h1> tag. However, the main different is that it can contain multiple heading such as H1,H2, H3 element, paragraphs of text and links which are important for SEO.
The footer element is also important but not more than header element. It can be used to store some information, which can still be useful for SEO purpose.
The nav element considered to be very important part for SEO. Because, it can be used to identify a collection of links to other pages.
(References 7 & 8 )
Thai is another one of my example for Thai wholesale furniture web page built in HTML5
According to the HTML5 mark-up for Thai furniture webpage, the header elements contain the heading of the website “Thai wholesale furniture”. There is also nav element, which contain collections of different links. Therefore, these are very useful for SEO purpose as it contain relevant keywords phrases.
<header> <h1>Thai Wholesale Furniture</h1> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/Product/">Product</a></li> <li><a href="/About-Us/">About Us</a></li> <li><a href="/Contact/">Contact</a></li> </ul> </nav> </header>
Furthermore, there are two different types of content including Thai furniture and news & event. Therefore, in HTML5 mark-up, it is essential to use section element in order to divide these categories into two different sections. I included the id attribute on each different section e.g <section id=”Thai furniture”> and <section id=”news-event”>.
The two divided sections on a web page will be more likely to improve the SEO result, as search engine will focus on the content inside each section. For example if search for specific keywords such as “wooden furniture”, which appear in a Thai furniture sections. As a result, this page will be more likely to appear higher in search result compared to words that found all across the whole web page.
Moreover, the select element <section id=”Thai furniture”> has to split <article> element into different product’s type of materials such as wooden, rattan and bamboo furniture. Therefore, I have included article <article> elements on each product because it represented as an independent item on Thai furniture section.
The article element <article> is the most essential part for on page seo purpose, as there will be lots of content on product’s heading and description that will contain many target keywords and long tail keywords phases in order to attract more traffic to the website. Therefore, search engine will highlight the content appears that within the article element <article> more than other content from other elements of the web page.
This is an example mark-up by using <section> and <article> elements.
<section id="thai-furniture"> <article> <h1>Wooden furniture</h1> <p>Information about wooden furniture</p> </article> <article> <h1>Rattan furniture</h1> <p>Information about Rattan furniture</p> </article> <article> <h1>Bamboo furniture</h1> <p>Information about Bamboo furniture</p> </article> </section><!-- End section for Thai furniture-->
The section element of News & Event <section> has three different types of heading. Therefore, the article element <article> has to be included in the mark-up. Furthermore, it is essential to use <hgroup> element because there are multiple heading such as Heading <h1> and sub-heading <h2> display on the web page.
<section id="news-events"> <!-- This section contain list of news and events--><article><hgroup><h1>News & Event 1</h1><h2>Headline 1</h2></hgroup><p>Information about News and Event 1</p></article><article><hgroup><h1>News & Event 2</h1><h2>Headline 2</h2></hgroup><p>Information about News and Event 2</p></article><article><hgroup><h1>News & Event 3</h1><h2>Headline 3</h2></hgroup><p>Information about News and Event 3</p></article></section><!-- End section of news and events-->
HTML5 is the newest version of HTML (HyperText Markup Language). It has many incredible new features that will enhance website performance and user experience for the web. However, the new feature or elements can be used today, despite the fact that some browses do not offer fully support them.
Furthermore, HTML5 introduces numbers of new elements for web content structure such as <article>, <section>, <hearder>, <footer>, <nav> and <aside> elements. These new elements alllow web content creators to organise content structure with more semantic meaning and it also divided the page into different parts.
However, page segmentation allows search engine to differentiate a page into its component parts, and improve an understanding of the mark-up and the relevancy of a page. Search engine can easily indentify where main content is located and less important on the menus, footers, headers and other elements. As the result, these helps search engine to ranks muti-topics pages much more accurately and effectively. Thurs, it is essentail that web content creators to pay more attention to the content within the <article>and <section> elements as seach egine will considers these elements as the main content within HTML5 web page.
(1) By Holzner, S. (2011, Sams Teach Yourself HTML5 in 10 Minutes, (page 6 & 213)
(2) By Pilgrim, M. (2010), HTML5 Up and Running, (page 41)
(3) By Hawkes, R. (2011) Foundation HTML5 Canvas: For Games and Entertainment (page 4)
How can copyright-expired text be used to attract web traffic?
The presentation on copyright expired text – Download Here.
Copyright expired text
A copyright exists in many forms on literary works, books, web pages, computer programs or instruction manuals. Although intricate details of copyright law differ between countries and materials there are some general factors amongst them.
As an example, UK Copyright in a literary, dramatic, musical, or artistic work expires 70 years from the year in which the author of the word died. If the author of a book died in 1990, then the copyright in the book would expire in 2060. (1)
Similarly, in US, material published before 1923 is currently expired. If the copyright holder has either failed to renew the copyright (for works published in the US between 1923 and 1963) or failed to include a valid copyright notice (for works published in the US between 1923 and 1977). (2)
Copyright laws are quite restrictive in application and the law on whether a text is considered copyright expired or not has to be consulted on an individual basis as there are many clauses in the evolving nature of intellectual property law.
Benefits of using Copyright expired text
Free sources of information without copyright infringement
The most important aspects in SEO are quality and unique content. Therefore, it is essential for the web editors to keep providing interesting and valuable content that target their readers. Moreover, any content or article has to be beneficial for other high page ranking websites, in order to convince a high PR site to link with your site for a better overall page rank purpose. (3)
Writing gripping content with quality and originality is challenging for any web editor. It requires reliable and useful sources of information. Majority of the most useful sources are books or popular websites that already have a copyright protection.
Copyright expired text could be another helpful source of information that allows anyone to re-use its content (or re-use the idea in order to improve web content). This provides an opportunity for web editors to add updated information and rewrite within their own style, making their own unique content without copyright infringement. (4)
In addition, copyright expired texts tend to be quite old and hence very useful in the historical contexts. This allows web editors to add a historical chapter in their article or content at no cost with minimal administration.
Longer Tail to attract more web traffic
Long tail keywords phrases contain a minimum of three or more keywords that are more specific than singular keywords. These specific keywords have low search volume, less traffic and competition. They also target users searching for a specific product or service. However, in SEO, the less competitive keyword phrases (with a fair amount of traffic) bunched together can gather a much greater level of traffic with higher sales conversions in comparison to general keywords. (5)
This graphs shows that the head terms (the fat-head) and the chunky middle, have a higher completion of searches and a lower conversion rate.
However, the long tail has a lower completion of searches and a higher conversion rate.
The SEOMoz website and their analysis of Hitwise. (7)
This graphic shows that the head (Fat head) and body (Chunky middle) does not attract much traffic to the site.
Top 100 keywords terms generate only 5.7 % of all the search traffic
Top 500 keywords generated only 8.9% of all the search traffic.
Top 1,000 keywords generated only 10.6% of all the search traffic
Top 10,000 keywords generated only 18.5% of all the traffic.
The graph below proved that the top keywords have attracted a low amount of traffic of all the search terms. In comparison, the long tails have attracted a large amount of traffic to the site, with up to 80%.
This is an example of long tail SEO for elliance.com website. The graph shows that the word phrases of “shoes” and “mens shoes” that have a high search volume with high competitions in search engines but with low conversation rates.
The long tail includes more descriptive phrases such as “red Nike mens running shoes”. These phrases are highly specific to the product search. Therefore the long tail keywords tend to have less competition but higher conversions in comparison to general keywords.
Image from http://www.squidoo.com/new-long-tail-seo
This is another example of long tail SEO. The graph shows that there are a few general keywords appearing on the head (sweet spot). On the other hand, there are many specific keywords that appear in the long tail areas. These keywords individually have a low search volume but it is more specific to search queries. The sites with longer tails will create more opportunities for visitors to find a niche site.
However, the effective long tail keywords require research on terms that carry value. The keyword research tools such as Google Adwords or WordTracker are useful tools for long tail keyword planning. It is also essential for the site to have more relevant and targeted content in order to capture web traffic from the longer tail terms. More text on the site will create more possible long tail matches. But there are limitation to this, as it is not ideal to have a 1,000 word article on the site unless it make sense and useful to your reader. (6)
The main benefit using copyright expired text is the long tail with no cost or effort. It allows web editors to obtain large amount of contents, which could have numbers of long tail keyword phrases. The content that has large amount of long tail keywords and combination with target keywords. Consequently, these will attract more traffic to the site significantly.
Following on from this example, if we were to conduct a search in Archive or Gutenberg websites and try to find expired copyright material, then there could be a source of useful contents that are relevant to the website targeting a niche market.
To generate more unique content for the website, copyright expired texts could prove as useful sources for web editors in gaining new ideas and information. By adding new article or new content to the site frequently, this allows the site to have even longer tail for keywords phrases. Therefore, if the site contains a larger amount of relevant content, then this will allow the website to gain even more traffic from the longer search strings. (8)
SEO Moz states that: “In the long tail of keyword searches, the great value comes from having hundreds or thousands of unique, valuable content pages written on a niche subject. The millions of completely unique search terms that hit the engines each day help to bring in traffic that a purely “designed” strategy could never receive.” (9) SEOMoz.org blog.
This is one website example that uses copyright-expired text from Gutenberg in order to drive traffic to the site.
My thesis project is about Thai furniture wholesale website, which allows many suppliers from Thailand to promote their furniture and home decorations products on to my site. The majority of the products are made by bamboo, rattan and wooden materials. However, it would be beneficial to included article about those some of the materials on my site. The buyers might possibly be interested to read about them because it relevant to the products.
Therefore, this is one example of article about “Bamboo” as it is one of the materials for the products in my site. Archive website has the collection of historical record. It also has copyright expired text materials, where I can obtain and re-use them without copyright infringement.
I accessed to the Archive website then input Keyword phrase “Bamboo furniture” onto the search box then click on “Text”. I selected one of the articles about Bamboo, which was published in 1901. This article contains lots of information about bamboo then I selected the most relevant information to the my site.
This is an example article by using copyright expired text from Archive site.
The use of Bamboo in early 1900s“The Annamites of Indo-China use bamboo for the making of domestic utensils, weapons of the chase and of war, furniture, water pipes, ropes, paper, and buildings. In common with the inhabitants of China and Japan, the Annamites are so skilled that they can apply bamboo canes to many of the uses for which the hardest wood or even iron or steel is considered necessary in this and in other parts of the Western hemisphere.
Thus, for hydraulic and mechanical work, bamboo is made to serve, though the only available tools for preparing it are of the roughest kind. In the distilleries, where alcohol is made from rice, bamboo pipes, having joints luted with clay, conduct the spirit to and from bamboo receivers. Weaving and rope-making frames are made from bamboo, and the products of these frames probably will bear comparison with goods produced in any part of the Western hemisphere. It would not serve any useful purpose to tabulate here all the species of bamboo that are known ; but perhaps the names, sources, and the leading charac- teristics of the principal bamboo plants may be found of use. The table on the following page gives an arbitrary selection of bamboos to the number of about thirty ; the complete list would number two or three iiundred. The use of bamboo in Great Britain and the western part of Europe generally is increasing, but as yet most of its applications are in furniture making. Compared with China, Japan, India, and tropical America, its use in this country is restricted, due, of course, to its being a new material, practically. Europeans can have but little idea as to the great number of the exceedingly varied uses to which bamboo is put in the countries of its source. There is hardly any purpose for which iron, stone, or wood is used here but what is answered nearly, if not quite as well, in the Eastern countries named above by the use of bamboo. It is interesting to give here a few brief notes descriptive of the many uses to which bamboo canes are applied, chiefly, be it said, in the East, In China, the tender, but tasteless, bamboo shoots are used as food, being either boiled or pickled, the seeds furnishing a farina suitable for cakes. The gnarled roots are cut into fantastic carv- ings, or into handles for the Chinese lanterns, or are turned in a lathe to form oval sticks for the use of worshippers.
This article is one example of using copyright expired text in order to gained more long tail keywords phrases to attract more traffic to the site. The article contains various keyword phrases that has divided into two different types include Head keyword phrase (highlight in green) and long tail keyword phrases (highlight in red).
Head keyword phrases
Long tail keyword phrases
species of bamboo
the principal bamboo plants
bamboo in Great Britain
the use of bamboo
According to Google Adword keyword tool, the head term keywords phrase such as “bamboo”, “furniture” and “bamboo canes” considered to be very popular keywords with high competition. On other hand, the long tail keywords (highlight in red) seem to have very low competition of search volume. Therefore, the long tails keywords are more likely to do well for searched that are relevant to target market and also attract more traffic than the head keywords term.
The most effective methods to attract traffics from the long tails keywords is to generate relevant and target content. Search engine will rely on lexical analysis in order to determine what the page is about. Therefore, my next method is to re-write the content from copyright expired text in order to generate fresh unique content. As a result, this will create more opportunities on long tail phrases for the site to appear on search engine. (10)
Nevertheless, by obtaining copyright expired text method could also be useful for other article on my website such as an article for “wooden furniture” and “rattan furniture”. Thurs, the site will expand even longer tail keywords phrases as more relevant content will attract even more traffic to the site.
In addition, my plan for Thai furniture wholesale website is to display many products as much as possible. Each page will be descriptive and also have specific product’s name or description. Therefore, this will be more likely to attract large amount of traffic to the site from specific long tail keywords search. This is another method to drive more traffic by using the principle of long tail seo.
Copyright expired texts create more opportunities for web site management to expand in higher quality content. It allows web editors to reuse many different sources of information to help them generate unique content without copyright infringement.
Finally, the main benefit of copyright expired texts is to provide the long tail effectiveness with no cost or effort. Web editors can obtain free content for their site. The more relevant content the site has, the longer tails will be for the keyword phrases and combination with your target keywords. These will consequently attract significant traffic to the site.
Sources of Copyright expired text
Please note: There are certain books that are still in copyright and certain books are not in copyright.
Archive – http://www.archive.org/
Hathi Trust Digital Library – http://www.hathitrust.org/
Wikipedia – (open source) – http://en.wikipedia.org/wiki/Main_Page
Sources of free articles
Articlecircle – http://www.articlecircle.com/
(Please note: Please read the term and condition on each site)
(1) Bently L & Sherman B, (2001). Intellectual Property Law. Third edition, Page 163, Duration of Copyright. Book, 346.48 N Greenwich Library
From Business Link website, Copyright for your business. Available online at http://www.businesslink.gov.uk/bdotg/action/detail?itemId=1073791360&type=RESOURCES [Accessed 28/02/2011]
(2) About.com, (2011) Copyright expiration in US. Available online on: http://inventors.about.com/od/copyrights/a/expiration.htm [Accessed 28/02/2011]
(3) Hubpages, (2011) How to create SEO-friendly content for a website or a blog. Available online at: http://hubpages.com/hub/How-to-Create-SEO-friendly-Content-For-a-Website-or-Blog [Accessed 05/03/2011]
(4) By Bob Silber, (2006), Copyright Information – Make money with Expired Copyright. Ezine Article. Available online at: http://ezinearticles.com/?Copyright-Information—Make-Money-With-Expired-Copyrights&id=2478317 [Accessed 01/03/2011]
(5) Akinola A, (2010). Crazt Dot Hit, How to use organic search engine optimization to Generate Traffic to your Website and Blog. Google Books
(6) Battelle J, (2010). The Art of SEO, mastering search engine optimization. Published by O’Reilly Media, Book, p 171
(7) SEOMoz site, (2009), Illustrating the long tail, Available online at http://www.seomoz.org/blog/the-accidental-wisdom-of-long-tail-targeting [Accessed 04/03/2011]
(8) Ezine Article, (2006), SEO Content writing and long tail. Available online at: http://ezinearticles.com/?SEO-Content-Writing-and-the-Long-Tail&id=440151 [Accessed 03/03/2011]
(9) SEOMoz site, (2006), The Accidental Wisdom of Long tail targeting, Available online at http://www.seomoz.org/blog/the-accidental-wisdom-of-long-tail-targeting [Accessed 04/03/2011]
(10) Battelle J, (2010). The Art of SEO, mastering search engine optimization. Published by O’Reilly Media, Book, p 175
South East Asian particularly in Thailand has many resources of supplier, whom specialise in producing wooden furniture and home decoration products. As a result, these types of products have been very popular for many retailers especially from US, UK and Japan, according Thai trade centre in Bangkok. Therefore, online marketing has becoming essential advertising tool for promote Thai products into international market.
Vitruvius is famous roman writer, who asserting his books Da Architechtura. The structure must include three qualities of firmitas, utilitas and venustas. These mean strength (firmness), utility (commodity) and beauty (delight), according to Wikipedia on Vitruvius. Therefore, these forms explained an outlines by Vitruvius. Furthermore, a Vitruvius principle for website should include “business” form in order to give overall assessment for purpose of being active on the website and the main revenue steam for site’s business owner.
However, I used Vitruvius principle to analysis two cognate and two non-cognate website regard to business, commodity, firmness and delight. These will be relevant to my thesis project in which the purpose of my website is to promote furniture and home decoration products from many suppliers in Thailand into international level.
Exclusive Thai Decor LTD (ETD)
Exclusive Thai Decor LTD (ETD) is both wholesaler and retailers in Chiang Mai, Northern Thailand. The company manufacture and sell verity of well design Thai furniture and Thai home decoration products. They also export products to both customers and buyers worldwide by using most secure shipping service for international trading. The company’s main revenue streams are mainly from the sales of their products both online and in store.
The site has useful navigation system displays different type of product’s categories, shipping information, company’s information, article and sitemap. The information architecture for this site has well organised structure of information, which enhance users experience in finding information or products more easily.
Exclusive Thai Decor LTD is the only Thai website, which has strong used of various methods for online marketing strategy. The site has integrated with many social media sites such as facebook, twitter, LinkIn and youtube. Moreover, the site has a functionally that allows users to sign up for newsletter, who wish to receive e-mails about new product or special offers.
The navigation bar of Sitemap page is useful for SEO (Search engine optimisation) purpose, as it contains the list of internal link to every web page for the entire website. It also enhanced usability and accessibility standard. The sitemap page has improved user experience, as it provides alternative options for the users to access to any pages within the site more easily. The site also has Partner Links page, which show that the site has exchanged links with others popular Thai websites as part of SEM (search engine marketing) strategy. As the result, this could improve the site’s page rank significantly.
The downside of this website is that, if you click one of the products on the home page. It will change to another page, which consist of shopping cart. This method does not take users to the landing page of the products chosen. Consequently, this could have bad impact on user’s experience on the site.
The overall design of this website has used Thai art work that applied to the site, which has an impression of Thai aesthetic looks and feels. The background colour has nicely design pattern combination with brown monochromatic colour schemes that look appropriate to the nature of the business. Therefore, the design concept is in the right approach as the majority products on this website are traditional Thai products.
The only criticisms about this website are the hierarchy of information structure, position of images and page layout that appear to be unorganised. Also, these have no clear evidence of using grids system to organise the structure of text and images.
Intress.net is well established company in Bangkok, Thailand. They are exporter of woven furniture from Thailand. The website has wide range contemporary design furniture such as furniture for living rooms, dinner room, bed rooms and for gardens. The company has used their website as advertising tool to promote their products worldwide. Their main revenue streams are from the sales of their products within Thailand and from other countries worldwide.
The main functionality of this website is the flash slideshow banner on the home page. The technique used of slideshow in flash has interactive movement. Therefore, this could grab attention to the users and it could give impression to the user that the site is well reputable band.
Furthermore, another interesting functionally for this website is called “Catalog Online” which appears on the top right hand corner of the website. This functionality allows the users to interact with catalog in online format. They can enjoy using drag and drop function to change pages to another and allow them to view verity of products within the catalog. Therefore, this has enhanced user experience of the site.
The information architecture of the site has well organised structure on navigation bar. The navigation bar has divided the products into different categories include living room, bedrooms, dining rooms and outdoor. This has made it easy for the users to find the products on the site.
The over design aspect for this website has very modern looks and feel as the majority of the products on the site contain various contemporary design furniture from Thailand. The image on the technique use in flash slideshow has enhanced an impression of modern design website. This site used mainly brown monochromatic colour schemes, which matched well with the colour of the product’s images and also flash slideshow images.
However, there are some negative points about this site. The font size is a bit too small to read, which does not meet readability standard. The site has poor page layout on the home page with unbalance position vertically on text and images.
Non – Cognate websites
Alibaba.com limited operated as a B2B business-to-business e-commerce company in china and internationally. They are the world’s largest online marketplace for wholesale goods. They provide services that connecting small and medium-sized between buyers and suppliers worldwide. Their main source of income revenue stream is by charging listing fees to the manufactures and trading companies that adverting products on the sites.
Furthermore, Alibaba also earns substantial revenue through the hung “products sourcing trade shows” in China, Hong Kong and other countries every year. However, Alibaba also has other source of revenue steam come from different website called TaoBao.com. This website is the subsidiary of from Alibaba groups; they have been dominated in e-commerce mainly within China. Alibaba is valued at 77.61 billion Hong Kong Dollars (almost $10 billion USD), according to Alibaba website.
Alibaba’s website has functionality that is user-friendly to both buyers and suppliers. The Alibaba website has search functionality that allows all users to search for specific products, buyers or suppliers. There is a functionality that allows buyers and supplier to register for member login area. This will allows both buyers and suppliers to list their company profile, manage product listing, access contact list and able to communicate with trade partners in real-time.
The product search box is very useful functionality that allows the buyers to search for specific products. Then, this will display all list of products with supplier’s contact form. This is one an example here. The buyers can e-mail to supplier directly if they are interested to purchase the product. The left navigation bar on the site has list of product’s categories display in alphabetical order. Therefore, this helps the buyers to find the products on the site more quickly and effectively.
Nevertheless, the site also contains forms that allow suppliers to add product’s detail, description and upload products images into the website. Thurs, these data will be transferred to Alibaba’s web database.
The overall design of this site has basic used of colours mainly white, black and blue. However, the home page contains the three sliceshow images that have well design typography, combination with great images and verity of background colours. The sliceshow look very professionally well designed and each image has strong business focus targeting to both buyer and supplier visitors. This is a very good example of my thesis project.
The font is colour mainly in dark blue and black colour with white background. The font is also in reasonable size. These make the text easy to read and meet good readability standard.
Hot products section part is very useful to display new product on the home page. Therefore, this could attract user’s attention. This part could make the visitors to re-visit the site to check if there are new products changing. This could be good ideas to keep buyers coming back to the site.
The only criticism about this site is that page layout does not follow the grids systems.
Puji is well established furniture retailer in UK. They sell variety of contemporary teak furniture with eastern inspired accessories handcrafted. Puji selected the best design products from their suppliers and import them mainly from Indonesia. Thurs, majority of the products on Puji’s website has mainly top-quality design, craftsmanship and materials. Their revenue steams are mainly from product’s sales online and in store.
Puji website is based in e-commerce website, which allows customers to purchase their products online. The site also customers to make payment online by credit card (Master card, Mastro, Visa and Visa credit card) through sage pay. The site also integrated with social media sites such as facebook and twitter for online marketing purpose. The site also allows customers to register with the Puji’s site so that the customers can reviews the products they have purchased. There is a search box which allows users to search for more specific product, range and code.
The information architecture on the navigation bar is well organise of products categories. The title name of the navigation bar help the customers to find the products they want more quickly. The font colour and size are easy to read.
The overdesign on this website looks clear, modern and professional approach. Despite, the majority of Puji products are mainly from Indonesia, Far East Asian country. However, the design concept of this site is more representing as well established UK company website.
The design page layout of this site has used four columns layout with grids systems to organise the position of text and images. The site also shows strong used of typography on the home page on special offers in order to grab attention to the users.
The colour of this site is many dark brown colours and white background as it matches well with the colour of wooden furniture images. However, the site home page contains lots of products images with products categories name. The images allow user to click, which will bring to users to see more of their products within the website.
After analysis for both cognate and non-cognate websites, these have given me many useful idea on what I should to implement on my web thesis project and what I should be avoided. Therefore, I selected mainly useful points of each website in order to plan for my own thesis project in relation to Vitruvian principle.
Vitruvian principle plan for Thai furniture B2B website
For web thesis project business plan is to promote furniture and home decorations products from many suppliers in Thailand, by using a website as an advertising tool to reach target buyers internationally. Moreover, the revenue stream will be from advertising revenue from many suppliers within Thailand, who wish to promote their products onto my website. Alibaba website is an example for business plan and revenue stream. However, my website’s objective is more niche markets; it aims to promote only best furniture and home decoration products for every supplier mainly within Thailand.
Alibaba website has useful functionalities that will implement to my sites for supplier and buyers. My plan for my websites is to include supplier’s functionality that allows mainly suppliers in Thailand to register, upload their products images and product’s details. Moreover, the functionality for buyers is to include products search box and supplier’s contact forms. Thurs, this will allow buyers to e-mail suppliers directly if they are interested to purchase the products.
The website called Exclusive Thai decor LTD is a great example that has many useful functionalities for online marketing purpose such as integration with many social media site and newsletter feature. The information architecture on navigation bar include list of products title and site map page that enhance user experience in finding products and other pages within the site.
Intress website is another great example that has inspired my idea to include flash slideshow banner to my site. Because, I think that flash slideshow banner will make the site looks more interesting and also looks different to other competitor’s site. I also consider having catalog online on my website in future.
My design plan for Thai furniture website has derived from the design concept of Puji’s site. Because the products of my website will be mainly furniture and home decoration from Thailand and the target users of the website are mainly entrepreneurs of furniture retailers within UK. Therefore, I think Puji web design concept has given me an inspiration to design a Thai furniture website that looks clear, modern and professional approach directly to target users.
For my Thesis project, I chosen to re-design a new website for Free2Learn LTD, where the company are based in London. The company is welfare to work training and recruiting organization, working closely together with Public and Private Organizations with the aim in helping reduce the effect of unemployment.
The company is funded by major government organisations such as Job centre plus, European social fund and others, in order to provide high quality training and help find right suitable jobs for them.
I will go through the most useful aspect of business, commodity, firmness and delight regard to cognate and non-cognate websites.
Skills Training UK
Skills training UK is a specialist employability and skills training providers based in London.They help people to gain employment and help other businesses recruit staff they need.
Funding by government organisations such as
– Department of work and pensions
– The leading & skills council
– European social fund
Video integration is a good functionality that I consider to advice my client’s website.
The video represent as a trustworthy and professional company. They show that they are successful company, where they have helped many unemployed people to gain new jobs. The video will influence people to enroll their courses.
This website mainly use dark gray and white colours, which made the site looks more formal and business focus. Also, the right hand column of the site used pink, blue and green. The choices of those colours are relevant to company’s logo and it does grab attention to the users to find out more about career prospects, business performance and to work with this company.
The overall design of the website has reasonable design but poor choice of images of the slideshow as it contains images that are not relevant to their business.
Nevertheless, every page of the site contains images of their stuffs working in the organisation and trying to help their student in class room. Therefore, these images have made good impression to the users as many people will think that it is a trustworthy and professional company with friendly customer service.
A4e provide the redundant worker with new training. They help people to find work in other industry and also help companies to recruit the right candidate.
They are a Multi-national company in UK, Australia, France, Germany, India, Poland and South African. The company is partnership with government, public sector organisation, private sector organisations and the voluntary and community sector. However, UK based, they are only partnership with government, who funded their services.
There are useful functionalities that could be implemented for my web thesis project.
Social Media – Moreover, this website integration with social media sites such as facebook, twitter and YouTube for online marketing and branding purpose.
Login system – The site also has community log in, which allow users take part of discussion within the community
News feed – Up to date news about the events.
Blogs – The site has integration with many blogs functions and twitter that could improve the SEO aspect of the site.
The site built in XHTML 1.0 transitional, CSS and JQuery.
They also used WordPress content management system (CMS) to build this website and blog.
The site has balance 4 columns layout with well organised grids systems. The site also used verity of different colours such as blue, red, orange, blue and green. Therefore, these made the site looks eye catching and it also gives warm and friendly feeling and fun to explore. The typography for the header is similar to hand written font style.
People First is the sector skills council for mainly hospitality, leisure travel and tourism. They funded by public sectors. A sector skills council is a government recognised, industry-focused body established to support the development of skills and training within that industry.
Slideshow images – The choice of images was well chosen. It displays images of people, who are working with in hospitality, leisure travel and tourism sectors. Therefore, the choice of images are relevant their business concept and to their target users.
Twitter – This appear clearly on top right hand side of the page, which allow user to follow.
Advance search – This allows user to be more specific about what results get returned.
This website has used four columns layout with well organised grids systems. The both global and local navigation bar contain within the left hand side of the page, which make it convince for the users to finds information on the web. For example, if click on “Research” section, it will display all lists of sub heading under “Research”, which made it easier for the users find information on the websites.
Oaklands College is a large general further education college in Hertfordshire. They offer a wide range of courses such as A-level and other qualification to process in higher education.
The college’s main revenue steam is from tuition fees pay by student. However, the site state that if you are under 19 years old and have been a permanent resident in the EU, then they do not have to pay tuition fees. Therefore, I assumed that it possibly funded by the government.
The only functionality that I really like about this site is the flash banner. I think it has great technique on slideshow and it contains many graphical images with different topic that can attract user attention.
The website’s visual appearance is modern design with great used of flash banners. They are four column layouts of well organised grids systems. I think the site has well design that direct to young target users.
This website has 4 column layouts the well organised grids system. Moreover, each column used four different colours for header font. On Upcoming event display dates in larger font and images on the site, which I think it will grab attention to their target user.
For my web project, Free2Learn Ltd also organised special events in many different part of London. The event is to promotion their training courses and their services of helping people to secure new jobs. Therefore, I think this layout is suitable for Free2Learn Company so that they can display news about the company and special event to let people know where and when the event will happen.
Title: Thai Furniture | Thai Wholesale Furniture
Keywords: Thai Furniture,Wholesale furniture,Thailand Furniture,Chiang Mai Furniture,sankhampang,handicraft,handmade,otop,handmade chiangmai,furniture,thailand,bangkok,hotel,resort,chiangmai,chiang mai,longstay,table,chair,decor,decorative,decoration,chairs,beds,sofars,triangle pillow,thai cusion,furniture for resort”
Description: Thaifurnituredecor.com offers the finest in modern Thai furniture and accessories for the international market. At our Chiang Mai factory, meticulous local artisans craft each piece by hand, following unique and original designs.”
Key phrases: Extracted terms and phrases: (http://www.seomoz.org/term-extractor)
Google search rank for top five key phrases (http://whatpageofsearchamion.com/)
|2 word||Google Search Rank||3 word||Google Search Rank|
|thai furniture||Page: 1||thai wholesale furniture||Page: 1|
|wholesale furniture||Less than Page 10||thai triangle pillow||Page: 1|
|thai wholesale||Page: 3||rain drum tables||Page: 1|
|furniture decor||Page 4||raindrum thai style||Page: 1|
|recommended items||Less than Page 10||raindrum thai elephant||Page: 1|
|feature items||Less than Page 10|
|room furniture||Less than Page 10|
|living room||Less than Page 10|
|wood carvings||Less than Page 10|
|wood carving||Less than Page 10|
Top Queries from Search Traffic
The top queries driving traffic to thaifurnituredecor.com from search engines. Updated monthly.
|Query||Percent of Search Traffic|
|2||thailand furniture stores||16.87%|
|3||thai furniture shops||11.27%|
|4||thai resort interiors||6.99%|
|5||furniture from thailand||6.68%|
|7||thai triangle pillow||2.64%|
|9||thai triangle pillow offers||1.81%|
|10||thai triangle cushion||1.74%|
Page rank: 4/10 (cekpr.com)
Daily Page views: 237 (cubestat.com, 05/02/11)
Alexa Traffic Rank: 4,227,365 (alexa.com)
Sites Linking In: 14 (alexa.com)
The overall keyword strategy for this website is very good. The main keyword phases of “Thai wholesale furniture” and “Thai furniture” appear on the first page of google search. Therefore the website has done very well on their SEO already as those keyword phrases are very popular keywords and also has lots of competitions, according to Google adword. Those keywords will drive more traffic to the website, which potentially mean more customers to the business.
The website has page rank is at 4/10 and the site has only 14 links. However, if this website have more inbound links with other high page rank website. This will consequently improve their page rank significantly.
This website contains mainly wonderful products but less content and less products descriptions. Therefore, it is advisable for this website to have more content on the page in order to improve long tail keyword effectiveness. For example, the keyword phases can be more specific product’s name or description. The website could add more of product’s description detail on each page. Thurs, this will be more likely to drive more traffic to the website from long tail keyword search.
The site could also integrate with social media site such as facebook and twitter in order to promote their site. By create their own facebook page, this will improve the number of inbound links and also drive more traffic to the site.
Web Site 2
Title: Contemporary Furniture UK, Italian Modern High Gloss Furniture – Amode.co.uk
Description: “Great selection of modern, contemporary furniture and Italian high gloss furniture for your home, dining room, living room and bedroom from leading furniture store Amode.co.uk – Visit our showroom today”
Keywords: “contemporary furniture, Modern furniture, designer furniture, Amode, www.amode.co.uk, high gloss furniture, Italian furniture”
Key phrases: Extracted terms and phrases: (http://www.seomoz.org/term-extractor
Google search rank for key phrases (http://whatpageofsearchamion.com/)
|Google Search Rank||3 word
|Google Search Rank|
||Less than Page 10||
||Less than Page 10||
||Less than Page 10|
||Less than Page 10||
||Less than Page 10||
||Less than Page 10|
||Less than Page 10||
||Less than Page 10||
||Less than Page 10||
||Less than Page 10||
|10. zag 4||Less than Page 10||
Top Queries from Search Traffic (Alexa.com)
The top queries driving traffic to amode.co.uk from search engines. Updated monthly.
|Query||Percent of Search Traffic|
|1||living room furniture||14.45%|
|2||high gloss furniture||4.40%|
|6||tv bench white||2.02%|
|8||modern contemporary furniture||1.86%|
Page rank: 2/10 (cekpr.com)
Daily Page views: 839 (cubestat.com, 05/02/11)
Alexa Traffic Rank: 123,260 (alexa.com)
Sites Linking In: 79 (alexa.com)
The overall SEO keyword performance of this website is very poor. Because, majority of their keyword phases appear poorly on google search engine (less than page 10). Despite their keyword phases such as “Italian modern high”, Italian modern high” and “mix modern lacquered” appear on the first page of google. But, these keyword phases are not their main top search query of the site. It is possible that many people are unlikely to search for these keyword.
The site page rank is very poor as well. Therefore, they could improve their SME by add more inbound link to the site that has high page rank. They could do exchange link with other website, who has high page rank. However, their content has to be benefit in order for other website to link to their site. For example, this could be a property website,
In addition, the only positive point about the site’s SEO strategy is the long tail keyword. Because every page contains product’s name and descriptions. Therefore, the site contains key phases that are more specific. These could be beneficial for the users if they want to search for more specific product. Their website will be more likely to appear on top of search engine.
Title: Contemporary Furniture | Reclaimed Teak | Solid Wood | London UK
Description= “Puji, contemporary furniture manufacturers based in London UK. We are innovators in solid teak modern furniture – with coordinating accessories, handcrafted to be as individual as you are.”
Keywords: “contemporary furniture, reclaimed teak furniture, modern furniture, solid wood furniture, london uk
Key phrases: Extracted terms and phrases: (http://www.seomoz.org/term-extractor)
Google search rank for key phrases (http://whatpageofsearchamion.com/)
Google Search Rank
Google Search Rank
|contemporary furniture||Page: 2||dining room furniture||Page: 6|
|reclaimed teak||Page: 1||dining room tables||Page: 3|
|solid wood||Page 3||contemporary dining room||Page: 3|
|London uk||Less than Page: 10||teak dining tables||Page: 1|
|design service||Less than Page: 10||teak coffee tables||Page: 1|
|bespoke furniture||Page: 6||square dining tables||Page: 2|
|we detected||Less than Page: 10||solid wood dining||Page: 2|
|dining room||Less than Page: 10||round dining room||Page: 1|
|dining tables||Page: 7||rattan woven chairs||Page: 1|
|tv units||Page: 8||plasma tv units||Page: 2|
Top Queries from Search Traffic
The top queries driving traffic to puji.com from search engines. Updated monthly.
|Query||Percent of Search Traffic|
|2||teak dining table||3.77%|
|3||dining table and chairs||2.59%|
|4||teak coffee table||1.66%|
|7||bespoke furniture london||1.21%|
|8||reclaimed teak furniture||1.18%|
|9||custom built furniture london||1.15%|
|10||bespoke wooden furniture||1.06%|
Page rank: 3/10 (cekpr.com)
Daily Page views: 1,594 (cubestat.com, 05/02/11)
Alexa Traffic Rank: 719,028 (alexa.com)
Sites Linking In: 141 (alexa.com)
The overall keyword planning for this website has done fairly well on search engine. The site’s three words phrase such as “teak dining tables”, “teak coffee tables”, “round dining room” and “rattan woven chairs” have appear on the first page Google search. As these keyword phases have high search volume with less competition, according to google adword tool.
However, every pages of the site has well descriptive products detail. As the result, this will enhance long tail effective for more specific product search. Moreover, the site page rank is quick low 3/10, and there are only 141 links to other site. Therefore, their word improve their page rank by working more SME inbound link to other website, who has high page rank. Puji website is well established company. Therefore, there will be likely for other website to agree to link to Puji’s site.
How the principles of Page Layout relate to the design and criticism of websites?
The aim of this essay is to explain the principles of the page layout in relation to ‘graphic design’ and ‘web design’. The essay comes in two main parts. The first part explains the principle of page layout from other graphic design works, such as page layout for graphic design, newspapers, books, and magazines. The second part explains about the principle of page layout for website design, grids system for web, comparison between fixed and liquid layout and the concerns with fixed and liquid layout in how they change the grid system when creating solutions.
Moreover, the second part includes other important aspects in page layout for the web such as a building block on page layout by using line, block and colour. Also, visual aspects for web page layout such as symmetrical balance, asymmetrical balance, visual hierarchy and white space will be analysed. Finally, a professional viewpoint will be outlined in the conclusion.
Definition of Page Layout
The verb page layout is the process of placing, arranging, rearranging text (text composition) and graphics on the page to produce documents such as newsletters, brochures, books, etc. (About.com, 2011)
There are other definitions of page layout:
Page layout is the part of graphic design that deals in the arrangement and style treatment of elements (content) on a page. (Wikipedia)
Principles of Page Layout
The grouping and alignment theory was developed by Gentalt Psychologists. There are four important principles in page layout, which enable the designer to create an effective overall design. These principles deal with many aspects of page layout and can be applied to many design works such as websites, posters, billboards and magazine
Proximity – This is the fundamental part showing strong grouping of content on the page layout. The objects are close together so the viewer will associate them with one another.
Similarity – This means that two things are the same shape, size, colour or orientation. The viewers will also associate them with each other.
Continuity – This means the continuous lines and curves are formed by alignment of smaller elements.
Closure – This is the group of effects that appear to be closed forms such as rectangles and whitespaces.
Page Layout for Graphic Design
Page layout and design are fundamental skills that the designers must pay more attention to in order to create effective art works. Generally page layout is used to describe the look and feel of any other print work such as posters, post cards, one page pamphlets, sale sheets, brochures and magazines. Therefore, it is essential for the designer to take responsibility in design to create an effective visual appearance in printed materials while also meeting client’s expectation.
This is an example of poster designed by Greteman Group. The poster has a simple composition with bright colour which dominates the colour of images and text. The message of the poster appears clearly, which makes this poster standout from others in getting its message across.
This is an example of page layout for a magazine. It is clearly making playful use of typography and this adds visual interest to a page layout while further combining the dramatic use of colour and imagery.
This is an example of design work that has the basics of page layout and has an adequate white space along with a margin in order for easy reading and comprehensive.
Designed by SamataMason
Symmetrical and Asymmetrical Balance
Page layout in graphic design can have two different types of layout either symmetrical or asymmetrical balance. A symmetrical balance layout arranges identical or similar visual elements in order to make them equally balanced on either side of the axis. (Figure 4-2) Many beginners in design prefer to use centered, symmetrical layout as it appears to to be more formal, dignified and static.
For asymmetrical balance layout, this is a more unpredictable and dynamic design. The word, phase, phrases and graphic images display unequally on either side of the image. However, it is still achieving harmony in balance. (Figure 4-3)
Grids System in graphic design
Grids system lays the basic foundation of any design work. It is essential for a designer to follow the grids system in order to produce well structured design works such as that for a magazine, newspaper, book and other design work. The grid is an invisible framework of guides used to contract a page layout or composition of the printed work.
The basic structures of grid system
This is generally used in organising content on page layout for text such as essay, report and/or books. The main feature is the block of text.
This is one example that uses a Single-column grid on page layout for books.
The purpose of this grid method is to organise lots of text or to present different kinds on information in separate columns. There are two types of double columns grids that include equal and unequal width of columns. The proportion of equal column has well balance widths size. However, the proportion for unequal width is that the wider column is having doubled the width of the narrow column.
Multicolumn grids systems are suitable as a page layout for magazines and websites. This type of grid system is more flexible than single or two column grids. The images below show a good example of multicolumn grids used for magazines. However, the example of grids for website will be explained in further details.
This type of grid is suitable for organising more complex content or information such as for newspapers, calendars, charts and tables. Modular grids also combine vertical and horizontal columns, which help to organize the structure into smaller chucks or space.
This type of grids arrangement is composed of horizontal columns. The image below shows an example of the Prospectus used in hierarchical grids to organise content. The designer can use the lower text rows to create a clear area for information such as the running head, page number, spread title, head note, and photos.
Page layout for Web Design
Historically, web designers preferred to use tables to design a page layout in combination with invisibles GIF’s to stretch table cells to the required size.
In early 2000s, web designers started moving towards the usage of CSS as it is much faster, better and places a greater emphasis on accessibility. However, tables can still be beneficial when creating and formatting table data for an original purpose.
Nevertheless, a well organised page layout on the website does enhance user’s experience and ability to find content on the web page. Page layout also has to deal with techniques and aesthetic issues.
Web pages can include the following five elements
– Images – the visual element of the web page.
– Headline – the title element of the web page, which use HTML tag <h1> to <h6> or use some form of typography.
– Body content – the text element on the web page. Content is a crucial element which attracts more visitors to the site. Page layout helps to organise the content of the web page so that it makes a web page more readable.
– Navigation – this includes global and local navigation bar elements. These help the user to navigate round the site more effectively.
Building Block on Page Layout
In modern web design, it is essential for designers to understand the interactive elements in order to create an interesting page layout. Those elements are divided in Line, Shape and Colours.
Line can contain shapes, visible or invisible depending on the requirement. It can be thick or thin, uniform or varied in thickness, solid or interrupted, funny or hard-edged, graceful or nervous. The right choice of line can create a lasting impression on viewers.
Line can be divide a page or connect two pages together by horizontal and vertical lines. Borders can be used as part of the decoration. The visible line has the same or different colour as the object and it can effectively differentiate the object on the web page. On the other hand, invisible lines can also be use to organise the content or object as it is also the main component of grids.
This is the web page layout that has an invisible line to organise three column layout grids
This is a web page layout that contains visible white line borders to outline delineation of grids.
Shape can be implemented in page layout as images, block elements, and background images for the whole web page. The content can be divided into different paragraphs using Shape
This is an example of using shape to outline the page layout. The Shape contains different colour, which divides the content between each paragraph with a two column page layout.
This is an example of page layout that uses four different colours on block in order to organise and divide the content for this web page.
Visual balance in web design
Visual balance can be seen as two distinct types, Symmetrical Balance and Asymmetrical Balance. These can be applied into page layout for the web.
Symmetrical Balance means that the elements are placed equally on both sides of a centre line of the page, which makes the web page appear well balanced.
This is an example of a web site, which has symmetrical balance. This website clearly shows that the logo, heading, navigation bar, and main image take the centre position of the web page. The design of this website page clearly shows that the left and right side split vertically in the centre with an equal balance on each side.
Asymmetrical Balance layout is used of different elements to create an overall dynamic visual balance. For example, a web page that has one large image on one side but it is still balanced with many smaller images on the other side of the page. Moreover, Asymmetrical balance in web design seems to be widely used for many websites because it has more natural solution for content being presented.
This is an example of website, which used asymmetrical balance. The darker text in the logo on top right hand side still matches up with navigation bar in top left hand side of the page. Furthermore, the text for the welcome message in the banner section is still well matched with the smaller pieces of text on the right hand side of the page.
This site is an example of using visual hierarchy to draw attention to one position. It looks obvious that the site is attracting users to the promotional offers.
White Space on web page layout
The white space on page layout does provide the eyes with respite, imparting a feeling of “breathing room” In this example the white space (or black) does look more clean, elegant and dramatic. The white space area creates a different emphasise to the left hand side area of the web page.
Grid System in Web Design
Grids should be at the heart of page layout. They provide an easy way to organise the content structure and also add rhythm to the visual design. Grids present information that stays more organised and also helps the designers to create composition that can be useful for the reader to view the page more easily. 
Grids systems and typography are both very important in the design process. They determine the visual impact of content information of the web page.
Multicolumn grids are used on a website page layout to manage a range of information that includes texts, videos, images and adverts. The images below shows an example of British study centres website, where it used multicolumn grids to divide the web page into three well balanced columns. http://www.british-study.com/
This picture shows the assumed grids display on top of the web page. The full width of this site is 990 pixels and there are three columns that are dived into three equal proportions of 330 width pixels. The three equally sized columns are based from “Golden Ratio” principle, which are from Ancient Greek. They discovered that the human brain finds a design of the ratio proportion of 1 and 2/3 particularly pleasing to look at.
However, the overall design of this website has a modern look and feel. It also has a well balanced page layout, organised structure of texts and images. The users can easily understand the visual structure of the content in the website.
The website called 960 grid system (http://960.gs/) is a very useful tool for the web designer to create a website with an effective use of grids system. This site can generate CSS code for the web developer to implement into the website.
Comparison between Fixed & Liquid layout
Fixed and Liquid layout is another important part of the page layout for web. Also, liquid layout could affect the grids system on page layout for the web. Page layout is divided into two different types of layout, called Fixed and Liquid layout. It is essential to understand the main points between the two layouts.
Problem with Fixed & Liquid Layout
Historically, grid systems have been used in fixed sizes layout. Web designers have had to adopt traditional technique of platforms, windows, and a browsing environment on the web.
However, if there are any changes to text size, screen resolution or browser window, they could have a huge impact on the design process. Therefore, it is essential for web designers to be able to create flexible design layout that will be able to adapt any changes in conditions.
Fluid layout using a grid
Fluid grid can create the most powerful design layout of the web page. It can expand and collapse along with user’s window, which places no limitation on window size or screen resolution.
This is one example to create a fluid layout.
This method can be implemented by firstly creating a mock-up of fixed-width layout. This allows the designers to plan for the proportions, balance and spacing of the web page.
Set the code in CSS on following methods:
Fixed width on wrapper= 960 pixels
Width on header = 880 pixels
Margin on both left and right on wrapper = 40 pixels
Spacing between all the elements = 20 pixel
In order to transform fixed layout to fluid layout, so that it can maintain the proportions at any screen resolution we need to change the entire pixel into percentage.
880 pixels ÷ 960 pixels = 0.91666667 → 92%
640 pixels ÷ 880 pixels = 0.727272 → 72%
220 pixels ÷ 880 pixels = 0.25 → 25%
Then we need to include this percentage results on to CSS.
This is an example of website that use fluid layout. The web page can adapt to any screen resolution on any computer. The proportion of header, main content, right content and footer were set in percentage on CSS, which made a flexible page layout. The divine proportions are powerful tools for the designing of a flexible, asymmetrical gird. It also gives the harmonious widths of both the main content area and the sidebar.
In addition, the principle of page layout has been applied into majority of the design works such as magazines, newspapers, catalogs, posters, annual reports, books and web sites. In following the set of theoretical frameworks, the grid system is a fundamental rule to the design process for works in both publishing and web design. It helps to organise the structure of the content and images in order have aesthetically eye pleasing page layout.
The grids system is based on a fixed layout design. However, it is essential for the web designer to be able to create flexible design layout that can be adapted to any condition. Therefore, by implementing a fluid grids, this will allow the page layout to create flexible harmonious widths that can be able adapt to any size of screen resolution.
In contemporary web design, it is essential to implement blocks in page layout such as line, shape or colour as appropriately. These will help to improve the design aspect on page layout. Moreover, visual balances of symmetry and asymmetrical balanced layouts have been important rules for both graphic and web design. Thurs, it is essential for the designer to be able to applying these rules to enhance to quality of page layout.
Books from University of Greenwich Library
McIntire, P. (2008), Visual Design for the Modern Web
Grannell, C. (2007), The Essential Guide to CSS and HTML Web Design
Clarke, A. (2007) Transcending CSS, The fine art of web design, Book
Tondreau, B. (2009), Layout Essentials, 100 Design principles for using Grids
Tidwell, J. (2011), Designing Interfaces, Second Edition
Graham, L. (2002), Basics of design: layout and typography for beginners
Orange Seed Design, (2004), Bringing Graphic Design In-House
McNeil, P. (2010), The web designer’s idea book, volume two
Adams, C and others, (2007), Web standards creativity: innovations in web design with XHTML, CSS, and DOM Scripting
By Mr. Patrick J. Lynch & Ms. Sarah Horton, Web Style Guide, 3rd edition
Kayla Knight (2009) Smashing Magazine,
Please click here to download the page layout out eassy on PDF.
Google PageRank: 4
Alexa traffic Rank: 1,809,062 within 3 months
Demographic: mainly male age between 25 to 34
Site Linking in: 76
“The site has a bounce rate of roughly 63% (i.e., 63% of visits consist of only one page view). The site can be found in the “England” category. The fraction of visits to the site referred by search engines is roughly 41%. Bicycledoctor.co.uk is based in the UK.” Reference from Alexa.com
Source: http://www.popuri.us/ and http://www.alexa.com/
Problem the current website
I think the current website of Bicycle Doctor looks very unprofessional and poorly design. The dark blue background colour with dark text makes the font difficult to read, as the font does not look standout on the website. The site also contains lots of information on the home page and the layout is unorganised without using grids. All the navigation bars contain all in left hand side column, which has very long list of links.
The overall web page design has bad first impression to the target users because mainly the use of colour and the layout. Therefore, this site might not bring more people to re-visit the site, which could affect the SEO result as well as the reputation of the business.
Purpose of new design website
These are the following aims to redesign this website:
- To improve the visual and appearance of the website in professional standard. The site should look more modern and contemporary style.
- To choose the right colours scheme that is direct to business banding. The site should looks more eye catching to the target users, who are between 25 to 34 years of age.
- The navigation bar should be well structure. In order to make the site easier to navigate is by dividing all the products links into one navigation bar and other links in primary navigation bar. Therefore, the users can find the product the product they want more easily.
- To include images as a slideshow on the home page, so that it will target direct to both male and female consumers. Moreover, it contains images that will give the right impression to the users of what kind of product and service they offered.
- To make improve user experience for using the new website.
New design Mock-up for Bicycle doctor LTD
Five main decision design techniques
- Colours – The colour of site are mainly user light blue, white and dark grey. As, it look attractive and clear. It also makes the images and text font looks more standout on the web page. The background of the site is mainly dark grey with some gradient effect. The font are mainly white colour and light blue header. These make the text looks more readable and also look presentable.
- Images – There are four images on the slideshow that show the business’s target consumers and the repair service they provide. The slideshow also aim to grab user’s attention to the site, which could make them to find out more about the site.
- Navigation – There links of navigation bar on this site, which allows the user’s to find out more about the business, news, blog and others. As, the company main purpose is to sell the bicycle. Therefore, I created a product navigation bar below, which displays all list of different kind of bike categories. This allows the users to easily view the company’s products on the site.
- Font – The website mainly used the font called “Century Gothic” as it is easy to read and it also looks suitable with overall design of the site. The typography of the logo aims to look not too formal but do also suit with design concept of the site.
- Layout – The site contain simple two column layout. The right hand side column contains main content and left hand site column contain addition content of the site.
Findability SEO (Search Engine Optimization)
In order to improve the SEO for bicycle doctor website, the site will include title, description and keyword Meta tags on every page. There will be the descriptive filename folder on every page. Every product’s images and other images will include “alt” with products names, so that if the user search for specific product. Therefore, the product page could have more chance to appear on the Google search list. The site also include social media such as facebook and twitter, so that the user can keep up to date with news product and other new information about the company, which could bring increase more traffic to the site.
Look at the following websites and analyse how they use symmetry, asymmetry, balance, lines of unity and contrast in their design.
The site has three colours layout, which used symmetry. The layout of first column looks vertical line, which has same size of boxes. The layout of last two columns look very well balance. However, the choice of images on each boxes makes the site looks asymmetry.
However, I think overall design looks well balance and it clearly show that they strict gird system to organise the position of the boxes.
This website used symmetry well balance layout. However, the images on the left hand side of the page keeping moving, which drawn attention to the user. The large font number “77” looks standout on the site. The font size could be difficult to read and the font line overlap the main image, which make the site looks so busy and unorganised.
Look at a previous website design of your own and apply the golden section to the design and organisation of the content on the page.
For my web Hill Farm web project, I used strict rules of structured grid design and golden ratio to organise the position of images and content. I divided to the layout of the page into two columns, with wider column on the left hand side. So, the main image looks more standout.
First of all, I would like to say congratulation to everyone, who completed their first web design project last week. I think every web site looks very nice and professional. I also think everyone must worked very hard and spent lots of their time to complete this project. So well done everyone!!
About my Hill Farm B&B website:
I made some improvement on my website according to David’s comment from last week. I changed the logo and the layout on every page to make it looks more consistent.
This is my website for Hill farm.
Before I create this website, I had a lot thought about how the website should looks and how it should appear to the target user. Therefore, I made a plan on paper first then I design on Photoshop. However, my final design was developed when I created the site in XHTML & CSS. I keep changing the colour, the layout, the images and the logo until I’m happy with the site.
The main purpose of this website is to represent as it is a small business website. Therefore, I think the website should not look too corporate, too descriptive, too comprecated and too functional.
Just “nice and simple” small business website, which can be easy to use by anyone.
Moreover, I think the most essential things that users are expecting to see from B&B website are mainly the location, room’s image, room’s description and price. That’s all they need to know before they can make decision whether they want booked the room or not.
These are five decision technique for Hill Farm B&B website:
Colour – The overall colour of the website are mainly brown and green colour within monochrome design. I think it looks warm, fresh and classic. These colours also matched well with the top flower images and also Hill farm’s room images. In which I think the site looks eye pleasing and I think it might has a good first impression to the users.
Layout – The layout of each page has two columns. I used grids to organise the position of the images and content.
Navigation bar – There are six primary navigation bars all together. I organised the navigation bar base on how important the title page is.
- Home page bar – This page contain some brief description about the Hill Farm, rooms images and Cornwall images.
- Rooms & Rates bar – This allow the users to view detail about the description of the room and images.
- Location page bar – After that, if the users are interested about the room. They may be wanted to know more about where Hill Farm is located.
- Reservation page bar – If the users are happy about the room, price and location. Therefore, they may want to consider about booking the room later on.
- About us page bar – This page contain all information about Hill Farm.
- Contact us page bar – This page contain all contact details and the contact form, which allow the user to send email directly.
Text font – I used “Verdana” font because it’s a standard font and it is easy to read. I used the “Monotype Corsiva” font as a title header because it looks classic and it goes well with overall design of the site.
The typography on the logo matched well with the flower image on top right hand side of the website.
I also used dark fonts with lighter background colour so that it meet readability standard.
Images – I used JQuery to produce the slideshow technique on the home page, which contains the images of Cornwall and Hill Farm B&B. The purpose of the slideshow is just to show the brief location and scenery of Cornwall so that it gives more intention to the users. I also used JQuery, for the “Room and Rate” pages so that the user can view all the room’s images in larger size. I used some of the images as part of site decoration on the “reservation” and “about us” page.
I felt that I could have done better on this project and but I have leant some mistake for it. I think I have to improve my skills and I am looking forward to complete project two, which it will have to be better than the first one.
I think everyone used Google to find the expression of words. I also used Wikipedia to find the meaning of “Uncanny”.
According from Wikipedia site
Uncanny is a “Freudian concept of an instance where something can be familiar, yet foreign at the same time, resulting in a feeling of it being uncomfortably strange”
This is another simply expression from oxford dictionaries.
Uncanny mean = “strange or mysterious, especially in an unsettling way”
These are an example of products that consider to be “Uncanny”.
These are clothing and everyday objects were sculpts from wooden and have been frozen in time quality. Therefore these could be interesting on the viewer.