Poetry site and visual hierarchy

By | May 14, 2011

Hi All,

I thought I’d give a comment to the poetry site project that we’ve done as we aren’t having a crit for it.

For my site, I decided to showcase the poetry of Sylvia Plath.

(Please click here to go to my site)

Plath has been an inspirational figure to many women. During her lifetime, her preposition for equality between women and men was considered radical and even now, in the modern age, people still look to her as a martyr for feminist ideals.

I chose Plath in particular as I studied her work during A-Level. To me, it felt quite symbolic to work on Plath again at this stage in my life, as during A-Level she really inspired me to go out and live my life the way I’d like to. And as we all know, on finishing my Law degree I came to do this Masters in Web Design. So for Plath to prop up again, right at the end of this Masters, felt amusingly cyclical for me.

The site that I have created is as if it would be a fully functional site for Plath. Hence the inclusion of the search bar and the alphabetical glossary index on the side. If it wasn’t for copyright issues (her work will go to the public domain 70 years after her death…only another 22 more years to go!) I would actually consider making a site about Plath showcasing her poetry.

For its design, I have chosen to use varying shades of grey, as Plath’s work tends to veer to the more sad and emotional feelings that she experiences.

In terms of type I used Google Web Fonts and used the font Arvo for the headings, Arimo for the body text and Yanone Kafeesatz for the glossary links. I wanted a more modern take on Plath so I avoided the use of traditional serif fonts for the body content. However I did use a more modernised serif font for my branding, to enforce the connotation of a poet and academia.

I’ve really enjoyed this typography poetry project and in completing it, I actually feel as if I have improved in terms of my design skills. I’m definitely looking more towards visual hierarchy with my type as well as elements on my page. And it seems to have clicked in terms of this and my user’s experience.

I will link you guys to some really useful articles that helped me, hope you enjoy Plath and her poetry!


Typographic contrast GIF
This is a GIF file from Nick La, the creator of Web Designer Wall. This one resource is what really made me think a lot more and understand the concept of visual hierarchy. Triple thumbs up from me.

Typographical Contrast Article
The above GIF file came from this article which is equally as great.

Ten Web Typography Rules
I really liked this article. Some of the rules are a bit obvious, but sometimes it’s good to state them! There are gems in here though for typographical ideas and visual hierarchy.

Google Web Fonts

What are the advantages and disadvantages of affiliate schemes and drop shipping in generating website revenue?

By | March 17, 2011

What are affiliate schemes?

Affiliate marketing works as follows: A business will give commission to those who bring paying customers to their website. Those who provide a link to the business and generate sales through customers clicking on that link will get a slice of that sale. In 2006, the total sales amount generated through affiliate networks was £2.16 billion in the UK alone.

It is essential to highlight the four main players to an affiliate scheme: Merchant, Network, Publisher, Consumer.

The above image shows how a merchant will rely on consumers to find them directly, through own marketing etc. It then also how affiliate schemes come into play. Affiliates will provide a link to the merchant on their site. When a customer comes onto the affiliate site, clicks through to the merchant site AND purchases a product, the affiliate will be paid a portion of that sale. Thus merchants may actually have many affiliates linking to their site in which they will have to pay a commission to should they bring more customers.

Affiliate networks are where merchants and potential affiliates can find each other.

An example of a good affiliate scheme is Amazon. They by no means were the first to implement affiliate schemes but they were the first to implement it on such a wide scale.

Advantages of affiliate schemes

Make money for doing very little
The website you are linking and promoting will be doing most of the work for you. For example, in terms of customer support, payment processing, product delivery and refunds. All you have to do is link to their website.

No need to store the product
You do not have to have knowledge about the product or even have to develop the product itself. The customer will go to the merchant’s site where all this information will be there for them.

Wider marketing environment for merchants
As stated previously, it widens the environment in which merchant’s business’ are marketed.

Disadvantages of affiliate schemes

Affiliate sites may not be honest
Merchants have been known to close down programmes without informing the affiliates and not paying them commission. The best way around this is to ensure you find reputable affiliate program.

Pay can be infrequent
It cannot be relied upon as a stable source of income.

Security issues
Issues of link hijackers. Where they ‘hijack’ the link placed on the affiliate site. Thus when consumers click-through and purchase a product they are actually purchasing the product on the hijackers site and the money goes to them instead of the merchant.

Issues with affiliate schemes

Email spam
Previously there was little control over affiliate activity. Nowadays affiliate merchants have refined their terms and conditions to prohibit affiliates from spamming.

Search engine spam
Search engine spam is like a skewed form of SEO. When a user types in a search term it comes up with automatically generated webpages which contain many, many links to different merchants.

In 2005, Google has made changes whereby sites like these will be removed from their index or placed lower down the search results. For us, as web designers, to avoid this we must ensure that we create unique, quality content which only contain links to merchant sites.

What is drop shipping?

Drop shipping is where you are the retailer. When a consumer purchases a product from you, you then purchase this product from a manufacturer or wholesaler who then ships the product directly to the consumer. You will gain a profit on the different between the price you paid the wholesaler and the price that the consumer bought the product for.

An example of drop shipping in practice is eBay. Many sellers do not actually have any products in hand but create auctions for these products and liaise with wholesalers when a bidder wins the auction.

Advantages of drop shipping

No stock
No need to store stock in a warehouse.

No shipping concerns
This is useful for large items, there is no need to pack or ship the product.

Drop shipping is transparent
Customers may never know that you have never touched the product.

No inventory costs
Drop shipping reduces the risk of you losing money if you are not able to sell the stock.

Item pictures provided
Wholesalers or drop shippers normally have pictures in their catalogue which you could use on your website.

Disadvantages of drop shipping

Difficult to make a profit
It is hard to be competitive as well as make a profit even if the wholesaler offers you a significant price below the retail price. Also as you are buying the product as a single item, you will not benefit from the bulk-buy discount.

Out of stock/back-order issues
You have no control over the products as you will not know when a product will come back into stock at the drop shippers. Customers of your website may have to experience significant delays from this.

Bad customer service
This leads to bad customer service. If your site cannot compete competitively than it should at least have good customer service, much like Amazon.

Drop ship scams
It has been known that scam companies will claim to be a wholesaler when actually they acquire their products from real wholesalers and sell the product to you at a marked up price.

Summary and advice

Affiliate schemes is where you provide a link to the merchant site. You will then be paid commission is a consumer clicks-through AND purchases a product from the merchant.

Drop shipping is where you are the retailer. When an order is placed with you, you then purchase the product from a wholesaler at a lower costs in order to gain profit. The wholesaler will pack and deliver the product for you.

Make sure you research into any company that you are going to do business with in terms of affiliating or drop shipping. Look for reviews online and go for reputable companies.


