Web Design For Beginners

Define your audience and their needs

Defining the purpose and objectives of your website should be your first step. Focus on what you want your website to achieve. Create a profile of your intended audience and try to understand their needs and tastes, and design the site with them at the forefront of your mind at all times. Take a look at competitor websites to gain an idea of what works and what doesn’t.

Easy navigation

In order to make your content easy for your intended audience to navigate, make sure the links to the main sections of your website are easily visible from each web page. You want to invite people to view as many pages of your site as possible, so make it easy for them to find each page.

A good way to help you visualise the structure of the site is to create a flow chart of the whole website on paper. Think about think about how your users might structure the information within the site to help them find the information they need easily.

Try to keep the information on your first page a general overview so you don’t bog people down with too much information. They can then click on the (clear and easy to use) links to view more information about the topics that they are interested in.

Layout

Most web pages have a common structure consisting of a header and footer, a horizontal navigation bar along the top and / or a vertical navigation bar down the left of the page and a central section for the main content.

This structure is based on simple, easy-to-understand layout principles. If there’s a lot of content, split it up into several different pages so your viewer doesn’t have to digest too much information on one page.

Keep text simple and to the point, and make sure grammar is correct; check and check again to avoid looking unprofessional. Text is more difficult to read on screen than in printed media, so’s crucial get your message across in a succinct and easy to understand way.

You should always keep your text blocks relatively small. Huge paragraphs are more difficult to read and may make your audience lose interest quickly.

Stick to 2 or 3 different fonts at the most, and make sure they are ones generally found on most computers. San serifs are easier to read on computer monitors so stick to these for the main text, and make sure your text is large enough for everyone to read. Bullet points, lists and relevant photos can help to break up the text.

Learn the basics of html

Learning the basics of html, even if you are using WYSIWYG software Front Page or Dreamweaver – will help you gain an understanding of how a web page in built, and deal with problems you encounter using the software. Try and stay away from tables, and create the pages using layers (divs) and cascading style sheets (CSS).

Tables mix ‘presentational’ data in with your content, which makes the file size of your pages unnecessarily large, as users must download this presentational data for each page they visit. But by using structural markup to create web pages, you can keep the actual content of your page separate from the way it is presented.

Table-based pages are also much less accessible to users with disabilities and viewers using mobiles and PDAs to access the Web. And to change the layout of the site, all you need to do is change the style sheets; you do not need to edit the pages themselves at all.

Using colour

Creating a balanced colour palette from which to choose your website colour scheme will help you to create a professional looking website. Bright clashing colours scream amateur.

If you are creating a website for a company with a logo, start here. Upload the logo to your host server and go to a colour palette website such as http://www.colorhunter.com to create a palette, from which you can choose colours for the main banner, buttons and text rollovers etc. And keep things simple and uncluttered – empty space makes colours stand out and text easier to read.

Optimising photos and images

Don’t use a graphic just for the sake of it; make sure there’s a reason for it’s presence, i.e. it improves the user’s understanding and experience. A site full of unnecessary graphics looks amateurish, and it can be an obstacle for accessibility tools such as screen readers.

Make sure the photos and images you do use are clear and well optimised to reduce file size and increase page loading times. One sure sign of an amateurish website is a page with a huge image that takes forever to load. And your viewer will probably click away from the site before they even get a chance to see it.

Creating clear, professional looking graphics GIFs are really grids made of tiny pixel squares. Data about every pixel is saved (so it’s lossless), and you can save up to 256 colors. Pixels may also be transparent.

A GIF may contain more than one frame, so it can be animated. It is a good format for saving images with fewer colors, like charts and small graphics, images containing text, and drawings.

JPEGs are a good file format for images with millions of colors, like photographs, drawings with many shades, images containing gradients etc.

Design tips:

a.) Use design to highlight functionality. For example; using gradients on button also helps make them seem more ‘button like’;, different coloured mouse over text draws attention to links.

b.) Be wary of animation and sounds unless they serve a specific function. It is difficult to concentrate on reading what’s on your site when there are things flashing on and off and flying around the page. And visitors with slow connections may resent that you wasted their time by forcing them to load animations and sound files against their will. Some recent research does indicate that visitors assaulted by blinking ads are more likely to leave the site immediately, and are far less likely to bookmark the site, return to it, link to it, and recommend it.

c.) Don’t use images as a web page background. Image backgrounds scream ‘amateur’ because it’s mostly amateurish sites that use them. They take longer to load and the text over the background image is usually difficult to read.

e.) Design the webpage including all elements within it for your audience. For example, create a chilled out mood for a massage / therapy website using colours like lavender and blue. Use darker, more restrained, stronger colours for a more traditional finance website.

d.) If your business doesn’t already have one, make a logo for your site, display it at the top of every page, and add a link from it back to your homepage. It will make your site look more professional and create a sense of branding to help people remember your site and recognise it as yours.

Going ‘live’

Hosting

