In This Chapter

• Deciding on your site content
• Choosing keywords
• Using H# tags for headings
• Cleaning up your page code
• Organizing your assets
• Naming files
• Making your site dynamic
• Developing a design procedure

In this chapter, you discover the basics of site design with search engine optimization in mind. Building a website is like baking a cake in a lot of ways; one of the first things you have to do is gather your ingredients.

In this chapter, we first guide you to deciding on the content and the types of keywords that you want. Then we discuss H# or heading tags (HTML code used to format headings), page headings, and the importance of using clean code for your site. You find out how to organize and name all the assets on your page, including images, videos, and podcasts. After you have everything organized, you discover how to actually construct your site.

We finish off the chapter by discussing keeping your page simple and neat, creating dynamic content for your site that is still seen as relevant by the search engines, and developing a design procedure so that everyone in the web development process is on the same page.

We talk a lot about HTML, Cascading Style Sheets (CSS), and JavaScript in the upcoming pages; however, we don't attempt to teach you to write code in this book. We strongly recommend that you learn at least the basics of HTML before you attempt SEO. Even if you aren't going to be the one doing the optimization on your website, it’s a good idea to learn the basics. If you want to be good at search engine optimization (SEO), you need to understand both the marketing end and the technical end. If you know the basics of HTML, you can communicate with your IT guys in their own language, which prevents them from claiming something can’t be done if it actually can. It also allows you to be able to catch mistakes others might miss, helps you research your competition’s websites, and is just generally good to know.

Deciding on the Type of Content for Your Site

We have stated this time and time again throughout this book, and we'll continue to do so because it’s important: You must know what your business is about. It colors how you choose your keywords and how you arrange your site. You need to know if you have a research or an e-commerce site, or if it’s both. How can you tell? Here are a few ways:

• Research: A research site’s keywords should lean toward how-to types of phrases. As in [How do you fix a lawnmower?] or [How do you say Where is the consulate, I lost my passport? in Spanish?]. Or even more specific keywords like [Mustang] or [John Wilkes Booth]. These are keywords that people use when they do research. If you have a site that provides information, such as recipes, lists of dead historians, or classic auto club newsletters, you want your keywords to be research-based. Research websites typically use keywords like [research], [reviews], [how to], [information], and so on.
• E-commerce: If you have an e-commerce site, your site is designed to sell things. Your keywords are geared more toward users who want to make purchases. That could include the keyword [free] because who wouldn’t want free stuff? Also, you’d include much more specific keywords in an e-commerce site than in a strictly informational site, like [Ford Mustang convertible with leather interior], because people search for broader terms when doing research and more specific terms when they’re ready to make a purchase. E-commerce sites have calls to actions in their content, using terms like [buy now], [purchase], [shopping cart], and so on.
• Research and e-commerce: Some sites provide both information and purchasing opportunities. You can have a site that provides tons of information and recipes for the best barbecuing techniques, and have things like grills and barbecue sauces available on your website for purchase.

Knowing what kind of a business you have (and what kind of website you want to build/redesign) helps you to pick out your keywords. Separate them into information-type keywords and transaction-type keywords. This means thinking about whether the keyword would draw someone doing research to your site or someone ready to buy something.

You have to do research and continue to do it. SEO is not like doing research for a tenth-grade English essay, where you do it once and then never have to do it again. The market changes constantly and you have to be able to keep up with it. See Book II, Chapter 1 for more information on keyword research.

Making a User-Focused Website

The process of building your website so that it functions in a way that caters to the specific needs of your customers is called building a user-focused website, or designing for usability.

A user-focused website is just as it sounds — a website that is created with a focus on users and their needs. (You can find out more about how to uncover your customer needs in Book V, Chapter 1.)

Designing a user-focused website means thinking about the preferences of your personas when you make decisions about your navigation, search functionality, visual elements, shopping cart flow, and any other elements of your website.

Whether you’re building your website from scratch or making improvements to an existing website, always keep your user’s preferences and needs in the front of your mind. Think:

• Will this placement confuse the user?
• Will this placement/font size/color/and other design aspects make my user happy?
• Can I alter this design in any way to improve my user’s experience?

Keeping usability in mind keeps your end user happy, often resulting in more sales and conversions that in turn keep you and your boss happy, too.

Remember that SEO and usability are not mutually exclusive. Rather, they actually work hand in hand because many of the things that are good for human visitors are also helpful to search engines.

Usability may even make the search engine happy: Google lists “Focus on the user and all else will follow” as the number one item in its “Ten things we know to be true” company core values documentation. Keep in mind that you can never confirm the exact factors the search engines evaluate to determine rank, but you can look for clues and make educated guesses. Google’s listing of “focus on the user” as the number one priority in its core values is a pretty good clue.

Choosing Keywords

After you decide what kind of site you’re building and for whom, you have to choose what keywords will go where. You need to know what keywords to assign to each page in order to:

• Focus the page content.
• Make it faster for the viewer to understand the content.
• Make it easier for a search engine spider (or robot, referring to the search engine programs that read your site and index its contents) to determine what each page is about.

Running a ranking monitor to discover what’s already working

If you have an existing website, you have to first establish a benchmark; that is, you should find out what’s currently working before you begin rearranging things. You need to find out which of your web pages already rank well in the search engines, and for which keywords. For instance, if you have a page on your site that’s already ranking in the top five listings for one of your keywords, you should just designate that as the main page for that keyword and leave it alone. Check on which keywords are working for you and which aren’t and don’t fix something that’s not broken. Conversely, if you have a page that is consistently not ranking for any keywords, it’s time to fix that page.

To help you evaluate your keywords, you can take advantage of a useful tool called a ranking monitor. This tool is extremely helpful for keyword research and keeping track of how your pages are ranking, both now and further down the road as the market grows and changes.

A ranking monitor tells you without personalization bias where your pages rank in the search engines for each keyword, or whether they rank at all. (Remember from Book I, Chapter 3 that the search engine results each of us sees are often personalized based on search history, location, and other factors.)

At the time of this writing, we don’t know of any ranking monitor available for free; however, subscribing to a paid monitor is worth the cost. At the risk of sounding self-promotional, the monitor available with our subscription SEOToolSet at www.seotoolset.com works and is fully integrated with many useful tools. The full suite of tools is available for $89 per month, but you can search online for others. No matter which you choose, you need to be looking for a ranking monitor that:

• Checks multiple search engines (domestic and international)
• Includes historical data, so you can see trends over time
• Is “polite” to the search engines by automatically spacing queries over time, or allows you to customize the crawl rates to use time delays
• Supports proxy (remote location) queries
• Offers multiple languages
• Is schedulable
• Runs from a server and not from your desktop computer
• Integrates with other tools to allow for analysis

Figure 1-1 shows a ranking report from the SEOToolSet. For every one of the site’s keywords (which are pre-entered), the report shows if any page on the site ranks for that keyword, what number rank it has in each of the search engines, and the search activity (roughly the number of search queries per day). For each keyword, the specific URL of the ranking page is listed.

Figure 1-2 is a ranking report that compares two periods of time, giving you a history of how your site ranked overall over time and a handy bar graph to go along with it. It’s important for you to be able to track your rankings over time so that you know whether your search engine optimization efforts are working. Keep good records of all your changes so that you’ll be able to relate them back to the rise and fall in your graph.

