
2/47

T a b l e o f C o n t e n t sIntroduction: What is better? ..........................................................1

About This eBook............................................................................2

WhoThiseBookisFor..................................................................................................................................2

WhoWeAre.......................................................................................................................................................2

ResourcesforFurtherInvestigation.......................................................................................................2

1. Draw the Line Between Design and Implementation.. ...... ... ... ... ... ... 3

Choosingwheretodrawtheline .............................................................................................................4

AdvantagesoftheDesigner/CoderSplit...............................................................................................5

AdvantagesoftheJack-of-all-Trades......................................................................................................5

MakingYourDesignBusinessMoreCompetitive .............................................................................6

ManagingOutsourcing..................................................................................................................................6

EstimatingCosts..............................................................................................................................................7

HTMLMarkupforDesigners......................................................................................................................8

LearnatLeastaLittleCSS ...........................................................................................................................9

JavaScript............................................................................................................................................................9

Server-SideProgramming........................................................................................................................ 10

DecidingonTheBestApproachforYou ............................................................................................ 11

2. Think In Terms of Information Architecture ............................... 12

TheProblemswithUnstructuredPages ............................................................................................ 13

StartWithContent,NotPages ................................................................................................................ 13

Database-DrivenSitesPuttheContentattheCenter................................................................... 14

SoWhyArentAllSitesBuiltThisWay?............................................................................................. 16

ARecyclingExample................................................................................................................................... 16

TheFirstStep:ContentManagementSystems................................................................................ 17

ThePowerofCustomDatabases ........................................................................................................... 17

ManyPathstoDatabase-DrivenSites ................................................................................................. 19


3/47

3. Pick the Best CMS for Your Needs ............................................ 20

StaticSites:SimpleButLimited ............................................................................................................. 20

WhyYouShouldUseaCMS..................................................................................................................... 21

ChoosingaCMS............................................................................................................................................. 21

Hostedvs.Self-Hosted ............................................................................................................................... 23

TheGrowthofHostedCMSOptions..................................................................................................... 23

TheHostedServiceTradeoff................................................................................................................... 24

PickingtheRightService .......................................................................................................................... 24

ChoosingAmongSelf-HostedOptions ................................................................................................ 25

CMSSelectionSummary:ThingstoConsider.................................................................................. 26

4.

Know What jQuery Can Do For You.......................................... 27

JavaScriptComesofAgewithjQuery .................................................................................................. 27

TheManyWaystoShowandHide....................................................................................................... 28

GraphicalPresentations............................................................................................................................ 32

FormEnhancements................................................................................................................................... 33

CustomizationwithoutCodingforjQueryUIElements.............................................................. 33

5. Drive traffic with SEO and social media .... .... .... .... .... .... .... .... .... . 34

GoogleistheElephant................................................................................................................................ 34

MakeSureEveryPageisAccessibleandHasaURL ..................................................................... 35

KeywordResearch....................................................................................................................................... 36

TheAll-ImportantPageTitle................................................................................................................... 36

NextUp:TheVisibleHeadline ................................................................................................................ 37

NowFillIntheMetaDescription........................................................................................................... 38

DontWorryAboutMetaKeywords..................................................................................................... 38

IncomingLinks.............................................................................................................................................. 39AllLinksAreNotCreatedEqual ............................................................................................................ 39

AddingContentFrequently ..................................................................................................................... 41

WriteforReaders,withaTouchforRobots..................................................................................... 41

IntegratingwithSocialMedia................................................................................................................. 41


4/47

Next Steps..................................................................................... 43

ForMoreInformation ................................................................................................................................ 43

OneLastThing............................................................................................................................................... 43


5/47

5 Tips for Better Sites Webvanta

1

Introducti on: What i s better ?Better, like beauty, is in the eye of the beholder.

But there are a few goals that we bet you share. Youd like to:

Create sites that are more effective.

Realize your creative vision.

Not get bogged down in technology details.

Have more fun.

Have happier clients.

Make more money.

Through our work with designers of all stripes, and building hundreds of sites ourselves,

weve distilled five key techniques that we describe in this ebook. We've found all five to be

part of most highly successful web design practices.

We arent going to tell you how to understand your customers business needs, or how to

do visual design. We assume those are the parts you do well. Our goal with this ebook is to

help you deliver better sites to meet the needs of your customers, to have more fun and less

stress doing it, and to make more money is the process.


6/47


2

About Thi s eBookThroughout this ebook, we refer to your site. In reality, this generally means your clients

site, but it was too cumbersome to say that in every instance. Please translate in your mind

as you read.

Who This eBook is For

Weve written this ebook for anyone who is designing web sites. It will speak to you most

directly if you are a professional designer building sites for others. But most of it is also

applicable to anyone building a web site, even if just for your own use.

We assume only basic knowledge of how the web works, and no technical knowledge of

HTML, CSS, and so forth. (But we will encourage you to tackle those topics!)

Really the only prerequisite for this eBook is that you are involved with one or more web

sites, current or future, and youre eager to invest a little time to improve your skills, make

your sites more effective, and have more fun building them.

Who We Are

Webvanta provides a hosted content management system (CMS) and site-building services

for designers and agencies. This ebook inevitably reflects our opinions and biases, but we

have endeavored to make it as objective as possible. None of the information in this ebook

is specific to the Webvanta system.

Resources for Further Investigation

Rather than includes links throughout this ebook, we have assembled an extensive set of

resource links at:

www.webvanta.com/5tips-resources

By keeping the links online, we can make them easier for you to use and for us to keep

updated.


7/47


3

1 . D raw the Li ne Between D esi gn andImplementationMany designers say theyre the most effective when they spend most of their time ondesign, not implementation. But your clients want working sites, not descriptions of them,

and theres a lot of technology involved in translating your design into a working, modern

