George's Blog

With the rise of web 2.0 new generations of interfaces were created allowing users not only to access web content but also to write and share their own content on the web.
Thus the user was transformed from a passive observer of the web to an active contributor enjoying the freedom to express feelings and ideas and freely publish them in various forms on the internet.

User generated content was seen as a challenge from the traditional media like printed newspaper pushing them to develop their own websites and to create new business models. And even, digital media, like Encarta, a digital multimedia encyclopedia published by Microsoft Corporation from 1993 to 2009, has been more or less displaced by users, who most of them preferred the open contents of Wikipedia which have been created collaboratively by users all around the world.

An example to illustrate the power of this new form of expression, is that during the Asian tsunami in 2004, people who experienced  and survived the disaster, were able to inform people around the world faster and with more details about the happenings than traditional mass media.

Traditional media found themselves losing some of their status and role as guards of published content but that was due to a shift which was then transforming the landscape of world wide web, made by technological advances. From a different perspective, it can be seen as Internet giving back the power to the people. A power which was never lost or gained, better described as a phenomenon which changed the users into creators. This changed was regarded as a new form of freedom.

User generated content as a term is relatively new and currently there is no standardized definition. Studies on social, economic and cultural impact are just at their beginning although the social impacts of user generated contents are very obvious.

The organization for economic co-operation and development defines user generated content (UCG) as fitting the following requirements:
1. a content which is publicly available (internet)
2. boasting a certain level a creativity and
3. content which is created outside of professional practices.

These requirements best define UCG, and in contrary to what we could expect from creating such content, most of UGC outputs are created without the expectation of any kind of profit. The amount of people generating and contributing such content in websites like wikipedia, are transforming these websites into huge databases containing invaluable information for understanding trends, needs and interests of the consumers.

But if profit is not motivating people to generate such contents then what are the incentives driving this motivation? In fact early studies showed that users are generally not motivated by profit but by various other reasons.
1. users enjoy being creative
2. users have the desire to express themselves and share their experiences
3. users want to be part of communities
4. lower costs and increased availability of tools for creating UGC.

These reasons reveal the human side of the internet and it is clear to me that the world wide web is taking a different course, a course which has been shaped actively by humans for humans carrying with it major social impacts. But any social impacts carry with them economical impacts or vise versa and various commercial companies which feared of losing revenues due to the decreased interest in traditional media forms, invested large amounts of money to provide user generated frameworks and tools. These companies mainly rely on generating revenues through advertising and by increasing customer loyalty.

Examples of how large media companies exploited the term user generated content thus expanding their status and creating a more social engaging character is the case of  BBC which created a user generated content team in 2005 with 3 staff. After London bombings the team was made permanent and expanded, reflecting the arrival of the ‘citizen journalist’. After the disaster, BBC received over 5,000 photos from viewers.

In 2006 CNN designed the CNN “ireport” project in order to bring user generated news content to CNN. CNN’s rival Fox news channel launched a similar project titled “uReport”. It was a sad realization that when disasters happen news tend to move faster between people and then the idea of citizen journalism emerged which could become a significant part of broadcast news.

User generated content was featured in Time magazine’s 2006 person of the year, in which the person of the year was “you”, meaning all of the people who contribute to user generated media such as YouTube and Wikipedia.

Classification of UGC
It is rather a daunting task to try and classify the different forms of user generated content in order to understand and apply them in our websites, as these involve more and more not only one activity but several together. For example facebook, a platform where people can at the same time chat with other people, share photos and videos or create groups on specific subjects. Nevertheless, Steve Rosenbaum
from AlwayOn a source of information for technology consumers, informs us that UGC is split in 7 groups according to their main use. First, there are the media websites like Youtube or Vimeo, where users can upload and share their own videos and further interact with other members by commenting or rating other videos. Then we have the chat interfaces where users connect with other users like Facebook and LinkedIn and develop contacts or meet new people. Furthermore, there are the websites which have as a primary activity to keep people in contact and share personal information like Flickr. People can also meet with people sharing common and specific interests, through websites like Meetup.
Next come the ecommerce platforms like ebay which harvest the power of UCG and monetize it.
To close this classification, the last 2 forms of UGC use blogs as their main layout. Blog news usually deliver more specific and personal news and blog voices which are usually famous bloggers who provide their views on different sociopolitical and economic trends.
It is much more interesting to make a brief analysis on the amount of users interacting with different UGC platforms. The main trend  is generally moving towards social networks and blogs. The most impressive fact is that, 70% of internet users are consumers of UGC and this amount will be steadily growing in the next few years.

A deeper look at the motivations and drivers of UCG.
What actually brought us to this state of user generated contents proliferating in every direction of the world wide web is of central interest in order to have a better understanding of this current state.
According again to OECD the major drivers which enabled this state are social drivers, economical, legal and technological drivers.

By social drivers we mean the digital natives. Digital natives are the people who were born during or after the expansion of digital technology. These people started interacting with digital technology from an early age, and to be more specific the term best describes people who were born during the 60s, when the digital age begun at that time. A digital native has a broader and better understanding of the concepts of technology. As we are also digital natives, technology became almost our second nature and we are often the most exposed category of people using social networks and we are easily following new trends. Digital natives enriched the english vocabulary with words like to “tweet” or  to “google”. We made technology an extension of our social lives.

Economical drivers are drivers or better new ideas on how to make profit from social networks and other UGC platforms. Over the past decade we witnessed these economic drivers and many times we took place in large corporate campaigns without realising what was driving those campaigns. Various companies tried to connect emotionally their products with their clients using UGC tools. A famous company launched a campaign few years ago and let the consumers to create their own home-made advertisement and upload their own home-made video on their website or on Youtube thus creating a significant new audience around their product. Many companies followed the same brand marketing campaign to build emotional connections with their clients. The success and the amount of money spent on each campaign can reveal the power of targeting people and expanding to new markets through specific UGC tools.

