eSites Network Website Design


Design It to Build It

What to Consider When Designing for the Web

Okay, so I’m getting to the point with CSS that I can usually design and create everything in the browser — I can’t remember the last time I sliced up a Photoshop layout and layer comped my sprites. For me, Photoshop is becoming more and more of a prototyping or blue printing tool: it’s basically just a canvas for creation. When it comes to the actual construction of the site, the only things I really take from the mockup is anything that I can’t create with CSS, the rest is just a map to guide me.

Think Differently

For years the process of designing a website using a Photoshop, Fireworks, Illustrator or any other graphics application was to mock it up, make sure everything looked perfect, then slice it up into pieces and put it back together — like a puzzle. CSS has basically made this process obsolete, you can accomplish so many things via CSS that you could only previously do in Photoshop. And with CSS3 even more things are possible.

Because designing in the browser is now more viable, it’s important to consider a few things when designing realistic mockups that will make the construction of the web site quicker and easier.

  • Realistic fonts
  • Image-less Buttons
  • Display size(s)
  • Images
  • What can be done with CSS?
  • Is it possible?

Realistic Fonts

There is a countless number of really great fonts floating around out there on the web and we all want to make an impact or statement with some amazing font we have found. But part of web design is designing for the user and making sure all typography on the page is readable and accessible. Before designing, consider what fonts are either web safe or feasible on the web and try to avoid fonts that will be difficult to recreate through HTML/CSS/JS.

Image-less Buttons

Buttons can be the bane of a developer’s existence. It’s a good idea to design buttons that can be created using CSS or Javascript. There are a lot of benefits for this: live text, adaptable buttons, no images to load, no more button sprites and no more size specific background images to mess with. Image-less buttons can save huge amounts of time in development, so before you create some super fantastic button in Photoshop consider whether its super fantastical design can be achieved in CSS, if so go for it, if not, buy your developer a couple of large pizzas and a case of Red Bull.

Display Size(s)

With so many different sizes of displays from 320×480 to 2560×1440 you’ll need to consider how you are gonna figure out how your design will be rendered in many different sizes. Responsive design is a tricky beast so to simplify the process of design, ask yourself these questions before you begin:
  • Who’s the audience, are they mobile?
  • Is the content centered or left justified?
  • Will it need to be responsive?
Not all sites will be used for smaller mobile devices, but it’s a great idea to consider how the site will represented in the standard 1024×720 all the way up to 2560×1440, and you may even need consider how your design will be viewed both horizontally and vertically. But the most important thing to remember is that the design needs to be feasible for the web — avoid horizontal scroll bars!


No more slices and no more puzzle pieces. With any standard web site the only real images you need are a logo image, maybe a repeated background image for texture and any inline content images. In most cases, anything that used to require an image slice now can be created with CSS. CSS gradients, rounded corners, transformations, and a countless number of other CSS selectors can be used to recreate these types of images.

Can it be done with CSS?

As you are joyfully creating a masterpiece in Photoshop, just ask yourself if all of the elements can be created with CSS. CSS is a very powerful tool and surprisingly, most design elements that are created in Photoshop can be easily replicated using it. Before you start cutting out images, buttons, rules, or anything else out of your design try to figure out if you can create them in CSS first. This can make development so much easier and more dynamic in the long run. Some elements in your design may never be able to be recreated with CSS so try to keep these elements to a minimum.

Is it possible?

Don’t design some super huge, intricate background image that needs to be sliced in forty different pieces just to be able to load quickly. Don’t design a site that is 1280 pixels wide. Don’t design a site that is not feasible for the web. Get familiar with display sizes, image limitations, file limitations and just general limitations of the web.

The web is a pretty open and flexible place and you can pretty much create anything you want, but there are some natural restrictions that you need to consider before you start designing. Just make sure you’re not trying to create something that can’t be built. If you don’t know what development limitations there are it’s a good idea to code up a site every once in while so that you can get familiar with what can and can’t be done on the web. My personal belief is that every web designer should be able to code up the HTML/CSS of their designs.

You can always change it

One huge thing to consider when designing for the web is that you can always change it. The web is super easy to update, you’re essentially only an upload away from chaining anything about your design. Don’t spend so much time sitting in front of Photoshop trying to perfect the design. Consider the web as an editable canvas, it’s not rigid like print design where you have to make sure everything is pixel perfect when you send it off to the printers.

The bottom line is that you are designing for the web. In as much as we think print design is the same as web design — it’s not. It has its own set of problems and its own set of limitations so its best to get familiar with them and get familiar with what can be accomplished via HTML/CSS/Javascript code. And just for giggles, try designing a building a website without ever opening Photoshop, I think you will be surprised at what can be accomplished when designed solely in the browser!

Importance of a logo in the digital age

eSites Network - eVolve Your BusinessClients know what you do. But do they know who you are?

The importance of social media is undeniable. Most companies have come to understand it is beneficial to embrace this shift in how they advertise and market themselves, therefore are using Twitter to introduce their business to the social media landscape.

Twitter poses one straightforward question; ‘What are you doing?’

Of course what you are doing as a company says a lot about who you are. However, in terms of updates, this can be answered hourly and in a multitude of ways – as a result the overall quality of your image could be confused by the quantity and variety of Tweets.

Furthermore, the impression left to potential and existing customers becomes harder to control and monitor. For example: your helpful responses to criticisms leaving negative impact instead of doing any good, or the desire to convey yourself as ‘human’ with a few personal Tweets accidentally damaging your professional identity.

So although it is most definitely a phenomenon we encourage our clients to be a part of, using social media does not ultimately serve to produce a clear, concise, and memorable image of your business. And isn't that what you strive most to achieve?

That’s where your logo comes in.

Think of your brand as your stamp and your logo as the mark left from it.
Think of Twitter as a place to share information and build relationships.
By definition Twitter is a social networking site; it is crucial to grasp the meaning of the social bit. Not everything will be read by everyone. Not everything will be remembered. Not everything you say will be taken seriously. Whereas, it is decided immediately that you are as serious about your logo as you are about your business.

How seriously does it appear you take your business if your logo looks like an MS Paint creation?

“Which came first, the logo or the brand?”

Reputation + Company Name & Logo = Brand.

We often deal with clients who dismiss the function of a logo by arguing “it is not the brand.” The simplest response to this is, because your logo has the ability to damage your brand, it should be dealt with as a tangible segment of your brand.

Your brand sets expectations of your company, and your logo is the first part of your brand a client visiting your website sees. If they remember only one piece information from your site, it will be your logo.

Therefore apathetically viewing the logo as merely a ‘space filler’ means you are losing out on using it to your business’ full advantage. An amateur logo undermines your professional credibility, no matter how good your service and website are. A weak logo or weak name undermines company strengths.

Think of a poor logo as the equivalent of turning up in your gym clothes to sell a costumer a product. You wouldn't dream of it. Unless of course you’re selling gym equipment.

For businesses looking to promote changes and attract new customers, reinvention in terms of a website design may not be enough. As your company evolves, you want your image to grow with it. If you want your brand to develop, your logo is an important weapon in your strategy.

A strong logo is an instant visual representation of who you are. It encapsulates and amplifies your corporate image. It attracts the target audience. Look at your current logo and ask yourself: is the best vision you have of your brand emphasised in your logo?

If your answer is no, you are suffering and it’s time to reconsider.

Communication, Mood and Meaning

Lines in Web Design