web site.

Depending on your skills, interests, and experience, you may choose to design in Photoshop

or Fireworks and leave the HTML and CSS to others. Or you may choose to do your own

coding.

Graphic designers typically dont get involved in HTML and CSS coding. Front-end

developers code designs in HTML, CSS, and JavaScript. The term web designer means

different things to different people, but typically it implies taking on both the graphic

designer role and at least part of the front-end developer role.

Wherever you choose to draw the line, you probably want someone else to deal with

managing servers, installing content management systems, and customizing back-end code.

If you use a designer-oriented CMS, especially one that is provided as a hosted service, you


8/47


4

may be able to handle the back-end setup and maintenance without delegating these tasks

to someone else.

Choosing where to draw the l ine

By making a conscious choice about where you draw the line between design and

implementation, you can more effectively find partners to handle the tasks you choose to

outsource.

Its rare today for a high-quality web site to be designed, built, and deployed by one person.

The full process requires a range of skills that stretch any one person unreasonably far. Web

projects often become a source of frustration to everyone involved when one or two people

stretch to do jobs for which they dont really have the experience.

To make the most of your design abilities, its important to understand web technology to

a certain level. You dont need to know how to implement everything yourself, but you

must understand the vocabulary of the web and the design elements at your disposal.

Theres a range of reasonable places where you can divide your site-building projects

between what you do and what you outsource to others. At the two extremes are:

A graphic designer who works in Photoshop (or Fireworks, or even pencil) to create

web page mock-ups. He or she then hands these off to someone else who builds the

site.

A designer/developer who may start in Photoshop or go straight to HTML and

CSS, which he or she gradually refines until the site is complete.

Each approach has its strengths and its weaknesses. The best approach for you depends on

your interests and aptitudes, your partners, and the kinds of sites you expect to build.


9/47


5

Advantages of the Designer/Coder Split

Graphic design and programming are very different skills, and relatively few people have a

natural talent for both of them. Design is mostly a right-brain, creative activity, while

programming is mostly a left-brain, analytical task.

This divergence of skills and aptitudes supports the approach of dividing the work between

a designer and a coder. For many designers with art school backgrounds, dealing with code

in any form is just not what they want to do, but they have the skills to design beautiful

web sites.

By handing off Photoshop or Fireworks comps to a coder, a visual designer can do what

they do best and let someone else turn that design into code.

Complete separation of tasks works best on large projects that can afford to have a group

of specialists and someone to coordinate them. The larger the team (and the budget), the

more appealing specialization becomes.

Advantages of the Jack-of-all-Trades

If one person can create a great visual design and implement it in reliable, easy-to-maintain

code, they have many advantages over a team that has split up the design and coding tasks:

Efficiency. When the designer and coder are the same person, they dont need to

spend time meeting with each other, less documentation is needed, and the chances

for a misunderstanding are minimized.

Emergent design. The site can start out with a wireframe-level design but with the

content and HTML markup all in place. The visual design can then be iteratively

improved, while using the site with real content and full interactivity.

Matching of design and technology. The more you know about the technology

thats being used to implement your design, the more likely you are to make

effective use of it.


10/47


6

The big disadvantage of this approach is that it requires you to have a broad range of skills.

Most great designers arent very good at programming, and most people who love to

program arent great visual designers. So the reality is that, in most cases, to build

sophisticated sites youre going to want to hand off the implementation details to someone

else at some point.

Making Your Design Business More Competitive

If you draw the line between what you do yourself and what you outsource to others too far

to the right (in the diagram presented earlier in this section), you spend a lot of time

working your way up the learning curve and struggling with things that dont quite work.

This makes your project either very expensive, if you charge the client for all that time, or

unprofitable, if youre covering that time on your own or working against a fixed-price bid.

The further to the left you draw the line, however, the more you are dependent on others.

When you find the sweet spot, your profits go up because youre not spending time on

things that dont deliver a lot of value. You can take on larger and more complex jobs when

dynamic pages, database-driven content, JavaScript widgets, and more are added to your

repertoire, because you have a resource that makes those things easy and inexpensive.

The cost-effectiveness of your implementation partner can have a huge effect on the

profitability of your business. In effect, you are reselling the implementation services,

combined with your design and nurturing.

By combining your design with a good implementation partners services, you create a

more valuable end product and earn higher prices. You can charge a markup on the outside

services, and you add value to your design work.

Managing Outsourcing

When you are outsourcing the implementation of your site, youre putting someone else

between your design and the end product. This is tremendously empowering, because


11/47


7

someone else is taking care of so many details for you. But it also makes it essential that

this partner be someone you trust and can communicate with easily.

A local freelancer can be the best solution, if you can find someone who meets all your

needs. As wonderful as electronic communication is, it doesnt quite match a face-to-face

meeting. But by limiting your pool to people who are local, youre dramatically limiting the

number of possible people. If you give up on having in-person meetings, you broaden your

area from a 100-mile radius to the entire world.

When you hand over a design for implementation, it is essential that you communicate

very clearly what you expect. You probably have all kinds of ideas in your head about how

the site is going to look and behave, and only some of these ideas show up in your mock-

ups.

In addition to the visual design itself, your documentation needs to cover:

The site map: what are all the pages and page types

Information architecture: what kinds of information is stored, and how is it

organized and presented

Interactive behaviors: anything that doesnt appear in a mock-up

Estimating Costs

Being dependent on others for part of the site-building process requires collaboration when

quoting jobs.

You can work with a contractor on an hourly or a fixed-price basis a tradeoff you are no

doubt familiar with from your own work. Hourly arrangements give you maximum

flexibility, but less predictability in terms of cost.

Rates vary extremely widely. If you use job sites such as Elance.com, oDesk.com, and

Guru.com, you can find web developers who will work for $10 to $15 per hour. In the