Legal / institutional drivers and copyright issues.
These drivers play major role in the development and in the right propagation of user generated content. Users must be sure that their creations – from simple blog entries to complicated web design mockups – will remain theirs. It is also rather difficult to set strict property rights to any creation as this would lead to a lower rate of sharing among users.
An intermediate solution which supports UGC and expansion under moderation is the creative commons. Creative Commons is a non-profit organization which believes in the idea of universal access to research, education and culture. But often different legal and social systems which may vary from country to country impose restrictions to this idea. Simple actions like copying, pasting and editing various resources that we perform everyday, without even noticing that in reality all these actions require by the copyright law to have explicit permissions. To achieve that state of universal access someone needs to provide “a free, public, and standarized infrastructure that creates a balance between the reality of the internet and the reality of copyright laws.”

The infrastructure which this organisation provides consists of a list of copyright licenses that create a balance between free content and the traditional “all rights reserved”.
In simple words creative commons offers specific tools which give everyone a simple way to keep their creations theirs, while at the same time allowing certain uses of their creations thus creating contents that can be copied, distributed, built upon and evolved, all within the boundaries of copyright law.

How it works
Every creative commons license helps creators retain copyright while allowing others make some uses of their work-copy or distribute, at least non-commercially.
Also license ensures creators to get the credit for their work they deserve. Every Creative Commons license works around the world and lasts as long as applicable copyright last. These common features serve as the baseline, on top of which licensors can choose to grant additional permissions when deciding how they want their work to be used.

A Creative Commons licensor answers a few simple questions on the path to choosing a license — first, do I want to allow commercial use or not, and then second, do I want to allow derivative works or not? If a licensor decides to allow derivative works, he may also choose to require that anyone who uses the work — they call them licensees — to make that new work available under the same license terms. They call this idea “ShareAlike” and it is one of the mechanisms that (if chosen) helps the digital commons grow over time. ShareAlike is inspired by the GNU General Public License, used by many free and open source software projects.

The risks of UGC.
As new web designers and developers there are a number of legal issues that we have to become familiar with if we are building websites that allow user generated content.

1. Intellectual property infringement or copyright infringement or unathorized or prohibited use of works under copyright restrictions.

2. Defamation which is the communication of a false statement that may hurt an individual business or product giving a negative image.

3. Obscenity and Child Pornography.

It is important to ensure that legal issues don’t stop people from contributing to your websites. Right UGC in place can make your website successful and make it stand out as it will become more personal and drive more users. There are a number of steps that organisations or individuals can take to protect themselves in the case of bad and illegal use of UGC. A good start is to always create an easily understood set of guidelines for the posting of UGC on your website. It is even better to use simple language or even simple visuals in order to make these guidelines better understood.

A widely-used technique is to moderate content before publication. Large organisations usually employ staff for this task. Post-moderation, where content can be referred to a moderator by other readers, can also be effective.

When extensive use of UGC is made, more sophisticated techniques to detect malicious content will be needed. In the case of online communities, it is a good idea to let users to flag inappropriate content and even moderate it.

Perhaps most important, as in all stages of web design, is planning, to have a plan of action in place on what to do in the event that the worst happens, including how monitoring is carried out.

Technological drivers.
Technological drivers are maybe the most important of the four drivers. Broadband and high speed internet connection has enabled users to upload and download
massive amount of data and users to integrate large videos or pictures to their
websites and make the use of internet much more enjoyable and interactive.

Furthermore the technological advances in the product industries as well as the multiplication of a number of electronic products in a lower price allowing people to share content ever more (digital cameras, smart phones).

Last but not least, the development of interfaces and online applications allowing users to create, post and upload content in a very easy way.

Building User-Generated Content
With the right CMS you can encourage your visitors to actively participate in the growth of your website.
Here are some famous software packages that you can find online to help you build your website:

Forum Building – Two forum software packages that are popular and widely used to encourage user-generated content through forum participation are phpBB a free open source forum management solution and vBulletin (not free).

Comments – There are various comment scripts online that you can use to encourage user participation and feedback like DISQUS. But another way you can achieve this is to add Google Friend Connect to your website, which includes a script for commenting.

Social Bookmarking – Social bookmarking is a method for Internet users to organize, store, manage and search for bookmarks of resources online. Tagging is a significant feature of social bookmarking systems, enabling users to organize their bookmarks in flexible ways and develop shared vocabularies. Pligg is a very good software to use for this purpose.

Blog – Blogging is the newest form of Internet publishing and there are a variety of ways to get new blog content on your website. The best software for adding a blog to any website is WordPress. WP has a multi-user version that is great for allowing multiple users to start and run a blog on a continuous basis.

Wiki – There are a variety of wiki software available for you to use to distribute user-generated content on your website. One of the more popular ones is MediaWiki and It’s free.

Video – kitdigital allows you to run a video sharing site.

Recommendations when launching a UGC website
If you are planning to develop a UGC website you should plan carefully its implementation:
decide on the best approach for taking advantage of UGC and the level of engagement needed,
put in place controls appropriate for your website (for example: users flagging innapropriate content) and create a simple and concise set of guidelines for posting of UGC. Have a plan of what do to in the case that your worst scenario happens and be prepare to act quickly.