A line is a basic element that refers to the continuous movement of a point along a surface, such as by a pencil or brush. The edges of shapes and forms also create lines. It is the basic component of a shape drawn on paper. Lines and curves are the basic building blocks of two-dimensional shapes like a house’s plan. Every line has length, thickness, and direction. There are curved, horizontal, vertical, diagonal, zigzag, wavy, parallel, dashed, and dotted lines.

Lines, lines, lines. Lines are everywhere in design, they are used to divide space, direct the user’s eye, create flow, create emphasis and organize all design elements into form. Generally, we don’t think about lines that much, but we make use of them quite often to visually communicate our objective to the user. The web is about communication, so using lines to communicate your message properly is important.

Communication — Line Types

First of all, a line is simply a fluid connection between two or more points. It seems like there is an endless supply of differing types of lines, from thin lines to thick lines, short lines to long lines, wavy lines to straight lines. But just like everything in design — or in life — there are some basic lines that we need to understand.

  • Literal line – A literal line is just that, a line. It’s the visual or actual line you see.
  • Implied line – This type of line is the “imaginary” line that your mind instantly creates by connecting dots or elements together. The best example of this is a dotted line.
  • Psychic line – This type of line is another “imaginary” line that differs slightly from implied line in that psychic lines are generally used to create eye direction form one element to the next. A great example of this in web is a photo of a person looking in a particular direction, or a series of arrows.
  • Contour lines – Contour lines are mainly used to define edges and create boundaries of elements. This type of line is probably the line type mostly used or seen in web design, borders being a classic example.
  • Dividing lines – Dividing lines divide space and are commonly implied lines that are used to divide content areas such as the dividing spaces between columns of text.
  • Decorative lines – This type of line is generally used to add something to an element: texture, depth, shading, function or any other decorative embellishment. The most well know decorative lines in web design is the underline under a text link.

Meaning and Mood

Lines are great for creating mood and meaning. Beyond the foundational line types above, other line types and styles can be used to create meaning and mood. Because there truly are an endless number of line types and combinations within, we’ll just take a look at the few main types.

vertical lines
Vertical lines simulate height and can create a mood of grandeur or spirituality. Great examples of this is the vertical line usage in churches and cathedrals where ceilings are lifted on tall vertical pillars guiding the eyes upward. In web design vertical lines tend to represent or create length and indicate to the user that there is more content below the fold.

horizontal lines
Horizontal lines generally create relaxation or a calming mood, they tend to be quiet and subtle whereas vertical lines are more imposing and powerful. In web design horizontal lines are also known for their ability to organize content. When you look at gridded layouts you’ll notice that horizontal lines are the elements creating balance and organization — even though grids are generally laid vertically.

curvy lines
The majority of curved lines create familiarity and comfort, they also suggest relaxation. Curved lines are very easy on the eyes and are interesting to follow. Curvy lines are associated with nature — they feel very organic.

diagonal lines
Diagonal lines are the greatest way to create movement and direction. Where horizontal lines suggest gravity and are stable, diagonal lines are more unstable. These lines don’t lay down or stand up in a restful position, they are in motion and you can actually create a sense of speed just by simply adjusting the pitch of the lines: the steeper, the faster.

thick lines
Thick lines are visually powerful on the canvas, they represent power and respect. The use of thick lines can build a feeling of power and boldness. However, the overuse of thick lines can be very overwhelming and way too demanding so you’ll need to be careful and balance them off with other visual elements or differing weights of line.

thin lines
Thin lines tend to feel fragile, but their subtle feeling makes them great for directing the eye without being annoying. They are also empathetic to the viewer and tend to create a feeling of comfort and tranquility. Combining thin and thick lines is a great way to create visual interest and hierarchy by balancing the visually demanding thick lines with the subtle, comforting thin lines.

In general, its more about how you manage to add them to the general alignment of the entire website, its less about the lines on their own. One of my favourite ways of creating nice subtle lines which encourage continuity within my designs is by using a nice solid grid system. This gives the design more structure and organisation without having to directly use visible lines, the lines are created by the eye of the user.

Architecture in Web Design

Let’s make a real world comparison: buildings are very much like web sites. So are web designers and developers essentially just architects? When you compare web design with any other major form of art, fine art, print design, music, sculpture, architecture, it almost directly compares itself to architecture. Web design, like architecture, is an art form that has many differing interests. Web sites and buildings have users, clients, companies, products, information, technology, structure and design.

So the question is, can we learn from architecture to make web designs better? Fortunately architecture has been studied for hundreds of years so we have plenty of resources to tap into. One of the great artisans who pioneered engineering and architecture was Marcus Vitruvius Pollio, a Roman engineer, architect and artist. In his book De Architectura he describes three fundamental principles of what great architecture should accomplish:
Firmatis: It should stand up robustly and remain in good condition — be durable.
Utilitas: It should be useful and function well for the people using it — be functional.
Venustatis: It should delight people and raise their spirits — be beautiful.
These three principles can be directly applied to web design as well. Every really good web site should have these same principles: durability, functionality and beauty. In the beginning web design was just one document of information, a basic text document. As the web progressed, CSS allowed web sites to separate the content so that it could be re-skinned without altering the structure of the site. Today, HTML5 semantics is allowing us to finally separate meaning from structure and style so that web sites can be durable and be ready to embrace new technologies as they come.

These principles are fundamental for web design as much as they are to architecture. We’ve all designed, developed or have used sites that do not follow these principles. Without durability a site loses its ability to grow with the times, without good function a site will never be used and without a pleasing design nobody would even stay on a site let alone revisit it. A website is complicated but I like these principles because it makes the task of designing and developing a site easier to digest. They allow you focus on what is important and not get lost in every little detail of a site.

Building for “Firmatis”

Durability is probably the most overlooked aspect of web design. Most of us never consider the life span of a website when we start to design. But durability is important even to web design because web products are starting to live longer. Some web applications and sites will probably live to be older than most of us. Now, I know what you are thinking — it’s really easy to redesign a web site — and that is true, but what if it could be even easier? If you design and develop for durability your next redesign is going to be so much easier if you don’t have to rewrite every file HTML, CSS and JS file in the structure.

Semantics and a progressive approach to web design are required for durability. Creating semantic markup – markup that describes but not specifies – is important because it allows the site to be updated quickly by any designer or developer. Most designers and developers don’t stay on a web project or even the same company for the life span of it, so by using proper semantic markup you can leave behind a good foundation for others to modify or build on without them having to know everything about the code structure.

Progressive enhancement and responsive design also play a huge part in durability. When you keep in mind that people will view the site differently in whatever browser they prefer and that it’s okay for the site’s design to render a little differently, or adjust to that browser, then your site can stand strong for a long time. If you design a site to look best in one particular browser, you not only isolate users, you also hurt its life span. When a new browser comes out that has better user adoption then the one you designed for, you will lose users, or you will have to completely redesign and rewrite for that new browser. Don’t waste time chasing browsers, flexibility in web design builds durability.

Developing “Utilitas”

Aw, usability. Over hundreds of years of building things we have come to understand that you can have the best invention ever, but if you can’t use it, it doesn’t matter. An architect has to make sure that all the doors open the right direction, that all the light switches have to be close enough to doors so people can reach them, that all doorknobs and elevator buttons must be placed so that all user can access them. Same goes for web design — even though some will argue against usability. A successful web site must be functioning and usable: the navigation needs to be clear, buttons need to have hover states, and all elements need to be accessible to all users.

