Subdomains vs Subdirectories

Comments Off

Posted on 30th May 2012 by Iana in Uncategorized

A decision to use either subdomains or subdirectories may arise when a company is looking to implement and integrate a live blog to their site. They would toss over blog.mycompany.com or mycompany.com/blog. Both are very different and treated very different. The first option, blog.mycompany.com is a subdomain and is seen as a separate domain independent of the root domain, mycompany.com. On the other hand a subdirectory like mycompany.com/blog is basically a folder that is on the same root domain. It is treated the same as the root domain but just a categorizing folder. It is like a label to say everything with this subdirectory is similar in a certain way. In the above example if we decided to use a mycompany.com/blog everything in that directory would be a blog post.

From a SEO perspective subdirectories are much better as they are seen as folders within a root directory and will share the hard earned page rank and link juice. The page rank and link juice diminishes as you go deeper into sub directories so it is best not to create too many directories within directories. At most I would recommend going no further than 2 subdirectories deep. Subdomains are treated separately to their root domains and is considered a different site altogether.

Recommended times to use subdomains

  • Completely different information or product – You may choose to use a subdomain when you have a website that has multiple different themes, ideas or distinct product lines. This is a good way to separate content and organize information in a logically and clear manner for users to interpret. An example of a use of a subdomain for this purpose is news.google.com. Their news search is a completely different product that they offer so they have decided to host it on it’s very own subdomain.
  • Multiple listings in SERPs – With subdomains it is possible to have your site rank multiple times for a single query. Google will display a maximum of two URLs from the same domain for any given query. With subdomains you are able to rank more than twice and potentially saturate the SERPs.Remember search engines treat subdomains as being separate so it is possible to rank more than twice for keywords, especially brand related searches. SEObook does an excellent job with this for the keyword “SEObook”. They use subdomains such as tools.seobook.com and training.seobook.com.
  • Target Particular Keyword – You may want to use a subdomain if you are looking to aggressively target a particular keyword. For example if you run a pet store and you want to try to rank for the keyword “dalmatians” you may set up a subdomain – dalmatians.petstore.com. You will need build quality links to this new sub domain preferably with the keyword, dalmatians as the anchor text. With the appropriate resources you are able to become more competitive for keywords that you target with multiple subdomains.

Recommended times to use subdirectories

  • For smaller sites – Subdirectories are more appropriate for smaller sites as it keeps all content in one place and just categorises them by basically putting them  into folders.
  • Keep all page rank and link juice – Probably one of the strongest arguments to using subdirectories is all content shares the same page rank and link juice from the root domain. In the short term it gives the content in subdirectories a much better chance of ranking. Any link building to the content within subdirectories benefit the site as a whole. Subdirectories allow site to grow in authority much faster
  • Site Organization – Subdirectories are a good way to organise content on a website. Subdirectories allow you to group similar pieces of content or information. It is similar to a folder structure on a computer and can be treated/used in a similar way.

As you can see both subdomains and subdirectories are treated very different by search engines and have completely different effects on SEO. In most cases subdirectories will be most beneficial as you are building authority and strength to the single domain with all your efforts however there are times when subdomains just make more sense.

Resourse: http://www.seomistry.com/2011/03/02/subdomains-vs-subdirectories-what-is-best-for-seo/

Delight Crit

Comments Off

Posted on 26th March 2012 by Iana in Uncategorized

Moodboard and mockups http://ianakhomenko.co.uk/delight/

Subscription sites (extended)

Comments Off

Posted on 18th March 2012 by Iana in Uncategorized

Subscription website publishing is to charge for access to premium content on the Internet. Or in very simple terms, a subscription website is a website that has pages of content that are only available to subscribers.

It is the digital equivalent of the traditional magazine or newsletter.

In practical terms, a paid subscription website has two parts:

  • The first part is the free area. This usually focuses on persuading prospects to become paying customers. The free part can just be a long list of benefits, or can be samples of premium content that visitors can read so they know what is in the members area.
  • The second part is the premium content, which is password protected and only available to paying members.

People visiting the site usually have to register their details online in order to be provided with a user name and password to get access to the member-only information. The content is usually articles, but may also be news and views, video clips, audio, games, online radio stations,course material, an image library, access to a forum or downloads such as ebooks, music or software.

Subscription can be free or paid.

On a free subscription web site the site owner provides access to their premium content in exchange for a persons contact details. The goal of these sites is usually to build an email newsletter list through which other products and services can be sold. Getting personal details is also a way for the site owner to monitor an individual’s activity in the member’s area. This is particularly important on forums or on sites where people can leave comments. If a site owner knows who is leaving comments they can ban people who are unpleasant, argumentative or rude.

On subscribing, members receive a password that allows them to login to the private member area for as long as their subscription is valid. The length of membership varies from site to site. It can be as short as one hour or as long as a year. Very often, membership is sold as a rolling monthly subscription.

What are the most popular subjects for subscription or membership websites?

On the web, with its global reach, any subject can become a profitable business.

1. Weight Loss, Fitness and Exercise

Diets and fitness are evergreen subjects. They will always find a willing audience happy to pay for advice.

www.weightlossresources.co.uk

2. Health

Closely aligned to #1, health is becoming an important subject for information and membership sites. They cover topics such as dealing with children with illness, coping with your own illness, vitamins, mental health, etc.

www.patient.co.uk

3. Starting a Business (including a Home-Based Business)

Starting a business has always been popular in the magazine and print newsletter world. This popularity has now transferred to the online world. Some membership sites deal with part-time businesses working from home, such as making money on eBay. Others are more professional, helping entrepreneurs put together business plans and raising funding.

www.whatreallymakesmoney.com

4. Make Money from an Existing Business

Making existing businesses more successful is a rapidly growing area of online publishing. These sites enable business people in the same industry to share tips, tricks and opportunities to build their business. These websites are often far more practical and down to earth than industry associations.