I find very interesting the fact that two successful authors – Ellen Lupton and Khoi Vinh – describe grids in their books with the exact opposite words: democratic and tyrannical. Ellen Lupton in her book “graphic design: the new basics” writes that grids convey a democratic character to the printed page. She supports her idea about “democratic grids” with the fact that since grids are used to separate the page into numerous similar units, then the entire page becomes available to the designer and the edges become as important as the center. On the other hand, Khoi Vinh describes design as a method to impose tyranny on the world and since designers use grids to layout designs, they somehow impose to the world their own point of view, their own way how the world should function: “not tyranny in its classical sense, but rather tyranny on a much more modest, much more personal scale.”

Nevertheless, Grids are valuable to a designer as they help to layout interesting compositions and further develop possible solutions to a given design problem. Grids do not restrict creativity and when used in a non-restrictive way they can create designs full of tension, movement and excitement in place of static designs.

Furthermore, by separating the space into smaller units, grids can help the designer make use of the white space around an element more efficient rather than filling and cluttering the whole page with elements. In this case the message gets lost.

As a designer moves from the print to the web design as in my case, the space for laying out the elements of a page take a completely different character and meaning and what I emphasize in this essay is how the content is organised on a page and eventually how different elements relate to each other. For this purpose I chose to include examples from online magazines to draw conclusions as they make good use of both images and text.

The secret of a grid’s success is not so much its structure as the imagination with which it is used. Allen Hurlburt

How Grids are Used to Present Content.
Grids are used in graphic and web design to organize often huge amount of information and distinguish between different types of information in a clear and predictable (accessible) manner.

Answers to design problems can take various forms and the grid is a powerful tool that a designer has in creating designs with rhythm, clarity, economy, continuity through a strong structure and visual pattern, navigating the viewer in the page.

The best design solutions come up when eventually the designer finds a relationship between all the elements of the page with the underlying structure of the page – the grid. The way the designer organizes the content should respond to the overall layout of the web page; the information presented like images and type should support and respond to each other in way that support the concepts of the web page both aesthetically and functionally. Aesthetically I mean visually and functionally I mean the overall format of the web page.

Figuring out where each element of the page should be placed and presented is crucial. Images, blocks of text, headlines, navigation bar must relate to each other and communicate. A grid system is just one approach to achieve this relationship in a page. A grid system aims in solving communication problems between the various elements of the content and between the actual content and the user.

For professional web designers, responsive website design is crucial and essential in nature, ensuring that the content is accessible on devices of all sizes: from small mobile phone screens to large desktop monitors. Grid systems create scalable web designs which, when developed with responsive CSS, can adapt depending on the size of the viewing screen.

“Keep it simple. Simple can be powerful.”
The above promotional website for a printed magazine uses a very simple 2 column grid to present and organize information. The web designer uses the same simple grid system for the internal pages of the promotional website. Each paragraph starts with a bold headline and each secondary headline is identified by a different color establishing hierarchy throughout the design. The image used breaks the 2 column grid spanning the whole width of the grid. Often, we come to the best solutions when we break free from the strict use of a grid. After all, grids were meant to be broken for creativity purposes to reveal more powerful structure and combinations between the elements of the page.

How the Visual Balance Affects Understanding and Interpretation.
Without establishing a visual balance between the elements of a web page, the viewer is more likely to loose his interest in viewing the web page before he has acquired the content of the message because, simply put he will feel that something is wrong. Visual balance can help the viewer navigate through the page, like a guide talking to the viewer and saying “look at that, this is what you should be reading first”. Visual balance combined with visual hierarchy can result in better understanding of the content and inevitable the message will hit its target.

Visual balance is everywhere in the real world and when we experience it we feel comfortable and serene. But how do we achieve this visual balance to enhance communication and understanding?

One way to balance the different elements of a web page is by using a layout strongly supported by a grid system. Most web pages are built on a grid system, and this creates a form of balance for the page right away. Viewers can see the clear structure of the page, even if there aren’t any visible lines. And web pages are well suited to grid designs because of the square nature of the elements of a web page.

In this 5 column design, the designer uses visual weight to create balance. The weight of the large and black photography as background on the right is balanced by the navigation at the top left and the text with the fuchsia background. Furthermore, the whole design is balanced by the use of warm and cold colours, leading the eye from the top right corner of page with the blue text to the bottom of the page which is balanced with the use of the same blue type on the bottom left page.

In this example taken from the Creative Review homepage we can see and feel in practice the visual balance in action. The designers used a five column grid to layout the whole page but the page eventually is balanced with the use of photography (the famous Campbell’s Soup Can by Andy Warhol) and the big bold typography on the left. The underlying grid system definitely helped the designer establish the visual balance needed for the purposes of good navigation and understanding of the content.

The grid in BBC news magazine is based on a 16 column grid. The photography on the left side of the web page balances with the bigger type on the right. Furthermore, we can notice the call to action areas of the site in a combination with a dramatic use of typography. Therefore, the designer established a balance between form and function resulting in a functional and memorable web site that strongly enhances the identity of the page.

How Emphasis is Achieved.

The position of the elements on a grid system of a webpage affect the emphasis of these specific parts. In the above examples the 2 magazine promotional web sites make a bold statement of their identity positioning their logo as the only elements on the top of the webpage. The first thing that the user experiences is just the logo with illustrations and photography which come second. Both of them are using 1 column grid system forcing the user to scroll down below the fold to access other information.

In this simple case, the first element we see is the navigation bar in the first column which further stands out by the background colour, the logo is less visible with the combination of the background image and the use of the same colours. It is evident that the user experience completely changes between these 3 magazines, the first two making a strong first impression, the second example taking a more conventional approach in delivering the content.