Proper function and usability are probably the hardest things to develop in a website. So much of it depends on preference and the skill level of your users. Standards and conventions solve most usability problems. Just imagine if buildings didn’t have standards and conventions, if a particular architect put power outlets in the ceiling because he/she liked the way it felt or if he/she decided to go super minimalist and not use outlets at all. Standards are proven concepts, they represent years of bad functionality corrected. As designers we need to understand that the first priority of the site is to be functional to the user, to work in a comfortable, familiar fashion so that the user can accomplish their goals.

Create “Venustatis”

Websites should be easy on the eyes, they should appeal to people and people should be drawn to use them. A great web design should be able to spark some kind of thought or emotion simply by the color scheme, unity or composition alone. Design is a powerful tool and when done correctly can accomplish many things that function and durability can’t. Design has the unique ability to fill something in all of us, whether is be print ads or architecture.

Web design is no different than the design of a great building. A well designed and beautiful web site will attract people for no other reason and when they stop to enjoy the design they will be able to discover what is “inside”.

Good Website Navigation is What Keeps Visitors Coming Back

An effective website is one that is easily understood by the average web user.

Yet so many websites seem to forget the very purpose with which they were set up. No product or service can be sold without information about that particular product or service. That information should be available no more than three clicks away from every visitor – or the visitor is going to lose patience, and all the fancy design and clever copy is going to be wasted.
A general guideline would be to make sure that all navigation elements are linked clearly using standard link conventions such as menus, buttons, changing color on rolling over the cursor, or underlining the text. Avoid using ambiguous or clever names for links. Keep page design attractive and simple – don’t hide links in images, make image elements into links, or require multiple clicks to finally reach an inner page of the website.

Important Navigation Elements for every website:

  • Internal Page Links – From the homepage, each page on the site should be reachable within two or three clicks. Vital pages should be only one click away. The kind of site will determine the links that are prominently displayed. Make sure the page tabs have titles that are easily understood – users don’t want to search every page for relevant content. Organize related pages using drop-down menus. The internal logic of the website should be consistent so that the average user understands how the information has been organized.
  • Login Boxes – These should be displayed prominently, preferably on the Home Page. A visitor who has registered with you earlier does not want to navigate through your site again, and will not bother unless they can reach you with one click. Common locations are top right, top left or in the page header.
  • Shopping Carts – If you sell your products using shopping carts, you need to display the ‘View Cart’ button prominently on each page. The popular location is top right, as part of or just below the header.
  • Order Buttons – Individual order buttons should be large enough and visible. To receive more orders, make it easier to reach your order page.
  • External Links – Such links are often used in the text areas of a site. They could be references to extra information on other sites or to recommended products. Although judiciously used links will increase your Search Engine rankings, take care not to overdo it. Nobody likes to read text heavy with hyperlinks – your site is not Wikipedia.
  • Advertisements – Adverts are normally either text or a graphic with a related hyperlink. Adverts can be positioned anywhere on a page. However, ads which are visible on a page without having to scroll are obviously more effective.
  • Downloadable Items – If your site has downloadable items such as pdf files, video or audio, make sure you tell the user the size of the file and whether any application is required to use the file. Where possible, provide a link which can be used to download the application.
  • Site Map – This is a great way of laying out your entire website for your visitor, as well as for search engines. A site map lists every page on your website with a link to that page.
Good website navigation makes viewing your web pages a pleasure, not a chore. This will in turn lead to increased signups, sales, customers or members. Check out your website today and make sure you’re not losing business because your navigation is clumsy and complicated.

Get the Most Out of Google Docs

How to Get the Most Out of Google Docs to Improve your Business Efficiency.

In the past, co-workers shared documents by emailing them to each other. This often resulted in a great deal of confusion, with different versions of each document flying around, changes mysteriously appearing on documents with no indication of who had made them, and people from different mailing lists accidentally getting copied on important documents.

By introducing the suite of online productivity applications that together make up Google docs, Google has made some of these problems a thing of the past. Let’s look at it in more detail.

Basic Features of Google docs:

1. System requirements:

Google Docs is compatible with Internet Explorer version 6 or greater, Firefox version 1.07 or higher (but not Firefox 3) and Safari 3.1 or higher. In addition, you must enable JavaScript and cookies to use the applications.

2. Access:

To access Google Docs, you need to create a Google account. Google accounts are free. All you need is a valid e-mail address — and the willingness to agree to Google’s terms of service — to create one. If you've signed up for Gmail, you already have a Google account.

3. Compatibility:

With an account, users can either create a new document, spreadsheet or presentation, or upload an existing file to the system. Google Docs is compatible with the following file formats:
  • Comma Separated Value files (.csv)
  • Hypertext markup language (HTML) files
  • Microsoft Word, PowerPoint and Excel files (.doc, .ppt or .pps, and .xls, respectively)
  • OpenDocument Text and Spreadsheet formats (.odt and .ods, respectively)
  • Rich text format (.rtf)
  • StarOffice documents (.sxw)
  • Text files (.txt)

4. Ownership:

You become the owner of any file you create or import into Google Docs. Owners can edit and delete files and invite collaborators and viewers. Collaborators can edit and export files. The owner can also choose to give collaborators the ability to invite other collaborators into a project. Viewers can look at files and export them, but aren't allowed to make edits.

5. Organization:

The organizational approach for Google Docs is a simple file-and-folder system. You can create folders and subfolders for all your files. Google provides you multiple ways to sort data, including alphabetically or by the latest updates.

6. Storage:

Google Docs users get a lot of storage space with their accounts, but it’s not unlimited. Each account can have up to:
  • 5,000 documents of up to 500 kilobytes each
  • 1,000 spreadsheets of up to 1 megabyte each
  • 5,000 presentations of up to 10 megabytes each

7. Using Google Docs:

  1. Multiple people can view and edit a Google Docs file simultaneously. More importantly, they don’t have to worry about creating duplicate copies of the same file.
  2. With Google Docs, everyone working on a project makes changes to the same master document. As users make edits, Google Docs tracks all the changes and tags each edit with the responsible Google account holder’s name. That way, the owner of the document can scan changes and see who is responsible for each edit.
  3. Google designed Google Docs to autosave almost constantly, preserving each edit shortly after a user makes it. Other users see the updated changes instantly.
  4. While working with documents or presentations, users can see who else is in the file.
  5. And with spreadsheets, users can click on a tab labeled “discuss” to chat in real time about the project.

Exciting New Features:

1. Google Gears:

This allows users to edit documents offline. Once you reconnect to the Internet, Google Docs automatically syncs the offline copy of your document with the master copy stored in the Google account. If another user has made edits to one of the sections you’ve changed, your changes won’t be implemented. Instead, Google alerts you to the issue and gives you the opportunity to compare your changes against the other user’s edits. If you still want your changes to go into the file, you can copy and paste them into the document.

2. Google Finance:

This allows you to retrieve information about a publicly-traded company. Users enter a company’s stock ticker symbol and request a specific piece of information about that company. The information updates as market conditions change, though the data can lag up to 20 minutes behind actual conditions.

3. Google Lookup:

This is another spreadsheet feature. Let’s say you’re building a table that compares the population of different cities. With the Google Lookup feature, you’d enter a formula, signify the city you are interested in and ask for the attribute “population.” The Google search engine looks for that information and retrieves it. If there are multiple answers for a particular attribute, Google presents all of them to you so that you can determine which one is right for your needs.

As with all Cloud Computing, security is the biggest concern of many users. Google assures users that all data is password-protected and kept private, and also inaccessible to the spiders sent out by Search Engines. Users also retain all ownership rights to their materials.