Choose a ranking monitor that won’t constantly hammer the search engines. (By “hammer,” we mean that it won’t constantly query the search engines. You don’t want the search engines’ spiders to crawl your site at full speed if it impacts your ability to do business by overloading your servers. We think it's just polite to return the same courtesy to the search engines.) We recommend you choose an online ranking monitor, rather than a software-based one, to be sure you don’t get your personal IP banned: You don't want to limit your ability to do your own Google searches. If your monitor hits the engines with too many searches too fast, the search engine may identify your monitor as a machine and require you to prove you’re a human user every time you try to run the application.

Choose a ranking monitor that either auto-spaces its queries or lets you request delays between searches because constantly calling on the search engine for rankings data can get you into trouble and will produce inconsistent data. The SEOToolSet ranking monitor waits several seconds between each query, just to be polite.

You should rerun a ranking monitor at regular intervals, storing up a history of biweekly or monthly ranking reports that you can compare to each other. There’s no real benefit to running monitors more often as search engines change algorithms regularly, and less frequent monitors give better history and don't take up so much data. (Not to mention that you need to wait to see whether your SEO edits on your web pages were picked up by the engines in the first place.)

Having an archive of dated reports allows you to see your progress over time because each one is like a snapshot of your current SEO work. Especially as you begin implementing search engine optimization throughout your website, you want to run a ranking monitor regularly. You will definitely appreciate the trending reports in the long run.

Using Keywords in the Heading Tags

When you’re structuring the HTML coding for a web page, it can look a little like an outline, with main headings and subheadings. An important place to have keywords is in those headings, placed within heading tags.

Heading tags are part of the HTML coding for a web page. Headings are defined with H1 to H6 tags. The H1 tag defines the most important heading on the page (usually the largest or boldest, too), whereas H6 indicates the lowest-level heading. You want to avoid thinking of headings as simply formatting for your pages: Headings carry a lot of weight with the search engines because they're for categorization, not cosmetics. You can control what each heading looks like consistently through your site using a CSS style sheet that specifies the font, size, color, and other attributes for each heading tag. Here's an example of what various heading tags can look like:

<H1>This is a heading</H1>
<H2>This is subheading A</H2>
<H2>This is subheading B</H2>
<H3>This is a lower subheading</H3>

Search engines pay special attention to the words in your headings because they expect headings to include clues to the page’s main topics. You definitely want to include the page’s keywords inside heading tags.

Heading tags also provide your pages with an outline, with the heading defining the paragraph that follows. They outline how your page is structured and organize the information. The H1 tag indicates your most important topic, and the other H# tags create subtopics.

You should follow several SEO best practices for applying heading tags. First, you want to have only one H1 tag per page because it’s basically the subject of your page. Think of your H1 tag like the headline of a newspaper article: It wouldn’t make sense to have more than one. You can have multiple lesser tags if the page covers several subsections. In feature articles in newsletters, you occasionally see sub-headlines that are styled differently than the headline: Those sub-headlines would be the equivalent of an H2.

Say that you have a page that describes how you can customize classic Mustang convertibles. Your very first heading for your page should be something like this:

<H1>Customizing Classic Mustang Convertibles</H1>

Your second paragraph is about customizing the paint job for the convertible. So it should have a heading that reads:

<H2>Customizing Paint for Mustang Convertibles</H2>

When you view the code of your page (which you should most definitely do, even if you have someone else create it for you), it should look something like this:

<H1> Customizing Classic Mustang Convertibles</H1>
<p>200 words of content about Customizing Classic Mustangs using the keywords.</p>
<H2> Customizing Paint for Mustangs </H2>
<p>200 words of content about Customizing Paint for Mustangs using the keywords.</p>

<H2> Customizing Upholstery for Mustangs </H2>
<p>200 words of content about Customizing Upholstery for Mustangs using the keywords.</p>

When assigning heading tags, keep them in sequence in the HTML, which is how the search engines can most easily read them. Heading tags should follow the outline structure you used in school for an outline or a technical paper. If you wanted to add an H3 tag, it would have to follow an H2 in the code. Similarly, if you had an H4 tag, it could only follow an H3 tag and not an H2.

Heading structure is a relatively simple concept, but you would be surprised at how many websites use the same type of heading for every paragraph or just use their heading tags to stuff keywords into the HTML code. In reality, many sites do not properly use heading tags, so it should be a quick win to place appropriate headings on your site. Absolutely avoid any headings that look like this:

<H1>Mustang Mustang Mustang Ford Mustang</H1>

This tag is unacceptable to search engines (to say nothing of your visitors), and is considered spam. See Book I, Chapter 6 for more on what may be considered spam.

The words in each heading tag should be unique and targeted to the page they're on. Unique and targeted means that your heading tag’s content shouldn't be duplicated anywhere across the site. If the heading on your tires page is “Classic Mustang Tires,” “Classic Mustang Tires” shouldn’t be the H1 on any other page in your site.

Search engines look for uniqueness on your page. For example, if you have an H1 heading of “Ford Mustang Convertible” at the top of two different pages, the search engine might read one of the pages as redundant and not count it. Having unique heading tags allows the search engine to assign more weight to a heading, and headings are one of the most important things on the page besides the Title tag (which is discussed in Book V, Chapter 3).

If you want to have any of the elements on your website (Title tags, heading tags, and so on) help your pages rank in a search engine, they all need to be unique. It may take a little more time to go through your site and think up unique, relevant, keyword-rich tags for everything, but it’s worth the effort. The little things count when it comes to SEO.

Keeping the Code Clean

Another part of building a search engine-friendly website is keeping your code clean and simple. When we talk about code, we’re talking about languages like HTML, XHTML, AJAX, JavaScript, and the like. Coding supplies the building blocks of your website. If we were talking about building a house, the code would basically define the walls, floors, insulation, light fixtures, kitchen sink, and everything right down to the color of the paint in the bathroom.

We assume that you already know a little bit about HTML, CSS, and JavaScript code and what it all looks like. In this chapter, we assume that you’re at the planning stage of your SEO campaign, gathering your assets and starting to visualize a big-picture plan for your website. In the next chapters, we cover how to apply what you’ve visualized to make an SEO-friendly site. But first, there are a few more concepts to grasp.

You want to streamline your site’s code so that it’s an easy read for the search engine spiders. Keeping the code as clean as possible, as it relates to SEO, means some specific things:

• Get to each page’s content as soon as possible in the HTML view. You want your keywords to start showing up early in the search engine spider’s crawl.
• Code by using as little on-the-page markup (formatting and other types of on-the-fly HTML codes, such as Font tags, which could be controlled in a CSS style sheet, instead) as possible. If you have useless tags in your code, get rid of them.

The preceding list gives you some great goals, but how can you achieve them? These best practices can slash the code clutter right out of your web pages:

• Use an external CSS file to define the look of your website, rather than relying on inline formatting.
• Move any JavaScript code into an external JS file when possible. Include simple calls to the JavaScript file from your pages, which keeps the on-page code short and sweet.

You may also have extraneous tags lying around in the HTML. Code gunk buildup can happen if you’ve cut and pasted content from another source (such as an old web page of yours or a document from Microsoft Word or other programs that add a ton of unnecessary HTML code to your text). Or you may have been working on a particular page for so long that it’s acquired excess tags like barnacles on a ship's hull. Go through and remove all the extraneous tags and code from your pages, including extra carriage returns. Simplifying your code streamlines the site and makes it easier to read for the search engine spiders. If they read too much redundancy or if your page code appears too complex, they’re less likely to assign a lot of weight or relevancy to your page. Just as two drops of dye in a small glass of water have a lot more impact than two drops of dye in a barrel of water, the messy code could “dilute” the strength of your keywords.

A couple of programs are available to clean up your code if you’ve got a bunch of gunk hanging out in the HTML. The cheapest is your friendly neighborhood text editor, Notepad. If you’re used to reading HTML, just open your HTML file in Notepad and tidy up the raw code, one page at a time. If you're using a UNIX/Linux server, save your work in UNIX format.

For those who aren’t able to read HTML easily, other tools are available for help. One free resource for tidying up cluttered code is aptly named Tidy (http://infohound.net/tidy), and it comes highly recommended by the W3C web standards consortium (we talk a lot more about the value of the W3C later, in Chapter 4 in this minibook). Another free and easy tool is Dirty Markup (http://www.dirtymarkup.com), an online tool that cleans up unruly HTML, CSS, or JavaScript with the push of a button, right in your web browser. See Figure 1-3.

Organizing Your Assets

Making a website is kind of like baking a cake. You have to have the recipe and all your ingredients together before you get started; otherwise, you could be in the middle of mixing only to find out that you have no eggs. Likewise, we have you go through all these steps first to make sure that you have everything ready before you begin constructing your website.

If you’re just starting a website, it’s important to organize your assets. What’s going to go on your website? Sift through everything that you have. Remember, users love dynamic or engaging content (also known as engagement objects), so in addition to that must-have, readable, well-written text, include images and video to enhance user interest and engagement.

Go through all your print materials, if you have any, and choose images that you can use on your website. Do you have a commercial? How about an interview that you did for radio or television? Gather all these things and go through them. If you think something is useless, chuck it because clutter will always be clutter. But if you find an image or a video you think will work with your site, use it!

Besides text, you might want to consider putting the following types of engagement objects on your website:

• Files: First things first, organize your files into proper categories. And by files we mean everything: your pages, your data, your images, your videos, and your podcasts, if you have any. Main subjects go first, and the remaining subjects go down the line into subcategories.
• Images: If you have print materials, you probably have images. Use those images to enhance your website (and make sure you have the copyrights to use those images). Adding images can also help your page rank because of the ability to use keywords in the Alt attribute text (the HTML coding of the image), plus the ability to rank in image-centric vertical search engines (search engines that look for a specific type of file or location).
• Videos: If you have any commercials or videos lying around, consider uploading them and using them on your site. Search engines can’t see a video, but videos can still enhance your rank by containing keywords in the text surrounding the video (such as if you put the video in a table cell with keyword-rich text above or below it) and by appearing in their own vertical results.
• Podcasts: If you have a radio show, it’s not that hard to stream it online and create podcasts that are downloadable.

If you have any of these Engagement Objects, gather them and keep them organized. Engagement Objects don’t stop there; also consider blogs, news, books, maps — anything that isn’t just a standard text-based web page and that could catch the eye and engage a user with your site. You’ll thank yourself later when you’re actually building your website and have lots of content choices handy.

Naming Your Files

After you gather your assets and separate the wheat from the chaff, you need to name them as you’re uploading them. How you name your files is important because a search engine looks at the filename as an indication of what's in the file, so this is another good place to have keywords.

Instead of naming your image of a red Ford Mustang like this:

*0035001.jpg

Rename the file as you’re uploading it to describe it, using something like this:

*ford-mustang-1967.jpg

Not only is the file now easier for you to identify when building your pages down the line, but it also now contains three keywords that search engines can read and add to their algorithms for ranking.

Use filenames that make sense to both the search engine and the user. You might understand the gibberish you just used as a filename, but someone else who doesn’t know you or your sense of humor might not. Also, use full words instead of abbreviations. Searchers generally don’t use abbreviations in their search queries unless those abbreviations are very common.

The same advice is true for naming video and podcast files. Make sure that the filename is descriptive and simple: It helps you and the search engine in the long run.

When naming your files with phrases, don’t leave spaces between words. Nor should you use an underscore (_) to separate words. Search engines interpret the underscore as its own character, so it’s like naming your file fordxmustang, which misses an opportunity to use your keywords when a search engine spider crawls it. It’s possible that search engines can figure it out, but you're better off naming your files properly in the first place.

Instead, if you have to use spaces (remember, search engines can parse words from web page filenames without any help), use hyphens. They won’t be read as a separate character. That way, you can have files that look like this:

ford-mustang-1967-good-condition.jpg

Even without hyphens in your filenames, a search engine can actually parse out up to 500 words that are concatenated (run together without spaces). You might want to use a hyphen in places where there could be confusion in the parsing, either for a search engine or for a user. In those cases, you might want to throw in a dash in order to make it legible. For example, the distinction between mensexchange.jpg and mens-exchange.jpg is important, after all.

Eyetracking studies done by Mediative (formerly Enquiro) research have found that users are not likely to click on a long URL in the results page. They tend to click the result below the hideously long URL instead. So when you’re naming the pages and files in your site, keep the length down to a reasonable level.

As descriptive as it is, you wouldn’t want something like this as your base domain name:

www.reallycoolclassiccustomcarsatareasonableprice.com

Also follow a standard of using either all lowercase or all uppercase in naming files. Apache servers are case-sensitive: Lower- or uppercase makes a difference to them. The pages /FordMustang.html and /fordmustang.html are not considered the same to a case-sensitive server. Also, do not use more than two hyphens in a page URL, and avoid having more than one hyphen in the domain name. Filenames (like our ford-mustang-1967-good-condition.jpg example) are mostly exempt from this rule (we’ve found examples with 14 hyphens in the filename), but we still recommend economy in your naming conventions.

Keeping Design Simple

When it comes to designing your site, the old adage KISS is good advice: “Keep It Simple, Sweetie.” Make your website as straightforward and easy to navigate as possible. Make sure the links and instructions are clear and not horribly complicated. Also, be aware of how much Flash you are using. Adobe Flash is a multimedia program that allows you to place animation on your website. There are many major companies out there with big, shiny websites that contain lots of complicated and cool-looking Flash. But here’s a secret about those sites: A search engine can’t read them.

A search engine is basically deaf, dumb, and blind. It can’t see what the viewer sees; it can only read the code. It can’t read a page like a person reads it (yet). The search engines are trying to emulate what a person can see and react to, but technology isn’t there yet, so the search engine spiders have to make do with reading the code.

Websites built entirely in Flash generally don’t have searchable content. A search engine, being blind, deaf, and dumb, can’t see the Flash animations that describe all the cool things the website has to offer because all the search engine can see is the Flash plug-in in the HTML code. See Figure 1-4, for example. It’s got some well-designed Flash, but a search spider can’t see any of it, so the spider can’t read any of the keywords or follow any of the links on the site. The capabilities of the search engines and of this technology are evolving rapidly. We may one day see Flash become as spiderable as text, but that day hasn't arrived yet.

That's not to say that your website can’t contain Flash, but make sure there’s readable content that goes along with it. Including a few Flash movies on the page is a good thing for user experience, provided they are relevant and are accompanied by a reasonable amount of companion text. Also, make sure that the Flash is not too complicated for the page, or for the user. Some sites create mini applications using Flash and include them on their websites. If that’s your site, don’t miss an opportunity to pull good text content out of the application to include on your pages, as well. For instance, if your Flash application contains instructions on how to use Flash, grab that text and make it part of the text on your page. Also, if you use Flash, place a description of the Flash content in the actual text of the page. That makes it easier for the user to understand, and a search engine spider can read it and use it in your ranking. It’s a win/win situation.

Also, many websites include a Flash animation as the splash page (sort of like a site’s welcome mat), and users have to sit and wait for it to load and play before going on to the actual site. In general, these pages are usually skipped. Most people want to go to the content right away instead of having to sit through a minute of pretty, but useless, animation. If you currently use this Flash animation on your site, you should probably remove it.

Here’s another hint for your website. Some people out there think it’s a cool idea to include music that plays when a user visits their website. We can tell you right now that many people do not enjoy this. There is nothing more annoying than visiting a site and being unable to find the music player to turn off the background music. The only people who enjoy having music playing on the page are the ones who put it there in the first place and the ones who pay to have it there. We would recommend that unless you have a site that actually sells music, don’t include background music on your site. And if you really must, make sure it defaults to off.

Keeping the content on your page simple and easy to navigate not only helps you get better rankings, but it also means that your user has a much better experience and will return to your site again. Follow this general rule: If it looks cool but is a pain in the rear to use, users won’t use it. Figure 1-5 is a great example of a simple, easy-to-use website.

Google’s home page is clean and simple, doesn’t have any extraneous clutter, and is pretty self-explanatory when it comes to what the page does. The less you have to explain to your users, the better. Of course, Google doesn't have to worry about ranking for anything, but that doesn't mean its simple and clean design ethic can't work for you, too. Ask yourself if you are putting only what you need onto a page, and avoid the tendency to cram in just one more thing.

Making a Site Dynamic

A dynamic website is a site that is built using a template and a CMS (Content Management System) that gives you control of how to define your web page, pulling information from a database. This means that the pages don't exist until someone asks for them. If you have 10,000 products, you're not going to build 10,000 individual pages by hand. Instead, you use a CMS to build it dynamically on the fly. A CMS actually generates the page that a search engine spider crawls by taking the information in your database and plugging it into a template web page, so the CMS is responsible for creating all the tags, content, and code that search engines see.

The most important thing you need in order to have a dynamic site, and we really cannot stress this enough, is to have an SEO-friendly CMS. Any CMS that supports SEO completely allows you to access and edit these tags as well as to set rules for generating tags that are SEO-friendly. That means that you can focus on the content on your website. That content is what builds the page that the user sees. You need to be able to make changes to the H# tags and control the metadata on each page separately. Every element must be customizable.

If you cannot customize your current CMS, get a new one. End of story. If you can’t write a Title tag individually, you’re out of luck when it comes to SEO. If you can’t control your H1 tag, you’re out of luck. Chuck your inflexible CMS and get one that allows you to control page tags and content; otherwise, you can't do any of the SEO we’ve been talking about. Pixelsilk is a low-cost CMS that was designed from the ground up to be SEO-friendly. For simple websites, you could use blogging software like the highly customizable WordPress, which is free and open source.

Keep this list in mind when searching for a good CMS. It must be able to

• Customize HTML templates
• Produce unique Title tags
• Produce unique Meta description/keywords tags
• Produce unique heading tags (H#)
• Categorize content by groups

Making Your Site Mobile Friendly

A mobile-friendly website is a site that looks and functions equally well on a mobile device, such as a smartphone or tablet, and a desktop computer. This is important because today more than a billion people worldwide are regularly using mobile devices to research and make purchases, and a good many of those people want to research and buy from your site. If your site doesn’t look good on a mobile device, or if it’s not easy to use, you are going to miss conversion opportunities left and right.

Having a mobile-friendly website is also important if you want your website to rank in mobile search results. Google takes the mobile user experience very seriously. There are some who also believe mobile optimization is on its way to becoming a desktop ranking factor, as well.

When optimizing your website to make it mobile friendly, you should take several factors into consideration, including the following:

• Choosing the right mobile design approach
• Designing for mobile user experience
• Understanding mobile's effect on SEO
• Testing for technical mobile-friendliness

You can learn more about those considerations in depth in Chapter 3 of this minibook. What’s important to understand here is that mobile use is growing every year, and including mobile-friendly optimization as part of your strategy is essential — for the sake of both your SERP rank and your user experience.

Developing a Design Procedure

Developing a design procedure for your website is also important. Keeping a procedure the same through all parts of the design process helps you if something goes wrong. If your design procedure is a set procedure, you can more easily pinpoint where the goof-up happened and to fix it.

When developing a design procedure, create a style guide for your website conventions and best practices. If you use a template style guide, all images are named the same way, for example, using hyphens for spaces, and they are all saved under the same file folder. All videos are named in a standard way and go in their own folder, and so on. This prevents confusion down the line.

If you have a design team, make sure they’re all on board with the style guide and that any newbies you bring in are trained to follow it. Also make sure it’s a procedure that everyone can follow. Sure, it may all make sense in your head, but it needs to make sense to everyone else, too. (Besides, don’t be too sure that what makes sense to you now will make sense to you in six months.) Document every last bit of your procedure, and if you have the resources, hire a technical writer to take it all down and rework it so that it’s understandable for everyone else.

Here’s a handy list of things you should be keeping in mind when you’re coming up with the standard design procedure for your website:

• Know what your site is about.
• Know your page themes.
• Know the major categories/silos.
• Know the subcategories.
• Know your keywords and how you research and choose them.
• Know whether your site is e-commerce, research-oriented, or both.
• Know how you arrange your files.
• Have a set standard for naming files.
• Have a set standard for naming Title tags.
• Keep track of all your titles and headings in order to avoid redundancy.
• Know the color scheme, fonts used, and visual standard.

Having a set standard in place before you start also helps to keep the process moving as quickly as possible and results in the least amount of headaches for everyone involved. It also makes doing your SEO much easier because you don't have to waste time redefining your goal with every single page edit.