Affiliate schemes

  1. Affiliate Seeking, The Advantages and disadvantages of affiliate marketing, [Online] Available: http://www.affiliateseeking.com/ashow/47.html [Accessed 14 March 2011]
  2. Why Affiliate Marketing, Why Affiliate Marketing, [Online] Available: http://www.whyaffiliatemarketing.com/#affiliate [Accessed 14 March 2011]
  3. WikiDirect, Advantages and disadvantages of affiliate programs, [Online] Available: http://www.wikidirect.org/wikiarticle3.asp?id=3218&article=Advantages%20And%20Disadvantages%20Of%20Affiliate%20Programs [Accessed 14 March 2011]
  4. Wikipedia, Affiliate marketing, [Online] Availiable: http://en.wikipedia.org/wiki/Affiliate_marketing%20%5b [Accessed 14 March 2011]
  5. Wired, Shady web of affiliate marketing, [Online] Available: http://www.wired.com/politics/security/news/2005/02/66556 [Accessed 14 March 2011]

Drop shipping

  1. Ezine articles, The Advantages and disadvantages of drop shipping [Online] Available: http://ezinearticles.com/?The-Advantages-and-Disadvantages-of-Drop-Shipping&id=3139133 [Accessed 14 March 2011]
  2. Wikipedia, Drop shipping, [Online] Availiable: http://en.wikipedia.org/wiki/Drop_shipping [Accessed 14 March 2011]
  3. Wilson Web, Distribution Decisions: Drop shipping vs. Inventory vs. Fulfilment House [Online] Available: http://www.wilsonweb.com/wmt5/plan-4place.htm [Accessed 14 March 2011]

Useful websites

  • Amazon.co.uk, Amazon.co.uk Associates [Online] Available: https://affiliate-program.amazon.co.uk/ [Accessed 14 March 2011]
  • Webaffiliate.co.uk, Webaffiliate [Online] Available at www.webaffiliate.co.uk [Accessed 14 March 2011]
  • Why Affiliate Marketing, Why Affiliate Marketing, [Online] Available: http://www.whyaffiliatemarketing.com/#affiliate [Accessed 14 March 2011]

Please find my power point presentation here.

Keyword Research and Strategy using Wordtracker

By | February 26, 2011

Keyword research is really important for any website and in finding out your keywords and phrases you can gain a better understanding of your audience and their needs.

In order to find your keywords for your website, a keyword analysis tool would aid you. This research tool gives you the search volumes of the amount of people searching for your keywords or phrases and also gives you other related keywords or phrases that they are searching for. There are different keyword analysis tools, the main one is Google Adwords, which is free. The one I would like to write about today is Wordtracker.

Wordtracker offers a free one week trial with limited features. Monthly subscription costs $69 and yearly subscription costs $379 (pricing as of February 2011).

First of all I would like to mention about how to go about creating a keyword strategy.

Keyword Strategy

    In order to create a strategy with the most important keywords and phrases for our website, we need to be clear as to what the website is for. It will thus be crucial to write an elevator pitch which details why we are creating our website and the value of the site in terms of its business. This will give us an idea of the most important keywords that we must include in our site in order to attract those that are using those search terms.
    Next we must pick a handful of keyword and keyphrases to begin keyword research.
    We then need an indication of search volumes for these keywords, and this is where tools such as Google Adwords and Wordtracker will come into play. Also by using a keyword reserach tool, it will throw up other keywords or phrases that we may not have thought of. It is also best to look up synonyms of our keywords to see whether users may type in a different phrase to answer their queries.
    Competition analysis is also extremely important and part of the analysis should include the keywords that they are targeting and see if there are any keywords that they are not targeting.
    Our strategy will then bring all these elements together to create a hierarchy of the most important keywords for our site.

Keyword research for chineserecipesforall.com using Wordtracker

So Wordtracker is a useful tool which emulates the Google Adwords Tool. You’re able to choose between keywords from Google or from Wordtracker and in any location. I have chosen to find keywords from the Google database and from the UK specifically as I am targeting my site towards UK audiences so I would like to know the terms that they are searching for.

In terms of the results that Wordtracker provides there are different columns that come up in its results.

The searches column provide figures which show the approximate number of search queries matching your keywords that were performed on the Google search engine and Search Network during the last month, for the territory you chose.

This is equivalent to broad matched “Local Search Volume: Last Available Month” on the Google Adwords Keyword Tool.

Competition (IAAT):
Competition IAAT stands for ‘In Anchor And Title’.

It tells you how many pages for which the keyword appears in both the title tag and the anchor text of an inbound link. These are two of the most important metrics that search engines use to determine which sites should come top of their results pages.

KEI stands for Keyword Effectiveness Index.

The KEI compares the number of searches for a keyword with the number of search results.

This KEI figure will go up when the keyword’s popularity increases, i.e. 100 searchers 1000 results = 1/10, so if the number of searchers increase the resulting KEI will be higher.

This KEI figure will go down when there is more competition for a keyword, i.e. 100 searchers 10000 results = 1/100, if there were more search results (competition) than this KEI number will be lower.

Looking at both the Competition and KEI metrics can help you spot niches with high popularity and low competition.

So in the above example, we see that ‘chinese recipes’ has a KEI of 36,600, thus this is an extremely popular search term, with high competition (in relation to the search volume). So we would not rely on just these keywords to attract search visitors.

However if we look at ‘beef chinese recipes’ and ‘lamb recipes’, they both have a significantly large KEI in proportion to their search volumes with low competition IAAT. Thus they are extremely popular keywords, but with low competition. I would aim to target these in my site.

Once you have searched your keywords for these details you can see the kinds of words that you may want to include into your website as follows:

Related keywords and synonyms:

As well as giving you keyword searches that include the keyword you entered in their system, Wordtracker can give you related keywords that people are searching for (see orange column in first image above). This is useful incase you have missed a certain word that you should be targeting.

You should also look up synonyms for your keywords, which will provide a useful insight into other terms that people may use that are not so obvious.

Competition analysis

Typing into Google your keywords will bring up your competition for those keywords and also the market volume for them. Once you have one this you should:

    Check what words people are typing to get to your competitors (use Alexa.com, Compete.com)
    Check that their SEO tags are optimised with keywords
    Check their inbound links
    Check their page rank

Bringing it all together to form your strategy

Once you have researched into your keywords, your competitor keywords and the search volume for these words these will form your keyword strategy which you should refer to when creating your site. They will influence your information architecture, navigation, links, body content, title tags, meta description and meta keywords.

Please find my powerpoint presentation for this seminar here.


ENGE, E. et al, 2010, The Art of SEO: Mastering Search Engine Optimization, Second Edition, USA, O’Reilly Media
MICHAELGAASSTERLAND, 2010, michielgaasterland.com, Developing a Keyword Strategy. [Online, accessed 21 Feb 2011]
SMITH, J., 2008, Get into Bed with Google: Top Ranking Search Optimisation Techniques, UK, The Infinite Ideas Company Ltd.

Vitruvian principles: The interdependancy of firmitas, utilitas and venustas in architecture and design

By | February 17, 2011

In terms of content management we have been asked to look at our thesis projects in terms of the Vitruvian principles of Business, Commodity, Firmness and Delight.