What comes out from these examples is that the grid system used in combination with the arrangements of the elements of the page to enhance focus of specific elements, changing the user experience. It is also evident that the decisions behind using a particular grid or a particular layout are based on the target audience of the magazines.
The first 2 magazines aim at a more artistic audience which is evident in the use of typography, photography, illustrations and a more loose grid system. The third magazine uses a more conventional approach to design either because of the target audience or the messages they want to communicate.

Emphasis here is achieved in several ways. The typographic logo of the magazine spans 2 columns, is huge and bold and holds its own spatial zone and there is a good contrast with the background. The big margins above and below of the content as well as the yellow colour expanding in large amounts around the design are used to focus attention on the body of the website.

A variety of columns can be used to present information, depending on the amount and the complexity of the information. Flowlines in graphic design define horizontal alignments from the top of the page. Within this 1 column grid the designer used in a effective and simple way image and typography to present information in a very accessible way.

But, when using a grid system, one of the best ways to draw the user’s eye as Mark Boulton suggests in his book, is by not placing that element strictly on the grid. A loose placement on the grid will make it stand out against its strictly positioned neighbours.

In this example, the designers positioned the logo of this online fashion magazine well off the grid achieving emphasis in a way to enhance the magazine’s brand image.

Grid systems provide answers to compositional problems. They exist to help. But sometimes, it’s useful  that we break free of the grid to provide emphasis, importance, hierarchy, visual interest or increased usability. We design grids to help us with the layout. It shouldn’t be a rigid tool that we can’t change.

In this website of a free online magazine to download, the 3 column grid system makes easier the navigation through the page. There is also a good use of white space which allows the eye to move comfortable from one section to another. The upper portions of the grid system define a spatial zone for the branding of the magazine. Also columns 2 and 3 form a spatial zone for the latest issues part of the page. In this case the grid system in combination with white space is used to accommodate and set a clear hierarchy that users can navigate easily.

Structure and Legibility.
Good use of typography and legible text blocks should always be on the first priorities when designing and laying out a web page. Good use of typography means a good combination of fonts, how well the different text blocks and different information are identified, headlines having their own identity and good and generous use of white space.

Good typograpghy attracts the attention of the reader and good contrast and distinctive patterns of the text can be achieved by carefully placing the element of typography on the page.

If the page is overloaded with heavy text without white space around blocks of text or lack of white space between lines, the only thing that the readers will see is a big grey block. Making things uniformly bigger or smaller doesn’t always help. If everything is bold, then nothing stands out.

When the content is mainly text like the example above, typography is the tool you use to organize information on the page. The “Web Style Guide” informs us that the first thing the reader sees is not the title or other details on the page but the overall pattern and contrast of the page.

The repeating patterns of typography (see example above of an internal page of the same magazine) established through carefully organized pages of text and graphics supported by a grid system, in this example a 5 column grid, help the reader to establish the location and organization of the information and increase legibility.

Furthermore, margins and white space creating visible or invisible lines, define the reading area of the page by separating the main text from the surrounding elements like advertisements. Margins ease the reading experience and carefully design of margins and other white space is particularly important in web page design because web content must coexist on the computer screen with the interface elements of the browser itself as well as with other windows, menus, and icons of the user interface.

When these elements are used consistently in the design, they provide unity throughout a site by creating a consistent structure and look of pages.

They also add visual interest by contrasting the positive space of the screen (in our case text) from the negative white space. Empty space although empty and not carrying any message, it’s the tool that will carry the message more efficient enhancing legibility within the page and it’s as important as any other element on the page.

Knowing how to manipulate this empty space outside, in and around the content will not only give the users a better experience, but also will lift the product in a new perspective enhancing brand image and identity.

Structure and Usability.
Usable Web sites simply mean web sites that work for the viewer and encourage repeat visits. Usability makes the readers wanting to return to the same site.

Many times when we have to present huge amounts of information, we inevitable create complex grids to present the information that decrease usability and there’s the danger the grid would become so complex that it will not be appealing to the user. The message will fail to reach the target audience.

Mark Boulton advices that a good rule of thumb when designing a grid is to keep it simple but comprehensive and above all usable. There are many different styles of page architecture, which often depend on the actual content of the page, but there are more general rules which should be applied to any page, such as keeping the most important information “above the fold” – so users don’t have to scroll down to use any navigation for example.

Having a good site structure, means having a clean and consistent hierarchy to the site and good page structure, so that the viewers understand the importance of different sorts of information on the page. A good structure gives the correct choices to the viewers, in very obvious ways.

The grid system – the skeletal system of our web page – will create the foundations of this structure providing the basics upon which the visual elements of the website will be arranged. This structure will provide unity between sections.

Let’s take for example this online magazine because of the huge content it has to deliver and examine its structure. Although the navigation is huge and overwhelming it stands out at the top of the page providing a sense of position inside the site. Jacob Nielsen, a web usability expert, says that a good navigation system should answer three questions: “Where am I? Where have I been? and Where can I go?”. Furthermore the content is organised in a clear and simple way providing at the same time call to action buttons. The design supports the brand through the consistent use of typography and colour schemes and a good branding strategy such as this will reinforce user’s impression of the site. Finally, it provides forms for feedbacks from the users for interaction.

Structure and Visual Accessibility.

Mike Cherim in his blog makes a nice exploration into what is called visual accessibility. Using visual clues to enhance accessibility means a combination of layout, readability, structure, usability, style, and clarity. Designing with visual accessibility is to take use expectations into consideration. It means delivering the content as the user expects to see it and find particular pieces of information without any difficulties like a contact page.