When it comes to hosting, cheapest is not always best. For a small-ish ‘beginner’; website you shouldn’t need much bandwidth (unless you’ve not been following the ‘image optimisation’ guidelines!) But I wouldn’t recommend hosting your website with the cheapest offer available until you have checked that they can give all the support you may need as a newbie.

I would always recommend looking for a local contact telephone number on the website of the hosting company you are considering using, and ringing it to make sure there is an actual person at the end of it.

Ask if you can get technical help from this number; they may only communicate via email for technical support. If they give you another number, ask how much it costs per minute, and ring it to make sure there is someone at the end willing to help you as a beginner should you have any problems connecting to their server, uploading your files, or sorting out your email accounts.

You should also make sure email accounts are included in the cost, and, if you have any dynamic elements such as a search facility or enquiry form on the website, check that the server will support the PHP or ASP etc needed to allow this facility to work, and if that is included in the hosting price quoted.

Ftp

You can download free ftp software to upload your new website to your new hosting space from a variety of sources including Filezilla or Smart ftp, or you could try a free trial with Cute ftp.

Search engine optimisation

Although professional web designers have the optimisation of the website in mind from the start of design and development, as a newbie, you have to take it one step at a time! So now you’ve designed, built and uploaded your website, take a look at some of the ways you can now begin to optimise it for search engine ranking:

Getting on the Top of Google Ain’t That Complicated – Boot Camp Marketing Tips

Ranting Time Is ON! OK, this is going to be fast, and it’s going to be furious… I am furious.

A friend of mine is a personal trainer, and she markets a fitness boot camp. Her company is well run, and she’s got a web site, all the basics. And like any web site owner, she gets solicitations from companies that will promise to put her on the top of the page ranks with Google through Search Engine Optimization. Of course, there’s going to be a price. Two friggin’ grand a month! And a three month cancellation clause! Holy crap! What a racket!

Now, there’s a handful of good fitness marketers working on Google, and some of them can help market a fitness boot camp. They hold nothing back, and they bring a lot of value to the table, because they aren’t just repeating the same old stuff, they talk to their clients, focus on the message and try to make it all work together.

Now, I am going to blow the lid off of the other guys. The hacks. The ones that think marketing a fitness boot camp is all about drawing craptastic ad revenue placement, or trying to set up an affiliate program tied to some blog about women’s shoes. (No, really, that’s what they offered my friend. It was ‘building the community’ and they found “boots” and “camping gear” to be accessible keywords.)

There are some fundamental basics at play here. Once you know them, you’ll be able to see through the scammers trying to sell page position using the tools that Google makes available for free, to everyone. This won’t replace a good marketing campaign run by someone who understands your business and how to refine your message – but it’ll get you into the ground floor of things and let you build out from there.

I want you to know that what they’re selling is a set of link farms; overdo this, and Google will blacklist you – or at the very least, shove you down the ranks. They’re also selling a dependency system. You want to make this work, you’re dependent on them – and they’ll claim that if you don’t pay them every month, you’re gonna fall off the rankings page.

I wants you to know that it’s Crap. Here’s how you can get your business (even my friend’s fitness bootcamp) parked on the first page of Google.

Phase I – Target Your City

First, use the title of your site’s home page – the TITLE tag – to put your city and two or three of your key words into the title. For example, Tustin CA Fitness Bootcamp. This is what shows up on the top of the browser window when someone hits the page, and it’s the first thing Google indexes.

Don’t overdo the keyword stuffing, it’ll dilute things. It’ll also make your web page look like it was put together by a dork rather than someone who’s running a business.

2. Those keywords (and a few others) should be used in your Description tags.

3. For the key words tags, make sure that you put in a mix of keywords (boot camp) and one city. Google focuses in on geographical locator’s as part of its algorithm.

4. Use the good old fashioned H1 tags for your headline. Google still ranks this pretty highly, because it’s going to be the text that the reader actually sees. Remember, Google wants to direct human eyeballs, and no web spider ever bought anything from anyone. For example, “Costa Mesa” Fitness Boot Camp Tones Abs And Drops Pounds in Eight Weeks. Can You Afford Not To Go?”

5. Every two to three paragraphs, use a subheader with an H2 tag. It needs to have one or two (tops) of your keywords in it; this also gives SEO rankings.

6. Latent Semantic Indexing means that Google likes having a long home page, rather than a lot of smaller pages to crawl through. Testimonials are a great way to fill out your home page, though they should come after the main information about why the reader will benefit from your business.

7. Alt Tags are there for web browsers that don’t display graphics. Yeah, they still exist. They’re also a great way to fit in more keywords where Google will consider them important. Make sure that the alt tags read like photo captions; don’t just randomly stuff keywords in there without making them into a sentence.

8. Quality counts. That means that Google does grade you on how well written your page is, not just keyword density. It’s got to be keywords in places that make grammatical sense, rather than stuffing “fitness boot camp” all throughout the page.