Having misunderstood the emphasis for the presentation, I had researched into the concept of the Vitruvian principles which I will detail here briefly so as not to waste the work that I have done. I am basically stating that the original principles of firmitas, utilias and venustas cannot work independantly of each other and cannot stand alone in a design. I will then go into detail with regards to cognate and non-cognate websites.

The fundamental principles of architecture

The fundamental principles of architecture can be summarised as firmitas, utilitas and venustas which can be translated from Latin as firmness, commodity and delight.

Firmitas (Firmness): This denotes something that is well-made and has a structure.
Utilitas (Commodity): This means a design should have a function, a usage. A building’s function can be categorised into its primary space and its secondary space. The primary space will be the main function of the building (i.e. its rooms). The secondary space is what makes the building usable (i.e. corridor, toilets etc.).
Venustas (Delight): Signifies that a design must have beauty. This involves order, arrangement, eurhythmy and symmetry. For example, in a design, each component is considered separately as well as proportionally to the whole. It requires an arrangement and an adjustment dependant on its character.

Alison Barnes argues in her blog that design does not have to be pleasurable or delightful. She refers to the Berlin Holocaust memorial as an example of this. In her blog she has a problem with the word ‘delight’ as a translation of the word ‘venustas’ and she advocates that this may be too subjective a word. Rather design should be something that evokes an emotional response from the reader. It is described this way by O’Gorman:

“Architectural space is first of all utilitarian. Architectural art begins physical and ends psychological.”

So maybe the word ‘delight’ in design can mean something more than aesthetic pleasure, but something that evokes meaning to its users in terms of their own experiences.

However, it still is the case that neither of the Vitruvian factors can be independant of each other. We can liken this to the interdependancy of client, builder and architecture. O’Gorman describes it well:

“The work of the architect is the result of the architect’s interpretation of the program in relation to the client’s budget, the building’s site, and the availability of materials and structural technology.”

Thus the client provides the plan diagrams of their needs in creating a building.
The builder provides section diagrams for the structure of the building.
The architect provides the elevation, the design, which evokes the beauty of the building.

Thus neither the client, architect nor builder can pursue a creation dependently of each other. The same applies to the Vitruvian principles: there is no point having a well-structured (firmitas) building without it having a function or any beauty or meaning behind its design. Likewise, there cannot be a beautiful building without it being well-structured or having any function etc.

Delight is still debatable. However architecture is design and design, in the end, must have meaning. Wherebeit the meaning is pleasure or some other response, this will be up to the architect and the meanings he/she would like to input into their own design.

Cognate websites


Chinesefood-recipes.com is the first site to appear in Google search engine when a user enters the words “Chinese food recipes”. Thus it will be part of my cognate website analysis.

In terms of this site’s business it relies heavily on advertisements, particularly Google. The site is heavily littered with adverts and make it look appalling. The adverts inhibit its design and the site’s function as a recipe index. The lesson to learn from this site, is to integrate the use of adverts in a better way and not to make the site too heavy with it.

The site attempts, on the face of it, to achieve everything:

Cooking methods
Measurement conversions
Food articles and fun stuff
Chinese restaurant guides
Book shopping
Cooking videos
Detox diet

It is in no way lacking content. However the content is extremely text-heavy. There are very few images and it makes the content hard to read. It isn’t clear on the onset exactly what the site is for.

The site is made using XHTML and CSS style sheets and PHP. In terms of its navigation it could be a lot more succinct and clear. The front page is just littered with links of every word that a user may search for. This is possibly the reason why they are so high in their ranking on Google search.

The site uses the colours yellow, red and green and blue links, which are highly saturated, on a white background makes it very difficult on the eyes. There is no clear hierarchy in its information structure and its layout of different elements causes confusion for the user.

BBC Food

BBC are a company who provide television entertainment for the community who support it. Thus their business on their website is to present an extension to this service. In particular, their recipe index section is used to promote their television chefs and their programmes and provide a trustworthy and useful extension to their programmes.

It is all about the search. That is the recipe index site’s main function. As soon as a user enters this page, their mind is automatically in navigation mode wherebeit if they know what they are looking for or just browsing. Also in terms of usages, BBC Food provides videos, images and high quality content in a simplistic manner.

The site ensures it is coded well, with use of XHTML and Javascript and form fields for search bar. Its site navigation is excellent and clear. In comparison with chinesefood-recipes.com it still is including a lot of keywords to draw in users searching for those keywords but BBC Food does it in a clear and succinct way.

Delight is an important aspect to this page. Use of mouth-watering images to entice the user into clicking and exploring. Also arrangement and order of content is particularly important. There is a strong grid of thirds (or sixths). The use of neutral, desaturated colours in contrast with its strong images evokes a homely feel and in terms of delight its proportional spacing of individual elements provide a pleasurable reading experience.

BBC Good Food

BBC Good Food is a site which runs off its magazine business. As well as this it supports advertising from paid companies. It’s adverts are quite intrusive (not as much as chinesefood-recipes) but feels acceptable as a user because it purports to their expectations of advertising, due to the fact that they are relevant and also do not clash with the design. They also sell iPhone apps and are sponsored to advertise products on their site.

In terms of commodity they have a plethora of functions for their users. Users may register for monthly newsleters, they may rate/like, comment, add their own recipes and save recipes to their binders. They have a strong sense of a community through their ‘Latest Member Recipes’ section and their occasional ‘Star Members Recipe’. Users tend to comment on success with the recipe and suggest alternatives.

BBCGoodFood is built on a Java platform (J2EE). In terms of its navigational structure, it is done in a tasteful way albeit reminiscent of chinesefood-recipes.com text-heavy navigation, this is all imagery based.

It is just a mass of images, which are at least of high quality and for regular “foodies” to the site, it will cater to any kind of mood that one is in, in terms of food and cooking.

Use of strong colours like green, blue and brown for the headers. Again, reminiscent of chinesefood-recipes, but done right! There is a sense of hierarchy and the layout for the page makes sense in terms of the many links that are placed in it.

We must conclude that in order to be successful in terms of targeting keywords, it is important to have many links on the front page as possible to get traffic into your site and to rank highly in search engines. The way that this is done has been shown here, ranging from the bad to the good.

Non-cognate websites


Favecrafts is a site for knitting and crochet patterns alongside craft tutorials.

Favecraft supports Google advertisements. The adverts are integrated well into the design which just shows that this is possible! They also link to a crafts store of a different domain name, however they may well be connected in terms of business.

It is similar in substance and functionality to bbcgoodfood as users are able to register and save their favourite projects into their “My Craft Projects” section. They may also sign up for a newsletter and comment, rate, save and share (socially) on each of the tutorials. There is also a search bar to find a particular tutorial. The front page however is quite text-heavy in terms of its content. The design makes it slightly easier to dissect, and is only the information that is below the fold that is quite heavy.