So how do you improve a site having visual accessibility in mind? One easy way is to open up the content spatially and reduce the content on each page by leading the user down a greater number of avenues organized in a greater number of layers.

He draws a nice analogy between the structure of the content and the river delta. “It’s what they do already, it’s what most developers do, but that site offers way too much in one shot on any given page — the river delta concept needs to be broadened and expanded considerably.”

The downside of his suggestion is that the pages on the actual site will double and the number of page requests will also double, but bandwidth consumption shouldn’t fully double and most users would have an easier time with the site. It would be more usable, better organized, and the content would be clearer. As he concludes he mentions that there would be more white space and it would be easier on the eyes.

Inherent Effect on Image and Branding.
Branding is more than a logo, it’s an entire guide to how the company should visually appear on a website. All the elements must be appropriately positioned on the grid considering various factors like the size of the grid, columns, typography, colours, target audience and accessibility. Professional websites that support well their branding need to give to the viewer clues to the context and organization of the site considering that a viewer might access the web page on different media.

A well organised content makes the web site look and feel professional and that immediately attracts attention communicating the product with the design and the viewer.

A common interface problem in web sites that can hurt the credibility and the branding of a company is the poor structure of the content and the lack of any sense of where you are within the local organization of information. Finding your way to a particular piece of information must be done in an intuitive way.

Clear navigation allowing the users to be able to return easily to the home page, consistent typography and colour schemes, clear headings and subheadings creating an identity that tells users they are within a specific part of the page, and above all good structure based on a well considered grid system can give users confidence that they can find what they are seeking without wasting time. Besides that, using a grid system can result in visual consistency which is essential when supporting a brand image and identity. That means that we set the foundations and appropriate structure to a successful design solution. A visitor who is viewing one page and moves to the next must be able to recognize it immediately as part of the same site.

Choosing a grid system that supports this visual continuity and the suitable visual design for a company also affects the site’s perceived credibility. Penny Mcintire in her book “visual design for the modern web” mentions a study by a Stanford university that supports this concept: “The number one factor by which people actually judge Web site credibility was by their first impression of the visual design…If it doesn’t look credible or it doesn’t look like what they expect it to be, they go elsewhere. It doesn’t get a second test”.

In order to enhance brand image and identity  a grid system must be carefully chosen that best creates the appropriate solution for a given brand.

In graphic design when you want to upscale a brand and adapt a more sophisticated style then you add white space and use a more loose grid system allowing elements to breath. The same applies to web design.

In this example a lot of white space is added around the logo of the magazine. The 5 column grid system, in various occasions is broken with professional photography and text to communicate a more modern design approach uplifting their brand identity.

Mart Boulton suggests that asymmetrical columns-using an odd number of columns- can create an imbalance and therefore can create tension in a layout and eventually create more interesting designs reinforcing the brand image of the company. He concludes that using a square as a compositional base can result in a balanced layout, but the danger is that the resulting design will have no movement and therefore it will  be more difficult to lead the eye around a layout that has a strong symmetrical base.

My inspirational reading list:

Design elements – Timothy Samara
A practical guide to designing for the web – Mark Boulton
Designing with web standards – Jeffrey Zeldman
Making and breaking the grid – Timothy Samara
The principles of beautiful web design – Jason Beaird
Visual design for the modern web – Penny Mcintre

The content of the website is particularly rich. There are literally hundreds of wonderful antiques and I find the unique selling point of the site very clever and strong to set the foundations for a start of a successful online business. The USP is that the antiques are collection items from 6 unique art movements: art nouveau, British art nouveau, gothic revival, arts and crafts, anglo-japanese and aesthetics movement. All that means that the site can attract people who love art and want to buy artworks besides people who are looking to buy antiques.

The whole content should be organized around these 6 art movements and then organize the items of each movement in specific categories like tables/lighting/chairs/artworks and so on. That also means a very complex structure.

The menu should provide a link (antiques) to a page which provides a quick preview of each category based on the art movement and the items which are offered. From there, a user can pick a movement and view the associated antiques or artworks. It would be a good idea to provide a brief information about each art movement and its characteristics. This idea can be better illustrated in this example:

Later I decided, that providing that link would not benefit the user or make the structure of the page easy to navigate. That would actually make the user confused as in the sidebar I placed a search field and the different categories of antique furniture. The sidebar serves as the portal to the content of the website. Besides that, everything seems less cluttered.

The advanced search field provides the ability to search for a particular antique from a specific art movement or choose a designer or manufacturer.

I have also included quick links to collections of chairs, tables, lighting and more. In that way I provide to the new user various links to the items which are listed in case the user doesn’t have a particular item in mind  and he can decide by looking at the them.

By providing all these links in the homepage an experienced user can search and find what he is looking for and a new user can have many options to choose from the site or quick search for a particular piece.

The other links on the navigation are: special offers, services and restorations, about us, contact info and a link to a project called the arts and crafts eco project inviting people to participate if interested.

I decided to use a simple CSS slideshow in the body of the page showing 6 images from each art movement. Later it was replaced by a simple jquery slideshow.

Optimizing a site means structuring the site and creating search content in such a way that the site is optimally positioned in the search engines.

Generally search engines have to figure out which websites out of millions websites are the most suitable to present in their search results and it’s done basically in 2 ways: by looking at the text on the websites and by looking at the links pointing to the website. Of course there are many other criteria that search engines look at like keywords and where these keywords are placed in the site (e.g. URL, headings text, body text…) or even keywords in the links pointing to the site. Unfortunately most of the criteria are kept secret. We should also keep in mind that the SEO field is constantly changing but the foundations of the SEO remain pretty constant.