12/47


8

U.S., you can hire students or entry-level freelancers for $20 to $30 an hour, but if you

want someone experienced, youll pay $75 to $200 per hour.

Using offshore developers isnt always as much of a bargain as the rate difference suggests,

however. Communication difficulties can add hours to project. If a miscommunication

causes something to be built incorrectly, the cost in time and dollars can make the low-cost

labor seem very expensive.

HTML Markup for Designers

If youre a designer who prefers to stay focused on design, you can still get a lot of benefit

from developing your coding skills a little. While we advocate outsourcing at least some of

the site implementation tasks, this does not mean you can ignore all the technology.

Anyone who is serious about web design should be comfortable with HTML, as well as

with at least the easy parts of CSS. If youre not, youre cut off from your sites: you cant

tinker with them directly and see the result. This makes rapid iteration difficult. It also

makes communicating with your outsourcing partner, and evaluating their work, more

difficult.

HTML markup, when stripped of presentational detail that should not be there anyway, issimple. This is not programming, it is markup; it doesnt demand the same skills as does

programming.

You can mark up most content by learning only half a dozen tags. Applying HTML

markup requires little more than identifying each conceptual element, such as a heading,

paragraph, or list. To apply visual styles, without needing even to know what they look like,

you just apply a CSS class, like this:


13/47


9

Learn at Least a Little CSS

CSS can be a tough beast for many designers to tame, especially when it comes to multi-

column layouts and complex positioning.

If you put aside the overall layout of the page, however, and focus on a single block of text,

most CSS is simple. Theres a small enough set of terms you need to learn, and then

writing CSS becomes a compact, easy to use, and detailed representation of how you want

the text to look. When you can adjust any aspect of the design easily, you can polish it

quickly after the initial version is built.

For example, this code specifies the style for h1 headlines:

h1 {

font-family: Helvetica, arial, sans-serif;

font-weight: bold;

font-size: 24px;

line-height: 30px;

}

Even if you have never seen a line of CSS before, you can see how to change the size or

style of the headline.

By using a CSS framework with a grid system, such as Blueprint CSS or 960gs, you can

gain access to a simple, reliable way to layout out columns in as complex an arrangement as

youd like. But that is a subject for another ebook.

JavaScript

The technology that leads many web designers into programming is JavaScript. It is the

language of the browser, making it the primary way to have dynamic things happen in the

web browser that dont require an interaction with the server.


14/47


10

As with CSS frameworks, JavaScript libraries make JavaScript programming dramatically

easier (only more so). jQuery, the library most designers prefer, provides a CSS-like syntax

that is designer-friendly, once you get used to a little bit of JavaScript structure. At its

simplest, for example, consider this line of jQuery code:

$(".intro").hide();

This says "find any elements with the CSS class 'intro' and hide them." You can probably

figure out the line of jQuery to then show the elements without knowing anything more.

Inside the quotes. you can put any CSS selector. This syntax makes basic jQuery code

almost a natural extension of HTML and CSS, so writing it requires only minimal

programming knowledge.

If youre disinclined to do any programming, you can avoid JavaScript entirely and connect

up with someone who can do it for you. If you like the idea of dabbling in a little

programming, then learning jQuery is a great place to start. (See the online companion to

this ebook at www.webvanta.com/5tips-resources for jQuery books and online resources.)

Whether you dabble in JavaScript code or not, you should at least understand the basics of

how it works, so you can see opportunities to enhance the user experience on your sites.

Server-Side Programming

The next step down the slippery slope of programming languages is PHP. It fits in easily

intermixed with HTML. Once you can write a little PHP, you can connect to a MySQL

database just learn some SQL, and how to structure relations between tables... and, if

youre like most designers, youve gone way off the deep end.

Once you are writing server-side code that works with a database, youre really in hard-coreprogrammer territory. If you arent expert in what youre doing, you can easily create

security holes. And building an administrative interface for adding content to the database

is a non-trivial task, entirely separate from building the site itself.


15/47


11

A hosted CMS such as Webvanta makes it possible for designers without any

programming skills to include custom database features, making this capability accessible

to far more sites.

Deciding on The Best Approach for You

Only you can decide how far you want to go down the technology path. You need to decide

if you want to leave all the coding to others, or be able to do some of it yourself. Whatever

approach you choose, we recommend that you:

Understand HTML and CSS code enough to be able to modify it on your own.

Find one or more partners you trust to take care of the parts you dont want to do.

Understand what your partner can do and what it costs, so you can incorporate that

into your discussions with clients.

Choose a partner who can give you quick quotes, so you can include their costs in

projects you are quoting.

Create a clear hand-off process so whomever is implementing all or part of your

design understands exactly what you want.

Always test thoroughly whatever gets built, and expect there to be some iteration.


16/47


12

2. Thi nk In Term s of Inform ati on Archi tectureIt is tempting to think of a web site as a collection of pages, each with an assortment of

content placed on it. That is, after all, how things work in the physical world, and from the

perspective of someone viewing the site, thats just what it is.

If the site you are building is more than a few pages, though, youll be able to create much

better results with less effort when you think in terms of the data patterns that underlie the

sites content. Then you can craft a site that is easy for the client to maintain, while

preserving the integrity of your design and scaling naturally to large amounts of content.

Pages Content Types, Categories

For a large site, designing an optimal information architecture can be a big task. But for

most small and midsize business sites, it is straightforward once you get accustomed to

thinking this way.


17/47


13

Thinking through the information architecture before you start building a site will result in

a site that is easier for visitors to understand, and easier for the owner to maintain. And, if

done right, it can be easier for you to build.

The Problems with Unstructured Pages

For a simple brochure site, you can get by without any information architecture or content

structure. As the site grows, however, this approach becomes problematic in a variety of