The site is build on a PHP framework. In terms of its navigation, there is a similarity to the previous cognate sites in that many keywords are targeted in their menu. This left-hand navigation is quite text-heavy however it works well and does not cause too much confusion. So this site shows that text-heavy navigational systems can work, particularly as it is alphabetised. Although it is more essential for a recipe index site to use images to entice readers.

The site has two navigations, one that is horizontal along the top, and the other which shows categories along the left-hand side. It’s not too confusing but it is quite a lot to take in. I would avoid this on my own site. I suspect, this is done just to target keywords.

I particularly like the site’s colour scheme and its logo which makes the site seem fun. The use of the two different shades of green for its headers separates the different sections quite nicely and echoes bbcgoodfood’s site.


In order for a site to be successful it must have all aspects of the Vitruvian principles. Delight is debatable, however we have seen that for recipe index sites, an aesthetically pleasing site with high quality images can evoke a pleasurable and mouth-watering experience for the user. Alongside this, it must be well built in order to accomodate the functions that a user would require from the site.

I’ve been particularly inspired by Google’s design principles.

“The Google User Experience team aims to create designs that are useful, fast, simple, engaging, innovative, universal, profitable, beautiful, trustworthy, and personable. Achieving a harmonious balance of these ten principles is a constant challenge”

As well as this they aim to provide users with the best experience in terms of its function. Its provision for videos, images, web content, maps etc. in the quickest amount of time is something that they strive for.

Thus although the word ‘delight’ is debatable as to whether it only means aesthetic pleasure or something which evokes emotion or even something which aids function, such as Google, whatever the case, ‘delight’ or beauty is a subjective notion and in the end it is always up to the architect to interpret and design in whatever way he/she sees as beautiful.

“Delight the eye without distracting the mind”


Wikipedia.org,Vitruvius [Accessed 13/02/11]

Penelope.uchicago.edu, Vitruvius: On Architecture, [Accessed 13/02/11]

Library.thinkquest.org, The fundamental principles of architecture, [Accessed 13/02/11]

NYtimes.com, ABC of Architecture, James O’Gorman, [Accessed 13/02/11]

Blogspot.com, Firmitas, utilitas, venustas, Alison Barnes, [Accessed 13/02/11]

Google.com, Google User Experience: Design Principles, [Accessed 14/02/11]

Internet Explorer…sigh?

By | February 10, 2011

So as we are going through this course I have found that being semantically correct is crucial from the word go. No point dilly dallying on that one. As well as semantics, the methods used to write certain CSS is extremely important as well.

And although the letters IE cause panic and frustration and tuts and sighs and all sorts of bodily exhalements, I have found that although it has major limitations, it is unrelentless to you, as a coder, to be vigilant in the way you code. Which isn’t necessarily a bad thing..

Even simple things like IE misinterpreting the CSS box model and attributes like “margin-top: 5px” rather than “padding-top: 5px” can cause alignment issues in IE7 downwards where, the latest browsers will have no problem with. Also buggy 1px jumps, floating issues, flash of unstyled web pages, fixed width issues, disappearing backgrounds and the like.

As the majority of users are with IE, it is something that is crucial for us to be on top of. It’s the case that as browsers are becoming more flexible and understanding towards code, it means that coders must code CSS in a way that caters specifically for IE. For example, as mentioned, uses of relative or absolute positioning with varying margins and paddings scattered about, can cause havoc in IE where it would have no problems in other browsers.

And as I have been coding away, I actually find that there is some sort of strange logic to IE in terms of positioning and what it likes and doesn’t like.

One might say, that I’m just instinctively “working around” the bugs. But one can’t help feeling satisfied when you open up IE tester and you wait on the edge of your seat for the pages to load…and everything works!

I have included some links which I have found useful to gain a better understanding of IE and its limitations…


Internet Explorer and CSS issues

IE6 Cheatsheet

Search Engine Optimisation (SEO) Analysis

By | January 27, 2011

To help me gain more understanding of my thesis project I will be analysing food recipe sites for this SEO analysis.

1) Jamieoliver.com

Jamie Oliver | Official site for recipes, books, tv, restaurants and food revolution

Keywords: Jamie Oliver, fifteen, recipes, fish dishes, meat menus, chicken dinners, Italian recipes, how to cook, eggs, baking, traditional, cookbook, seafood, cake, Gennaro Contaldo, School Dinners, Nora Sands, pasta, risotto, Fresh

Description: Jamie Oliver’s official site with loads of recipes and Jamie’s his latest books including Jamie’s America, Ministry of Food, Jamie at Home and Naked Chef.

Page rank: 7/10

Top Search Queries: (Alexa.com, 26/01/11)

The top queries driving traffic to jamieoliver.com from search engines.

Query / Percent of Search Traffic

jamie oliver / 14.88%
jamie oliver recipes / 1.53%
jamie oliver food revolution / 0.93
jamie / 0.83%
jamie oliver 30 minute recipes / 0.65%
jamie oliver 30 minute meals / 0.62%
food revolution / 0.48%

Bounce rate: 48.9% (Alexa.com, 26/01/11)

Visits per day: 32,067 (Statbrain.com, 26/01/11)

Analysis: Jamie Oliver’s site is one in which it encompasses all his work as a tv chef, restaurant, books, products etc. Therefore in terms of his homepage there are a lot of keywords to cover the wide spectrum of his work.

In terms of keywords and phrases, there is a strong emphasis on the work that Jamie Oliver has done in terms of the density of some keywords. For example, many of his restaurants (Fifteen, Barbecoa) are repeated throughout his homepage. Also there is an emphasis on Italian food recipes and also the work that he has done for television. Looking at the keywords under the meta keyword tag, there is a focus on particular ingredients (eggs, risotto, cakes) as opposed to more general keywords which suggests that they believe that people may be searching for Jamie Oliver under a specific intent as opposed to a general one.

The above image (from Google Adwords – Keyword Tool) shows that many users search his name in addition to whatever they are searching for in relation to him.

Although they have included the word risotto I note that there is quite a lot of searches for the phrase ‘Jamie Oliver risotto’ (approx 18,000) and very little competition for this. It may be worth the site owners looking into more pages on the site regarding Jamie Oliver’s risotto recipes.

Looking at their HTML, they have a rather large navigation system (which is implicit on the homepage i.e. you must hover over the main navigational links to get to the sub-navigational links) which does cover every piece of work or food or ingredient that someone may search for. This is well thought out so that users will be directed to their homepage on a search for anything to do with Jamie Oliver.

With regard to page rank, jamieoliver.com have a very respectable 7 out of 10. In terms of improvements to this, the site should ensure more high quality sites are linking to them.

2) BBCGoodFood.com

Title: BBC Good Food – Recipes and cooking tips

Keywords: bbc, good food, magazine, recipe, ingredients, healthy, vegetarian, chef, organic

Description: With over 5000 tried and tested recipes, you’re sure to find the perfect dish. Browse by occasion, cuisine, vegetarian and healthy eating or try our recipe A-Z.

Page rank: 6/10

Top Search Queries: (Alexa.com, 26/01/11)
The top queries driving traffic to bbcgoodfood.com from search engines.