It’s better to think SEO before you design the website but in many cases SEO is done after the site is finished and fortunately in most cases we can modify the site to make it more search friendly and see huge improvements.
There are today only 2 important search engines: google and bing. Yahoo gets searches from bing and other smaller search engines get results from google. That means that doing well in ranking with google and bing means that you are doing well with sites that get their search results from google and bing.

Artistic Antiques and SEO
The only way to improve the SEO of this page is to actually redesign the whole site. But lets forget SEO for a moment. If the site looks unprofessional and ugly and it does, it conveys to the users that the business is run by amateurs and they will eventually hit the back button even though the content is really good which in this case it is. But that’s what users do and they won’t change.
Also considering usability, this site is quite confusing to the user, links are everywhere scattered in the homepage and many of them are pointing to the same page.

Search engine index check (google)
type in google: “site:puritanvalues.co.uk” or the URL you want to check. In this search google will tell you how many pages has in the index for the specified site. This can be useful if you have 50 pages on your site but only half of them appear then clearly the site has a problem. It could be that google is having problems getting all the pages or you have so few links in the specified site.

Finding keywords for http://www.puritanvalues.co.uk/

keywords
Keywords are the foundation of SEO and if you don’t understand the keywords of the site you want to improve you can’t promote your site through search engine optimization. It’s keywords that connect users with your site and you must do an analysis on the keywords of your site in order not to miss important terms that people search for.
One popular keyword analysis tool is google adwords. It was designed to be used by pay per click advertisers but it’s popular with SEO people too.

I set the search to be conducted only in the UK and it seems that the most frequent searches for antiques are: antiques, selling antiques, antique jewellery and antique furniture. All these keywords can be associated with the particular website. When I searched for artistic antiques which appears in the h1 heading of the site the results were disappointing with only 10 searches globally. Maybe a way for a better SEO is to associate the word art with antiques further deeper in the site and not in the h1 tag.

From an SEO perspective content means text and there are some page elements that won’t help much with SEO like images, flash animations and pdf files. Images are completely invisible to search engines and even worse is to replace text with an image in strategically important places like in header. It’s always good to use h1 in the header and use image replacement techniques to add text to an element which has to be an image.

Changing the URL?
The name of the company is puritan values and except from antiques the company might be doing business in other areas. But if the goal of the particular page is to promote their business of selling antiques on the internet or at least promote their selling antique business, it’s a good idea to start creating a branding for this particular part of their business and start linking the name of their company with antiques and art. The URL should reflect this goal. And it’s always a good idea to differentiate directory names from file names. In that way google can better understand the structure of the site.
For example: http://www.puritanvalues.co.uk/stock.htm could be http://www.puritanvalues.co.uk/antiques-stock.htm. And http://www.puritanvalues.co.uk/newariv3.htm could be http://www.puritanvalues.co.uk/antiques-new-arrivals.htm

Title Tags
Search engines use title tags for ranking purposes and as link on their search result page as an entry to the website. The title tag is intended to describe the content of the page and if search engines find keywords inside a title tag they will assume they are important.
Current title tag of the website:<title>Puritan Values specialising in The Arts &amp; Crafts Movement</title>. This title tag reflects nothing from the content of the website which is about antiques. Each title tag of the different pages of the site should reflect the content of that page and generally the same title tag for all pages inside a site should be avoided. The title tag should not be longer than 60-70 characters including spaces.

Beginning a title tag with the name of the company as in this case is a bad idea as you really want to include good keywords at the beginning of the title tag. Also always include words which have some meaning connected with the content of the page.

A better title tag for this website homepage would be “Selling Antiques-Art Nouveau, Arts And Crafts, Gothic Revival, Art” or “Selling Antique Furniture And Art From Major Art Movements”.

I didn’t include the company name in the title tag, after all if someone is searching for the company specifically they would’ve typed the name of the company. If it is important it can be included in the description tag.

Meta tags
These are little pieces of information stored in a wabpage but hidden from the user. The most important from an SEO perspective is the description meta tag and keywords meta tag.

Description meta tag
It describes the content of the page and used to provide text to search results. Only 130-140 characters will be displayed.
It has a direct impact on the user, a call to action and encourage the user the click on the link. Search engines look for keywords from this meta tag and if no keyword to be found they grab text from the body where they found the keywords.

The meta tag of my site I redesign is: <meta name=”description” content=“Arts & Crafts Movement at The Dome Art & Antique Centre, St Edmunds Rd, Southwold, Suffolk IP18 6BZ, Tel:01502 722211 Fax:01502 722734 Mob:0966 371676, e-mail: sales@puritanvalues.com”>

No keywords are included in the description and in fact nothing from this information informs the user about the content of the page.
A better desciption meta tag would be:Selling Antiques From Art Nouveau, Arts And Crafts, Anglo-Japanese, Aesthetic, Gothic Revival Movements, Art From 1850-1950.Restorations.
Also i wrote the text in title case, it makes it much easier for the user to pick up words.

Keywords meta tag
Google stated that it doesn’t do anything with keywords meta tags. The question what is the use of the keywords meta tag is frequently debated in the SEO community.

Page content and structure
The homepage is layout in tables and SEO experts as far back as “SEO” has been a term for page optimization have pointed out that websites rich in the use of tables and nested tables, ranked very well with major search engines. With the introduction of CSS, tables began to be described as outdated, and all but the most determined devotees of pure HTML coding began to make the switch. Cascading Style Sheets (CSS) are easier to write, and cleaner to use, requiring less code to do the same job, and are usually less susceptible to being corrupted by sloppy coding. For the SEO crowd, CSS offered methods to “trick” search engines, and became the preferred method of page design. Today, CSS is recommended because it is easier to use.
table cells are outlined in red.

