5 Tips for Building Better Sites Version 1.3 August 28, 2010 Michael Slater
708 Gravenstein Hwy. N, #162 Sebastopol, CA 95472 888.670.6793 www.webvanta.com michael@webvanta.com
T ab le of Contents Introduction: What is “better”? .......................................................... 1 About This eBook............................................................................ 2 Who This eBook is For .................................................................................................................................. 2 Who We Are....................................................................................................................................................... 2 Resources for Further Investigation....................................................................................................... 2
1. Draw the Line Between Design and Implementation....................... 3 Choosing where to draw the line ............................................................................................................. 4 Advantages of the Designer/Coder Split............................................................................................... 5 Advantages of the Jack-‐of-‐all-‐Trades...................................................................................................... 5 Making Your Design Business More Competitive ............................................................................. 6 Managing Outsourcing.................................................................................................................................. 6 Estimating Costs .............................................................................................................................................. 7 HTML Markup for Designers...................................................................................................................... 8 Learn at Least a Little CSS ........................................................................................................................... 9 JavaScript............................................................................................................................................................ 9 Server-‐Side Programming........................................................................................................................ 10 Deciding on The Best Approach for You ............................................................................................ 11
2. Think In Terms of Information Architecture ............................... 12 The Problems with Unstructured Pages ............................................................................................ 13 Start With Content, Not Pages ................................................................................................................ 13 Database-‐Driven Sites Put the Content at the Center................................................................... 14 So Why Aren’t All Sites Built This Way?............................................................................................. 16 A Recycling Example................................................................................................................................... 16 The First Step: Content Management Systems................................................................................ 17 The Power of Custom Databases ........................................................................................................... 17 Many Paths to Database-‐Driven Sites ................................................................................................. 19
3. Pick the Best CMS for Your Needs ............................................ 20 Static Sites: Simple But Limited ............................................................................................................. 20 Why You Should Use a CMS ..................................................................................................................... 21 Choosing a CMS ............................................................................................................................................. 21 Hosted vs. Self-‐Hosted ............................................................................................................................... 23 The Growth of Hosted CMS Options..................................................................................................... 23 The Hosted Service Tradeoff................................................................................................................... 24 Picking the Right Service .......................................................................................................................... 24 Choosing Among Self-‐Hosted Options ................................................................................................ 25 CMS Selection Summary: Things to Consider .................................................................................. 26
4. Know What jQuery Can Do For You.......................................... 27 JavaScript Comes of Age with jQuery .................................................................................................. 27 The Many Ways to Show and Hide ....................................................................................................... 28 Graphical Presentations ............................................................................................................................ 32 Form Enhancements................................................................................................................................... 33 Customization without Coding for jQuery UI Elements .............................................................. 33
5. Drive traffic with SEO and social media ..................................... 34 Google is the Elephant................................................................................................................................ 34 Make Sure Every Page is Accessible and Has a URL ..................................................................... 35 Keyword Research....................................................................................................................................... 36 The All-‐Important Page Title................................................................................................................... 36 Next Up: The Visible Headline ................................................................................................................ 37 Now Fill In the Meta Description........................................................................................................... 38 Don’t Worry About Meta Keywords..................................................................................................... 38 Incoming Links.............................................................................................................................................. 39 All Links Are Not Created Equal ............................................................................................................ 39 Adding Content Frequently ..................................................................................................................... 41 Write for Readers, with a Touch for Robots..................................................................................... 41 Integrating with Social Media................................................................................................................. 41
Next Steps ..................................................................................... 43 For More Information ................................................................................................................................ 43 One Last Thing............................................................................................................................................... 43
5 Tips for Better Sites
Webvanta
I ntroduction: W hat is “better”? “Better,” like beauty, is in the eye of the beholder. But there are a few goals that we bet you share. You’d 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, we’ve 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 aren’t going to tell you how to understand your customer’s 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.
–1–
5 Tips for Better Sites
Webvanta
About This eBook Throughout this ebook, we refer to “your site.” In reality, this generally means “your client’s 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 We’ve 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 you’re 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.
–2–
5 Tips for Better Sites
Webvanta
1 . Draw the Line Between Design and I mplementation Many designers say they’re the most effective when they spend most of their time on design, not implementation. But your clients want working sites, not descriptions of them, and there’s 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 don’t 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
–3–
5 Tips for Better Sites
Webvanta
may be able to handle the back-end setup and maintenance without delegating these tasks to someone else.
Choosing where to draw the line 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. It’s 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 don’t really have the experience. To make the most of your design abilities, it’s important to understand web technology to a certain level. You don’t need to know how to implement everything yourself, but you must understand the vocabulary of the web and the design elements at your disposal. There’s 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.
–4–
5 Tips for Better Sites
Webvanta
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 don’t 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 that’s being used to implement your design, the more likely you are to make effective use of it.
–5–
5 Tips for Better Sites
Webvanta
The big disadvantage of this approach is that it requires you to have a broad range of skills. Most great designers aren’t very good at programming, and most people who love to program aren’t great visual designers. So the reality is that, in most cases, to build sophisticated sites you’re 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 don’t quite work. This makes your project either very expensive, if you charge the client for all that time, or unprofitable, if you’re 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 you’re not spending time on things that don’t 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 partner’s 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, you’re putting someone else between your design and the end product. This is tremendously empowering, because
–6–
5 Tips for Better Sites
Webvanta
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 doesn’t quite match a face-to-face meeting. But by limiting your pool to people who are local, you’re 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 mockups. 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 doesn’t 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
–7–
5 Tips for Better Sites
Webvanta
U.S., you can hire students or entry-level freelancers for $20 to $30 an hour, but if you want someone experienced, you’ll pay $75 to $200 per hour. Using offshore developers isn’t 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 you’re 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 you’re not, you’re cut off from your sites: you can’t 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, is simple. This is not programming, it is markup; it doesn’t 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: <p class="intro">
–8–
5 Tips for Better Sites
Webvanta
Learn at Least a Little CSS CSS can be a tough beast for many designers to tame, especially when it comes to multicolumn 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. There’s 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 you’d 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 don’t require an interaction with the server.
–9–
5 Tips for Better Sites
Webvanta
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 you’re 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 you’re like most designers, you’ve gone way off the deep end. Once you are writing server-side code that works with a database, you’re really in hard-core programmer territory. If you aren’t expert in what you’re 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.
– 10 –
5 Tips for Better Sites
Webvanta
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 don’t 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.
– 11 –
5 Tips for Better Sites
Webvanta
2. Think I n Terms of I nformation Architecture It 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, that’s just what it is. If the site you are building is more than a few pages, though, you’ll be able to create much better results with less effort when you think in terms of the data patterns that underlie the site’s 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. – 12 –
5 Tips for Better Sites
Webvanta
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 can’t 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.
– 13 –
5 Tips for Better Sites
•
Webvanta
Look for anything where there’s 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. That’s 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, you’d 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 site’s 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 site become only one of many ways you can deliver the content.
– 14 –
5 Tips for Better Sites
Webvanta
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 be presented.
•
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.
– 15 –
5 Tips for Better Sites
Webvanta
So Why Aren’t All Sites Built This Way? Given these compelling benefits, why aren’t 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 Let’s 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, you’d have some photos, some general information, related companies, and lists of resource links. If you’re not thinking in terms of a database, you’d 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, you’d 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.
– 16 –
5 Tips for Better Sites
Webvanta
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 can’t 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 site’s 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.
– 17 –
5 Tips for Better Sites
Webvanta
With a database designed to reflect the siteâ&#x20AC;&#x2122;s information, adding a project, for example, is as simple as filling out a form.
The system automatically updates the project list page and creates a new project page. The user entering the project information never has to be concerned with HTML markup. Most content management systems fall short when it comes to organizing content in sophisticated ways, especially when the site has content that has its own particular structure. Consider, for example, a site for a home builder who wants to showcase an assortment of their past projects. Using a basic content management system, you could create a page for each project, but all of the content for that page would have to be manually placed there, as in the example earlier in this article. A more powerful approach is to create a custom database structure to store the project information. Now the person entering the content can do so via a database input form, with fields for each of the elements of the page. These might include the name of the project, the city, its cost, and the date of completion. Some advantages of this approach:
â&#x20AC;&#x201C; 18 â&#x20AC;&#x201C;
5 Tips for Better Sites
•
Webvanta
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 of information 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 there’s 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 databasedriven sites, without requiring any back-end programming.
– 19 –
5 Tips for Better Sites
Webvanta
3 .Pick the Best CMS for Your Needs All 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, we’ll 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, and question whether they need to shift to using a content management system (CMS). They’re 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.
– 20 –
5 Tips for Better Sites
Webvanta
Why You Should Use a CMS If you’re 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. Here’s 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 don’t 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 store’s hours or announcing their next sale, right?
•
When the time comes for design changes, you can update a template or two, and the entire 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 aren’t possible on a static site.
Given all these compelling reasons, why isn’t 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 you’ve made the decision to use a CMS, you’re 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 Godaddy’s WebSite
– 21 –
5 Tips for Better Sites
Webvanta
Tonight. Assuming you’re 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, we’re assuming you’re building sites for small to midsize businesses, and these features just aren’t very useful for this class of clients. In terms of design flexibility and ease
– 22 –
5 Tips for Better Sites
Webvanta
of use, these "high-end" systems are often no better, and sometimes worse, than opensource 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 selfcontained 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. You’re exposed to much more of the full technology stack and operational issues, and it’s hard not to get buried in details. With a hosted CMS, all that is taken care of for you.
– 23 –
5 Tips for Better Sites
Webvanta
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, you’re 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 you’re making when you use a hosted service is that you’re going to live with whatever that service is designed to do (or that it can be extended to do), so it’s critical to pick one that meets your needs. Here’s 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 don’t have a lot of content and don’t need database capability, SquareSpace is a great product.
•
If you’re 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.
– 24 –
5 Tips for Better Sites
Webvanta
Choosing Among Self-Hosted Options If you don’t 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. You’re 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 you’re a developer who likes to work with PHP, you’re 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.
– 25 –
5 Tips for Better Sites
Webvanta
CMS Selection Summary: Things to Consider There’s 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
– 26 –
5 Tips for Better Sites
Webvanta
4.K now W hat jQuery Can Do F or You Perhaps 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 you’re 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 you’re 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 you’re doing designs in Photoshop and then handing them off to someone else to code, you don’t 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. There’s 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 – 27 –
5 Tips for Better Sites
Webvanta
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.
– 28 –
5 Tips for Better Sites
Webvanta
•
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.
– 29 –
5 Tips for Better Sites
•
Webvanta
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.
– 30 –
5 Tips for Better Sites
•
Webvanta
Slideshows, which show a series of images one at a time, typically fading from one to the next.
– 31 –
5 Tips for Better Sites
•
Webvanta
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
– 32 –
5 Tips for Better Sites
Webvanta
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.
– 33 –
5 Tips for Better Sites
Webvanta
5. Drive traffic with SEO and social media Most web site owners want their sites to be found – they’re 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. It’s 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 controversial part of web design today. It has a certain "blind men and an elephant" quality to it, with Google being the elephant.
– 34 –
5 Tips for Better Sites
Webvanta
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. It’s 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 you’ll 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). It’s 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).
– 35 –
5 Tips for Better Sites
Webvanta
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 you’re 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 <title> tag, which appears in the browser’s title bar) and the contents of the first <h1> 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, you’ve thrown away most of your SEO opportunities. Go in right now and write a unique page title for every single page.
– 36 –
5 Tips for Better Sites
Webvanta
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 they’re looking for. Having a page title like "Home", "Products", or "About Us" is useless (and very common). You can’t 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 <h1> tag. We see a number of common mistakes here: •
Pages that have no headline
•
Headlines that are in <p> tags, or other tags, which are then styled to look like headlines, or in images
•
Headlines that aren’t explicit enough
Make sure that your page begins with a headline in an <h1> tag. You'll help the search engines and the human readers. You can style the h1 to look however you want; it doesn’t need to be visually huge. Sometimes you want the main headline to be something clever, or cute, that lacks the keywords you’d like to have in the headline for SEO. In this case, you may want to put the actual headline in a <p> tag, styled to look like a headline, and then have the SEOoptimized headline below it in an <h1> tag, styled to look like a subhead or an introductory paragraph.
– 37 –
5 Tips for Better Sites
Webvanta
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 don’t 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.
Don’t 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 won’t 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.
– 38 –
5 Tips for Better Sites
Webvanta
Incoming Links Everything we’ve 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, it’s 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 don’t 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 – 39 –
5 Tips for Better Sites
Webvanta
linked to. But if the link says “San Francisco Hotels”, the text tells the search engines a great deal. •
Links from many sources have a special attribute applied, “rel=nofollow”. This tells search engines not to take that link into account. Nofollow was invented to reduce the link spam on Wikipedia and soon spread to many other sites. So while links anywhere are good for driving traffic to your site, many links in blog comments and forums do not help your search rankings.
•
Google is thought to penalize sites if large quantities of links to your site show up in a short period of time, especially if the links are identical. This is presumably an attempt to defeat people with a large network of sites that exist just to provide backlinks, as well as other “black hat” SEO techniques.
•
One-way links (a site that links to you but that you do not link to) are thought to be more valuable than reciprocal links.
You need to solicit links, but you should do so carefully, choosing sites that relate to your topic and have good search ranking themselves. It is helpful to suggest link text, but vary it from time to time. You will get solicitations from random sites asking for reciprocal links. These links are of little value, and may even hurt your rankings, so just ignore these requests unless the site is one you would want to point people to anyway. Getting good links is a slow and time consuming task, but it is one that is essential if you are going to get sites to rank well on competitive terms. If you have great content that people share with their friends and blog about, then incoming links may happen on their own. If you want to be more proactive, do searches on the terms on which you hope to rank. Look at what sites rank well, and look for ones that might link to you. If there are influential blogs, add your comments to their posts regularly. This may not give you useful links back, but it helps to build a relationship and a reputation.
– 40 –
5 Tips for Better Sites
Webvanta
Adding Content Frequently Search engines love content—and so do people. There’s 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 you’re 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 someone’s 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 they’re 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 won’t directly improve your search engine rankings. But they bring you traffic just like search engine results do.
– 41 –
5 Tips for Better Sites
Webvanta
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 the visitor’s 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.
– 42 –
5 Tips for Better Sites
Webvanta
Next Steps We 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 it’s 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. It’s all too easy to miss applying even the techniques we know well, given the press of daily business.
For More Information We’ve 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 contact@webvanta.com. Thanks for reading. You’ve made it to the end!
One Last Thing If you found this ebook to be useful, please tell your friends! Direct them to www.webvanta.com/5tips-ebook to get their own copy.
– 43 –