Query/ Percent of Search Traffic
bbc good food / 5.29%
good food / 3.79%
pumpkin soup / 1.13%
bbc food / 0.95%
goodfood / 0.51%
carrot cake recipe / 0.48%
bbc good food recipes / 0.44%

Bounce rate: 54% (Alexa.com, 26/01/11)

Visits per day:27,565 (Statbrain.com, 26/01/11)

Analysis: BBC Good Food is a recipe site which runs off its recipe magazine business.
Looking at their meta keywords and meta description tags they believe that there users will have a strong interest in health recipes and organic produce and have catered for this in their site.

Their site has based their navigation on images of food under the heading ‘top recipes collection’. They have correctly labelled their alt tags in their images and have made links to all their categories. They have used this ‘collection’ to encompass every ingredient that the user may search for. As you can see in the image above, it is a rather large collection and in HTML this becomes a long list of keywords or ingredients for the user to find.

3) BBC Food Recipes

BBC – Food – Recipes

Keywords: bbc, food, recipes, recipe, chef

Description: Find recipes from your favourite BBC programmes and chefs, or browse by ingredient or dish. With over 12,000 recipes you’re sure to find the perfect dish.

Page rank: 7/10

Top Search Queries: (Alexa.com, 26/01/11)
The top queries driving traffic to bbc.co.uk from search engines.

Query/ Percent of Search Traffic
bbc / 6.84%
Bbc news / 3.24%
Bbc iplayer / 2.09%
BBC sport / 1.54%
Iplayer / 1.40%
Bbc weather / 1.40%
Bbc football / 0.87%

Bounce rate: 33.9% (Alexa.com, 26/01/11)

Visits per day:8,549,171(Statbrain.com, 26/01/11)

Analysis: The BBC website is a large corporation which incorporates a lot of different facilities for its visitors. The BBC Food Recipes page is one aspect of this corporation. As we can see above their recipes page is, understandably, not one of their strongest search queries for the site.

Regarding my statistics, I am not able to gain insight into the specific recipe page, so the statistics above are purely for the entire site.

Their h1, h2.. etc. titles are well written including the words menu, recipes, diets, user recommended, cooking, favourite dishes.

In terms of their keyword input strategy on their homepage they have gone with the same technique as BBC Good Food in that they have used a categorical image navigation on their page. This then allows them to encompass their keywords quite neatly alongside images of recipes or ingredients in terms of what they believe to be the most searched for.

They should make sure that their alt tags are all correct for SEO purposes as well as for accessibility reasons.

How does genre study relate to web design and other types of design?

By | January 18, 2011

Please also find my essay as a Word document at this link.


1. Introduction
2. Genre: On the face of it
3. Genre study: The theory
3.1 A communicative purpose
3.2 Ideology/culture
3.3 The Swalesian genre model
4. Genre and the web
4.1 Influences by traditional mediums
4.2 Creation of genre for the web: Homepages
5. Web design: Homepages
5.1 Upgraded genre model
5.2 Amazon.co.uk
5.3 Blogs.com
5.4 BBC Food Recipes
6. Conclusion

1. Introduction
Genre is a theory that everyone can relate to, wherebeit in music, film, television, books or any other type of literature or entertainment. It is something that people, as an audience, intrinsically do in order to categorise the world and the many mediums and sub-mediums that are out there. Audiences automatically like or dislike a certain type of genre and so it is essential that we gain an understanding of genre as a study in design as it goes right to the heart of what the audience wants. Also genre ensures that a particular site will attract a particular audience. In this essay, genre theory will be analysed and related to the web and web design.

2. Genre: On the face of it
To classify as belonging in a genre, mediums will share similar characteristics to each other. Identification of a genre will be dependent on the way the user reads the text and their familiarity with that genre (Chandler, 2000).

3. Genre study: The theory
To define genre as categorization of texts is merely scratching the surface. As with any theory, genre study goes a lot more in depth and looks into the way texts are treated by the reader and the producer.

3.1 A communicative purpose
Genre can be described as an efficient means of communication to the reader. In designing for a specific genre, the text will infer on the reader’s past experience with that particular genre, and constantly reinforces its belonging to it as well, as attempting to engage with new elements within the text (ibid., 2000).

A way in which inference on past experience is done is through intertextuality which is where a text may refer internally to other texts (Barthes, 1975). The understanding of the genre of a text will be increased through intertextuality, rather than attempting to hark on audience’s life experiences. It gives pleasure to the audience who is able to decipher the clues pointing to that genre.

3.2 Ideology/culture
An understanding of culture and ideology can be furthered when studying a text’s genre. In terms of Marxism, genre reinforces the dominant ideology of a culture. Ideologies are basically ‘ideas that reflect the social needs and aspirations of a group, class or culture’ (dictionary.com). Genre reinforces ideologies because it is only through acceptance of the readers that a text will belong to a genre. It is advocated that ‘genres only exist in so far as a social group declares and enforces the rules that constitute them’ (Hodge & Kress, 1988, 7). Genres must purport to the understanding of the reader, and the text will fail if it does not reach this understanding.

A text must appeal to the majority in order to gain popularity. So genres ‘depends upon the complexity and diversity of the society’ in order to ‘change, evolve and decay’ (Miller, 1984, 163). One must understand the ideology of an audience in order to cater for them in designs.

3.3 The Swalesian Genre Model

Swales (1990) advocates a genre model which highlights what exactly a genre constitutes. The genre model follows three levels as follows:

3.3.1 Communicative purpose
Genres must have a communicative purpose, thus if one examines a particular genre, texts within that genre should share the same communicative purpose.

3.3.2 Functional units/Move structure

All genres must have a move structure, which will have different stages in which meaning is communicated. So in terms of the design of a magazine front page, say, the functional units of that genre would be attracting attention, detailing selected content, identifying title and so on. These functional units realise the communicative purpose of the genre.

3.3.3 Rhetorical strategies
This is the way in which each of the functional units are realised. For example, with the attracting attention unit this may be done through use of certain colours and effects. This stage of the genre model can be the most important in drawing in the reader of the text.

4. Genre and the web
It is now necessary to examine genre in relation to the web.

4.1 Influences by traditional mediums

It is understood that in terms of the Internet, genre is not as clear to define. Stein (2006) and McNeill (2005) both advocate that currently, different genres on the Internet are attempting to connect and identify with genres of traditional-based mediums. As these genres have evolved online, it has been up to the producers to begin building expectations for audiences and defining the genre (ibid., 2005). Readers play a huge part in reacting to these expectations and fine-tuning the genre to ‘bridge’ the gap and recognition between traditional print medium and the Internet.

4.2 Creation of genre for the web: Homepages
In order to analyse genre in relation to design, we will take a genre that is purely for the Web and which cannot work in traditional mediums. Homepages are a genre in themselves as they have a distinct communicative purpose shared amongst them. The way in which this purpose is laid out differs from site to site, however they all share the same aim (as with any other genre for example, science fiction films and so on). It is a genre which has been derived completely from the invention of the Internet, and has begun to become conventionalized (Askehave and Nielsen, 2005) and in this essay we will be investigating the designs of homepages in terms of the genre theory.