Headings.
Always try to add keywords in your headings.

Images.
Add keywords in the alt attribute of your images. Also consider using keywords in image file names.

Navigations.
Some navigation techniques block search engines and are invisible to them. For example a navigation menu designed in javaScript will be created in the browser and that means when a search engine requests a web page from the server the navigation bar is not going to be read from the server. The basic idea is that any part of your page which will be created running javaScript most probably won’t be read by search engines. Plain XHTML and CSS will be read by the search engines. If you design a navigation with javaScript is always a good idea to provide search engines other ways to find their way through the site like adding links at the bottom of the page or a site map.

Google page rank
Google PageRank for the puritan values is 2. The only good news is that the site can be improved and at least is listed in google.
Alexa
Global traffic rank: 2,534,872 and 13 sites linking in.
Website Grader The site reports a grade of 45/100 for www.puritanvalues.co.uk. The number means that of the millions of websites that have previously been evaluated, their algorithm has calculated that this site scores higher than 45% of them in terms of its marketing effectiveness. The algorithm uses a proprietary blend of over 50 different variables, including search engine data , website structure, approximate traffic, site performance, and others.

The website puritan values specializes in artistic antiques mainly from arts and crafts movement and art nouveau. Also the site provides information about some of the designers of each movement.

The website is very rich in content but completely unorganized. It’s a mess.

I don’t know from where to start and where to end.
The designer’s products are not linked with the designer’s profiles so if you are particular interested in one designer you are unable to find easily their products or if you are interested in a design period let’s say art nouveau you cannot directly find the associated with that movement antiques.
I felt lost and frustrated while I was trying just to figure out what kinds of antiques the owner sells as I was scanning tens of webpages.

Eventually I found the navigation at the bottom of the page, but it didn’t help me orientate in the site.

Clearly a site with such huge content needs to provide to the user a search box. And in this case, at least 2 are required. 1 to allow the user to search a particular kind of antique (for example table lamp) and 2 if the user is more “advanced” he can search for a designer and find products associated with that designer or products of that design movement. Also the owner sells replicas and reproductions.

I think a good solution to that mess is to provide a search box with advanced options:
allow the user, in the first step to type and search for a type of antique and if the user wants to search more advanced, should provide additional options to check or uncheck design movements, choose a designer or a manufacturer, or replicas and reproductions.

In addition to the search box, the content should be organized in various simple categories and provide those categories as a menu below the search box in case when an unfamiliar user with the subject (like me) wants to see what the site offers. Categories like: lighting/dressers/fireplace/kitchen/chairs and many more. I haven’t visited all the pages on the site but from the first 3 I counted 15 different categories so the menu could be really long.

The main menu could be limited to 3 items: about us/services, find us and new arrivals. New arrivals option could be used from regular customers who just want to see what’s new in the collection of antiques.

The site also needs a corporate identity and a logo must be designed. The company also celebrates “25 years specializing in artistic antiques” and that could be used as a slogan welcoming the user.
The main content area could be used for featured objects or for new arrived antiques for recurring visitors or for antiques with reduced price to attract the attention of new visitors.

Typography/colours/backgrounds must be very carefully considered to convey the appropriate feel and look to the user and a deeper research must be carried out on the various design movements and the antiques that the owner deals with. I would consider light typography in combination with very good readability as the site offers a huge content. Also antiques items visually are very “heavy” and I wouldn’t want to over-design the homepage with different fonts or rich colours.

As a graphic designer I found absolute positioning to be the answer to many of my layout problems I was facing.

And then it became my biggest problem.

When i first started studying about how you can position your elements in a page I said to myself: finally all my problems will end with absolute positioning. You can create a layout quite easily: by using values for top, right, bottom and left, you can position every element exactly where you want it! And that was my intention: to have complete control over the look of my web designs.

And then without much knowledge on how elements relate to each other and how the visual formatting model works, I starting using absolute positioning. Things got complicated and I was actually left in a position without any absolute control on how things look.

At the beginning everything seemed great, my layout looked great on my pc, at my window size and the text size I had chosen, but as soon as I started playing with any of those variables different from mine, things started going absolutely completely wrong.

Let me show you an example:
my layout on my screen as I wanted it to look.

notice the slogan next to the cup. It collapsed when I started resizing the text in my browser. Not a great sight right?

That paragraph was absolutely positioned in my layout, again trying to control my design without fully understanding the implications when not considering how absolute positioning really works.
This reason why this happens is very simple: absolute positioning takes elements out of the normal flow of the document and do not affect other elements which share the same containing box.

That means that absolutely positioned elements although they have a very well positioned point of view, have no awareness of what’s happening around them. Absolute positioned elements- in our case the slogan- does not move in relation to other elements but rather in relation to the values I have set for top, left, right and bottom.

And in most cases in which CSS newcomers (lime myself) use absolutely positioning to place various elements, the container in which these elements are placed is the body itself, so when the body resizes, you get the same problem. A tragedy.

How can I take back the control over my designs?

Simple. First understand how different positions work!
But in general, work as much with the normal flow of the document as possible. Let the elements naturally position other elements that come after them.
Second, let the floated elements come to save the day. Although Floated elements are also taken out of the normal flow of the document, the content will flow around the outside of a floated element, which is not the case with absolutely positioned elements. You can also use clearing to have content appear below the area of the float.

That’s why floated elements are much more flexible than absolutely positioned.

by observing small details around us/Paul Bennett.

1.http://www.youzee.com/