ways:

Redundancy: Information you want to show on several pages needs to be entered

on each of those pages, so updates require making the same change multiple times,

increasing the effort required and the chances for errors.

Fragility: Since the content and the HTML markup are intertwined, it is difficult

for anyone to edit the content unless they have HTML skills. If the content editor

mis-enters a tag, they can easily destroy the entire page layout, making the site

fragile.

Lack of automation: Suppose you have a site with a page that lists projects, and

also a page for each project. Adding a project requires building a new project page,

with all its markup, and then adding the project to the project list page, with the

proper markup there as well.

Difficulty of reuse: If all the information is just placed on pages, then you cant

easily reuse it. But if it is structured in a database, you can deliver it via RSS, or a

mobile app, or anything else that comes along.

Start With Content, Not Pages

Start by identifying all of the different types of information:

If you have pages on different topics, what kinds of things are listed on those pages?

Probably links to other sites, and maybe events, books, research papers, companies, and

so forth. These are your database item types.


18/47


14

Look for anything where theres a repeating structure. For example, in a page that lists

staff members, each may have a photo, a name, a title, a bio, a blog link, and a twitter

name. Thats a repeating structure. Create an item type in the database with the

corresponding structure, and new staff members can be added just by filling out a form.

Then consider all of the ways you want to organize the information. For example:

If you have the same set of information but on different topics, then the topics are your

categories.

If your information differs by geography, use a category for each geographic region.

If you have an organization that has board members, executives, and advisors, youd

create categories for each of them, so you can use a single "person" item type and still

have a separate page for listing people of each type.

It takes more work up-front to do this sort of organizing, but it pays off handsomely in

how effective the site is for visitors and how easy it is to build and maintain.

Database-Driven Sites Put the Content at the Center

Storing the sites information in a database of content, rather than as pages, has many

benefits. When you put the data at the center of your architecture, then the web sitebecome only one of many ways you can deliver the content.


19/47


15

Each page is created from a skeleton that provides the page structure, with content drawn

from the database. This approach puts the information at the center of the site, rather than

its presentation (the pages). It brings many powerful advantages over the static HTML

approach:

Content and markup are separate. Content editors can add and modify content using

web-based forms that are independent of any page on which the content may bepresented.

Content is easily reused. When the content is in the database, it can be displayed on as

many pages as desired.

Content can be intelligent. Back-end software can check the database to make sure

links are valid, to expire content after a certain date, or collect content from other

sources (such as RSS feeds).

Changing the visual design is easy. Hundreds or thousands or millions of pages can be

generated from just a few templates, and only those templates need to be changed to

redesign the entire site.


20/47


16

So Why Arent All Sites Built This Way?

Given these compelling benefits, why arent all sites built using database-driven designs?

Many sites start out small and grow over time, so they end up pushing the simple, static

approach far beyond the realm in which it works effectively.

The biggest issues are skill sets and cost. Since most web designers have neither the

expertise nor the desire to write back-end (server-based) software, or design database

architectures, moving to a database-driven site structure can be a big hurdle.

With the right technology and partners, however, creating database-driven sites with a

robust information architecture need not be significantly more difficult or expensive than

building unstructured sites.

A Recycling Example

Lets look at a specific example of how this can affect the design of a site. Suppose you are

building a site about recycling. You might want a page about glass, another about plastic,

and another about paper. For each of those pages, youd have some photos, some general

information, related companies, and lists of resource links.

If youre not thinking in terms of a database, youd approach each of those pages as a

unique design. But in a database-driven site, glass, plastic, and paper would each be

categories. For each category, youd have a main image, additional images, a description, a

list of companies, and a set of links.

With this approach, you only have to design one category page. For the site owner, adding

more categories, or more information about any category, is just a matter of adding more

information to the database.

When you add a company or a resource link to the database, you just indicate which

categories it should be associated with. It then appears automatically on those category

pages.


21/47


17

You can also have multiple sets of categories. For example, if the recycling information

varies from one geographic region to another, then you could assign items to both a

material type category and to a region category, and then the site could automatically have

separate pages not only for each material type but also for each region.

This approach makes the site easier to maintain, and it reduces the number of pages you

need to design, but it does put some additional constraints on you. Each category page

should follow the same structure, and the content areas need to be able to adapt to varying

amounts of content. You cant hand-tune the design of each page to the degree you can

with a static site.

The payoff, which makes it all worthwhile, is great: fewer pages for you to design, and a

site that is much easier for the site owner to maintain. In addition, you can now provide the

information in the database via an RSS feed, or create different pages with some of the

same information, such as for a mobile version of the site.

The First Step: Content Management Systems

The first step toward moving a sites content into a database is to build the site using a

content management system (CMS). A CMS is essentially a database system designed to

manage web pages.

In a static site, there's a file on disk for each page, and there's a one-to-one correspondence.

When a site is created in a content management system, a page becomes a more abstract

construct. Each page is assembled from a variety of components, including a template that

defines the structure of the page and various blocks of text, all stored in the database.

The Power of Custom Databases

A typical simple CMS, such as WordPress, makes it easy to create pages whose content is

stored in the database. You cannot, however, easily create custom structures of any

complexity for your content.


22/47


23/47


19

Separation of content and markup. The person entering the content does not have to

worry about any markup surrounding the text, such as which heading tag should be

applied to the name of the project.

Consistent information. The content entry form ensures that the same kind ofinformation is entered for each project.

One design, many pages. The designer can create a single template page from which

the system produces all project pages, and changes are instantly applied to all projects.

Automatic list pages. Lists of projects can be created automatically, and can be filtered

and sorted by any of the project attributes.

You can easily build a page that displays all the projects in a particular category. From this

single page, you automatically get a page for every category. And theres never a need to

enter the same project information twice; just assign it to two categories, and it shows up