In conclusion then, Google Docs make the virtual office a reality, as well as allowing greater levels of collaboration, improving efficiency, and saving time, effort and money. Sounds like enough reason to try managing your next project online?

Three Ways to Increase Commerce on your Site Using Social Media

Although Facebook has become the hub of commerce for many retailers, it is not a viable direct selling channel. For example, many Facebook storefronts use iFrames or Flash to show product content, which is then completely ignored by search engines. Until it evolves to support the sophisticated analytics, SEO and merchandising tactics that retailers already use on their commerce sites, it is perhaps best leveraged as a complementary sales channel. It is also a branding and engagement tool, and a traffic-driver to your e-commerce site, but it would be more advantageous to think about these ways of incorporating social media onto your own site instead.

Three Ways to Increase Commerce on your Site Using Social Media:

1. Ratings and Reviews:
Many companies still outsource user-generated content on to their Facebook page. Yet studies show that 65% of consumers prefer researching products on a retailer’s website, and a majority use search as the route to finding product pages. Despite Facebook’s sheer volume of users and abundance of user-generated content, on-site customer reviews are critical to a successful social commerce strategy. Retailers have seen significant SEO benefits by housing reviews on-site. Most companies believe that traffic directly to product pages produces the highest conversion rates, and blending product descriptions with customer reviews creates optimized content that search engines rate very highly.

2. Social Login:
Most websites present visitors with some kind of form to learn more about their shoppers in an attempt to build relationships, target or personalize content and increase retention with special offers and promotions. But most people hate filling forms! Often they will falsify information because it just seems too intrusive to lay out all their details to a faceless website. This is where Social Login becomes important. It is preferred by customers, and simplifies registration as well as providing a wealth of demographic data to the retailer. It has been shown that consumers who prefer to use their social identities to interact with sites are more valuable shoppers. They buy more often online and are more likely to rely on their social networks to influence purchase decisions., These consumers are nearly twice as likely to purchase on a site that automatically recognizes them.

3. Via Your Mobile:
The mobile phone is rapidly becoming the focus for social activity online, and now increasingly for transactions too. Shrewd retailers can harness this channel to uncover new revenue streams. A mobile “check-in” posted to a social network feed expands retail brand awareness among a consumer’s friends. This creates a form of social validation – “If my tech-savvy friend checks in to rave about a great deal on a laptop at the electronics store downtown, I may be inclined to go shopping”. Retailers also facilitate loyalty and repeat business by offering badges, virtual currency or special offers to shoppers who frequently check-in, turning their websites into powerful channels for customer engagement.

Fortunately then, with the right mix of tools, the benefits of social shopping can be extended to your e-commerce site. Social commerce is still an emerging area of focus for retailers, but don’t assume that it only needs to take place on a social network. Leverage these strategies to optimize your website and achieve maximum return on your social investment.

Embedding Content into your Website To Create a Strong Social Media Presence

Social Media Marketing has become central now to business development, irrespective of the product or service you’re offering. Media pundits tell us that customers now interact with companies in a completely different way, and expect their favoured brands to be nimble and responsive to the demands of quick, easily absorbed messages put across in a way that is attention-grabbing and contemporary. The great advantage of embedding exciting new content is that it is accessible to all and easily shared at the touch of a button. Sit back and watch your sphere of influence grow!
It is important to be aware of the extraordinary range of things that can be embedded into your website to create arresting visual images. Here’s a look at some of them:

Fourteen Things You Can Easily Embed into Your Website:

  1. Embed High Quality Videos:
    Embed a high resolution video clip into your site. Explain how a product should be used, take visitors on a virtual tour of your hotel, present complex information about medical procedures in a simple way, or sell a holiday destination.
  2. Embed MP3 Music and other audio files:
    Present a clip of a hit single, a famous speech, a podcast, or an audio guide to assembling a piece of furniture. The possibilities are endless!
  3. Embed Photos and Slideshows or Web Albums:
    Share pictures of your factory, your stall at an exhibition, or the award your company received. Reassure customers of your credibility with pictures of smiling employees or your imposing office building. You can even embed a whole slideshow sized to fit conveniently into your webpage.
  4. Embed Your LinkedIn Profile:
    If you wish to embed your LinkedIn profile into your blog and display it in the sidebar, site visitors can read a summary of your LinkedIn profile without leaving the site.
  5. Embed Google Maps in Web Pages:
    Embedding a Google Map in your website is now almost as easy as adding an image. Show visitors where you’re located – clear directions make a lot of people more likely to want to set out in dense traffic to find your store, art gallery, or restaurant.
  6. Embed Events from Google Calendar:
    Not only can you embed a Google Calendar into your webpage, but you can even customize it and choose elements that you want to display or hide in the calendar. Alert customers to important events by date.
  7. Embed Very Large Photographs:
    To embed really large images, you can use programs which break your photographs into small tiles and you can even pan / zoom across these images, very similar to the default interface of Google Maps. Wow visitors with high-res pictures of locations, products, architectural plans, or events.
  8. Embed Charts and Graphs in Web Pages:
    Illustrate your point clearly, and also make it easy for important information to be shared across a large number of people.
  9. Embed Word Documents or pdf Files:
    Even Barack Obama is using this feature to upload his public documents and upcoming plans! Case Studies, User Manuals, Patient Guides, Project Specifications, everything can be easily embedded.
  10. Embed PowerPoint Presentations:
    You can embed presentations that are either large or formatted in the form of magazines or catalogues. Use this format to treat visitors to a high-quality presentation about your business – make them feel they’re sitting in the Boardroom with you!
  11. Embed Flash or Flash Video:
    Embedding Flash content improves the overall user experience and with the newer methods it also becomes more searchable.
  12. Embed Spreadsheet Data:
    Embed a range of cells from a spreadsheet into a web page to capture important data in a visually appealing and organized way.
  13. Embed Chat in your Blog:
    If you like to chat with visitors who are currently on your site, embed a widget and place it in the sidebar of your website. Visitors show up in your buddy list so you can strike up a conversation, answer questions, or just keep tabs on guests.
  14. Embed Another Webpage into your Blog:
    If you would like to embed another website into your web page, you can do that too. Maybe you’re recommending another company or product, maybe you’re alerting visitors to a launch, or the completion of a project. Either way, the content can be shared easily, and your Search Engine rankings improve.
So clearly, you can embed almost anything into your HTML pages now – from Flash videos to Spreadsheets to high resolution photographs to static images from Google Maps and more. Allowing your visitors access to high-quality content that can be easily shared has never been easier!

Brand Building With Web Design

First of all, what is a brand? A brand is a symbol. Symbols are designs which represent something else, and a brand is meant to package all of the associations, experiences and characteristics into an abstract construct. This construct can be evoked using consistent imagery, sounds, phrases and logos with which people come into contact.

Brands are very important as they help you win customers and they also help you to keep them. They do this by awakening the associations and experiences you previously had with the brand, or have seen through advertising, when you come into contact with the brand at key stages. For example, when deciding what product to purchase out of a selection of similar items.

Brands set expectations, and when faced with uncertainty people tend to pick the safer option. People know what to expect from a brand they know.

Branding is a complex process that is performed across all types of media, from product packaging, TV commercials and magazine ads to interior store decoration and logotype design. Of course branding also applies to web design.

It doesn’t matter if you’re building a website for a multi-million dollar brand or a personal blog, branding still matters for the reasons outlined above. In the case of a personal blog, branding will help set you apart and make your site memorable. Here are some tips help you to build a brand with web design.

1. Color

The choice of a good color palette is very important in branding. Color isn’t just aesthetics — it stimulates various emotions and carries with it subconscious associations to various things and characteristics.