Good typography doesn’t mean that is has to be complicated or fancy, good typography has to be reader friendly, inviting, direct. Simply put, typography must be simple. Like this website.
Typography and images are the two of the most important tools of visual communication. Lines, borders, bad web fonts (don’t use them because they are free if they don’t serve your purpose) or dramatically size changes will distract readers. Every bullet or line must serve the communication of the design, if you decide to change font, you must have a reason. The reason because it looks nice, it does not count. The designer in this case, kept the whole concept very simple. He used only one font, Helvetica and when he wanted to stress a word or to make it stand out from the paragraph, he used italics. That’s it. Images and typography work together in a perfect relationship supporting each other.

2.http://www.aigany.org/

When you are setting up the typography of your page, don’t forget to consider microtypography and macrotypography. Microtypography has to do about readability, word-spacing, letter-spacing and line height. Aspects that directly affect the effort a user puts to read a block of text. The designers of this site very carefully decided about the font they were going to use. They kept it simple by using only one font because the website is full of rich in color and typography images and they didn’t want the site’s typography to clash with these images. Paragraphs can be read very easily with no effort by changing line-height and adjusting it to the needs of the page. Also they carefully considered the color of each paragraph, heading and navigation. The chosen colors: blue and red -warm and cold- balance the whole emotions of the design creating “hot” areas that need more attention and “cold” areas that need to stand out less from the other elements.

3.http://www.kutztown.edu/acad/commdes/

In this site the designers chose to use a font for the navigation that is not web safe. Web safe fonts are fonts which were carefully designed for screen design/web design. There are only a few of them which look good on a screen but when you decide to choose a different font, make sure it works well. It has to work visually with the other elements of the page, making it part of the whole design. Most of the fonts which are free for use do not work well on screen and consider twice whether you will use it or not, and if you do decide to use it, consider other factors like word, letter spacing and color. In this case, the font looks very graphic but works well with the feeling and purpose of the page.

Typography is a huge topic and from my personal experience it needs years of practice to actually learn how to appropriately use each typographic element in your design.
When I think the typography of a design I tend to use one basic rule and try to use it when I choose my fonts and typefaces. The rule is simple: each typeface is an extension of the meaning and messages you want to send through your designs. Typography is part of the visual “structure” of your design, like good HTML coding results in good webpages, the same applies in typography: good typography supports your design in every possible way, visually aesthetically and most important semantically. Good typography simple makes you feel like home. Bad typography simply makes you scream.

http://www.arngren.net/

There aren’t many things to mention about this website. Maybe to delete everything and start over again! What a mess!

From a typographic point of view, the same applies too. Obviously, there is no visual hierarchy, the developer mixed everything together in every possible way although he mainly used one font. It’s very difficult to set a hierarchy even with one font if you don’t have a clear view of the structure of your website. The problem in this website is not only typography but the whole structure, it feels that from moment to moment it’s going to collapse. Visual hierarchy in typography is like hierarchy in HTML code, you set your headings in h1 code because they are more important and they must stand out more than h2 headings. Also visual hierarchy maintains the order in your website and makes the whole design organized, which is directly related to the efficiency and effectiveness of your website. A user must clearly identify which part of the site are headings, navigation, links and others. Nothing of that is employed in this website. You feel lost.

http://www.wandasbelgianwaffles.com/

Although visual hierarchy is more established in this website, the whole feeling of the typography fails to deliver to the user the appropriate messages and meanings. In the case of a Belgian waffle page the least you expect from the typography is to be delicious. But again the designer failed to deliver the feeling, making it feel and look flat and lifeless. The typography on the navigation is too small, the mission statement of the company is anything but original ( always from a typographic point of view), the menu is too cluttered and the the font which the designer used in the logo is not appropriate to be used in the text of the menu. Many typefaces simply don’t work in small text sizes and if you decide to use the same typeface, you must carefully consider leading and kerning of each word.

http://www.martinsburgpd.org/

Typography should also convey some level of authority, trying to control the different elements of the page and empower some and to remove power from others. Like the police of the visual hierarchy of the page trying to force its laws for the sake of legibility and readability. The designers of the Martinsburg Police Department webpage do not seem to be familiar with this simple and logical aspect of typography. Although police is an authority protecting life and property, the typography of their webpage is rebellious and resistant to every typographic rule. I can count 4 different typefaces but I’m sure with a better observation you can discover more. Maybe using different typefaces they wanted to show their support towards diversity and multiculturalism but still it fails to show through the design. It’s better to stick to one font and alter its size, stroke weight and style, in that way you set the foundations of communicating your message easily and clearly. In any case, my message to them is to be aware of font communication.

1.http://www.angelfire.com/super/badwebs/

This is a funny example how different visual elements and bad coding can result in a disaster. This website was designed specifically to demonstrate how to avoid these mistakes. As for the colors, I think no words can describe the ugliness of this website. Clashing color combinations, low readability resulting from the wrong choice of background/text color, colors that do not convey anything that has to do with the actual content, are among many other mistakes. Color must not only be part of the visual design but also has to connect with the actual content of the webpage to convey the right messages to the user.

2.http://www.dpgraph.com/

I don’t think there is something wrong with the colors of this webpage. The problem is how these colors were used, and they were used in the wrong way. The animated background is way too busy, leaving no air for the content (the most important part) to breathe and stand out. Everything collapses under the wrong combination of background and foreground colors.

3.http://www.fabricland.co.uk/

In this website, colors clash with each other, especially purple and yellow. The particular color combinations make the site look actually hostile to the user and there is no visual balance between those colors. There isn’t a “resting point” for the user to focus and the colors make it really difficult to read, almost impossible. It feels like the colors are ready to jump out of the screen and attack the user!