5. Web design: Homepages
An important aspect of any website is their homepage, as it quickly signifies to the reader the brand, its functionality and the image it is trying to portray. Askehave and Nielsen (2005) liken the homepage to a front door for any site. It is the first thing that users see (providing that they enter it in this way) and its purpose is to communicate to the reader what the site is about and also to allow exploration of navigation of the entire site.

Homepages have links with traditional mediums such as a newspaper’s front page.

“The newspaper front page also serves as a promoter and content indicator…we often see the following characteristics of newspaper discourse on the homepage as well: small summaries, key words, catchy headlines, tables, frames, attention-seeking photos, and information value attached to the placement of elements”. (ibid., 2005)

Although there are similarities with this traditional medium, the reason why homepages are completely different is due to the use of hyperlinks. Hyperlinks bring about a different feel and functionality which cannot be replicated in traditional-based mediums (ibid., 2005).

5.1 Upgraded genre model
Askehave and Nielsen advocate an upgraded version of the Swalesian genre model in which the three aspects of the model can be explored in terms of the reading and the navigating mode of the user. Due to the nature of the Internet, a ‘two-dimensional’ aspect is suggested of it, where the user moves between these two modes of looking at the net. There is a zooming-in on the text as the reader engages in reading mode and there is also a zooming-out of the text to look at the medium, where the reader is in navigation mode (see below). Both modes have their own communicative purposes.

We will now analyse this upgraded genre model in terms of the two modes and it will be illustrated with examples from Amazon, Blogs.com and BBC Food Recipes sites.

Zooming in: Reader in reading mode

Zooming out: Reader in navigating mode

5.1.1 Communicative purpose
Reading mode: The communicative purpose in terms of the reading mode is to introduce the site and entice the reader.
Navigating mode: The communicative purpose of the navigating mode is to allow exploration of the entire site.

5.1.2 Functional units/move structure
As mentioned before, functional units are the way in which the communicative purpose is realised.

Reading mode: This is the way in which the text is organised on the page. So this will be with regards to different uses of grids, colours, fonts, empty spaces in order to bring about the communicative purpose. The different kinds of functional units advocated by this upgraded model are as follows:
(Askehave and Nielsen, 2005)

i. Attracting attention
ii. Greeting
iii. Identifying sender

In order to attract attention, both blogs.com and amazon.co.uk have strong use of colour, in the headers. This then creates a familiarity and recognition with the brand.

iv. Indicating content structure i.e. main navigational menu.

Amazon has a navigational menu with sub-menus in order to make it easier for the reader to locate what they are looking for.

v. Detailing (selected) content: the author of the page must detail selected content to promote the webpage as well as to keep the reader enticed.


vi. Establishing credential
vii. Establishing contact
viii. Establishing a discourse community: this can be done with a login and signup option.

Sign up button on BBC Food Recipes

ix. Promoting an external organization i.e. advertisements.

Navigating mode: In terms of the navigation mode of the functional units this will be in the form of hyperlinks. Links bulk out the meaning of the text and create a more dynamic user interface for the reader. There are two different types of links, generic and specific links. Generic links being the navigational menu for the site and specific links like ‘read more’ which follow from a lead which introduces the information as an enticement.

Examples of specific links to entice the reader (blogs.com and BBC Food Recipes)

5.1.3 Rhetorical strategies
Reading mode: For each functional unit there are rhetorical strategies in order to realise them. For example, to identify the sender this is done through a logo with use of colour and typography to create familiarity and to identify with the reader.

For example, both of these sites have strong use of colour in their header to attract attention, their rhetorical strategy is to replicate these colours in the rest of their design to create familiarity.

Navigating mode: In terms of links there are two different kinds: implicit and explicit link realisation. The former is where links are not immediately noticeable on the site, for example, where links only become visible when hovered over through change of colour or through a sub-menu appearing. Thus the latter is where links are visible on entering the site. This can be done through icons, colour, underlining and so on.

By analysing a genre through these two modes of reading and navigating, provides a great way in which to design a particular homepage for specific users.

5.2 Amazon.co.uk

5.2.1 Communicative purpose
Amazon’s communicative purpose and its genre is as an online store. It allows exploration of its site through using explicit links to display its products and through a complex navigational menu comprising of submenus.

5.2.2 Functional units/move structure and its rhetorical strategies
Reading mode:
Amazon has structured their content in terms of what they believe their readers will most likely want to buy (here it is most viewed products, dresses and cameras).

In terms of attracting the reader, the main emphasis is on the imagery of their products. They have created it so that the images of their products have a white background, the same as the body background, so it seems to be like a shelf in a shop window, with the products really standing out. Through this, the reader immediately knows that they are looking at a store.

Also there is use of colour repetition in their layout design, logo and fonts to ensure familiarity with the brand and for readers. There is particular emphasis on its search bar being the only element with a real injection of colour on the page to which the user can immediately find and click on. In terms of search bars this is a familiar setup for readers.

Navigating mode:
For navigation, it is split into different departments. This again, is repetition of the genre of a store or shop and draws on our knowledge of this in order to communicate their purpose.

There is use of implicit link realisation in their navigation, to organize the amount of sub-sections in their site. Also there is use of explicit link realisations for their products with use of colour change when the reader hovers over the link.
In terms of enticing the reader, they have used specific links with their product images being the lead and the product title as an enticement link to the description.

5.3 Blogs.com

5.3.1 Communicative purpose
Blogs.com’s communicative purpose and genre is as an online blog. It allows exploration of the site through its navigational menu and through article leads with specific links to draw in the reader.

5.3.2 Functional units/move structure and its rhetorical strategies

Blogs have a community purpose and as a genre, is immediately recognizable. Understandably, they link quite strongly to the front pages of newspapers.

Reading mode:
In terms of the site’s reading mode, the site places emphasis on its header with use of a plain white background for the body. To identify itself as a sender its main priority has been placed on its logo as the first element that stands out. As a blog, it needs to identify itself and create a familiarity with its users so its use of black and blue in blogs.com alongside its logo achieves this.

A familiar layout for a blog, it uses a three grid layout whereby two thirds of the grid consists of recent articles and the remaining third provide additional links to further exploration of the site.

Navigating mode:
In term of navigation, blogs.com’s rhetorical strategy is to hark to the traditional medium of the newspaper and split its navigation into topics that the author believes will be of most interest to the reader. There are also use of many explicit link realizations such as the icon for the homepage and the colour change and underlining of links in the article. Interestingly, the author has used implicit link realization for its sub-menu. Only when you hover over the main navigational links do you see it alongside colour change of the tab. This breaks down the amount of navigational information on the homepage and on the face of it, is simple, in order to entice the reader into exploring further.

Use of implicit link realisations on the homepage, only on hover will it reveal extra links to be explored.