on two list pages.

This is but one example of how a custom database structure can make a web site easier to

maintain and more useful for its visitors.

Many Paths to Database-Driven Sites

There are many ways to build a database-driven web site. You can code it all from scratch

in PHP, use a CMS like Drupal, or build it upon a web application framework such as

Ruby on Rails.

All of these solutions share some common drawbacks: they generally require developers to

create (or at least configure) the software; the development cost is usually much higher

than clients would like; and the web designer has to deal with contractors, additional

complexity, and reduced control.

Webvanta is one hosted CMS that is designed to make it easy to create custom database-

driven sites, without requiring any back-end programming.


24/47


20

3. Pi ck the Best CM S for Your NeedsAll but the very simplest of sites should be built with a content management system

(CMS). A CMS makes adding content, and keeping it updated, much easier.

There are hundreds of content management systems in the market today. So how do you

choose the best one for you? In this chapter, well lay out the CMS landscape and give

some suggestions on how to evaluate them and which ones are most appropriate for

different circumstances.

Static Sites: Simple But Limited

We often hear from designers who have been building static web sites for years, andquestion whether they need to shift to using a content management system (CMS).

Theyre comfortable with their workflow, typically building sites in Dreamweaver and then

pushing them up to a server via FTP.

A static site is the simplest to create and launch, and the least expensive to host. But it is a

poor choice for all but the simplest sites. In the past, static sites were very common, but

today they are rarely the best approach. Among their many limitations, static sites:

Generally cannot be updated without dealing directly with the HTML code, making

them hard for anyone but the coder to maintain.

Do not support blogs or RSS feeds, cutting off one of the easiest ways to add content

regularly and improve search engine optimization.

Often require entry of the same content in multiple places, making it harder to update

and often leading to inconsistencies within the site.

Do not automatically create any pages, so every page on the site needs to be manually

built.


25/47


21

Why You Should Use a CMS

If youre building six-page brochure sites that are rarely updated, then perhaps you can work

without a CMS. But for almost anything else, you should be using a CMS. Heres why:

Your clients can edit their own content. This is hugely empowering to them, and it

results in sites that are updated more frequently and are therefore more useful for

visitors and deliver better business results.

You dont have to spend time on every little content change, so you have more time for

creative work. You came to web design to be creative, not to spend time updating a

stores hours or announcing their next sale, right?

When the time comes for design changes, you can update a template or two, and theentire site is instantly updated to the new design. No more tediously making the same

change to page after page.

Your clients sites can have RSS feeds, commenting, and other features that arent

possible on a static site.

Given all these compelling reasons, why isnt everyone building sites with a CMS? Because

it has added complexity to the task of building the site and, if that task is contracted out, it

can add significantly to the cost.

Today, costs have fallen low enough that there is no reason not to use a CMS on virtually

every project.

Choosing a CMS

Once youve made the decision to use a CMS, youre then faced with the daunting task of

choosing a particular CMS. There are literally hundreds of them, and each has its fans.

To begin making sense of the wide range of offerings, first consider each product's target

audience. At the low end, there are simple systems that are designed for small businesses or

individuals to build their own simple sites or blogs; these include WordPress.com (the

hosted version of WordPress), Intuit Sites, Google Sites, and Godaddys WebSite


26/47


22

Tonight. Assuming youre a professional designer building custom sites for business clients,

you can discard all of these immediately; they lack the design flexibility and the power for

your needs.

At the other extreme, there are high-end content management systems aimed at big

organizations that are equally unsuitable. Systems such as SiteCore and SDL Tridion

typically have five- or six-figure price tags, putting them entirely out of range for the vast

majority of sites.

These systems typically have lots of features designed for big organizations, with multiple

user roles, workflows for sending content from an author to an editor and then to a site

manager for approval before going live, and so forth.

In this ebook, were assuming youre building sites for small to midsize businesses, and these

features just arent very useful for this class of clients. In terms of design flexibility and ease


27/47


23

of use, these "high-end" systems are often no better, and sometimes worse, than open-

source or inexpensive options.

Hosted vs. Self-Hosted

Your first big decision point is whether you are going to manage the software and its

hosting yourself, or use a SaaS (software as a service) solution:

A hosted (SaaS) CMS, such as Webvanta, LightCMS, or SquareSpace, is a self-

contained solution that you manage via a web browser and is operated by a third party.

A self-hosted CMS, such as WordPress, Drupal, Joomla!, or Expression Engine, is a

body of software you download from the source, and then modify, upload to a server

(which you typically rent from a hosting company), and manage on your own.

If you are a developer at heart, like to be able to modify the back-end code, and have a

budget of at least a few thousand dollars per site, then self-hosted solutions can be a good

choice. They are used for millions of sites, including many well-known ones.

The Growth of Hosted CMS Options

The option to use a hosted CMS is relatively new, and we believe it better serves the needs

of designers and site owners who want to focus on the design and content of the site, not

on the technology.

If you use a self-hosted CMS, you are responsible for all the code that runs the site. This

can be a nightmare when hacks occur; with a CMS such as WordPress, sites get hacked

with terrifying frequency.

Even in the absence of such nightmare scenarios, using a self-hosted CMS inevitably

means spending more time dealing with back-end code, software updates, security,

backups, and server management. Youre exposed to much more of the full technology

stack and operational issues, and its hard not to get buried in details.

With a hosted CMS, all that is taken care of for you.


28/47


24

In the past, most hosted CMS offerings were very limited in terms of design flexibility.

Even today, few provide the flexibility to set up custom databases, so you can organize

things like business listings and news items, and have pages automatically created for each

item.

The Hosted Service Tradeoff

Life is full of tradeoffs, and the decision to use a hosted CMS is no exception. With any

SaaS system, youre giving up control over the back-end software, in return for being