For example, the color red may actually increase blood pressure, pulse and respiration. It’s a color that symbolizes passion, energy, power and excitement. Because of this, it’s usually a good color choice for brands in the entertainment industry.

Other colors carry different associations and effects. Green symbolizes nature, environment, profit, money and health. It’s also a calming color, which is why hospitals usually paint their walls pale green.

When picking a color for your brand, research its effects and associations to see if it is an appropriate fit for the type of things your brand represents. Also note that different cultures may associate the same colors with different things, so it’s a good idea to check that your colors mean what you think they do in the markets you operate in.

Logitech use teal as the brand’s main color. Various shades of teal are used around their website, from background colors to headings and links:

2. Character

Does your brand have character? Infusing your brand with a little personality can help you define what it stands for.

Is the brand all about stability and safety so that your customers can be sure to rely on you? Is the brand fun and down to earth?

Many people in commercialized societies use products and brands to define themselves, so shape your brand’s character towards something which your audience will like to associate themselves with.

Anthropomorphism is the attribution of human qualities and characteristics to other things, like animals or objects. Infusing your brand with anthropomorphic elements is a good way to give it character.

Think about the icon for the "Finder" application on Mac OS X. It’s a blue square with a distinctive smiling face drawn with a few black lines.

The program it represents is a file browser, but by giving it human characteristics the designers give it a soul.

Twitter’s little blue bird mascot has proven very effective; all of the custom media and websites that Twitter fans create usually feature their own variation of it. They may all look a little different, but are still instantly recognizable.

3. Emotion

Emotion is another factor to consider when building your brand. What feelings and emotions do you want people to experience when they visit your site? What sort of things do you want them to associate with your brand?

Crafting the aesthetics of your site shouldn’t be about following the latest design trends, it should be about deciding on the emotions and ideas that you want your brand to project, and then working on a design that will do just that.

The Organic Express website makes excellent use of colorful images and earthy colors to create a rich and earthy brand, which is very important for a organic food company.

4. Consistency

To build a successful brand you need to make it memorable. What do you do to make people remember things? You repeat them.

Consistency throughout your web design will build on the choices you’ve made earlier regarding selecting the right personality for the brand and evoking the appropriate emotions. Keep consistent colors, visuals and typography throughout to ensure your website projects a uniform image.

Skype consistently integrate several branding elements throughout all of their marketing media, which include the color palette with a dominant blue, white 2D clouds with illustrations sitting on top of them and multicolored rainbows:

5. Reusing code and visuals

Consistent visuals and layout allows you to reuse more of your content, be it stylesheets or images. This means that your site will load faster as the user’s browser doesn’t need to download as many things — old images and CSS are already stored in its cache. integrates their logo with the navigation bar, infusing their brand into the page design:

6. Size and position of the logo

The accepted norm when positioning your site’s logo is to put it in the upper left area of the page.

That’s the area where most people will look at to see what site they’re on. Additionally, it’s best practice to link the logo image to the site’s home page. But position is only one element — size is also important. Ensure your logo is big enough to be the second or third thing that people will notice when they arrive on your site.

UX Booth has a nice, large logo in the top left area of the page, which is one of the first things that you notice when you arrive at the site:

7. Value proposition

When a visitor arrives on your site for the first time they take the first few seconds to orient themselves. Is this the right site? Does this look interesting? What is this all about? To answer these questions you should provide a clear and concise value proposition to your visitor.

This value proposition should be a short statement in a prominent location on your page. It should preferably be located next to the site’s logo so that when a new visitor reads the title of the site or business they’ll follow on to the value proposition.

In a few words explain exactly what benefit your site provides to the visitor, so that they’ll know not only what your site is about, but why they should keep using it.

The ReportBox website features a clear value proposition underneath the logo and navigation. The large font size ensures that it’s one of the first things that you’ll read:

8. Tone of voice

The language you use on your website needs to reinforce your brand’s character and personality. If your brand is a friendly and down to earth, and your audience are young, tech savvy people, then informal and fun tone of voice may work well for you.

On the other hand, if you’re making a website for an investment bank, the tone of voice should reflect that by being much more formal.

It’s not just about what you say — it’s about how you say it. You can say the same thing in different voices and get the same meaning across, but the personality that this voice emanates will be different; so choose a tone of voice that suits your brand’s character and audience.

Matt, a simple web app that helps you use multiple Twitter accounts, features hand drawn illustrations and a friendly tone of voice, ideal for the young, tech savvy audience:

9. Uniqueness

Getting all of the above elements will only get you so far though, because there is another very important thing to consider when building your brand: uniqueness.

If your website looks just like the competition, then is it really memorable? How would potential customers differentiate between the two? By putting in that extra effort to create a unique image you’ll not only stand out from your competitors, you’ll be more memorable, and that means a better chance that your visitors will come back for more.

Carbonica’s website features many recycled paper textures, hand drawn fonts and cut-out style illustrations. This earthy imagery helps promote the sustainable image that Carbonica strives for and is different enough to be memorable:


Building a strong brand is important not only for big corporations, but also for small companies and even personal websites and blogs. Branding helps people differentiate between competition and quickly judge quality.

The web is an excellent platform to build your brand, so it’s important not to ignore branding when working on your website. Make sure to utilize all the various techniques to make it powerful and effective.

5 Principles of Good Web Design

It’s difficult to map out what works for web design and what doesn’t after all, there are so many different and effective approaches you can take. For one website, a crisp, clean home page looks great, and for another website, a messy, colorful home page draws you in. However, there are a few principles of good web design, that are universal. Here we will explore five principles of good web design.


Before we can even begin to take the aesthetics of a site into consideration, we need to make sure that the website’s audience can easily navigate the website. While it’s not usually practical to include all of your primary content on the home page, you do need to include tabs that lead to the most relevant content the website’s audience is visiting the site for. For instance, along the top of the Fender website here, we see common-sense tabs along the top that link to common reasons a visitor would be coming to the site, including Products, Vendors, News, Store and Community. Along the bottom of the site, where they don’t distract from a visitor’s first impression of the site, are more detailed navigation options. Although the slideshow images on the site are big and flashy, visitors still know exactly where to go to get the information they’re after.


Implementing the site’s brand throughout the various web pages is essential to maintaining a sense of continuity in a website. The Coca-Cola website does this well by incorporating its tell-tale red, white and black advertising color scheme throughout its pages. While a website’s brand doesn’t always equate to a particular color scheme, the brand should be implemented on every single page within a site so that the site pages flow together as one unit.


We’ve all seen websites that make use of a large central image to capture the eye when someone visits a page. While this can be done very successfully, you don’t always have to wow a website’s visitors with one large image. You can vary up your image sizes and incorporate them in different ways to bring color and life to a website. The Organic Express website makes excellent use of colorful images to make a visitor feel right at home.


People like to access multimedia on websites, but they don’t usually like to be overwhelmed with it. Better to let your visitors click on the audio/video themselves than to add in a flashy video or audio that launches as soon as the visitor accesses the site (there are exceptions to that rule though, especially for sites where "shock and awe" is the best approach). A good example of good use of video is found on the University of Notre Dame website, which features excellent navigation while prominently featuring a slideshow of a number of videos that interested visitors can scroll through and view at will.


All the images and videos in the world can’t rescue a site with typography that’s difficult to read or not used in an effective way. Typography is a tool that tells the visitor what he/she needs to know and guides their eyes across the site. Finding the right typography to fit your audience and varying the size and prominence of certain words on the site is essential to getting the site’s message across. This Activate site uses typography well. They have contrast in the typography and uses fonts to draw emotions.