In terms of generic and specific links, blogs.com makes use of specific links in each of their articles (i.e. continue reading story) to draw the readers in.

If we make comparisons to other blog sites out there, we see this structure for a homepage time and time again. It reinforces to the reader their past experiences of blogs/newspapers/this particular medium and immediately the user knows how to act and participate in this genre.

As mentioned, repetition and familiarity is essential to belonging in a genre and communicating its purpose, however mediums must add new elements as well to push the boundaries and maintain popularity. For example, zenhabits.com and postsecrets.com are excellent examples of this in terms of blogs.

5.4 BBC Food Recipes

5.4.1 Communicative purpose
The communicative purpose and genre of BBC Food Recipes page is as a recipe index. It allows exploration of its site through navigational tabs and mainly through use of explicit links of images to entice the reader.

5.4.2 Functional units/move structure and its rhetorical strategies
Reading mode:
The site’s main emphasis is on its food links images and its search bar. There is use of monochrome colours in its design in order to enhance its heavy use of imagery, much the same as Amazon. Also similarly, the other injection of colour is in its search bar.

In terms of the reader’s experience in the reading mode, the whole idea of a recipe index is in the search. Thus there is very little written information on this page and mainly consists of generic or specific links.

Navigating mode:
This site is bursting full of explicit links and its entire page is dedicated to enticing the reader to explore the site. With its explicit links, they use simple underlining on hover to create user feedback. In terms of implicit links, there is no use of it on the page, and it makes for quite a clean user experience. Also they have used sliders to create a more interactive page.
There is however heavy use of specific links, with the image of the food as its lead and the name of the recipe as the enticement.

Thus in terms of both its reading and navigating modes, BBC Food Recipes page has a blurring of both. The reader on zooming-in, looks at the images which are also the navigational links.

As a genre of an index, it harks to a library index and BBC Food Recipes has successfully drawn on this to connect with the audience. Its use of food images and its transparent links on top reminds us of index cards and the use of sliding galleries draws and entices the reader into a more interactive search of ‘the perfect recipe’.

They have kept their search bar quite simplistic (on the face of it) in conjunction with their recipe categorisation. Thus the two-dimensional mode of this site consists either of the reader knowing what they would like to search for and using its search bar function, or through just browsing through the site’s enticing categories for a recipe. It caters for both types of readers and does not overwhelm with lists of every recipe. The excitement for the reader is in the search.

6. Conclusion
Throughout this analysis we have seen that genre is an extremely important study in terms of design. Every part of a design must purport to the reader’s understanding of that genre, else the design or project will ultimately fail. All texts must push the boundaries in terms of providing a new element to that genre but it must not divert too much away from expectations, culturally, socially and ideologically. This essay has advocated Askehave and Nielsen’s upgraded Swalesian genre model in terms of analysing genre in websites, and we have seen that its two-dimensional aspect of reading and navigating is useful in interpreting and pinpointing exactly what a user and producer may want out of the text they are reading or designing.

In terms of homepages as a genre, all homepages share the same communicative purpose and rhetorical strategies in realising similar functional units. It has been important to examine this web genre as we see that there are similarities in expectations of certain elements in most homepages. Dependant on the site’s aim, some homepages place more emphasis on certain elements than others will. However all the elements that make up a homepage are all there and the design of these elements will change and evolve, in time, upon the sophistication of the readers (Furuta and Marshall, 1996).

Words: 2999



Amazon, viewed on 13th December 2010
Blogs.com, viewed on 13th December 2010
BBC Food Recipes, viewed on 11th January 2011
Dictionary.com, viewed on 3rd January 2011
Postsecrets.com, viewed on 13th December 2010
Zenhabits.com, viewed on 13th December 2010


ASKEHAVE, I. and NIELSEN, A. “Digital genres: A challenge to traditional genre theory” (2005) 18(2) Information Technology & People 120-141

BARTHES, R. “S/Z” (1975) Cape, London

CHANDLER, D. “An introduction to genre theory” (2000) Found at http://www.aber.ac.uk/media/Documents/intgenre/intgenre2.html

FURUTA, R. and MARSHALL, C. “Genre as a reflection of technology in the World-Wide Web” (1996), Technical Report, Hypermedia Research Lab, Texas A&M University, College Station, TX

GLEDHILL, C. “Genre” (1985) British Film Institute, London

HODGE, R. and KRESS, G. “Social Semiotics” (1988) Polity, Cambridge

MCNEILL, L. “Genre under construction: The diary on the Internet” (2005) Language@Internet 1/2005

MILLER, C. “Genre as social action” (1984) 70 Quarterly Journal of Speech 151-167

STEIN, D. “The website as a domain-specific genre” (2006) Language@Internet SV1-6/2006

SWALES, J. “Genre Analysis” (1990) Cambridge University Press, Cambridge

Project Website Makeover | Biscuit-Recipes.co.uk

By | December 15, 2010

For project number two we are to redesign an existing website and report back to the client on aspects such as visual design and findability. You may find a working site of the redesign here.

I have chosen to redesign Biscuit-Recipes.co.uk.

Analysis of existing design and redesign suggestions

I believe a change of design is required for Biscuit Recipes, I will analyse the current design and my redesign suggestions as follows:


Their branding has quite a strong impact and has a ‘cookie-cutter-type-kitchen’ feel which has a relation to the site as a recipe index. However I felt that it isn’t integrated well with the rest of the site and so looks quite out of place. It is quite in-your-face and is the first element of the page that stands out.

Having researched a lot of recipe indexes (for my thesis project) I have found that many of them place more emphasis on images of their food as opposed to their branding. So site’s like BBC Good Food, Jamie Oliver, BBC Food, My Dish, All Recipes and many more actually have a very simplistic branding with heavy emphasis on imagery of recipes.

So in terms of my own design I have tried to reflect this and have created a simple branding with emphasis more on a fun and informal font face.


I wasn’t too impressed with their search feature, that being just an A-Z table of the recipes. Again, having looked at many amateur recipe sites, there are many that replicate this technique where a page may consist of a large list of hyperlinks with no organisational emphasis.

I wanted to avoid this so decided to categorically alphabetise the list with emphasis on the alphabet and so the list would be more easier on the eye. Also I created a Javascript mouseover function for the list which would show the image of the recipe when you hover over the link.

Also in terms of search bars, many of the better recipe sites (mentioned above) place a large importance on them and in terms of design, ensure that they stand out amongst the page. Biscuit Recipes does not have a search bar function, so I think this is something lacking in their site. I have designed the search bar in my redesign to stand out.

There navigation is quite small and the design of it has a steel-effect, replicating a profressional kitchen or alternatively a futuristic effect. Whatever the interpretation, the metallic shine, I felt, made the site feel quite cold.

In my redesign, the thinking behind a colourful tab scheme was that I wanted to create a fun and informal feel.