relieved of all responsibility for building, maintaining, and serving that software.

As long as the system meets your needs, this is generally an excellent tradeoff. You get to

focus on your design and business needs, and let someone else take care of the technical

details and day-to-day operations.

Picking the Right Service

Part of the bargain youre making when you use a hosted service is that youre going to live

with whatever that service is designed to do (or that it can be extended to do), so its critical

to pick one that meets your needs. Heres some hosted services to consider:

If you are building custom web sites, for which you need full control over the design

and the organization of content, Webvanta is an outstanding solution (if we do say so

ourselves).

If all you need is a simple blog, Wordpress.com is an excellent option.

If you want more design flexibility but dont have a lot of content and dont need

database capability, SquareSpace is a great product.

If youre building an e-commerce site, take a look at Shopify and BigCommerce.

If you need a private social network, Ning is the leading hosted solution.


29/47


25

Choosing Among Self-Hosted Options

If you dont want to use a hosted CMS, then you have two choices: open-source software

and commercial software.

Open-source software is extremely popular, and it can be an excellent solution if you have

the skills and desire to manage it well.

The biggest downside is that there is generally no support provided by the authors of the

software. Youre typically depending on the user community for support. Fortunately, there

are large user communities for the major open-source CMS systems but it can still be

frustrating trying to get questions answered and problems resolved.

Of the open-source content management systems, WordPress appears to be the most

popular, at least among designers in the U.S. Joomla! has more community features, so if

you are building a community-oriented site, Joomla! may be a good option.

The big gun of the open-source CMS world is Drupal. It is used by many big-name sites,

from whitehouse.gov to major media properties. In the hands of a capable developer,

Drupal is a powerful tool, and there is no doubt that it is capable of delivering highly

customized, database-driven sites.

Most designers, however, tell us that Drupal is more than they can manage on their own.

Unless youre a developer who likes to work with PHP, youre likely to want to outsource

the setup and customization of Drupal, and this typically costs several thousand dollars. For

a large project, it can be an excellent solution, but for a typical small to midsize business

site, WordPress is more efficient.

The most popular commercial CMS among designers in Expression Engine. It gets high

marks from designers who use it, though it can be more involved to set up than

WordPress.


30/47


26

CMS Selection Summary: Things to Consider

Theres no way to make selection of the best CMS for your needs a simple task; it is just an

inherently complex landscape, with many options.

Here are some factors to consider as you are evaluating CMS options:

Ease of setting up your custom HTML and CSS so the site looks exactly how you

want

Whether the template system works around your code, or has a fixed approach to

page structure that you must work around

Availability of the features you require, either as core components or as add-ons

Support for blogs, with RSS feeds

Ease of use of the back-end interface, both for you (the designer) and your client

(who will be maintaining the content)

Support for custom database structures, so you can make the structure match the

needs of a particular site

Whether any PHP or other back-end programming is required to customize the

system

Ease of adding images, for use in photo galleries or combined with text, and

whether images at various sizes can be generated automatically or need to be

created by you and uploaded individually

Level of support available when you have questions, find bugs, or need

modifications to the software


31/47


27

4. Know What j Query Can D o F or YouPerhaps the biggest difference between designing for print and for the web is the

opportunity to use interactivity. You can build your web pages just like printed pages that

appear on screen, but if you do so youre leaving on the table many of the benefits the web

has to offer.

Interactivity in web pages is provided by JavaScript, the programming language that runs in

the browser. In the early days of the web, JavaScript got a bad name because it was often

used for gratuitous animation and other useless effects. More complex interactions were

complicated to program, especially when taking into account the differences between

browsers.

JavaScript Comes of Age with jQuery

Today, JavaScript has come into its own. Designers have realized that no one except the

creator likes useless animations. But the ability to have a web page change without having

to load a new page from the server is a critical capability that JavaScript provides.

A robust library, which provides a layer on top of the raw JavaScript language, is essential

for writing cross-browser code and handling common tasks simply. Although there are

several high-quality libraries available, in the past couple of years jQuery has become the

overwhelming choice among designers.

If youre coding your own pages, it would serve you well to learn to use jQuery effects and

plugins. It takes a little study, but it is entirely accessible to anyone with the desire to learn

it.

If youre doing designs in Photoshop and then handing them off to someone else to code,

you dont need to know much about how JavaScript works. But you do need to know what

can be easily done by a good coder, so you can use these techniques in your design.

Theres an incredible range of things you can do with jQuery (and JavaScript in general).

The simpler ones for designers to use are those that work entirely with content that has


32/47


28

been loaded as part of the page, with all the interactivity occuring in the browser.

Implementing Ajax interactions, in which the JavaScript code in the browser gets

additional information from the server without loading a new page, is somewhat more

complex.

The Many Ways to Show and Hide

The most widely useful technique is the ability to show and hide content. There are many

variations, including:

Basic show/hide, in which a "details" link is clicked and new region of content appears.

Accordion, which is a stack of headings with hidden content associated with each one;

content is shown when the heading is clicked. Can be vertical or horizontal.

Tabs, in which multiple content regions are grouped with a set of tabs above or to the

side, each acting like the heading in an accordion.


33/47


29

Tooltips, which are small text areas that appear when hovering over an item.

Carousels, which typically show a series of items in a horizontal stripe, with arrows to

scroll to additional items.


34/47


30

Sliders, which show a series of items, one at a time, typically with a timed automatic

advance. These have become very popular for "featured content" at the top of news

sites.

The upper left rectangle with the green image is a slider that highlights the five

currently featured stories and changes every few seconds.


35/47


31

Slideshows, which show a series of images one at a time, typically fading from one to

the next.


36/47


32

Lightboxes, which show content in a pop-up region.

All of these techniques enable you to pack more information into a smaller area by