9. Get your links by submitting articles to article directories; this costs you nothing, and the links get weighted much more readily because they’re part of a referring article, which is how Google rates relevance. Those articles need your keywords in the titles, and a couple of times in the article body – it’s important that they show up in the first hundred words (first paragraph) and are sprinkled throughout the rest of the text.

Keep your articles from being spammy. Make them informative, not sales pitches. Your sales pitch needs to be on your home page, not the article directory. On the resource box, make sure that you have a sentence or two that incorporates a few of your keywords and has an HTML link back to your web site. Make sure the link itself has text in it using keywords. This boosts page relevance mightily.

If you need content, but look at writing yourself, there are sites out there that can help. Need-an-article.com is a good one; I recommend this over paying 300 dollars or more for a press release, or trawling the e-lance type sites. Look for an article creation service that keeps its writers around for a long period of time; if they keep the writers happy, they’re doing something right, and that means the writers have more experience on writing web content.

Phase II – Fire For Effect

In the Army, we learned to “fire for effect”, which was to hit a grid coordinate with artillery, and then hit all adjacent grid coordinates in one massive barrage. Guess what? The same strategy works for Google too.

Take that first web site you did, using all of the strategies above, and create ones similar to it for your surrounding cities. These additional city sites will start popping up on high page rank positions for their cities, especially if there’s not a lot of local competition for them.

Now, link your web sites together with a site map. Tie them into a link box at the bottom, using keywords like “City Name (Boot Camp)”. Having a group of sites that come up on the top of their search pages that are linked carries a lot of Google mojo here.

Now, look for people in the same business in different geographical areas. Help them set up site clusters, and swap links. In no time, you’re going to be at the top of more generalized searches for things; my friend eventually got onto the first pages for personal trainer by this method.

And all it costs is a bit of your time. Now I want you to go out there, use my out-of-the-box Boot Camp Marketing tactics and kick butt!

Writing Semantic HTML

Semantic HTML means using HTML tags for their implied meaning, rather than just using (meaningless) div and span tags for absolutely everything. Why would you want to do this? Depending on the tag, the content in the tag can be interpreted in a certain way. Here are some examples.

Header tags

If you use instead of , and instead of , et cetera, Google and other search engines will interpret your headers as being important titles in your page. This way, when people search on the words in your headers and sub-headers, your page will be considered more relevant (and rank higher). Plus, it’s much shorter and cleaner.

This works both ways: don’t use header tags for anything except headers, especially not increasing your font size or outlining your search engine keywords. This way, your page can be parsed for structure (you can do this with the W3C HTML Validator). This structure can then be used by screen readers or other tools to build a table of contents for your page.

Form labels

The tag is so sadly forgotten. It’s not immediately clear what the point of using it is, so very few web pages take advantage of it. The label tag is used to identify a label for an input field, for example “E-mail Address”. It can either be used be wrapping it around the text and input field like: First Name: label >, or it can be used with the for attribute like so: First Name: label > .

Why use the label tag instead of

? Well, it’s shorter and cleaner. But it also let’s screen readers and other tools identify the text associated with an input field. Without using the label tag, it can be very difficult for some people to know what is supposed to go into your form fields.

Tables

These days, everyone’s moving away from using tables. This is great because tables aren’t intended for structuring the way your web page looks. But tables still have a very important purpose. Any time you need to display data that would go in a spreadsheet, tables are here to help.

When using tables, there are a number of tags and attributes that aren’t widely used, but are very important for accessibility. Use the summary attribute to give a longer summary of the data in the table. Use the tag to give a brief title to the data. Use tags to identify the column and row headers in your table. Then, you may want to use the headers attribute on the tags to identify which headers apply to that cell. For more examples and details on accessibility with tables, see the W3C’s Accessibility Guidelines.

Lists

Lists are the new tables. Whereas tables are intended for grids of data, lists are intended for lists of content. This is great for us, because most web pages are essentially lists of different things. For example, look at this site. On the front page, I have a list of blog entries in the centre. On the sides, I have lists of links (archive, categories, et cetera), and the sides themselves are lists of lists. If I had used tables, I would’ve been saying “this stuff on the left has something to do with the stuff in the middle”, but it doesn’t, really. By using lists, I’m simply saying “this stuff is a list of items that have something to do with each other”, which they do.

You have three types of lists to choose from, but choose wisely. There are Ordered Lists (), Unordered Lists (), and Definition Lists (). Only use Ordered Lists when the entries have some kind of order. Use Definition Lists any time you need name/value pairs, or when you need to break your list up into sections. The rest of the time, Unordered Lists are a safe bet.

Lists not only give structure to your page, they’re incredible handy for styling. You can just put an id or class on the outer tag (eg. ), then style both the outer tag, and the inner tags.

Conclusion

Try to use the full variety of HTML tags whenever possible. Sometimes you’ll be stuck with using tags, but try to limit them to whenever you can’t find a suitable HTML equivalent. At the same time, try to avoid using HTML tags for anything except their intended purpose. By doing this, your HTML will be cleaner, and its structure will be more readable and understandable — not just to people but to screen readers, search engines, and other programs and tools.