In conclusion, as you explore today’s web design trends and the newest techniques, remember to go over these guidelines. What are some rules do apply in your design?

The What and Why For's of Bounce Rates

A lot of visitors don’t bother to check more than one page of a website. Depending on the landing page 20 to 80% leaves immediately. If visitors don’t spend time browsing and taking the action you want, all the time and money spent to create the website will be lost. A small improvement can 'earn' you a lot of money!

Getting people to your page is just the first part of having a successful site. Making them stay there, is another matter. One of those important metrics in web marketing that measures the effectiveness of your site is Bounce Rate. Google’s definition of bounce rate is as follows:
Bounce rate is the percentage of single-page visits or visits in which the person left your site from the entrance (landing) page.
So the lower the bounce rate the better, as this means more of your visitors are clicking through to other pages on your website. Though bounce rates vary wildly based on industry and type of site, in general websites have a bounce rate between 20 – 40%.

So how can I get to know what my Bounce Rate is?

If you really want to know your bounce rate, the easiest thing to do is to set up a Google Analytics account. Google Analytics is a free website statistics program where you can measure all kind of statistics, including your Bounce Rate.

Why is Bounce Rate important?

Bounce Rate can help webmasters to get insights from the data, for determining how landing pages perform as compared to visitor expectations.

Example 1: – if you run paid search campaigns, then you know the importance of testing a landing page (SEO, A/B Testing, etc.). I find that bounce rate at the aggregate level doesn’t tell you very much (site level bounce rate), but the bounce rate per page is extremely useful.

Example 2: - if you are driving paid search visitors to your landing page and you have a 80% Bounce Rate on that page, then you’ve got a problem. Why are that many visitors bouncing after clicking through your paid search ad and landing on a page that theoretically should be highly targeted?

But the impact of a high bounce rate goes even further. Google uses bounce rate as an indicator of the quality of the website (design, layout, content, etc.) and therefore can effect your search engine rankings – A low(er) bounce rate ensures a better ranking in the search engines.

What is a ‘Normal’ Bounce Rate?

As mentioned earlier, an average page from a webshop or website with good keyword optimalized content will have a 20 – 40% bounce rate. Direct response entry pages sometimes can generate a 90% bounce rate, but that’s because you either subscribe or you leave the page. But single-page websites also have a very high bounce rate, because the websites consists of only one single page, so the entry-page is the same as the exit-page!

Blogging sites in general have a 60-80% bounce rate because, e.g. visitors from your RSS Feed are only interested in your latest article, or visitors from search engines only want to read that single article matching there search keyword or phrase, etc.

How to decrease Bounce Rate?

Or how do you keep visitors from bouncing off your website? We will mention the most important factors which can determine the height of your bounce rate and keep your audience engaged.

1. Load time

No one likes to be kept waiting, your page should take no more than about 4 to 6 seconds to load if possible. Optimise your images and code, and cut out any clutter. Check your website for HTML code errors by running it through an HTML validator. HTML errors can cause web pages to render incorrectly in some browsers like Internet Explorer or FireFox and increase their loading time.

2. Relevant and High-Quality Content

Most online viewers spend less than 60 seconds at an average site. The challenge now is how to attract readers and keep them longer on your site? By giving them what they need, of course, through relevant content. Boring content or content that is overloaded with certain words or phrases that are intended to help your search engine ranking will turn people off quickly. You know the old saying, .. bla bla Content is King, bla!

Tip: Along these lines, it’s often best to include posts that are part of a series that pushes someone who is interested to come back sometime in the near future.

3. Clear and Intuitive Navigation

Websites also need an easy navigation structure with common names people expect to see. A visible navigation, labeled accordingly and no broken links are essential to keep visitors on your site.

It has become common practice to have the main company logo link to the site homepage, so if all else fails and the visitor hasn’t found what they want, at least make it easy for them to find their way home to start again.

4. Target Group or Audience

If your advertising reaches the wrong audience, it will result in a higher bounce rate. For example, young girls are not attracted by a site that only sells anti-wrinkle solutions for 35+ women. One of the main aspects of having a high bounce rate probably means you’re not getting your message across to your target audience.

5. Technical restrictions

If your page relies on a Flash movie to demonstrate your product, are you certain that your visitors will be able to see it? Quite often corporate networks are restricted and block this kind of content, not to mention some iOS devices. If users see a blank box, or error message they will probably find the 'back' button faster than light.

6. Audio and Video

Sounds and hard music do irritate people, especially if they didn’t ask for it. Many users will exit your site immediately if they start hearing something they don’t like. Use this kind of media at a minimum in your website and if you really need it, let the visitor choose whether he/she wants to start the video or that groovy song.

7. Advertisement and other Distractions

Advertisement, for an external advertiser it maybe could mean success, but for most common people it’s an enormous annoyance factor. Remove automatic popup windows, modal boxes, scrolling text, spinning logos and floating ads where possible. It’s all about the content ..!

8. Design and Usability

Your website needs to instantly portray an image of quality. If the overall design of the website/page is visually appealing to your average visitors, the lower will be your bounce rate. But what is a commonly accepted visually appealing website? That depends on your target audience, your product, message or purpose of your website.

.. It is daunting to be presented with 100 line paragraphs. Break it down into bite size chunks with clear headings above each one. That way they can scan down and pick out what’s relevant to them. A simple and clean layout, a great web usability, simple navigation, .. you know the works. A well chosen image/picture, such as a screenshot of your product can give an instant idea of what it is about, what it looks like and some of its features. And I could go on and on and ..

Tip: The best way to find out if your design is working for your business? Test, measure and improve your website step by step.

9. Commenting and Sharing

If possible, offer RSS subscriptions, a Twitter feed, a Facebook page and email newsletter along with anything else that might be relevant.

Give stuff away to your visitors, allow readers to comment on the topic of the article, mingle freely with your visitors and answer their questions. People are also much more likely to subscribe (extra returning visitor) if they get a free e-book, white paper, set of icons, quality content, etc.

Encourage readers to write guest posts, once readers have left their 'mark' on your site, they are less likely to forget or ignore your site.

10. Forms

If the required action is for the user to fill in a form, make it as short as possible. If they are requesting a downloadable product, do you really need to require they enter their post/zip code and force them to do so using form validation? I know it myself, too long contact forms scare me away .. don’t want to fill in the history of my life to order a damn pizza!


Realistically, you can’t make your site sticky for every single visitor, some will leave and never come back. But if you can grasp even a smaller percentage more of those new visitors, it can have a huge impact on your site’s growth. This is why it’s important not to focus on perfection, but rather, .. focus on improvement! Website statistics just isn’t about driving traffic to your site, but it’s about making people want to stay there and come back over and over again.

The About Us Page on your Website Needs to Make a Big Impact

The About Us page on a website often gets the least attention from the owners of the business, but it may be the one page that visitors judge you by.

How often have you heard the refrain "Just put in the History of the Company which I’ll send to you on a Word document written in 1986, and you can add the CVs of the Promoters." Does that sound even remotely interesting?

This is the age of Social Media, where communication is key, and the average browser on the Net has a short attention span. One lesson that Social Media has taught us is that people like doing business with someone they know. And that’s the power of crafting a good About Us page. You give your customers a look into who you are and what your company believes in, and you build the trust they need to move forward with your business.