displaying only some of it at a time. Viewers have less scrolling to do, can more easily focus

on the most important content, and are more engaged. Adding these tools to your design

repertoire is essential for creating modern web designs.

If you are designing in Photoshop or Fireworks, you can only approximate these effects, of

course. Show each interactive element in each of its possible states, using layers that can be

turned on and off to simulate the interaction.

Graphical Presentations

Beyond the common show and hide techniques, jQuery is also valuable for providing

dynamic graphical presentations, such as:

Calendars

Photo galleries

Maps

Zoomable images


37/47


33

Form Enhancements

jQuery can also help improve your forms in various ways, including:

Validation

Placeholder text

Date pickers

Autocomplete

Customization without Coding for jQuery UI Elements

Some of the most common interactions are part of the jQuery UI library, which has an

interactive theme designer. If you want to keep your coding costs down, use the theme

designer to style the jQuery UI elements you want to use. You can then download the

theme to provide whoever is coding the site with ready-made styling, and use screen

captures from the theme designer page in your Photoshop mock-ups.


38/47


34

5. Drive traffic with SEO and social mediaMost web site owners want their sites to be found theyre investing in their sites to attract

an audience, whether they be customers, fans, or converts. To do so, you need to integrate

the site with social media, and pay attention to SEO.

Search Engine Optimization (SEO) is a complex topic that involves a few facts, lots of

best practices, piles of superstitions, a lot of hard work. Its not surprising that most site

owners are completely at sea when it comes to SEO yet it is vitally important to them.

Google is the Elephant

Search engine optimization is perhaps the most confusing, ill-defined, and controversialpart of web design today. It has a certain "blind men and an elephant" quality to it, with

Google being the elephant.


39/47


35

There is a vast amount of advice available on SEO. You can spend your life reading about

it, and anywhere from hundreds to tens of thousands of dollars a month on SEO

consultants.

This situation leads to a sense of overwhelm among many web designers, and especially

among site owners. As a result, they just ignore it. We see web sites every day that have

terrible SEO.

Its a shame, because everyone wants to bring more traffic to their site. Search engines

bring free traffic, and for many sites they are the most important source of visitors.

The good news is that there are some simple things you can do that will provide a huge

boost. Follow the easy steps outlined here, and youll be way ahead of the average site.

Make Sure Every Page is Accessible and Has a URL

The most fundamental thing you must do is to ensure that every page of the site is

accessible by following links, starting from your home page, even if JavaScript is disabled

and Flash is ignored. (You need to take these same precautions for accessibility as well as

for SEO.)

This is not hard to achieve, as long as you are not using Flash for your navigation, and

JavaScript is used as it should be: for enhancement, and not as a requirement.

You can also easily do an end-run around any issues by linking to a site map from your

footer, and including a link to every page in the site map. Providing an XML site map also

helps when not all pages are directly linked.

Every page must have a unique URL. That means not building the entire site in Flash, or

using Ajax to swap out the contents of a page without changing the URL (unless you think

carefully about the SEO implications). Its OK to use JavaScript to hide and reveal parts of

a page, as long as all is revealed if JavaScript is disabled (which is how the standard jQuery

tab and accordion widgets work).


40/47


36

Keyword Research

Before you can begin optimizing your pages for search, you need to know for what

keyword phrases you are optimizing.

Your gut feel will get you started, but you need to use research tools to find out what

phrases people are actually searching for the most, which sites rank well on those terms, and

how much traffic each term gets. (See www.webvanta.com/5tips-resources for links.)

Keyword research can be valuable for making sure you are targeting the right keywords,

and that they are used in lots of searches.

The keywords you have in mind may or may not be the ones that are being searched for by

the people youre trying to reach. Small variations in keywords and phrases can have a big

impact.

This is one of the first things for which you might want to bring in an SEO consultant, or

you can spend the time to learn to use the research tools yourself.

Once you have settled on a set of keywords you are targeting, you can focus your efforts.

For each targeted keyword, you should make an ongoing effort to add content focused on

that keyword, get incoming links that use it in the anchor text, and track your position in

the search results so you can tell if you are making progress.

The All-Important Page Title

Assuming these basics are taken care of, then the two most critical things are the page title

(the metadata title in the tag, which appears in the browsers title bar) and the

contents of the first element on the page.

The page title is super-important, yet it is very commonly overlooked or written poorly. If

your site has the same title on every page, youve thrown away most of your SEO

opportunities. Go in right now and write a unique page title for every single page.


41/47


37

The page title can include the name of the site, but it should begin with content that is

unique to each page and describes that page. The page title will appear as the headline in

search results, so it must be written in such a way that the first few words telegraph to the

user that this page has what theyre looking for.

Having a page title like "Home", "Products", or "About Us" is useless (and very common).

You cant assume that the viewer of the search results (or the search engine) has any

context; the title must be completely explicit, and include as many keywords as you can

reasonably get in there. Keep the length below 65 characters.

For example, instead of "Products", use something like "Quality dog food and cat food at

the best price".

Next Up: The Visible Headline

Next most important is the visible headline on the page, which should be in an tag.

We see a number of common mistakes here:

Pages that have no headline

Headlines that are in

tags, or other tags, which are then styled to look like

headlines, or in images

Headlines that arent explicit enough

Make sure that your page begins with a headline in an tag. You'll help the search

engines and the human readers. You can style the h1 to look however you want; it doesnt

need to be visually huge.

Sometimes you want the main headline to be something clever, or cute, that lacks the

keywords youd like to have in the headline for SEO. In this case, you may want to put the

actual headline in a

tag, styled to look like a headline, and then have the SEO-

optimized headline below it in an tag, styled to look like a subhead or an introductory

paragraph.


42/47


38

In writing that headline, keep the site visitor in mind, but make it more explicit than you