www.runningrestaurants.com

www.designandthrive.com

5. Internet Marketing

Internet marketing has become a sector in its own right, with dozens of membership websites emerging over the last five years. They look at every niche marketing subject including SEO, SEM, social media marketing, pay per click, etc.

members.blogsuccess.com/new/

www.marketingsherpa.com

6. Making Money from Investing

Newsletters with share and investment tips have been around for a long time. Now many of them are moving online. There are a few very important advantages from being on the internet. These include the ability to provide real-time updates, interactive charts, discussion forums where members can discuss tips and archives of trading information so members can look back at previous recommendations.

t1ps.com

www.fool.com

7. Improve Your Personal Life

The subject of dating and relationships continues to grow as an important market sector, with many huge sites turning over millions of pounds. uDate.com has 6,000 new members join every day while Friend Finder has over 6 million registered users. Introductions are a sector dominated by the big players, but there are still a lot of opportunities for subscription websites in related subject areas.

www.meetmymatch.co.uk

www.eharmony.co.uk

8. Learn How to…

These are sites that educate and train amateurs and enthusiasts alike to pursue a hobby or improve their skills. It could be needlework, fly-fishing or digital photography.

www.flyforums.co.uk

www.thephotographyinstitute.co.uk

9. Moving to…

These are sites about moving to a new place or country, usually a sunny climate. Over the last few years, this has become a very popular subject.

internationalliving.com

www.travel-rants.com

10. Lifestyle and Religion

Websites that are communities, centred around a kind of lifestyle or religious belief attract strong and loyal followings.

johnshelbyspong.com

And of course the websites with an Adult Content!

Adult content sites make more money than all the other categories put together. This is a huge industry with staggering revenues, but it’s a tough place for new entrants to get started.

Successful Subscription Sites

www. ConsumerReports.org

 

Consumer Reports has one of the world’s largest subscription sites with over 1 million members. They started their subscription service in November of 1997 and members pay less than $30 per year to access their content. ConsumerReports.org is the website of Consumers Union, an independent, nonprofit testing and information-gathering organization. Members get unbiased opinions about the usefulness of almost every product or service.

www.carfax.com

Carfax.com receives more than 1.83 million visitors each month and services the needs of more than 23,000 automobile dealer subscribers. Car Fax makes buying a used car as risk-free as buying a new car by backing every Vehicle History Report with the Car Fax Buyback Guarantee. Car Fax is the best protection against buying used cars with costly hidden problems.

www.thestreet.com

Thestreet.com provides the serious investor or trader daily market analysis and specific, action-oriented investment and trading ideas. They don’t list their number of subscribers, but were listed in Consumer Content Reviews top 25 subscription websites in 2001.

www.getloaded.com

This site boast of having over 80,000 members that pay $35 per month for this in the trucking industry. They match truckers and people looking to get loads transported from one place to another.

www.secretstotheirsuccess.com

Secrets to their Success highlights successful home-based internet entrepreneurs. They also give site reviews, tips, and strategies to help you start an on line business.

It is important to consider all pros and cons of a free membership versus a paid membership for the business model.

Benefits of a Free Membership:

Free memberships have hidden benefits. People love free things, and they are very likely to sign up as a member if they are receiving something for nothing on a regular basis. For example, one might have a PLR (Private Label Rights) article membership and the free membership provides people with 5 free articles per month. If they enjoy this, they could then have the choice to upgrade to the paid membership.

Benefits of a Paid Membership:

Obviously, the main benefit is that it is a regular income earner, whenever each member’s subscription is due. Paid memberships can provide with the funds to outsource a lot of the work involved to bring new content to members. It can also allow the expansion of membership marketing horizons by investing in advertising and promotion.

Benefits of a Combined Free and Paid Membership:

As mentioned above, the free membership can be the method employed to have people sing up. They can then be presented with the option of upgrading to the paid membership in order to receive more content or higher quality content (depending on what type of membership the site is running).

So which is the best model?

Ultimately the combination option can be considered the best choice for most membership marketing situations. It provides the best of both worlds by encouraging people to sign up to receive content for free, and also to upsell them to the paid membership.

Naturally, every situation will have a different requirement, needing the assessment of the situation before making a decision. Before even the start of making a membership site, one must research whether there is a market for the products. Then set a target to acquire a certain number of new members every week or every month. To lower the cancellation rate, make the free membership highly attractive by over delivering. As long as people are members of the free option, it is possible to stay in constant contact with them and show them the benefits of upgrading to the next level of membership.

The free version is simply the front door that new members take. In order to keep them in the house, delivering quality content on time is vital. Pricing the membership is another factor one must spend time considering. By assessing similar memberships the site can be priced competitively.

Membership sites provide the ultimate recurring income model. These have the ability to bring continuous income on a monthly basis while helping the build up of good relationships with the members, resulting in a highly rewarding experience for both owners and the members.

In fact, no one is sure where the web is going; this undeniable shift away from free content will certainly make life more difficult for the Googles of the world who rely on free content to fuel their search engine. Consumers may turn to company’s like Apple for their media, who adopted the “paid content” model early on by making content available for small fees through iTunes and more recently showing consumers how convenient it is to access a magazine or newspaper digitally for a small fee on their iPad.

The Nielsen Company asked more than 27,000 consumers across 52 countries if they will pay for online news and entertainment they now get for free. As expected, the vast majority (85%) prefer that free content remain free. Yet there are opportunities to be found in the details. Indeed, when asked to focus on specific types of content, survey participants are more willing to at least consider paying for particular categories, especially if they have done it before. Online content for which consumers are most likely to pay—or have already paid—are those they normally pay for offline, including theatrical movies, music, games and select videos such as current television shows. These tend to be professionally produced at comparatively high costs.

Compensation conditions:

Whatever their preferences, consumers worldwide generally agree that online content will have to meet certain criteria before they shell out money to access it:

  • Better than three out of every four survey participants (78%) believe if they already subscribe to a newspaper, magazine, radio or television service they should be able to use online content for free.

  • At the same time, 71% of global consumers say online content of any kind will have to be considerably better than what is currently free before they will pay for it.

  • Nearly eight out of every ten (79%) would no longer use a web site that charges then, presuming they can find the same information at no cost.

  • As a group, they are ambivalent about whether the quality of online content would suffer if companies could not charge for it – 34% think so while 30% do not; and the remaining 36% have no firm opinion.

  • But they are far more united (62%) in their conviction that once they purchase content, it should be theirs to copy or share with whomever they want.

Despite the growing consensus that the media may only be able to generate appreciable online revenues by charging consumers for content, there is little agreement on just how to do that. Companies are experimenting with a range of payment models, from full service subscriptions to individual transactions, or micro payments have proved cumbersome to implement in the past. But a more manageable system may be no more enticing. Only 43% say an easy payment method would make them more likely to buy content online.

Regardless of what systems they choose, media companies will almost certainly not abandon advertising: and consumers will doubtless still see ads along with paid content. For the 47% of respondents who are willing to accept more advertising to subscribe free content, that may be tolerable. Yet it will probably not sit well with the 64% who believe that if they must pay for content online, there should be no ads.