5 Must-Haves for the About Us Page:

  1. Tell a Story: Stop for a moment and think about what your company stands for. Now make it personal. Describe some experiences you’ve had running your company, or look around at what you’ve created and talk about what your company represents. Don’t just recount the entire history of the firm, or leave a standard Mission Statement floating on the page. Tell people why you’re different, and what your values are.

  2. Build Trust: There are probably lots of companies out there doing what you do. Why should a customer trust you with their business? Build credibility by describing professional associations you belong to, people you have collaborated with, awards you have won, and industry causes you support. If you are an environmentally-friendly company, this is a good place to talk about it.

  3. Use Real Images: When somebody clicks on the About Us page, they want to check you out. Are you real? Support your story with pictures – but please, no stock photos! Use pictures of your team, your office, or your outlets to reassure people that this is a real company they’re doing business with.

  4. Let People Get to Know You Better: Provide links to other places people can find you on the Net, like Facebook, Twitter or another social forum. By providing links to these sites, people can judge how you respond as a company, and are reassured that you would be easy to get hold of if something went wrong. It’s all about building trust, and ultimately that’s what persuades people to buy from you.

  5. Don’t Forget SEO: There’s no point having an interesting About Us page if nobody finds it. Make sure that you incorporate SEO into your About Us page so that you rank highly with Search Engines, and more traffic comes your way. Use your About Us page to make a Sale by getting your visitors interested in your company and the people behind the products or services you are trying to sell.
Let your About Us page live up to its full potential by playing an active part in driving your online traffic and impacting your business.

7 Unbreakable SEO Rules

As a practice and industry, Search Engine Optimization (SEO) is constantly evolving. Sites are seemingly at the mercy of the search engines, who usually can't be bothered to give the site owners a heads up before they update their algorithm. Every few weeks it seems like someone is heralding the death of SEO, but evolution does not equal demise. Over time, tactics and methods change to work inside the guidelines of the search engines and to meet the needs of the online user, but the core fundamentals of SEO have remained the same.

Here are 7 basic rules of SEO:

1. Understand User-Intent

Keyword research is the cornerstone of any SEO campaign. Understanding user-intent when conducting and selecting your keywords is critical to getting your SEO off on the right foot and helping the right audience find your site. For instance, are "gym shoes," "sneakers" and "tennis shoes," the same thing? For some consumers those three words are completely interchangeable. But if a tennis player were looking for a new pair of shoes, they would search using "tennis shoes" and expect a very specific result. It doesn't matter how you would search for your brand/products, it only matters how your target audience searches. Targeting the wrong keywords because you failed to understand the intent of the search means you'll miss out on potential traffic and customers.

2. Don't Rush Your Link Building

It is crucial for the search engines to see a diversified approach to link building that slowly grows over time. A blended approach demonstrates your commitment to white hat link building and building your online presence naturally. The search engines are very aware that they are playing a game with spammers and black hat SEO users, and they don't plan on losing. If you develop too many links too fast, even if they are good quality links, this can raise a red flag with the search engines and your site could be penalized.

3. Content is King

Content is anything that is public and shareable. This includes blog web page content, blog posts, articles, podcasts, videos, whitepapers and more. It is also the most important factor of a website's long term SEO success. Content should always be written for the end user, not for the search engines. You have to remember that the search engines are not going to be the ones purchasing your products or services, people are. Optimize your content so the search engines can find it, but don't forget that it has to be human friendly first.

4. Be Strategic, Not Spammy

This is especially important in regards to social media marketing and social SEO. If you really wanted to, you could create a hundred different Twitter profiles to promote your content through. But what kind of real value are you getting from those profiles other than a link? You don't have to tackle every aspect of SEO at once. Frankly, there just isn't enough time in a day to take on that much work upfront. Pick and choose your battles so you don't overdo it. Flooding the online market with low-quality SEO doesn't help build your brand or reputation.

5. SEO is Long Term

This is probably the hardest thing for those new to SEO to wrap their heads around. SEO is not a quick fix to your online marketing. No, you won't be ranking on the first page of Google for all your keywords by tomorrow, next week, or even next month. This is especially true if you recently launched your site. It takes a long time to build up your trust factor with the search engines.

SEO builds upon itself over time, but that doesn't mean that once you have reached the first page in the search engines that you get to pack it up and call it a day. The Internet is continually growing and evolving. If you want to stay at the top, you have to keep working for it. It doesn't take long for your site to slip down in the results pages if you abandon your SEO.

6. Follow Search Engine Guidelines

Google, Bing and Yahoo want you to do well with your SEO because it helps clean up their search results. A better SERP makes for a happier search engine user. Search engines are in the business of pleasing the customer, just like everybody else. If your site can't help them do that, you won't ever rank well. That's why every site owner and marketer has to read the Google and Bing Webmaster Guidelines. Consider those guidelines your SEO line in the sand. If they call something black hat, then treat it as such and avoid it. It can be very tempting to test out the black hat side of SEO, especially when you see your competition doing it and seemingly getting away with it. Just don't! Sooner or later the search engines catch on and your site will be penalized.

7. Integrate Everything

Just about all your marketing online (and offline marketing) efforts can be leveraged for SEO. One of the biggest mistakes you could make is keeping your actions in separate silos. SEO works best when it is incorporated into the mix, becoming an essential component of your marketing online. If your company has a large marketing department, don't segregate the SEO guy back to the IT department. Bring him aboard the marketing team and you'll achieve greater online success.

How Your Website can go from Good to Great with SEO

As businesses become more aware of the need to implement SEO into their existing websites, it is important that they understand the basic steps involved.

  1. Commit yourself to SEO and be patient about results: Although this sounds like an unreasonable leap of faith, it is important that you go into SEO with realistic expectations. SEO isn’t a one-time event. Search engine algorithms change regularly, so the goalposts may shift. What’s crucial is that you get the basics right, and rewards will follow, even if they only become apparent over a period of time. Anyone who promises you instant results is stretching the truth.

  2. Use web analytics from the start: Web analytics software helps you to track what’s working and what’s not, so you can measure results against clearly-defined goals.

  3. Improve every element of your website: To show up on the first page of results, you have to ask yourself some tough questions. Are you really one of the 10 best sites in the world on this topic? Be honest. If you’re not, make your website better.

  4. Include a site map page: A site map will help spiders find all the important pages on your site, and help the spider understand your site’s hierarchy, especially if your site has a hard-to-crawl navigation menu. Keep your sitemap to less than 100 links.

  5. Create SEO-friendly URLs: Use keywords in your URLs and file names, such as Use hyphens in URLs and file names, not underscores. Hyphens are treated as a “space,” while underscores are not.

  6. Use a unique and relevant title and meta description on every page: The page title is the single most important on-page SEO factor. You will only rank highly if your primary term of 2 – 3 words is part of the page title. The meta description tag won’t help you rank, but it will often appear as the text snippet below your listing, so it should include the relevant keyword(s) and be written so as to encourage searchers to click on your listing.

  7. Write content for human beings, not bots: Although Search Engines have pretty powerful bots crawling the web, they have never bought anything online, signed up for a newsletter, or picked up the phone to call about your services. Humans do those things, so write your page copy with humans in mind. Keep it readable, and don’t stuff it with keywords.

  8. Create great, unique content: This can be quite a challenge. Write your own product descriptions, using the keyword research you did earlier to target actual words searchers use, and make product pages that blow the competition away. Great content is a good way to get inbound links.

  9. Use your keywords as anchor text when linking internally: Anchor text helps tells spiders what the linked-to page is about. Links that just say "click here" do nothing for your search engine visibility. Instead say, 'To find out more about how red widgets transform electrical appliances and lower energy bills, click here.'

  10. Build links intelligently: If local search matters to you, seek links from trusted sites in your geographic area — the Chamber of Commerce, local business directories, etc. Analyze the inbound links to your competitors to find links you can acquire, too. Create great content on a consistent basis and use social media to build awareness and links.

  11. Start a blog: Search engines, Google especially, love blogs for the fresh content and highly-structured data. Beyond that, there’s no better way to join the conversations that are already taking place about your industry and/or company. Reading and commenting on other blogs can also increase your exposure and help you acquire new links.