Many of the recipe sites that are also community sites (Jamie Oliver, MyDish etc) have a blog feel to them with use of topical tabs. Also as the site seems to point to an establishment of a community, I wanted to drive towards this as well. So far from being just a recipe index site, it is one that encompasses a blog, forum, tips, shop etc.

At the moment, clearly, the existing site seems to be an empty shell, full of promises. I have kept the inclusion of all their links on the premise that once the redesign is live, they will keep each section of their site active.


In the existing site, there are many adverts which take away from the content. For my redesign I wanted to place my adverts where rather than feeling as if you are being inundated by adverts, I wanted it to feel comfortable. At the moment, I have kept every link to have the same content, but on different pages the advert may change in content and position depending on the layout of the page.

Body Text

The body text is centrally justified in the existing site and makes it look as if it floating on the site. Also on their homepage they do not really have much information to introduce the site. I have reconciled this in my redesign.


Their colour scheme is blue and silver, but it seems quite bland as there is no variety. I wanted colour to be the most important thing on my site. So using colourlovers and a scheme called Surfroom2 I created the homepage of my design.

However in order to create famliarity with the brand I decided to change the wrapper-colour on every page yet still have it so the user knows they are on the same site.

I found that due to the use of a simplistic branding, this use of colour change worked quite effectively and would help to create familiarity in the branding.

Also in terms of familiarity and branding, I have included a very “quirks” such as the footer embelishment and the dashed border of the wrapper.

Analysis of findability

Statistics show that Biscuit Recipes have about 216 visits per day (statbrain.com) and has 9 SEO keywords, 4 of which are actually applicable as searches (the others are spelling errors). The keyword with the most search volume is ‘biscuit recipes’ followed by ‘chocolate chip biscuit recipe’, ‘cookie recipes uk’ and ‘afghan biscuit recipe’ (iespionage). In terms of meta keywords, I think the number of keywords here can be increased. It is questionable as to meta keywords effect in this day and age, but I think an increase in relevant key words would do no harm.

I will list my revisions of this site in terms of improvement of its SEO.

1) Excess code
I have reduced the amount of excess, irrelevant code from my HTML. This would be by using external stylesheets for Javascript and CSS. Also I have created my site in PHP so my files mainly contain content as opposed to code. This hopefully should reduce the time it takes for search engine spiders to find the content on the site.

2) Meta description
I have written a concise and more focused meta description:
“Biscuit recipes is an index site for biscuit and cookie recipes that come from all over the world. Join our biscuit community! For those that love delicious biscuits.”
Hopefully this will convince visitors to click on the site when viewed in search engine results pages.

3) Links
I have ensured all the links are actually anchor texts as opposed to graphical elements and so they can form part of the target SEO keywords.

4) Title tags
I have ensured my title tags have keywords in them so they are able to be searched for by search engines. They are under 60 words so they do not get cut off by Google

5) No underscores
Also ensured no use of underscores in my URLs as search engines are unable to search the site with them as they read the words as one long word as opposed to separate ones.

6) Robots.txt
I have created a robots.txt file with disallows those files that have no relevance to search engines. These include my includes folders and my Javascript files. This just makes sure my code is even more condensed and precise in terms of targeting content.

7) Sitemap.xml
Created sitemap.xml file which has been referred to in my robots.txt file to ensure that search engine spiders can get to it. Sitemap.xml ensures that search engines find and index pages that they may not have already.

8 ) Links to social media
I have also provided links to social media such as Twitter, Facebook and YouTube. It is up to the client to take these on and start buliding links between these sites and their own.

9) Keyword research
I have researched keywords to include into my meta keywords tags and have increased the number of them. As I have mentioned, it is questionable as to whether this would improve the site’s SEO but it’s better there than not, and they are all relevant keywords so it does no harm.

10) Alt attributes
I have ensured that all alt attributes are accurate as search engines will look for these.


I believe that my redesign of the site alongside my work on search engine optimization have improved the site considerably. I have found that having a great design will be of no use if no one can find your site! So in terms of SEO, ensuring good coding standards (in relation to keywords and the conciseness of the code) is really important to make sure that the site is findable.

Graphic Design Analysis

By | December 7, 2010

Look at the following websites and analyse how they use symmetry, asymmetry, balance, lines of unity and contrast in their design.


This site uses symmetry if you split the page in half width ways and so creates a balance with the top half of the page and the bottom half. There is use of contrast in the design as the top half uses fairly warm colours whereas the bottom half uses cool blues. So there is quite an equal balance to this design. The squares are split up with ‘invisible’ white grid lines and creates an equilibrium.


This site uses symmetry if you split the page in half length ways. It feels quite balanced on either side. Although this is the case in terms of its grid, the site feels quite unbalanced as well. This is possibly due to the content where there is the number 77 on one side and then on the other side the two striped navigation boxes stand out quite sharply. Also the use of the black and white image and the links in front of it makes it seem quite busy on the eyes and so the user is not sure where to look first or which bits of information to process first. In terms of contrast, the actual body copy uses a neutral colour tone making the two side columns stand out sharply. As a whole it feels quite busy and chaotic! It’s ‘invisible’ navigation is mind boggling! But makes you want to explore all it’s white space. I even moused over every bit of the large white space below their footer to see if their was any invisible links there too. Confusing but intriguing site!

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.

Hill Farm B&B

Regarding one of my own designs, I have chosen to look at my Hill Farm B&B site. What I did here was to use the rule of thirds to split up the content of my site. I firstly gridded my design into three, however things did not sit quite well so I split each third into two and made it into a six column layout. This seemed to work better and I could see the lines of my design. In terms of the golden section, if my body text did not run over into the fifth/sixth column and the images in the fixth/sixth column were enlarged to fill the columns than the right-hand five columns would be on the basis of the golden ratio.

Server Side Includes (SSI) with the .htaccess file

By | November 25, 2010

Hi all,

We didn’t have time yesterday for me to explain my findings on Server Side Includes with regards to the .htaccess file. So I’ll give a quick summary of my findings here. Plus, it’s a useful transition and comparison between includes in .htaccess and the PHP that we learnt yesterday.

So similarly to PHP, where you have common elements in your HTML code (i.e. navigation, footer, header) you can place these codes in a separate SSI file and link to that file in your HTML code. In that SSI file it would just be HTML coding which you want inserting. This would be instead of amending every single HTML page if you were to change your header, navigation or footer etc.

You can instead, amend your SSI file and it will affect every page that you have linked to.

The benefits of this is that you re able to maintain your code a lot better and it shortens your HTML pages.

Common examples of it in use (other than for structural elements) is for adverts on every page of your website or daily quotes etc.

To enable SSI you need to insert some lines into your .htaccess file placed in the root directory which will enable SSI throughout your site.

AddType text/html .shtml
AddHandler server-parsed .shtml
Options Indexes FollowSymLinks Includes

However I believe that some hosts do not support SSI…so you have to be careful in that regard.


My main thought is that after hearing about PHP yesterday, that PHP is lot more powerful than SSI in .htaccess. However I think this is useful to be aware of at least and does not require you to know PHP coding.