Newspapers have been implementing subscription systems (also known as “paywalls” on their websites to increase their revenue which has been diminishing due to a decline in print subscriptions and advertising revenue. While subscription systems are used to bring in extra revenue for companies by charging for online content, they have also been used to increase the number of print subscribers. Some newspapers offer access to online content including delivery of a Sunday print edition at a lower price point than online access alone. Creating online ad revenue has been an ongoing battle for newspapers – currently an online advertisement only brings in 10-20% of the funds brought in by a duplicate print id. It is said that “neither digital ad cash nor digital subscriptions via a paywall are in anything like the shape that will be needed for newspapers to take the strain if a print presence is wiped away.” According to Poynter media expert Bill Mitchell, in order for a subscription system to generate sustainable revenue, newspapers must create “new value” (higher quality, innovative, etc.) in their online content that merits payment which previously free content did not.

Data on subscription content – top challenges, revenue sources and marketing tactics.

Paid content publishers must navigate the challenges of rapidly changing technologies and an ongoing recession.

Top challenges: Subscriber acquisition and retention, competition from free sources

Challenges to Paid Subscription Publishers by Type

Acquiring new subscribers is the top challenge for all marketers. When the economy slows, sales of subscription content take a hit alongside lots of other products.

Subscriber retention is also a significant challenge for most marketers – with one interesting difference: B2B (business to business) marketers focused on online products are likely to report subscriber retention as a top challenge. Online content and data services for the B2B market are often seen as mission-critical information that can be more easily integrated into customs’ day-to-day job functions than a print product.

The proliferation of blogs and social media has introduced hundreds of “expert voices” to virtually every niche of publishing. Consultants and thought leaders from related businesses have found these media to be effective channels for branding themselves and their companies, as well as for generating leads and public relations opportunities.

Publishers with an online component can combat these free sources by providing a mixture of free and paid content on their websites. Using free content, such as blogs or video, or providing a tiered subscription model that lets nonsubscribers access some information from your site, provides a way to demonstrate publishers value to potential customers. It also gives the publishers a channel for upsell-marketing to paid subscriptions.

So if all the content is offline or behind a pay wall, the publisher should consider ways to provide some access to visitors who aren’t yet subscribers.

Conversion rates are declining

It appears that some fraction of the money that’s normally spent on alternative information products, such as attending conferences and subscriptions to hard copy publications, is being moved online. Subscription Websites are viewed as an inexpensive, useful alternative.

Unfortunately, that movement is far from a zero-sum game, and Web revenues rarely make up for what’s lost on the print side. But diversifying a product lines remains a crucial way to ride out volatility in its market.

B2B publishers face declining revenue from core product

Newsletter subscription sales and advertising revenue remained the major sources of revenue for B2B publishers of offline and online products. But differences emerged when B2B publishers were asked whether revenue from specific products was increasing, declining, or staying the same.

B2B publishers with an online focus reported revenue gains in several areas. Among the biggest gainers:

  • Site licensing — 72% reporting an increase in revenue

  • Consulting — 63% reporting an increase in revenue

  • Audioconferences/Webinars — 52% reporting an increase in revenue

  • Content licensing/Syndication — 50% reporting an increase in revenue

However, B2B publishers with an online focus reported declining revenue from several important product lines, including:

  • Magazine subscriptions — 75% reporting a decrease in revenue

  • Newsletter subscriptions — 64% reporting a decrease in revenue

  • List rentals — 63% reporting a decrease in revenue

  • Conferences/Seminars — 57% reporting a decrease in revenue

By contrast, B2B publishers with an offline focus saw slim revenue gains overall. The only areas of growth these publishers reported were in:

    • Audioconferences/Webinars – 53% reporting an increase in revenue
    • Subscription websites – 50% reporting an increase in revenue

B2C publishers face even bigger revenue declines from core products

Paid content providers in the consumer world are taking a harder hit than B2B publishers in the current economy. That trend may reflect the proliferation of free alternatives for many types of B2C content.

B2C marketers reported revenue declines in key product areas, such as:

  • List rentals – 65% reporting a decrease in revenue

  • Newsletter subscriptions – 62% reporting a decrease in revenue

  • Advertising/Sponsorships – 50% reporting a decrease in revenue

  • Subscription websites – 44% reporting a decrease in revenue

Marketing budgets shifting from offline to online – but be careful<

The shift from offline to online marketing, and from branding to direct-response campaigns, is apparent. Nearly a third of publishers are taking an aggressive view toward their online marketing budgets compared to only 6% who say the same for offline budgeting.

Before following the crowd, it is helpful to keep several things in mind:

  • Marketing shouldn’t get cut to the bone

Studies dating to the Great Depression have correlated increased or stable marketing spends with faster recovery and growth. As enticing as it is to cut marketing expenses, you may be doing so at the long-term expense of your business.

  • Offline impressions are inexpensive

Maintaining a strong brand in a downturn can distinguish you from the majority of companies who are laying low. Agile companies have used downturns to gain share and market position on former industry leaders. One way to take advantage of the troubles facing publishers is to leverage the inexpensive impressions that are available.

  • Don’t forget all online brand marketing in favour of direct

While the Internet lends itself to the direct and measurable, brand marketing remains an important element. Many companies have found that when they moved too radically toward the greener pastures of paid search and email, while cutting brand marketing, their direct marketing got more expensive on an acquisition basis. Brand marketing drives those searchers, email subscribers and even Twitter followers.

A mixture of online and offline marketing tactics receive high rankings

The display represents marketers’ take on several different marketing tactics:

  • The size of each bubble corresponds to the number of marketers using the tactic

  • Where the bubble lies from left to right indicates that tactic’s contribution to revenue

  • Where the bubble lies from top to bottom indicates the percentage of marketers reporting “good” or “very good” ROI for the tactic

Combining online and offline messaging within campaigns can enhance response rates – particularly in higher-priced or complex sales, where one touch is seldom enough to produce a conversion.

Landing in the middle of the pack are popular marketing tactics, including:

  • SEM

  • SEO

  • Telemarketing

Marketers still unsure of the value of social media marketing

When it comes to social media, we have barely reached the stage of knowing what we don’t know.In the chart above, it is seen the percentage of respondents using a given tool that report that they are unsure of its efficiency.

In many cases that figure far outpaces the percentage of those who have an opinion on ROI. This is exemplified by Twitter, where half of the respondents using the micro-blogging tool don’t know what effect it is having.

Testing is essential to weather the tough economy

Online Tests Rated

Offline Tests Rated

Providing great content alone isn’t always enough to withstand a recession. Continually improving the methods used to attract and retain subscribers allows one to make the most of the marketing investments. That means continued testing of even small elements of the marketing and conversion process, such as landing pages, email subject lines, and offer copy.

References

http://www.subhub.com/articles/subscription-or-membership-websites-top-10-subjects

http://www.squidoo.com/what-is-a-subscription-website

http://en.wikipedia.org/wiki/Paywall

http://en.wikipedia.org/wiki/Paid_content

http://www.marketingsherpa.com/article.php?ident=31280

 

Grids in webdesign – critical essay

Comments Off

Posted on 25th January 2012 by Iana in Uncategorized

Introduction

The aim of this essay is to illustrate how grids are used in web design based on the designs of a number of hotel websites. Grids are an established design tool and I will come closer in this essay to the theory of grids and their benefits for the web. This is a large topic and I will not be able to summarize everything. Instead, I will attempt to illustrate here, using a number of hotel websites, how grid system theory can be put into practice.

 

Definition

“A two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.” — Wikipedia 

The grid, an invisible structure, is used to put together all the elements within a web page. Grids should never be obvious to the eye, but the effect of the discipline imposed by a grid should be seen by the placement of elements on the web page. The grid also determines the width of column texts, repeated placement of elements, padding around imagery, word spacing, line height and other related design elements. A grid’s main goal is to produce a more readable and enjoyable web page design through creating a connection of unity within a design, which in turn makes web page content flow better. Alex White’s Elements of Graphic Design explains the use of unity through a grid:

“Unity in design exists where all elements are in agreement. Elements are made to look like they belong together, not as though they happened to be placed randomly. (…) So, without unity a design becomes chaotic and unreadable. But without variety a design becomes inert, lifeless, and uninteresting. A balance must be found between the two.”

Designers in every walk of life use grids as a guarantee for positive element positioning. Therefore, the importance of grids goes beyond web and graphic design, to almost every profession where any form of design is implemented. It has become almost professionally vital to use grids in all modern design practices.

 

Module as a unit of grid

Growing up in the Soviet Union, one of my interesting memories from childhood was the cartoon 38 parrots. It showed a group of animals trying to measure the length of a python. Initially none of them could come up with an unit of measurement. At last, the parrot arrived and offered to measure the python in parrot length, i.e. how many parrots would fit into the python, which turned out to be 38. This was an example where the parrot ended up being a module.

We can of course find more serious examples of modules. There has been a famous saying of Protagoras from the times of ancient Greece “Man is the measure of all things”. When the masterpieces were built in Athens and elsewhere, door sizes were measured in shoulder width, and the height of the ceiling was measured in terms of human height. Here, man was the module system. When the head of a man was taken as a module, then there were 7 heads in a typical man’s height. Moreover, the key points of building rules could be identified at distances that were multiples of this module. So, the module is a unit of measure set to give proportionality, and the grid is a system of proportions.

 

What are the aims of a grid?

  • To work faster and more effectively as the time spent on geometrical positioning of the element on a mock-up is reduced
  • To achieve balance and proportionality such that all elements on a mock-up are proportional among each other
  • Acceleration and gauging, the unification of all items. Once developing a grid, we do a platform for the future decisions. The clever guides consist detailed description of modular grids. In web design we can make a general mockup for whole website and individual parts for singular variants.

 

Grids in graphic design

In the context of graphic design, a grid is an instrument for ordering graphic elements of text and images. First of all when talking about grid systems we have to separate form and function. We have to think about aesthetics and proportions as a result of considered construction. Ratios and equations are everywhere in grid system design.

Examples of design with grid and without

Relational measurements are what defines most systems, from simple leaflet design to the complexity of newspaper grids. The designer has to become familiar with the ratios and proportions in order to design a successful grid system; from rational ratios such as 1:2, 2:3, etc. to the irrational proportions based on the construction of circles, such as the Golden Section 1:1.618 or the standard DIN sizes 1:1.14146.

A grid design that can be applied to several different designs without altering the form is termed as a grid system. An example of this would be a grid system for books. A book contains many different page types – title, sub-title, preface, main text etc. A grid system enables the designer to use only one grid on all the various page types. A second example would be a website that has a homepage, a section index, a category index, and an article page. A grid system provides consistency across these pages or sections.

The canvas for a grid system is determined by the type and size of the media: a book, magazine, signage, or a website. The benefit of designing for more traditional media forms is that the canvas will remain constant. It will not change its shape nor size. However, one of the major complexities in web design is that the user has a choice of multiple platforms and multiple browsers that are not always compatible. Beyond that, the user also can resize his/her browser window to the screen resolution. Designing a grid system for such variables is a challenge.

In order to successfully design a grid system for the web, we have to look at a best-case scenario and graceful degradation. In 2006, Jakob Nielsen wrote on his famous Alertbox: “Optimise web pages for 1024 x 768 pixels”. At the time, 60% of all computer screens were set at 1024 x 768 pixels. By 2009, that number was down to 30%.

The simplest grid is a block grid, also called the “manuscript grid,” which represents roughly marked area – unit. Modular grid in 960.gs or Blueprint CSS is a column grid and consists only of vertical divisions or columns. Another type of modular grid has both vertical and horizontal separations. What is created between the intersections is module. The last type is called the hierarchical grid. In this grid type positioning of the blocks is irregular, yet intuitive.

 

Golden ratio

Grids can be simple with the same size of modules, or complicated with non-linear proportions of module sizes. Here, it is important to remember about proportions, the most famous of which is the Golden ratio. It is known that most aesthetically pleasing designs, works of art, objects and even people have the same proportion in common. Specifically the Golden Ratio, also known as the divine proportion, is designed by the Greek letter Ф (phi).

As stated in Wikipedia, two quantities are in the golden ratio if the ratio of the sum of the quantities to the longer quantity is equal to the ratio of the larger quantity to the smaller one. The golden ratio is an irrational mathematical constant, approximately 1.61803398874989.

 

 

Twitter home page based on Golden Ratio

 

The Golden Ratio and grid based design in web are interrelated. As an example, if we want the website to have total width of 900px, we divide that by 1.62, so the main content bar will be 555px and the side bar 345px. On the other hand, if the total width of the website is 960, then main bar will be 593px and side bar 367px.

 

In a simpler version of this grid, width and/or height is divided in thirds.

 

The Wit is a web site of the hotel in Chicago which is designed by using a simple grid also called the Rule of Thirds. 

 

Elements of a web page

There are some basic elements of a web page and many ways to organise them to get a properly functioning and aesthetically pleasing result:

  • Container (contains all other elements) is used to hold all page elements, which can be arranged in many ways. There are two types of container: liquid, which expands to fill the width of the browser window, and fixed, where a specific chosen width doesn’t change regardless of browser window size.
  • Header is more generally used while referring to the top section of the web page where logo, navigation and tagline are located, but it is not really a specific element of the web page.
  • Logo is a graphic mark of emblem used for identity and branding. The logo is usually placed within the header and aligned left.
  • Navigation is one of the most important elements of web pages. It should be easy to find and to use. Hence, it is almost always located within the header or at least close to the top of the web page. There are two types of navigation :

- horizontal, where links are displayed inline

- vertical, where links are displayed as a vertical stack

  • Content is the element of the page where visitors look primarily and main focal point of it.
  • Sidebar is the element with secondary content (e.g. advertising, site search, subscription links, contact methods etc.)
  • Footer is the last piece of content located at the bottom of each page of the web site. The footer is the area that many web users expect to find the “fine print” – legal information such as “term and conditions”, “privacy policies”, etc.
  • “Whitespace” is any area of the web page that is not covered by typography or other content, but it its as important to a good web page design. Whitespace helps to guide the visitor through the content, creates page balance and gives a good sense of content separation.

 

Use of grids in web design on the example of some hotel web sites

A number of hotel websites below provide an understanding of how grids are used to present content, visual hierarchy and user guidance, how the layout can be used to give credibility.

 

a. Trapp Family Lodge

www.trappfamily.com

The Trapp Family Lodge is a winter resort catering primarily to the ski tourists. The grid design for the website is based on 3 equal 300 px wide columns. Total fixed width of the body page is 907px. The three main horizontal divisions contain the header (including branding and navigation), main content space and footer.

The use of Lucinda Grande as the primary font and the colour palette results in a website that feels pleasant and family-friendly, which is the target market for the resort. The main emphasis of the site is on visual display of the hotel facilities, surroundings and attractions.

Above the fold

The logo of the hotel is presented on the top-left corner of the webpage and is presented as an image, i.e. can not be clicked to transfer to the homepage from anywhere else. Brand identification is achieved through the prominence and placement of the logo.

The menu bar also contains brief description of the tabs. The choice of the navigation font colour, matching the colour of the crown in the logo, further helps in brand identification. Navigation is split into two levels: one shows the benefits of choosing the Trapp Family Lodge hotel, and the other gives general information about the hotel, newsletter subscription option and a photo gallery.

As this site has a lot of content, different information and promotions, search option on the top is useful to quickly access the most relevant information for the visitor. On the homepage, the text and links to important pages are well written.

The emphasis about the attraction of the hotel is achieved through the aesthetically shot photographs on the slideshow, which has the look and feel of a photo album.

Call to action – easily accessible booking form on the home page. However, the website does not have a contact form, the only contact information is within the footer.

Below the fold is the footer which includes the address and legal information about the site.

The professional design, attractive picture gallery, well-written description and easy to use booking form give the website credibility.

b. Mosaic House

www.mosaichouse.com

Mosaic House is a hotel and shared accommodation service in Prague. The website is built using 16 column grid, uses Arial as the main font and the fixed body width is 960px.

Above the fold

The logo is placed on the top left corner and by clicking the logo from any of the pages, the visitor can transfer to the main page instantly. The placement and emphasis on the logo results in strong brand identification as it the first noticeable object on each page (our view flows naturally from left to right, top to bottom similar to the way we read).

Choice of languages on the top right corner is easily accessible.

The menu, with a number of sub-categories, is placed alongside the logo on the top part of the page. The sub categories help to direct the visitor to more specific area of interest, facilitating the access of different information without the use of search button.

Call to action

The booking form is in colour R:198, G:00, B:112, hex #C60070 and the brightness contrasts nicely with the mostly white container background and dark photo gallery. Also, the booking form colour palette is in sync with the logo design.

The placement of the contact information just below the booking form is intuitive and easy to access.

Testimonials are placed on a highlighted area and linked to independent review website Tripadvisor, which enhances the credibility of the brand identity.

Attractive photo gallery helps to share views of the hotel and the city.

Additional information about the hotel and facilities are presented up the fold (on my screen resolution of 2560 x 1440); however the visitor can access the details only through clicking on the “Read more” button. Making the images and texts hyperlinked would have been preferable.

Below the fold

Lots of information about the city and the events, making the site a one-stop portal for a new visitor to Prague. The personal touch of including the picture of the blogger further improves credibility.

Social media connection is presented with Facebook fan page highlighted and additional connection to Twitter, Flickr and Tripadvisor on the footer.

c. Hotel Terra
www.hotelterrajacksonhole.com

Hotel Terra is located in Jackson Hole, one of the premier ski resorts in USA. The design is smart and simple and uses pleasant, eco-friendly colours that amplify the understated elegance of the hotel. The logo of the hotel is on the top left corner, which is clickable and the white font stand out nicely on the green background.

The whole page is visible on my screen and hence, none of the information is below the fold.

960px fixed body width, floated to the left. The design uses 5 column grid, where the first column is for branding and navigation menu and the rest are for the content with image gallery.


The navigation menu is on the left and structures the pages creatively with all the categories starting with R. The lack of a search button is not a big handicap due to the extensive navigation menu, which is accessible from all pages.

The body is dominated by the image slideshow, which is arranged using multiple grid type. The text used under the tag h2 below the image gallery works well for search engines.

Social media links (Facebook, Twitter, Tripadvisor, Flickr and Youtube) are on the footer section.

Call to action

The navigation menu is followed by a link to a video on the left column, which stands out due to the colour contrasts. There is another call to action on the top right, above the image gallery, that directs visitors to the booking form page. However, it is less noticeable that the video link.

d. Atlantis the Palm

www.atlantisthepalm.com


The Atlantis is a group of luxury hotels with branches in the Bahamas and in Dubai. The first page makes good use of flash intro to split the traffic by visitor type. Once visitors reach the main site, they see beautiful images and a clear next step: to make the reservation.

Above the fold

Language choice is on the top right corner on the main page as well as on the other pages. As Dubai is positioning itself as a travel hub between east and west, the diverse choice of languages cater to people from a wide number of countries.

The width of the flash header is fixed 1200 px and does not resize to the size of the browser. The menu bar is aligned to the rest of the body and is 960 px wide. This creates a mismatch up the fold view, which I found to be distracting.

The grid type used to design the page is made of 4 columns. It uses white space and images to avoid complicated navigation and present a more engaging interface.

Large choice of social media connections improves the credibility by allowing the visitor to access independent reviews.

www.atlantisthepalm.com

Call to action

A number of special offers presented using flash on the main page entice the visitor to make instant reservation. The normal booking form is just below the special offers, but is somewhat drowned out by it.

Below the fold

Four videos give the visitor insight into different aspects of the hotel. Additional information can be found on the high footer on a blue background, which relates to the sea resort nature of the hotel.

Conclusions

A logical layout that is more attractive can be attributed to the use of grids to define the page layout during the initial design phase. In basic terms, a grid is just a regular series of lines and boxes that define sections of a page. Usually, the page is defined into a set number of columns, the simplest and most common being the three column layout. However, the page can be divided into 6, 8, or more columns as well, where the elements may span two or more columns. This enables the designer to create a variety of options for laying out a page.

Yet another option is to use columns of unequal width. The Golden Ratio, a mathematical ratio that has been used in designs since ancient Greek times, is a popular ratio for this type of layout. Use of this ratio ensures a natural and harmonious design.

In web design, it is difficult to control the height of a page. Text shapes often change as the user has the freedom to change the text size in their browser, or the page content is modified. For that reason, horizontal gridlines are rarely used in web design.

Grids are a standard way of organising thoughts visually, from small parts to overall, and makes layout decisions easier. The understanding of how to create harmonious arrangements based on grids allows the designer to communicate better with the user. According to Mark Boulton, the use of grids results in a layout design that is of regular and verified proportions, leading to a pleasing web page.

Sources

Bibliography

  1. Mark Boulton “A practical Guide to Designing for the Web”, 2006, Mark Boulton Design LTD, Penarth
  2. Josef Muller-Brochmann “Grid systems in graphic design”, 1996, Ram Publications
  3. Patrick McNeil “The Web Designer’s Idea Book, The Ultimate Guide to Themes, Trends and Styles in Website Design”
  4. Gavin Ambrose, Paul Harris “Basics Design 07: Grids”, 2008, AVA Publishing
  5. Kimberly Elam, “Grid systems: principles of organizing type”, 2004, Princeton Architectural Press

 

Websites

  1. http://net.tutsplus.com/tutorials/other/the-golden-ratio-in-web-design
  2. http://en.wikipedia.org/wiki/Golden_ratio
  3. http://www.greatmathsteachingideas.com/tag/golden-ratio
  4. http://www.thegridsystem.org
  5. http://www.postroika.ru/design

Project 2 – website makeover

Comments Off

Posted on 14th December 2011 by Iana in Uncategorized

For our second project I have chosen to redesign a website for St Francis Persian Rescue. This is a website about a small independent cat rescue in the UK which specialise in the rescue and re-homing of Persian and other long haired breeds.

http://www.stfrancisrescue.co.uk/

According to http://www.prchecker.info/ from 13.12.2011 the Page Rank is: 2/10

The website was last updated on 11 November 2011.

Global Rank 9,937,884

Top Queries from Search Traffic

1 st francis rescue 28.31%

2 persian cat 19.79%

3 persian cat rescue 16.74%

4 persian cats 8.87%

5 persian rescue 7.04%

General

Currently the website does not have a logo or any other identity. Navigation bar is on the right side whereas it is found that navigation is more effective when it is placed on the left. It feels more natural to look for navigation there. External advertisings are placed on the left now.

There are 38 images on the website (http://marketing.grader.com/site/www.stfrancisrescue.co.uk) and none of them have alt tags.

Social

Some of the internal pages have the same page titles that start with the company name. According to grader.com only 20 pages are indexed by search engines. Visitors come to the website fewer than 1.5 times per month on average, visit fewer than 2 pages each time and spend less than a minute.

Analytics

The website doesn’t have software to measure effectiveness and has 0 unique visitors per month.

Images are visible to search engines, and alt tags are an easy way to tell search engines what a page is about. So I added alt tag to all images on the pages. By creating more content it becomes easier for visitors and search engines to find a site. Every web page has a potential to rank well in search engines and draw traffic from other sources, like social media sites and the blogosphere. Blogging and activity in other social media are great ways to add interesting content to a website and to get more traffic and leads. On the bottom of the page I added link to the groups of rescue on facebook and twitter and to a channel on Youtube.

In “cat friendly holidays” section there are 11 external links to other websites and 4 of them appear to be sponsors of the rescue.

Navigation bar doesn’t have a division into the sections.

I came up with rough designing of the logo. That should be combination of a cat and a homely feeling.

In the overall colour scheme decided to use grassy, green palette (to go away from dull blue colours used in original design and so loved by cats :) ).

In the “Good homes needed” I decided to change the order of images and texts about cats that are looking for homes so the page looks more organised now.

Websites are being more often checked by search engines when they are consistently updated. By adding fresh information about cats that have found the homes already and ones who are still waiting for their owners will help to improve appearing of the site in search.

I moved an ad bar to the right. Main navigation in my design is divided now into conceptual sections – I grouped “Our story”, “Good homes needed”, ”Adoption”, “Boarding cattery” and “Cats we have kept” pages under one category “What we do” and “Fund raising & Donations” and “Volunteer” under “How you can help” category.

Apart from “Contact” page with full address and directions I decided to keep fast access to telephone numbers of the rescue on the top part of the page and small block with the address in the footer.

How to check web page last update

Comments Off

Posted on 14th December 2011 by Iana in Uncategorized

  1. Open the page for which you want to get the information.
  2. Clear the address bar
  3. Type : javascript:alert(document.lastModified)
  4. Press Enter/Go

The Process of Optimising a Website

Comments Off

Posted on 13th December 2011 by Iana in Uncategorized

Different search engines determine rankings in different ways, so it’s worth bearing these in mind when optimising a website.

Google is the undisputed leader in search. Therefore, perhaps not surprisingly, it’s also the hardest to gain high rankings in. Google looks for natural link growth over time, tends to be biased towards informational resources, trusts old websites, and link quality is far more important than quantity.

Yahoo! is slightly different in that off-topic reciprocal linking still works, and it has a paid inclusion programme which results in an incentive to bias search results towards commercial results.

MSN is similar to Yahoo! in that its search algorithm is nowhere near as sophisticated as Google’s. As a result off-topic reciprocal linking still works, and it places a disproportionately high emphasis on page content, meaning that new sites can rank quickly in MSN.

There are 4 main steps when optimising a website, with the focus being on obtaining high rankings in Google:


Keyword Analysis

Identify what potential customers are likely to enter into search engines when searching for your product or service. These keywords will form the basis of the whole optimisation process. Popular generic words or phrases should be avoided initially, such as ‘advertising’. Instead, identify less popular keyword phrases such as ‘small business advertising’.

However, it’s no use identify long targeted keyword phrases if no one is searching for them as high rankings will still result in no website traffic. There’s currently no 100% reliable tool when it comes to assessing search volumes for particular keywords, but one of the best free tools is the SEO Book Keyword Tool – not only does it give estimated search volumes but it also provides you with a huge number of related keywords.


Technical Optimisation

Title Tag – this is the title of your site – as seen at the top of the browser window. All important keywords should be included here, in a format that users can understand and are encouraged to click-through. The ideal title tag is 60-80 characters in length.

Meta Tags – abuse of Meta tags has resulted in search engines paying significantly less attention to them compared to in the early days of the internet. However, they should not be neglected, as indicated by the fact that Google actually recommends writing different meta tags for each individual web page. Length-wise, keep meta tags to within 200 characters.

Site Map – always include a site map as it helps search engines to navigate and index each page in your site.

Internal Linking – link to each page in your site as you would if it was an external link. In other words, use keyword-rich links instead of ‘click here’ text.

Mirror Sites – avoid creating a website that is identical across two domain names, such as the .co.uk and .com versions. Instead, redirect users from one to the other. For example, if the .com version is the actual name of your site, if someone enters .co.uk have them redirected to the .com site, shown by .co.uk becoming .com in the address bar.

Website Design – flash web sites are a disaster when it comes to SEO. Search engines cannot read flash so 100% flash web sites are seen as having no content. Therefore bear this in mind – use flash sparingly, and certainly don’t include the bulk of your navigational links in flash or search engines simply won’t be able to navigate your site.


Content Optimisation

Web Pages – there’s a wide debate regarding the ideal number of words on a web page when viewed from a search engine ranking point of view, but it’s generally considered to be between 300 and 500 words. However, the first 100 words are the most important and as a result they should include all keywords and keyword phrases, with keyword density being 5-12%. Use a good keyword density checker to check the keyword density of your web pages. However, don’t neglect human visitors – good website copyrighting should be able to combine the two demands from search engines and human visitors.


Link Strategy

The basis of the internet is built on links, so it’s not surprising that search engines see links as a valuable indicator of the importance of a web site. These days the quality of incoming links is more important than quality, signalled by Google PageRank (PR).

As a good basis for generating one-way links submit your web site to directories.

Consider purchasing links from web sites with a high page rank – going via Text-Link-Ads is the main way to do this.

You could write and submit articles online to increase your link popularity.

Competitor Intelligence – see what your competitors are doing. If they have high rankings what incoming links do they have? Those websites may also be interested in adding your link.

Write Good Page Content

Relevance and quality is what matters in a group of unique web pages, each with its own set of keywords. Now you need to make sure you write content relevant to those keywords, and also make sure it is good quality – for the purpose of retaining your visitors. If it’s not what they expected to read, they will leave.


Keyword Density

When writing your web page content you should ensure you use your keywords just a few times times within the copy, usually in the opening paragraph, once or twice in the middle, and in the final paragraph.The number of times it should appear will depend on your page copy word count. The general average is 3-4 times per 500 words. Whatever you do, don’t stuff your web page with keywords. It will not help and it may well hinder you – overdoing it by literally spamming your own web page could get your website penalised. You could drop in the search engine rankings and lose PR (PageRank) score as a result. 


How the spider crawls the page

As the spider works its way down the web page starting at the top with the title meta tag, it goes through the description and header tags. It then needs to see your page is still relevant to the search, so you remind it by dropping the keywords in every so often. You should also use synonyms and other relevant words connected to your product or service. So whilst we might use web host, website hosting and free web hosting as our keywords on our Free Web Hosting page, we will also use php hosting, Linux server, bandwith, cPanel or other appropriate and relevant words to our subject matter for that page.


Web Page Content Checklist

  • good grammar
  • punctuation
  • engaging content
  • content that flows
  • frequent paragraphs
  • a font type and size that is easy to read
  • headings and sub headings
  • anchor text or internal linking
  • synonyms
  • other relevant words
  • occasional bold, underlined or italic font
  • a good headline to attract readers attention
  • short and snappy lines in between short paragraphs
  • around 300-500 words per page if possible
  • spellchecker!

Web Thesis Project Proposal

Comments Off

Posted on 17th November 2011 by Iana in Uncategorized

This this my Web Thesis Project Proposal which I “successfully” failed to present yesterday….  Thesis Project Proposal

Typography for the Web III part.

Comments Off

Posted on 8th November 2011 by Iana in Uncategorized

What is bad web typography?

Very small font size, which does not allow users to read content comfortably. Not every user is familiar with Internet and different browsers, so to change the fonts to desired size can be a problem. All designers should remember this. Inadequate line spacing, when user has a feeling of merger of lines and it makes it difficult to read through. Poor contrast and colour scheme. And of course the width of paragraphs. It is very annoying when paragraph is very narrow and eyes are jumping constantly through the lines or when paragraph  is too wide and a user  finds it difficult in following a next line.

1. www.171hairandbeauty.com/

Poor font colour decision, small text size and line spacing make this site not comfortable to read and access. Bold font weight together with small size reduces the readability of the menu.

Menu bar {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

}

Paragraph {

font-family: Verdana,Arial,Helvetica,sans-serif;

font-size: 10px;

color: #000000;

}

2. www.erebuni.ltd.uk/

Erebuni is a well known russian-armenian restaurant in London. However I was a bit disappointed with their web site. Colour gradient on the menu bar makes it almost impossible to read; wide variety of font colours doesn’t highlight important information for the user and distract. On the menu page we can find a very small line-spacing, which can result in confusing for dishes, ingredients and prices. Font-size is too small.

3. evuk.co.uk

I can describe this web site only as a visual chaos. Inconsistent serif and sans-serif fonts and font sizes, poor legibility and too many font colours. All together detracts from the content. Plus all images are not in consistent sizes and places on the page.

Basic things to remember from week tree.

Comments Off

Posted on 18th October 2011 by Iana in Uncategorized

  • Always better to buy a hosting and a domain name at the same service (otherwise you risk to have a big headache to deal with this)

  • A basic elements, attributes and values in HTML like:

– <p>

- <h1>, <h2> …<h6>

- <a>

- there are parent and child elements, and sibling elements as well.

 -…

  • Like many tags, the image tag has a range of valid attributes (e.g. width and height). Each attribute must have a quoted value.
  • Most XHTML elements comes paired, but some of them (e.g. image)are single instances

  • The img tag has a range of valid attributes (width, height) and have a quoted value. Browser knows how much space to take for an image (without this attributes text will jump until download everything to the page)

  • AKISMET is a very useful tool for spam protection. Akismet filters out comment and trackback a spam. It is free for personal use. http://akismet.com/

  • In file naming all files and folder names should be in lower case.
  • If space is needed the hyphen of underscore should be used. “I’ve seen a lot of SEO Experts and many SEO tools recommend that you should be using hyphens in URLs rather than underscores, one example was Ann Smarty over at SearchEngineJournal. For the disadvantages of the underscore in URLs she says: Traditionally it isn’t seen by search engines as a word separator”. (http://x-pose.org/2010/03/seo-to-hyphen-or-underscore-urls-revisited/)
  • There are plenty of useful plugins for better functionality. We were suggested to install Firebug and Web Developer. Firebug seems to be very useful for web designers beginners, whereas Web Developer doesn’t look so clear to me :( I should certainly go deeper in understanding of it.

  • And at last designer should always validate a XHTML by using the W3C Markup Validation Service and to correct any of its errors.