might naturally do. This is much the same as for the metadata page title, except that you

may want something shorter on the page.

For example, while you might use "Experienced dog grooming services for Sonoma

County, in Santa Rosa, CA" for the metadata page title, but use "Expert Dog Grooming"

for the h1 tag (the page title that appears on the page).

Now Fill In the Meta Description

The metadata description tag is important not for getting your page listed on the search

results page, but for getting users to click on the result if they do see it.

The search engine will show your description as the two lines of text below the headline; if

you dont provide a meta description, it will grab something from the body of your page,

which may or may not be what you want.

The description should be about 150 characters long, since that is what fits in a typical

search listing. Think of it as a teaser that promotes your page. Write it for humans, not for

search engines. But it is helpful to include your targeted keywords, because the search

engine will highlight them, drawing users to your listing.

Dont Worry About Meta Keywords

The keyword metadata field is not worth worrying about, at least on your first pass. Google

ignores the keywords in this field, because they are too easily abused. (Too many people put

Britney Spears in the keywords, for example, not because their page had anything to do

with Britney but because it is one of the highest-volume search terms.) Other search

engines may use them, but you wont sacrifice much by ignoring them.

This does not mean you can ignore knowing what keywords you are targeting; that is an

entirely different matter. But the place to use keywords is in your page titles, headlines, and

body copy not in the keywords meta tag.


43/47


39

Incoming Links

Everything weve discussed up to this point is what is called on-page optimization: things

you can do on your site, and that are entirely under your control.

Unfortunately, its not enough.

If your content is so unique that people are searching on phrases that exist only on your site

and a handful of other places, on-site optimization may be all you need. But for any search

term that is remotely competitive, you need incoming links in order to rank well in search

results.

Incoming links are important because of the way search engines rank pages. The on-page

optimization ensures that the search engines can figure out what each page is about. But

the web is a very big place, and even for any single niche topic, there are thousands, if not

hundreds of thousands, or even millions, of pages.

How does a search engine decide which pages to put at the top of the search results?

The distinguishing factor is incoming links.

All Links Are Not Created Equal

You want as many links to your pages as possible, but some links are much more valuable

than others.

Search engines dont disclose the details of their algorithms, but there are a few points

about incoming links that are generally agreed upon:

The rank, or authority, of the site that is linking to you has a huge influence. A

single link from whitehouse.gov is probably worth more than thousands of links

from little-read blogs. Links from .edu and .org sites are often thought to be more

valuable than links from .com sites.

The anchor text (the text to which the link is applied) is important. If the link says

click here, then that link text tells the search engine nothing about the site being


44/47


45/47


41

Adding Content Frequently

Search engines love contentand so do people. Theres no substitute for having lots of

quality content, and adding more every week, if not every day.

When search engines see that new content is added to your site frequently, they will index it

more often, and youre more likely to rise up in the results. The more content you have, the

more likely it is that someone will link to a particular piece of content, simply because you

have more opportunities to hit someones hot button.

The easiest way to add content frequently is with a blog. Blogs provide a natural vehicle for

whatever content you can produce, and theyre a structure that both readers and search

engines understand.

By using tags or categories with your blog, you automatically get pages that list all the

articles for a particular tag or category. These pages can be very attractive for search

engines.

Write for Readers, with a Touch for Robots

When you are writing blog posts (and other web content), you should write first and

foremost for your human readers. But you should also stretch a bit to include your targeted

keywords more frequently than may otherwise seem natural.

To a human reader, context is often apparent, and headlines written solely for readers often

leave out important keywords. With a little creativity, you can usually get some more

keywords into your headlines, as well as into the body of your posts, without making the

writing seem strained.

Integrating with Social Media

Aside from search engines, social media can be a major source of traffic. Links from social

media sites typically have their nofollow attribute set, so they often wont directly improve

your search engine rankings. But they bring you traffic just like search engine results do.


46/47


42

Social media integration works two primary ways:

1. Linking from your site to your social media pages and accounts. A business that is

taking advantage of social media should have, at a minimum, a Facebook page, a

LinkedIn page, a Twitter account, and a YouTube channel.

2. Making it easy for your site visitors to add content from your web site into their

own social media streams, sharing your content with their social networks.

Implementing the first of these is just a matter of providing an appropriate icon and linking

it to a particular external site. Most services provide an icon or badge that you can use.

The second is a little more complicated. At a minimum, you want visitors to your site to be

able to click a share via xyz icon and have a link to the current page pushed out to thevisitors network. You can often do this with widgets provided by social networking sites,

and you can use general-purpose sharing widgets such as that from AddThis.com.

In addition, you may want to directly include content from your site on your social media

pages, and vice versa. Each of the services provides widgets you can use for this, and there's

a variety of third-party widgets that either display information from an RSS feed or access

a social networking site via its API to get content to display.


47/47


Next S t epsWe hope you have gleaned at least a few new ideas from this ebook that will help you

improve your sites. The web is an increasingly complex and competitive place, and its

essential to keep up with the ever-evolving tools and techniques if your sites are going to be

as effective as they can be.

We encourage you to review the sites you are currently working on, with the tips in this

ebook in mind. Its all too easy to miss applying even the techniques we know well, given

the press of daily business.

For More Information

Weve compiled an extensive set of links to additional resources on each of the topics in this

ebook. Please visit:

www.webvanta.com/5tips-resources

to dive deeper into any of these topics.

We also cover a wide range of topics of interest to web designers on our blog, which we

invite you to visit at:

www.webvanta.com/blog

At the blog, you can subscribe to get updates via email, or via RSS.

Finally, we welcome your feedback and questions at [email protected] .

Thanks for reading. Youve made it to the end!

One Last Thing

If you found this ebook to be useful, please tell your friends!

5 tips for building better sites

Documents