So SEO not only makes your company more visible and accessible, it is also a great opportunity to update your website so that it is more in line with some of the latest developments in social media that may make all the difference to your marketing strategy.

A picture tells a better story than your site

A common theme that has been discussed about design is how design can tell a story and yet so often websites don’t do a good job of conveying that. Most design sites do a decent job of showcasing designs here that are more than a pretty design, but it is still hard to tell a great story when you have other stakeholders involved.

Looking at the picture above you subconsciously already have a story in your mind. It is amazing the effect a great picture can have on a person and yet when sites use images it is for pretty things or have absolutely nothing to do with the message. The great thing about the web was the promise of multimedia. If you went back to the 1960s and told an advertising agency, publisher or graphic designer that they would have a medium where they could create video, sound, moving image, beautiful photography, endless amount of content and user interaction, can you imagine how excited they would be? Could you even dream of the possibilities they would come up with?

We’ve grown to a place where we take the web for granted. We don’t understand what we have in front of us and I think only 0.0001% of the sites on the web have truly taken advantage of it all. Granted the medium is still in its infancy compared to print, but with so many people working on it you would feel that there would be better experiences.

Current offerings seem to fall under these categories:
  • Prettier brochures than the brochure-ware sites in the past.
  • Pure video mediums that offer nothing more than a video on a screen.
  • Photo books that aren’t complemented with words that will enhance the story.
It is weird to me that it seems that with everything that we have at our disposal, we feel that we need to separate them all.

Here is a simple page. Nothing more than a little bio and an image, but the image itself gives me insight into Kevin Rose that the words on the page could never do. Instead of competing against each other, they provide a nice complement to tell the Kevin Rose story. Stock photography can never tell the story and in fact usually detracts from any type of story trying to be told. This page could easily be enhanced with some audio or video, but could also be destroyed with their addition and therein lies the problem.

We have become so jaded with audio and video on a site that many times we shy away from it only because they weren’t used properly. Just because you have them at your exposure doesn’t mean you should use them, but these tools are so powerful it would be silly not to use them. Any great movie combines imagery and sounds to produce a great experience for the viewer. We are afforded more tools online and yet we don’t come close to emulating such an experience. I’m not sure why.

The web has to be more than just applications. It has to offer a better experience than what eBay, Amazon or Google offer by default. Does this mean that every site should be an epic experience shared with everyone? Not at all and that is the beauty of the web. It is so flexible, but most of the sites lean towards one of end of the spectrum when there should be more balance.

Imagine the story you could base around this picture? You have better stories for your next design, hopefully you find the right means to tell it.

The 10 Principles for Good Design

10 principles of good design that would help guide designers down the right path. These were written in the 80s before the proliferation of the web, but it is interesting to see how well they do apply to not only industrial and print design, but to web design as well.

1. Good design is innovative

This is probably something that the web could do a better job of, but unfortunately it is very limited to the tools at our exposure. By tools I don’t mean development tools, but the actual tools that we use to interact with the web. When you are so worried about making something work across a number of browsers it can be hard to push the boundaries of where you want to go.

Some argue that Flash is the perfect way to get exactly the same experience across a number of browsers, but Flash performance isn’t up to the level that many companies want their experiences to be.

2. Good design makes a product useful

Color. A very, very pretty design, but who actually found it useful? The design itself didn’t communicate the purpose of the application and therefore it failed.

The first versions of eBay, Yahoo, Geocities, etc. were hideous, but they did enough to make the product useful. This didn’t make them good designs, just effective designs. Color couldn’t get the effective (useful) part down.

3. Good design is aesthetic

For some reason this still seems to be a point of contention in all industries. I often hear people say that “good design just works”, which I don’t believe in. If that was the case then we would never need to improve anything because the majority of items that we use work as their intended function.

Craigslist was never good design. It was just a design that was able to build a community that worked in spite of its design. When it comes to some websites, community will trump design, but if you can combine both then you have a winner.

4. Good design makes a product understandable

I feel like I could reference Color all over again here, but instead I will do a bit of exploring. The very first Twitter homepage didn't do a very good job of showcasing the potential of Twitter or letting people know what it really was. Part of this was because the people behind Twitter didn't really know what they had.

Playing with an iPhone though the design helps to make a product understandable. Look at the simple lock screen. Have you noticed that there is a light that goes behind the words “slide to unlock” moving in the direction of where you should slide? It’s a very subtle design, but it subconsciously helps you to understand what you need to do.

5. Good design is unobtrusive

Adjective: Not conspicuous or attracting attention.
This one I am kind of torn on because aesthetic design attracts attention. Any Apple product attracts attention, but I guess the aesthetic itself doesn't attract attention away from using the device. It aids it. Many beautiful websites though do a great job of attracting attention on the design without having any focus on what the site should be used for.

It is very hard to gather how a design will pan out from a small 400×300 image, but a lot of the designs seem to be done to attract attention more than aid the functionality of the design. Good design is invisible as some would say. Of course there is a very fine line between invisible, attractive, hideous and plain.

6. Good design is honest

When I read this principle I think of Dark Patterns. Dark Patterns are intentional design methods used to confuse and guide user’s towards the desired goal of the company behind the design. They never have the user’s best intentions in mind.

There should also be honesty in the copy that you put in your design. Copy is just as much a part of the design as your icons and colors. Good copy is honest. It doesn't mean it is boring, but it doesn’t try to sell the user something that doesn't exist.

Good design doesn’t trick or deceive. Good design is what it appears to be. Nothing more, nothing less.

7. Good design is long-lasting

This one will be hard to fathom for web designers out there because rarely does a design last more than a couple of years on the web. Does that mean it was bad design? Not at all, but it might mean that the design was based on trends that have simply come and gone.

Long-lasting design comes more into play with regards to physical objects. I like to think that Apple and Honda create goods that are meant to be long-lasting. Companies don’t necessarily like long lasting though because it means you aren’t buying more of the same.

8. Good design is thorough, down to the last detail

Another principle in which 99% of the designers of the world will fail at. Some designers wish to see the forest before the trees and others want to see the trees before the forest. You have to be able to see the big and little picture at the same time when designing. It is a very tough skill to master.

How would you change your approach if every section of your site could be broken down? Imagine 20 different sections of your site separated into little boxes. Would each box be able to hold its own?

Careful though because there is a fine line between being a perfectionist designer that never ships and one that misses some of the little details because they are tired of looking at a design.

9. Good design is environmentally-friendly

Another principle that applies well to industrial design, but not as much to web design. Instead of thinking about the environment as the world, why not think of it as the environment of the body? Does your design cause a user to waste thought cycles or motions trying to figure out how to work your design? Can they save more and yet still get the same amount out of your design if you made a couple of small changes?

In this case, a splash page that is nothing more than a “start” button is an environmental waste. A form that has fields that are really necessary for the user to continue the experience is a waste.

10. Good design is as little design as possible

Ah, minimalism. As little design as possible. That is a powerful statement.

I’m just going to leave you with that.