Community & Social Media: Facebook for businesses (Extended Blog Post)

With the development of the Web 2.0, there was the emergence of various online marketing tools, as is the case of social media. Also known as social networks, it can be defined as “tools that allow the sharing of information and creation of communities through online networks of people” (source: http://www.constantcontact.com/learning-center/glossary/social-media/index.jsp#SocialMedia). Some examples include Twitter, Tumblr, Google+, MySpace and Facebook. This last one, created in February 2004, has already over 500 million users. It is worth analyzing the statistics. Facebook is used by 1 in every 13 people, with over 250 million of them (over 50%) who log in every day. Over 700 Billion minutes a month are spent on Facebook, 20 million applications are installed per day and over 250 million people interact with Facebook from outside the official website on a monthly basis, across 2 million websites. Over 200 million people access Facebook via their mobile phone. 48% of young people said they now get their news through Facebook.

In just 20 minutes on Facebook over 1 million links are shared, 2 million friend requests are accepted and almost 3 million messages are sent. Statistics taken from here (http://www.digitalbuzzblog.com/Facebook-statistics-stats-facts-2011/)

After all, what are the advantages of a business account on Facebook?

  • Create a page is free. This is especially important for small businesses that do not have the budget to pay a web developer.
  • It is easy to create and anyone can update the account.
  • Comment integration can be especially interesting for creating an online social community.
  • The like and share buttons help viral marketing campaigns or the so-called word-of-mouth marketing and makes it work at scale.
  • The business-customers interation is more direct, fast and personal. People like dealing with people and through honest answers to customer enquiries / complaints, it is a great opportunity to show your business’s human face and provide an excellent customer service.
  • Unlimited fans.
  • Facebook pages have been showing up high in search engine positions.

How to create an official Facebook page for the business?

To learn how to grow a business with Facebook’s marketing tools see, http://www.Facebook.com/business. Here, http://www.Facebook.com/FacebookPages, is where Facebook Inc. updates the community on Facebook Page upgrades. To create a Facebook page for your business, you must be logged in your personal Facebook account and follow these steps, http://www.Facebook.com/pages/create.php. First, there are 6 categories in which the business can be inserted and later you can choose something very specific to that category. If you want to change the category in the future, you can do it. Unlike the name that will be seen within the URL of your Facebook page (extremely important for SEO). The next step is the customization of the page.

  1. profile picture: is the representation of the page in an image. In searches, the icon chosen is one of the first things that attracts  users’ eyes.
  2. about section: brief description of what the business is about.
  3. likes: ideal to promote and associate all your other pages.
  4. page title and category: 25 likes are required before Facebook.com/yourwebsitename can be used as URL however, you are only able to edit the name of the page if you have 100 or less fans. Afterwards, it is permanent. The category can be edited anytime.
  5. page body: where you post new information and have feedback from others.
  6. administrative links: only the admin can see them. Facebook Ads (the pay-per-click program), notifications, Facebook statistics and suggestions of friendship are part of this area.

The final step is to publish the page.

If happens what the image below shows, check if you are already a fan of your own page (a page with 0 fans will not be published) and make sure you have published some content in the body area. You must post regularly, your posts should be useful and interesting and use all media you have available (videos, photos, text).

Should you create a Facebook group or a Facebook fan page?

Before answering this question, it is necessary to analyze the characteristics of each. A Facebook fan page is static, like a web page. It gets updated by you, as a blog or a website. According to the settings, it may not allow users posts. The right use for it is to promote your small business, your personal website or something you have legal rights to. In other hand, a Facebook group is like a message board. It does not support Facebook Markup Language (FBML) neither Facebook Apps, so it is not as interactive as could be. It gets moderated by you and the conversations are posted by you and other members. It is central around calendar events and updates and it is moderated by you. The right use is for a cause, a local community or a discussion forum.

For a business, you should create a Facebook fan page. Why?

  • Pages get internal promotion on Facebook.com
  • Pages have more options for customization
    Groups seem chat rooms where there is no real look and feel. Pages are customizable by addition of new tabs, graphs, static information.
  • Search Engine Visibility
    Pages can be seen by non-Facebook users and can be found by search engines. Facebook groups can not.
  • Anonymity
    Pages are completely anonymous. Nobody will know that you are the owner, unless you inform users.
  • Groups can be annoying
    You will get an email every time someone comments under your comment. This is a default setting. In pages this also happens but groups are more like chat rooms than pages.

How to promote a Facebook page?

Facebook has its own search engine. Fan pages are important as the results show all Facebook fan pages at the top. Facebook uses an algorithm just like all search engines. Facebook pages that are constantly updated (contributions from fans are also valid) and continue getting fans (especially ones who interact with the page) will appear higher in Facebook page search results. This has nothing to do with the number of fans that each page has.

There are several ways to advertise the new Facebook business page. One is through social networking such as tumblr, youtube, wordpress, vimeo, flickr, linkedin, orkut, myspace and many others. Another is to suggest it to your friends via facebook option. And a third is put a Facebook like box on your blog, http://developers.facebook.com/docs/reference/plugins/like-box/. It is a widget that you can access through the administrator menu of your page, https://developers.facebook.com/docs/plugins/. This is a good practice due to the fact that the number of fans and the direct link to your facebook page are visible, making it easier to share your page or website.

You can also include a share button to your website posts and include the URL in your e-mail signature.

Facebook page analytics

Facebook has analytics for Facebook pages. There are five main components.

  1. This week’s statistics: This is a brief of what happened this week in terms of page fans liking, commenting and posting on your page wall. The more activity the page has, higher will be the numbers. Would be a good idea to invest in your brand’s personality through interacting with customers through social media.
  2. Interactions graph: This graph takes your weekly statistics and puts them in graph form. The drop-down gives you options for interactions, interactions per post, post quality, posts, discussion posts, reviews and mentions.
  3. Demographics: It lets you see which gender, male or female, and age group is most engaged with your Facebook Page.
  4. Fan Data Chart: This chart gives you a visual representation of total vs. unsubscribed fans. The additional drop-down options include new/removed fans, top countries, page views, etc.
  5. Fan Data Demographics: This bar-chart version of the data mentioned in the Fan Data Chart gives you the same data, but in numerical format. It also includes gender and age.

However, these analytics are only available when Facebook considers your page to have significant number of fans and interactions.

Some examples of successful businesses with presence on Facebook.

Pringles

Pringles differs itself by using one of the most shared online content, the video. It captures the fans through notification of new content, discussions and interactive games. They found out that their type of audience reacts well to comedy and now use the Facebook page to spread funny videos with viral potential. It is free advertising.

Starbucks

The main focus of Starbucks is the constant status update. A page with new content always gives the fans a reason to return. This page is a great example of how the focus on quality of content, rather than applications, can also result in high involvement of the fans. The content is generated by the company and the fans.

In addition, defining the approach is important because the Facebook page should transmits what the business is in real life. Special offers and competitions are two possible approaches to give a good reason to like your page or to maintain followers.

In conclusion, apart from the personal use that most people do from Facebook, this is a tremendously valuable business tool.

 

Bibliography:

http://www.socialmediaexaminer.com/6-ways-small-businesses-can-win-with-Facebook/

http://www.digitalbuzzblog.com/Facebook-statistics-stats-facts-2011/

http://www.squidoo.com/Facebookpage

http://www.techipedia.com/2010/how-to-use-Facebook-for-business-and-marketing/

http://artforyourlifestyle.com/tag/Facebook-group-vs-Facebook-page/

http://www.entrepreneur.com/marketing/socialmedia/archive620-3.html

https://www.Facebook.com/SyzygyGroup?sk=app_128679060546154

http://socialcommercetoday.com/category/solutions/f-commerce/

http://gigaom.com/2011/07/26/facebook-for-business/

http://mashable.com/2011/07/26/Facebook-for-business/

Critical Essay – Grids in Web Design

Introduction

To define design is not an easy task. Design is everywhere and everything is design. It resulted in the current map of the London Underground which is used every day. It identifies which are the ladies’ and men’s restrooms through symbols disseminated worldwide. Design makes websites easier and more pleasant to navigate. During the Design Council National Survey, (2002) Design in Business Week, Richard Seymour proposed that design is “making things better for people”. Whether the result is a graph, a building or a service, design always provides a solution for a problem that adds value to people’s lives and makes everything more accessible, safer and intuitive. Design is constantly evolving and what sets the pace are the needs and development of human knowledge.
A good design creates a pleasant user experience. However, a good design is not simply about the appearance. Aesthetics are important but an implicit order in the structure is essential. In web design, there are many websites aesthetically appealing where it is difficult to define what is the sphere of action of the company. There is a flaw in how the message is transmitted and how the content is displayed to the consumer. Grids are one of the most powerful methods for creating order that have been used in a variety of design fields, from typography in graphic design to modern buildings in architecture. Vinh (2011) writes “the most successful designs can be reduced to an essential intention: to create order out of disorder”. When there is more than one element, there must be order. It was in the early part of the twentieth century that grid thinking historically evolved. Designers, artists and thinkers began to implement grids in practical discourse and communication changed the way of perceiving and understanding design.

This critical essay discusses the concept of grids and covers the steps of how to build a grid-solution. It intends to deal with how a grid-based design is applied into the web design context through a careful analysis of several websites and how it helps to create an intuitive user interface.

Advantages and a brief history

The grid system is originally from Switzerland and Germany. In the field of graphic design, the many benefits of using designs based on grids quickly became apparent. More recently, this theme became part of digital media, user interfaces and the vocabulary and practices of web designers. A screen is composed of seventy-two pixels per inch, arranged vertically and horizontally such as a sheet of graph paper (a grid). It makes perfect sense that the grid system has reached the digital world. Whether in print or on the web, grids facilitate the appearance of an orderly creativity and help web designers put things where users easily find them. Khoi Vinh (2011) made a list of the points in support of grid-based design in graphic and web design that is worth mentioning. In graphic design:

  • Grids add order, continuity, and harmony to the presentation of information.
  • Grids allow an audience to predict where to find information, which aids in the communication of that information.
  • Grids make it easier to add new content in a manner consistent with the overall vision of the original presentation.
  • Grids facilitate collaboration on the design of a single solution without compromising the overall vision of that solution.

It is clear that it is possible and makes sense to apply the same benefits to web design:

  • Grids add order, continuity, and harmony to the presentation of information on frequently high-density webpages.
  • Grids help users predict where to find information from page to page or from behavioral state to behavioral state, which aids in the communication of that information.
  • Grids make it easier to add new content to a website in a manner consistent with the overall vision of the original website.
  • Grids facilitate collaboration on the design of a single website without compromising the overall vision of that website.

Grids are a visual ordering system and designers, who have a predisposition to order, feel that the grid system is a natural fit based on mathematical harmony found in nature. This is due to some architects, printers, typographers and designers who reinvented arts taking into account the presence in nature and mathematical formulas. When web designers are browsing a website, they are actually doing much more than just viewing a webpage, even if unconsciously. Designers have the ability to seek a different kind of order that less visually-trained people might. Certain questions are presented: “Do things align? Do they conform to similar shapes, scales, or patterns? Do they employ similar visual formatting? Are they sorted by some kind of schema? Is there consistency even among things not immediately visible?” (Vinh, 2011, page 14).

Since the Renaissance, the golden ratio has attracted the attention of many experts from various fields – biologists, artists, architects, mathematicians, musicians, historians, psychologists, and even mystics. It has worked as a source of inspiration since its proportions are considered aesthetically pleasing. The golden ratio is intimately connected to another mathematical concept, the Fibonacci sequence. This expresses a logarithmic spiral (Figure 1) where a harmonious and logical grid is immediately identified by designers. This grid has been used for centuries. The golden ratio, often called the golden section, is one of the most mysterious numbers that exist in nature and it is considered the key to the secret of beauty of the known world (Figure 2). Due to its interesting properties, it has been used in the analysis of financial markets, in web design (Figure 3), in the construction of buildings (Figure 4) and even in the composition of the world’s most admired paintings (Figure 5).

Figure 1. The Fibonacci spiral.

Figure 2. Romanesco broccoli or Roman cauliflower. The number of spirals on the head of Romanesco broccoli is a Fibonacci sequence. It is an example of the Fibonacci numbers in nature.

Figure 3. Twitter. The design is based on the Fibonacci numbers.

Figure 4. The Parthenon. Also in Greek architecture the Fibonacci sequence is visible.

Figure 5. Mona Lisa. It was painted by Leonardo da Vinci in 1503 and is based on the Fibonacci spiral.

Another grid very similar to the Fibonacci spiral is the √2 rectangle. It is easily identified in international standards for paper sizes (Figure 6) known and adopted worldwide. When a rectangle is divided in half, the same ratio of width-to-height as the original √2 rectangle is maintained.

Figure 6. The ISO 216 paper standard. It is based in the √2 rectangle.

Less scientific and despite being called the rule of thirds, in fact this is not a rule but an aid to composition. Earlier in the eighteenth century, this technique was used by painters, draftsmen, photographers, and graphic designers as a reference for the creation of balanced and harmonious compositions, facilitating the reading of the image. It is applied by dividing any image into nine squares drawing two imaginary horizontal and two vertical lines. The intersection of these four lines gives rise to four focal points that are important in the image (Figure 7). The human eye is naturally attracted to these points. Fitting the main objects of the composition in these points or using the lines as basis, it is possible to create balanced and attractive results. However, employing the opposite, one can create tension and stress.

Figure 7. The rule of thirds and its focal points.

All of these techniques have contributed to a tradition of simplicity and minimalism strongly supported by Bauhaus’ ideals. Grids have become the centre of design decisions, geometric shapes and mathematics have become increasingly evident in life and the need to create a sense of order supported by the notion of a grid-based design has become a priority.

Although a webpage has the same elements as a printed one (titles, subtitles, paragraphs), the limits of this strict approach applied to graphic design and deployed on the web become obvious. The type of system where the content of a given web page is being viewed (computer, smartphone, tablet), the resolution of the chosen system screen and the web browser that is used can change the way the user has access to information. Also the typography can appear with another font and bigger or smaller from one person to another.
The role of web designers is to take into account those various behaviors that the grid system can take and develop solutions adaptable to different users.

Steps for building a grid

According to Khoi Vinh (2011), there are some principles that no designer should forget when following the steps of building a grid-solution.

“A grid should focus on problem solving first and aesthetics second (page 35).”
A designer should keep in mind that firstly a grid should be built with focus on its utility. The content and the functionality should fit comfortably and be adapted on the page. Secondly, the designer must be concerned with the aesthetic part of the grid. A well-designed and thought out grid provides appropriate solutions to challenges and beauty at the same time.

“A grid is a component of the user experience (ibid).”
A grid is a tool to provide a good user experience. The user should be able to control what is happening and it should not be the interface which imposes control over the user. However, designers have the duty to not allow all the interaction design to occur within the grid nor that the user experience is unpredictable. With the aid of the grid focus on the interface, designers should help the user to make certain decisions which will lead him or her to accomplish certain objectives.

“The simpler the grid, the more effective it is (ibid).”
Some might think that a simple grid does not fulfil its functions. This is wrong. Designers should always aspire to build a grid as simple as possible and which meets all the requirements of interaction. This is the challenge. The mathematical formula used in the construction of the grid (combine units and columns) should be easy to remember and quick to explain to another designer. If this happens, it is likely that more users will benefit from that grid system.

The process of working on a solution to a grid should not be an intuitive task and designers have to follow steps that meet widespread research, draw wireframes, prototype designs, receive feedback and coding.

1. Research

Beauty, innovation and efficiency are highly appreciated qualities in a design. Yet for this to be considered an excellent design, it is essential that it responds well to the original problem. First of all, the designer needs to do research to respond appropriately to some questions: who is the audience for whom the solution is being directed, when will the solution be encountered, what is the context, how will the solution be used, and why is the solution necessary. After identifying all the issues, the designer must have good and accurate answers to all questions that may arise about the solution and understand them all. For this reason and to avoid being near the end of the process and having to return to the previous steps because something did not go as expected, it is safer to use the search time at the beginning of the project instead of going directly to the design.

The more research is done, the more likely it will be to achieve the appropriate grid. It may even happen that with research, the designer achieves a grid structure which he did not remembered previously. On the other hand, research also avoids the creation of inappropriate grid systems. Some examples are bad combination of units and columns, grids that seem to work but at the wrong moment need to be redesigned and grids that are suitable for some aspects but inappropriate for others.

There are several constraints that may influence the decision of the designer in determining the size of units and columns, the regions to be created and the proportions of a grid. Already in itself, one might think that a grid system restricts the designer’s creativity, then adding these restrictions, the scenario cannot be more limited. However, these restrictions may in fact help to increase the designer’s inventiveness. The constraints are divided into four main categories:

  • Technical
    Technical constraints have to do with the way the design solution will be displayed. The designer should be aware of the type of system where the website is being viewed (computer, smartphone, tablet), the resolution of the chosen system screen and the web browser that is used. The design cannot compromise the way the content will be shown in different situations.
  • Business
    This part is dedicated to the purpose of the solution. It is necessary to define what is the final goal of the website (whether it is to increase site traffic, visits and time spent, if it is to sell a product or to earn money by the number of clicks on advertising and text-links) because the design will depend on it.
  • Delight
    In terms of delight, more visual criteria but fundamental for business objectives to be achieved, the designer should consider page layout (which visual message will the website transmit, how the layout gives credibility), branding (crucial to marketing, what structure is used to enhance brand image and identity), visual hierarchy (which areas of the website attract wide attention from the user and what kind of content is in those areas), typography, positioning (spacing and size) and graphics. It will be necessary to establish whether in the future the solution will require development and maintenance. If the answer is affirmative, it will take funding or skills from the client to do so.
  • Content
    The last part has to do with the production of the content. The designer has to define the disposition of design elements (how grids are used to present content, how the visual balance affects understanding and interpretation), the user guidance (what is the effect of the layout on usability, legibility, accessibility of the content) and in which form the content will be available (text, images, video, charts, or data tables).

2. Wireframes

3. Prototype design

  • Pencil sketches
  • Units, columns, baseline development and calculations
  • Page sketches

Sketching is not necessarily an activity in which one can point out a beginning and an end. It is recommended in the early stages of the process because it is possible that more creative ideas for grid solutions emerge and the designer can easily dispose of the bad ones without wasting much time . But sketches can happen and must be present throughout the entire project. Using paper is essential for problem solving and it is helpful in developing a grid system.

4. Feedback
 In this state, the designer presents a design comp. This is an image of how the website will look when it is finished. It needs to go through a conversion process. Then feedback is given. The new task of the designer is to listen and to redesign the website taking into account all observations. As a result of external reviews, different design ideas can arise.

5. Production (code)

Analysis

The theoretical concepts discussed previously will be now put into practice. This section is dedicated to examining the grid system design used in biodiversity websites. At the start of this process, every designer should know what are the limitations of the project, even before thinking about the grid or choosing typefaces and colours.
The calculations of pixels that appear below are adapted to a grid system with 960 pixels wide.
The first analysis will focus the Tree of Life website, http://tolweb.org/ which is a collaborative effort of biologists and nature enthusiasts with strong scientific knowledge as background. In this case, it was used a sixteen columns grid solution where each column has sixty pixels (Figure 8). On the website there are three identifiable columns. The first is the narrowest, it uses only three columns of the grid system. The largest occupies the central part of the website and uses nine columns. The last one extends for four columns.

Figure 8. Sixteen columns grid-design.

BBC’s website, http://www.bbc.co.uk/nature/uk/ design is extremely professional and organized since it contains a lot of information, mostly news from all over the planet. Here, the designers opted for a six columns grid-system (Figure 9). The layout is composed by three columns. Each of them uses two columns of the grid (each with 160 pixels). Every set has the same order, the left column is intended for graphics and the right column supports text.

Figure 9. Six columns grid-system split in pairs.

The City of Sydney (http://www.cityofsydney.nsw.gov.au/) is focused on urban ecology and mainly explores urban ecology strategic action plans. This website uses the same grid system as BBC. However, the way how the six columns are combined varies. Contrary to what happened on BBC’s case, in this one only two columns are part in the layout (Figure 10). The first one, on the left hand side, represents a sub menu and therefore only uses two columns from the grid system (each with 160 pixels) and the other has the remaining four.

Figure 10. Six columns grid-system combined two-four.

Conclusion

Although grid systems are part of ancient knowledge, only recently they have been applied in digital media. It is interesting to see how content that we produce (as designers) and consume (as users) has been affected by design and technology. With technical innovations, users will demand more and the interaction within platforms will change.
When I started to investigate grid systems, quickly I realized that this subject is much deeper than what it seems at first. This study approached some topics but there are many others which deserve to be explored. In 2009, Ellen Lupton said: “To say a grid is limiting is to say that language is limiting, or typography is limiting.” and I think she was right.

Resources

Vinh, K. (2011). Ordering Disorder, Grid Principles for Web Design. USA: New Riders
Design Council, www0.hku.hk/bse/interdisciplinary/what_is_design.pdf
Drawar, http://journal.drawar.com/d/what-is-design/
Engine Industries, http://engineindustries.com/services/web-design-process-comps-conversion
960 Grid System, http://960.gs/
Design Festival, http://z6.co.uk/1dv
Design Festival, http://designfestival.com/grid-theory/

Project 2 – website makeover

I chose to redesign the http://www.bicycledoctor.co.uk/

Content:
There was a huge and disorganized amount of information, therefore I optimized the links in the navigation bar. “Bikes 2012”, “Women’s bikes”, “Kid’s bikes”, “Folding bikes”, “Trailer bikes”, “Trailers”, “Christmas gifts”, “Winter sale” and “Buying” are now part of my “Gallery”. The user can see the products and has a button to purchase them. “About us” and “Staff” are now my “About”. Here I reduced the presentation text and include the opening hours. “Where we are” is my “Location” where is available the address and the google maps. “Whats on!” and “Blog” are part of my “News”. “Email us” is my “Contact” where email, telephone, fax and some social networks, such as twitter, facebook and flickr are available. It seemed important for me to include in this section the rss feed, since the website would be under constant update in News and Gallery.
I completely eliminated the option “Links” from the navigation bar as it was a page without interest. I thought more carefully about the elimination of “FAQs” and “Site guide” or include them in “Help”, but considering that the new design is more simple and makes the navigation easier, I came to the conclusion that they were dispensable. If the user has any questions or need any advice, he will want to contact the owners of the store and for that he has the section “Contact”. I also eliminated the search bar because the information is now much more accessible, the CSS and HTML validation and the number of visits since 1998.

Design and development choices:
I wanted a visually appealing and reliable website. The colour scheme used on the original website (yellow, blue and green) is not correct. These are three bright colours that do not work well together. I found a picture for my header, which worked as an inspiration and from it I picked my colour scheme. I took advantage of the large size of the image (height: 1400px) and I did overflow: hidden to resize it according to the size of the browser window.
I know that for this project I was asked to produce a working mock-up of a redesigned homepage and if necessary other internal pages. As I chose to keep the navigation bar fixed, my homepage and internal pages are the same, therefore I needed to add content in all navigation links to show how it would work. I hope there is no problem. To achieve the modal window effect in the “Gallery”, I used a jQuery plugin. I used another jQuery plugin for the smooth scroll effect on the navigation bar and for the selection of div by id. Despite of the homepage and the other pages are the same html, the id from the div is passed to the link in the browser, so it does not create accessibility problems. The biggest challenge was to maintain the navigation bar fixed after scroll the entire picture of my header and not fixed when the scroll was at the top. Hopefully, a few hours ago I could handle it.

SEO analysis:

  • PageRank – 4/10 (www.prchecker.info)
  • Reputation – sites linking in 141 (www.alexa.com)
  • The users who visit the website are more men between 35 and 44 (www.alexa.com)
  • Top 5 keywords search queries – “frame size”, “what size bike frame”, “surly bikes”, “bike frame” and “bicycle shop in Manchester” (www.alexa.com)
  • Title tag is excessively long. It is better practice to use keywords that are related to the content of the page.
  • CSS validation has no errors.
  • HTML validation has 1 error on the homepage, 2 errors on “Kid’s bikes”, 1 error on “Folding bikes”, 1 error on “Trailer bikes”, 2 errors on “Trailers”, 13 errors on “Christmas gifts”, 19 errors on “Winter sale”, 2 errors on “About us”, 10 errors on “Staff”, 3 errors on “Email us” and 72 errors on “Whats on!”.
  • Social media – facebook account.

To improve traffic and profile, improve SEO:

  • Semantic and organized HTML (head, body and footer).
  • Use Google Analytics.
  • All images should have alt tag and file name appropriate. If they contain relevant information, such as my title, should used image replacement.
  • My title tag is <title>Bycicle Doctor | Bicycle Shop and Repair</title> I reduced the size of the title to provide search engine optimization.
  • CSS and HTML validation.
  • Use meta tag description. Mine is <meta name=”description” content=”Selling & repairing all kinds of bicycles in Manchester, United Kingdom”/>
  • Use keywords meta tag. Mine is <meta name=”keywords” content=”bicycles, shop, repair, UK, Manchester” />
  • Social media – facebook, twitter and flickr accounts.
  • Include rss feed on the website. There is only a wordpress blog rss feed (http://websitegrader.com)
  • Keep the website active uploading videos, photos and news. The last update was in August 31, 2011 and none of the posts has retweets (http://websitegrader.com)

Below is my mockup.

week 6 – what I learned this week

  • When thinking about typography, it should be considered contrast, size, hierarchy and space.
  • @font-face – a way to embedded the font that is used on the website. Problem: it requires that all fonts are free for downloading.
  • Font Deck – free and more professionals fonts. Only available for 20 different IP addresses. Then you must pay.
  • Typekit – Paid. Acquired by Adobe.
  • In websites: sans-serif font for body and serif font for title. In Print is the opposite.
  • Screen fonts have two important characteristics: large x-height and open counters. To improve readability, the default line-height (1.5em) should be increased.
  • Justified text in narrow columns is a bad idea.
  • Text-align: center never for body text (hard to read), headings maybe.
  • Text-align: right is wrong for Western script.
  • Reset font-size.
  • The ideal is to use two types of fonts but a third font can be used for the navigation bar.
  • Font-size is directly related to the target audience of the website. If they are elderly, increase the font-size for better readability.
  • Letter-spacing is more used in titles.
  • Line-spacing is used in text to improve readability.
  • Verdana (body) + Georgia (head) is a common combination in websites.

Sans-serif fonts:

  • Verdana – created for web, large x-height, neutral.
  • Arial – created for screen, classic, scientific but warm, serious, authoritative.
  • Helvetica – created for print, classic, scientific, serious, authoritative.
  • Comic Sans MS – informal, childish, amateur.
  • Calibri.

Serif fonts:

  • Times New Roman – created for print, classic, compact, do not use it in text only in title with big size.
  • Georgia – created for web, elaborate, warm.
  • Courier New – basic, traditional.
  • Cambria.

Text pseudo-elements: it is possible to apply a style to the first letter or first line of a text.

  • p:first-line {
    color: #CC0000;
    }
    p:first-letter {
    color: #0000CC;
    font-size: xx-large;
    }

Text-indent:

  • a) serves to put the paragraphs inside;
  • b) Image Replacement. To make some text get out of the page (do not use invisibility display: none, because the screens readers will ignore it)

<h2 class=”move”>Apply now</h2>
<p class=”apply-now”>MA Web Design and Content Planning</p>
#content-sub p.apply-now {
background-image: url(images/apply-now.png);
background-repeat: no-repeat;
background-position: top right;
padding-top: 35px;
padding-right: 25px;
margin-top: -10px;
}

.move {
position: absolute;
text-indent: -5000px;
}

Three examples of websites with beautiful typography

http://carsonified.com/

Contrary to the usual, this site uses a serif font for the body – Georgia with Times New Roman following in the font stack. This works due to the large serif font size, which makes the text readable. However, if it had been me designing it, I would opt for a bigger line spacing. The main navigation’s font is Helvetica with Arial following in the font stack. The third font is part of the image and emulates handwriting. It gives the impression that the page was a sketch where notes were taken. With this combination of fonts, the website gets a cohesive and unique result. Due to the simple and clean color background, the typography can be catchy, big and elaborate.

 

http://blakeallendesign.com/

This website uses only one font (Helvetica) and arranges it with a variety of large, small, bold and italic text. This creates a sophistication appearance and a strong hierarchy between the textual elements. The readability of the smaller text is excellent due to the high line-height value and contrast. The white letters on the white background work really well. The website has a pleasant selection of typography which gives it a classical and simple feel.

 

http://collisionlabs.com/

The font stack selected is Lucida Grande, Lucida Sans, Lucida Sans Unicode, Tahoma, Sans-Serif. This website uses a simple font (with the colour scheme appropriate) to create a retro atmosphere. The text contrast and the white space between lines and words is carefully thought for that the user can read the content’s text easily.

Three examples of websites with poor typography

http://www.stickylizardgraphics.co.uk/

Ironically, this website belongs to a graphic design company. Right on the homepage there are four different fonts. The first is part of the image with the red dragon. The second is Arial. It is written in capital letters (bad practice! If someone wants the phrase in lowercase, it must be written again) and the red color is given with CSS inline (bad practice again! Think about screen readers and their own stylesheets). The third font is part of an image (but notice that it is different from the first one) and belongs to the menu. Finally, the fourth font is Tahoma and is used on the links at the bottom of the page. Many different fonts on the same page and without any connection between them make the website look unprofessional and inconsistent. To finish, it must be said that the whole website is built with tables.

 

http://www.sleepyhollowlakeresort.com/

This website is about camping. All titles are written in Segoe Print, which is a serif font – that is correct because it is a website. However, this font is also used in the phrases in italic present in the body – now, it isn’t correct because the body on websites must be written in a sans-serif font. The rest of the body is in Arial, which would be good (because it is a web safe font), although this type of font demonstrates authority and is more appropriate for technical writing. It does not fit with this website. Some text is center-aligned. The font size varies widely. In the body, there is a lack of white space between lines and in the title there is too much white space between lines. This lack of consistency in size and space makes the text difficult to read. This website is also built with tables. On a global the website looks disorganized and amateur.

 

http://www.mrbottles.com/

This website belongs to a cleaning bottles business. In the body, all the text is in Arial. There are text color and size changes to make differentiation between dates. This gives a disheveled and immature aspect to the website. Because of the amount of text on the page and the cluttered appearance, it looks dense and the disposal is do not read anything. Some of the text has a size that is too small and with little white space between lines and letters, mainly because some text is written in bold. This website looks messy, confusing and boring. It would benefit from a total re-design.

Three examples of websites with good colour schemes

http://www.brooklynfare.com/

The colour scheme selected is simple and consistent. This is very important as the website is about food and all the images will have bright colours. The user’s attention can not be distracted. The main colours used are aqua blue, brown and white. This creates a triadic colour scheme where the harmony and richness of colour are maintained.

 

http://www.alessandro-cavallo.de/

This website is a web and graphic designer’s personal page. The colour scheme used makes the website visually appealing. The various tints of gray are used in the background and in the introductory text. The designer’s name is in blue to stand out. All content is in a blue container in order to get a visual contrast with the background. It also works as eye-catching for the user. The black is used for drawings. This clean design is based on a mono-chromatic colour scheme (tints of grey) and one strong colour (blue) to give emphasis to certain parts.

 

http://www.logocranium.com/

The colours of the logo – dark and light green, gray, white – are felt throughout the design. The colour scheme has the same colours as the logo. Because it turns out to be a continuity, all the website looks pleasing and interesting. It has contrast and all the elements sit comfortably with which others.

Three examples of websites with poor colour schemes

http://www.yvettesbridalformal.com/

In this website is impossible to identify what kind of colour scheme is used because it contains a huge number of colours. All of them are very saturated and when they get together, it becomes unpleasant. The background consists of an image that is repeated horizontally with photos and multicolored text on the top. It makes the website unclean and disorganized.

 

http://www.spaceistheplace.ca/

This website uses bright blue for the background and light blue for the text. These two colours are part of the Analogous Color Scheme that uses colours adjacents to each other on the colour wheel. However, the use of these two colours in this way is incorrect because due to the brightness it is difficult to read the text. The links are in yellow and quotes white. This creates a lack of visual harmony on the page. This website requires a re-design with a more appropriate colour scheme. This way it seems very unprofessional.

 

http://www.hosanna1.com/

The main colours on this website are blue and white although the text appears with pink, red, yellow and even green. The background is blue with an image that repeats vertically. The website has too many animations at the same time which makes difficult to focus the attention on the content. The aim is to make the website dynamic but it does the opposite. It looks messy.

week 5 – what I learned this week

  • Class names should describe the exact content and not the rule but this is not always possible.
  • Keep markup as simple as possible. Don’t add <div> if it isn’t necessary. Other block elements like <p>, <h1>, (…), <h6>, <ul>, <ol> can be styled in the CSS.
  • <em> is for emphasizing.
  • Background repeat-x, images are repeated horizontally. Background repeat-y, images are repeated vertically.
  • Display: block; makes inline elements (<span>, <em>, <img>, <a>) in block elements. Display: inline; can also be used for the reverse process.
  • Hex values can be abbreviated, #DD99AA can be written #D9A.
  • The background can be positioned by using percentages.
  • For create rollovers, instead of using different images in different files to make the hover state, use sprites. The download is faster because the two images are in the same file and there is no delays. What changes is only the background position.