How to design a web page

Your main goal when designing a web page is "navigation at a glance". This is especially important when designing for mobile devices, but it is just plain good design even when you expect people to view your web page on their computer.

Simplify. Use the top of the page to identify your company, then go right to the navigation. The navigation links should be as simple and clear as you can make them. Don't try to get everything on your index page. That's what hyperlinks are for. If you feel compelled to put a picture of the factory or the founder of your company on a web page, put it at the bottom. Slogans, mission statements, etc. should also go at the bottom.

People read web pages the same way that they read magazines. They skim. Don't expect people to read everything, top-to-bottom, left-to-right. People don't read instructions, so don't tell them that you site is best viewed at 1024 X 768 in Internet Explorer. They are at your web page right now, at whatever resolution their device has, in whatever browser they want. Make it work. You can do this by simplifying your code. Throw out the garbage. Use text. Use HTML. Use CSS. Make it easy for people to use your web page and they will. Make it difficult and they will just click away.

How to rescue your old website

If for some reason you have an "abandoned website" that you haven't updated for a long time and you have just plain lost track of, don't throw it away! Here is what you need to do to rescue it, get it updated, and back under control.

Find out where it is being hosted. In order for a website to exist, it must be hosted by a company that charges a monthly or yearly fee. The host for my website, BradHallArt, is Bluehost, who are excellent. I tell my clients to find out who they are sending checks to. If the site is up, then some host is getting money. All you have to do is to get their name.

Web hosts are pretty fussy about who owns a site, and they consider the owner to be the one paying the bill. It doesn't matter who designed the site, you own it. If you would like to update your website, just find a new web designer and give them the information from your host. There is no reason to throw anything away. You have already paid for hosting, and for the domain name. Even if you parted with your original web designer in a less-than-amiable way (like, she was your ex-girlfriend and she is no longer speaking to you), a new web designer can salvage a good part of your site, and get most of the files needed to update it, by getting it from the host.

After you get the information from your host, keep it in a safe place. If you were casual about login IDs and passwords before, don't be casual in the future. You own that website because you pay for the hosting.

What a browser is

A browser is a piece of software that you use to view web pages. The most popular browser is Internet Explorer, which comes loaded on all PCs. On Macintosh computers, it's Safari. As you read this, or any web page, you are using your browser.

The name browser is appropriate, as that is exactly how people look at most web pages, like browsing through the library, a book store, or a magazine rack. A browser's function is to take HTML and other similar types of web coding, and interpret it so that you can see the web page on your computer. The really cool thing about browsers is that they are all free. And you don't have to be stuck with the browser that came with your computer. For reliability and accuracy, the worst browser by far is Internet Explorer. Most people use it just because it came on their computer and imagine that they are stuck with it. Like most software created by Microsoft, it is very poorly made, very "buggy", and well, just plain bad. In fact, it's so bad that Microsoft hasn't made a version for the Mac for years. But, you don't have to be jealous of Macintosh computers here if you have a PC. The browser that comes standard with a Mac, Safari, is available as a free download for your PC. It's just like iTunes, made by Apple, but you don't need a Mac to use it.

I'm on a Macintosh computer and personally I use Firefox. It's not all that different from Safari, I just like some of the small features it has. Other excellent browsers are Opera and Chrome. And yes, they are free and you can use them on either a PC or a Mac. Just Google any of these browsers, click on "free download" and you're in business! Life is better with choices. Use what you like.

What a URL is

A URL is the address of a web page. It always starts with http:// and usually has www. after that. It is the name of the site (in the case of this post, it's my professional site, BradHallArt).

Web page addresses, like all things related to computers, must be exact. Even a dot or dash missing or misplaced will lead to a dead end. The web address, or URL (which stands for Universal Resource Locator, by the way) is up at the top of your browser window. The front slash divides the name of the site from the individual pages. 

Blog post about what HTML is

Here is the URL for my home page on my site BradHallArt -  http://www.bradhallart.com. A home page is always named "index", by the way, but you don't see that in the URL. The actual URL is http://www.bradhallart.com/index.html.

My page about cartoons illustrations is http://www.bradhallart.com/cartoons.html

If you are tempted to retype URLs, please don't. Always use copy and paste when you are giving someone a URL. You can give a URL is an email by doing this - on the web page that you like, copy the URL and then paste it into the email. When someone gets the email from you, it will automatically become a hyperlink and they can go directly to that page. Please also don't try to give a URL over the phone. The words "front slash" should never be spoken to another human being! It doesn't matter how carefully you say it, the person who is listening to you will probably get it wrong. And then it will take another call, and more conversation, and back and forth. Have mercy on them, take a few seconds and send an email.

Blog post about what a hyperlink is

Like all things on computers, it sounds more confusing than it really is. And even though the internet has been around for over a decade, not everybody agrees on terminology. Some people will ask for the web address, some will ask for the URL. It means the same thing.

What is HTML?

HTML stands for "Hyper Text Markup Language". If you look at most web pages, they end with .html, or .htm. Hyper Text Markup Language formed the base for the internet. And, contrary to its name, it's not really a language, it's a script. Computer geeks know languages. I'm not a computer geek and I know HTML. And whether "hyper text" is accurate just depends on how super-dooper you consider text on the web to be. It is, however, definitely "marked up".

To mark up text just means to format it, for size, font, boldness, italic, that sort of thing. In order for a markup to work, it needs to have a character that a computer recognizes that says, hey, don't write this, I'm about to give some specifics as to how the text should look or work. In HTML, they're called "tags". And all they are is some specific text that only the computer sees that go in between the "less than" sign and the "greater than" sign. When I first started teaching HTML, back in 2001, one of my students called them alligators, and I really like that. The picture at left is of the HTML tags used for this page.

So if you wanted to make a word bold you would type an alligator, write the letter b and then do another alligator facing the other way. There is a huge list of tags that your computer understands, like a href, div id, li, and other such abbreviated terms. You have to get it exactly right, computers can't understand if you are off just a little bit. If you have ever seen these little alligators right on a web page, it means that the person writing it got something wrong. Embarrassing!

There are lots of different ways to format a page on the web, but HTML is the easiest, and it's the original. And the easiest way to create a page in HTML is with Adobe Dreamweaver. I know, I was so happy when it was invented!

How using hyperlinks can help your Google rating

Hyperlinks are a very important tool in the creation of a web page and a blog. Use them correctly and it will make your web page, and your blog, easier to use for viewers.

Blog post about what a hyperlink is

But it gets even better than that. Hyperlinks are a "secret weapon" for your web site optimization, that is, improving your Google rating. The "Google bots" love to read hyperlinks! But you have to do it right. The good news is that it helps your site work with us humans, too!

• Create your hyperlinks with text. Do NOT use a graphic (a jpg) for a hyperlink. Even if you use an alt tag, it's not as easy for the Google bots to see. And as a human, I'm not too crazy about it myself. If you have a particularly jumbled web site, I can find a hyperlink by using the search command in my browser if you use text. If you use a graphic, I can't. Don't ever have your hyperlinks in Flash, either. In fact, use Flash only for animation, if you must, never for content.

• Write out specifically where the hyperlink is taking you. Never, ever, just write click here, write Order hammers for drywall here. Yes, you can include the words click here, as in click here to see Brad Hall's cartoons.

You are not fooling the Google bots nor are you fooling your viewers. You are doing good graphic design. And that helps everyone, including you.

What a hyperlink is

Every time you click on something on a web page that takes you to another web page, that is a hyperlink. It can be words or images. Sometimes the words are underlined, sometimes the underline only appears as you "hover" the mouse over it. You know that your cursor is over a hyperlink when it changes from an arrow to a little cartoon hand.

Using hyperlinks properly can make a big difference on your web site and your blog, and to your Google optimization, that is, how Google indexes you for a search. The best way to do a hyperlink is to write a complete sentence, such as find out more about Brad Hall's cartoons here. This does two important things, it makes it easy for a viewer to know where the hyperlink will take them, and it also gives the Google bots the ability to index. A hyperlink that just says "Click here" is essentially useless, both to viewers and to the Google bots.

Hyperlinks are the best part of getting information on the web. It works for both human viewers and the bots that index for Google. That is, it allows skimming the page to look for important stuff. The only thing worse than writing "Click here" is to have your hyperlinks in a graphic or image. This makes them very difficult to find for most viewers, and just about absolutely invisible to the Google bots.

Using hyperlinks correctly is very important to the success of your web page and your blog. If you use too many of them, your page ends up being a mess. If you don't use them, you are throwing away the most powerful tool on the web. And in case anyone asks, hyperlink just means a super-dooper link. But I doubt that anyone will ever ask. But they will use them!

Creating a web page

There are lots of ways to create a web page. The easiest way is to use a "click and build" web page maker, such as at GoDaddy. The limitation with doing this is, of course, you are stuck with their templates. You could also just write it all from scratch using something like WordPad. This is how I first made web pages way back in 2001. And you can still do that, and many people do. I call it "hand-coding". But what I recommend is a software program called Adobe Dreamweaver.

Dreamweaver is a WYSIWYG (What You See is What You Get) software program that is much easier than hand coding, and much more flexible than "click and build". It is surprisingly easy to get started on, but it expands to allow all kinds of fancy stuff. It has a built-in FTP (File Transfer Protocol) program that makes it easy to upload pages to your site. Basically, it goes like this - you create the web page on your computer, then click a button to upload, and that's it.

The only other program that you absolutely have to have to create a decent web page is Adobe Photoshop. Photoshop handles images. If you are making a web page you should size and optimize in Photoshop. You can, of course, do a lot of other things in Photoshop, such as replacing the background of that photo of yourself in the backyard with a beach in Hawaii, but that isn't absolutely necessary.

Web buzz words

There are a lot of words that are tossed around by people who use the web all of the time. It can be pretty annoying to hear these terms and not know what they mean! Here are a few

Web, or World Wide Web - This just means the system that connects computers all over the world. Think of it as an "international phone line". Anyone can access the web if they have a computer and a browser.

The Internet - just another word for the web.

Browser - The way you and your computer, view the web. The most popular browser is Internet Explorer. Other browsers are Safari, Firefox, Opera, or Chrome. There are a lot more, but they all do the same thing.

Google - The most popular search engine. A search engine is just a fancy way of describing something that helps people to look up stuff on the web. Other search engines are Yahoo, Bing, or Ask. 

Web Site - This is a collection of web pages dedicated to a particular business. Sometimes just called a "site" 

Blog - Similar to a web site, this is more like a publication, with articles, called "posts" that are regularly updated. If anyone asks you, it means a "web log". But probably no one will ask you.

How to do frustration-free design

If you are a poor designer, you have probably watched people struggle to try to figure your design out, and possibly considered them stupid, or lazy. If you have ever said, "you just need to take a few seconds to figure it out...", about one of your designs, you are a poor designer.

Frustration is measured in seconds. Consider these frustrating tasks

• Opening an item in a shrink-wrap hard plastic package. By the time you have tried to find the edge, and went and got the scissors and cut all around it, you really have only spend a minute, possibly less. But in terms of frustration, it seems like forever.

• Waiting for the car in front of you to move after the light turns green. 2-3 seconds?

• Skipping over the previews on a DVD.

• Waiting for a web page to load. After 8-10 seconds, most people click away.

• Finding the bathrooms in a restaurant.

• Searching for what you are looking for on a web page.

If you agree that frustration can occur in seconds, you can see that creating a frustrating design, for example a web site, can discourage people from using it. If you are asking people to "take a few seconds to figure it out", you have created a frustrating design. You are a lousy designer. Sorry, but the more you complain about "how stupid people are", the more I learn about what a poor designer you are.

You can, of course, just say, "well it's fine for me, I like it, and that's the way it's going to be." Or you can put up signs like "To the bathrooms - turn left, turn right, turn left, turn right, up stairs, around corner, turn right, turn left". Or you can include an instruction manual with your designs. But none of this will work. People will just avoid your bad design.

You have two choices - the easiest way is to hire a designer. They went to school and had to listen to teachers like me rant about this stuff. They know what to do. Or you can learn it yourself. I look back on my Graphic Designers teachers fondly, but I wasn't too fond of them when they told me to redesign something! Great design is a pleasure to use. In fact, the very best design just kind of "disappears" and you are just listening to music on your iPod.

CSS, and understanding Style Sheets

CSS stands for "Cascading Style Sheets". You can ignore the "Cascading", but if you are a Graphic Designer, it is critical that you understand the idea of a style sheet.

Style sheets are as old as desktop publishing. I first used them in "Pagemaker" back in the early nineties. They were, and still are, a real "power tool" for page layout. And, to me, it represents the best relationship between a computer and a creative person. Please let me explain.

A style sheet is just a bunch of instructions that the computer gets about how you, the creative person, want the pages of your document to look. Take a look at any brochure, magazine, or web page. It starts with what font to use, what color, what size. Flip through a magazine or go through the pages of a web site, you will see that there will be consistency and repetition. A computer can remember what size the fonts should be for the headlines, and what color, and on and on. Multiply that by many pages in a brochure, a magazine, or a website and you can see how difficult it would be for a mere human (especially a creative one) to remember all of that. If you are not using style sheets, you are doing the work of the computer.

To use a style sheet, you have to know what can be controlled by styles. On a typical page layout program, like InDesign, it's mostly the font size, or color, that sort of thing. On a web page, it goes much further, you can create styles for page elements, too. Yes, you can still use plain old HTML for most things that you need, but you could also stand on a street corner and just shout at me instead of calling me on a telephone. I prefer the new technology, myself.

The difference between a blog and a website

If you've heard of blogging, but don't really know what it is, and how it works, please don't feel bad. A lot of people these days are in the same situation. Firstly, a blog is this, what you are reading. The word "blog" comes from the old term "web-enabled log", but that really doesn't matter. What matters is what the difference is between a blog and a web site. Like most businesses, I have both.

The website for BradHallArt is here.

Did you click on the link? Its OK, it's only me, the same website that I've had for about ten years. But if you hesitated, or didn't click, that's understandable. Clicking on a link to a web site is like walking through the door of a business. Except that on the web, there's no windows, and some bad things can be hidden behind a link. But a blog is a much safer place. It's a community area where I can talk to you, tell you about my products and services, even give out free samples.

So, in business terms, a blog is a "soft sell", and your website is a "hard sell".  When people are hesitant about your product or service, and just want to learn more, they will go to your blog. If they are ready to buy, and no more nonsense, they will go to your website. If your website is conversational, like a blog, and it's difficult to figure out how to order your product or service, you have made a mistake.

You really don't need a blog if the product or service that you are selling doesn't require any explanation. If it does, go ahead and blog. People will read it. If they like what you have to say, they will go to your web site.

Avoiding Flash for important content on your web site

Adobe Flash is just about the coolest possible thing that you could see on a web site. It does so much more than HTML or CSS could ever dream of, and it is, well, very slick.

In spite of the controversy of the iPad not supporting Flash content, and even the fact that some people block Flash content on their browser, it is still very popular. And it is still very, very cool. So, please, don't get me wrong, I love Flash, even though it's a software program that I don't use any more. I am just advising you to be cautious where you use it on your web site.

The worst place to use Flash is on things like navigation buttons, or other things that may need to be updated. For those things, stick to HTML, or CSS. The reason for this is that it is easy and cheap to update something in HTML or CSS. You can find someone like me, or a million other people like me, who know this, and can update your web site in a few minutes using Adobe Dreamweaver. All we need is to get at the files on your site, get the HTML and CSS files and the images, and we can update.

You can do some pretty cool things in CSS. My post on customizing hyperlinks in CSS is here.

Updating something in Flash isn't so easy. First of all, you need someone who knows how to use Flash. They are much rarer than people who can do HTML and CSS. So, if you have a navigation button that needs to be changed from "Dog" to "Dogs", and it was originally created in Flash, you have some work to do. Your Flash expert is not going to be able to go onto your site and get the Flash file that they need from the uploaded files. That's because the uploaded file is not Flash (fla), it's Shockwave Flash (swf). So, if you can't get the original, editable Flash file from the original designer, the entire thing will need to have to be rebuilt.

So, this is what I recommend - don't build important content in Flash. Use Flash for animations, which is what it was originally designed for. Build your web site in HTML and CSS.

What to do if your blog account has been suspended

I got an email from "Yahoo Answers" yesterday that my account had been suspended for "violating terms of the contract", and no explanation. Of course, I'm a respectable, law-abiding citizen, so of course I didn't do anything wrong. And I really don't care about having a "Yahoo Answers" account, anyway. But all of this has got me thinking. I went onto Google help boards and found a lot of people who had gotten their Google Blogger account suspended. One poor guy was writing his PhD, and, poof, his blog was gone. Obviously the Google bots are throwing a wide net to catch all the spam bloggers (sploggers) and other such bad guys. And it looks like that net catches plenty of "innocent victims".

So, this is what I am recommending to my clients - don't put anything on a free system (like a blog) that you wouldn't care to lose. I know it's too late for some people, but I test out these things to hopefully give good advice. I've done my appeal with Yahoo, and some day maybe someone will probably say, "Oops, sorry Brad, we made a mistake." But if I were conducting business on that blog, I would be out of business. And there are thousands of people ahead of me trying to get their appeal heard by Google Blogger. Unfortunately, the only thing that you can do is to wait.

So, use blogs as a supplement to your site. If you are in business, you need to be sure that the important stuff is on your site. Blogs are great, but remember, you don't own them, so accept the fact that someone can "trip over a wire" there and disconnect you. And even if it's their fault, it will probably take a long time to get you back.

If you are using your blog to help support your business, this is what you need to do - compare your blog and your site. If you have some great stuff on your blog that you'd rather not run the risk of losing, put it on your web site. You own those web pages and they are stored on your computer. No one can take them away from you, not even by mistake.

How to sell products through a web site

Creating a few pages on a web site in order to make your products available is not that difficult. Although there are very sophisticated web sites that update automatically with warehouses all over the world, that just isn't necessary in order to get started.

You will need a web page software program. I recommend Adobe Dreamweaver. And you will need an image manipulation software program. I recommend Adobe Photoshop. These two programs will allow you to create web pages with pictures on them, which is really all you have to do. If you've never sold anything on the web, start with a "flyer" format. That is exactly the same thing that people did before the web. Lay out a page, show some pictures, describe your product, and tell people how they can buy them. This is, of course, not the most sophisticated technique, but it works. You will need to give your customers a way to contact you, whether through an email or telephone number. If you don't want anyone to get in touch with you, well, maybe you aren't ready to start selling stuff.

If you have sold on ebay or Amazon, you realize that this is just "mail order" business. And your great-great grandmother may have ordered her dress shoes from Sears-Roebuck the same way. She saw a picture, a description, what it cost, what the shipping charges were, and she bought them. This is nothing new!

If you want to be a little more sophisticated, you can put a "Paypal" button on your site. If you haven't used Paypal before, you will need to learn about it. It is a marvelous system that allows people from all over the world to buy your product online. No checks need to be mailed, the money transfers to your account right away. But, as I said, this isn't necessary to begin.

How to update your web site

It's tempting to update your web site by completely redesigning it. But that's a mistake. Unless it is really so awful that no one has visited it since 1996, there is no reason to completely redo it.

In fact, changing your web site so drastically that it looks completely different is a serious marketing mistake. Consider your web site as part of your business image. You wouldn't tear down your building and put up a completely different one overnight, would you? Even if it were physically or financially possible, it would just confuse your customers.

Updating your web site should be done gently, like updating your logo. You don't want your customers to be unable to recognize you, but there comes a time when you need to bring your image a little up to date. The key is "a little". Completely changing everything and moving everything around is a good way to lose customers. Don't do that.

If you've ever visited a web site that you had been to before and thought you were in the wrong place because of a redesign, you know what I am talking about. Designs to web sites should be evolutionary, not revolutionary. Unfortunately, many times it's easier to come up with a new design than to make improvements on the existing one. If you need to change from table-based layouts to CSS-based layouts, there will probably have to be a little bit of a change. A little is OK. Please don't get carried away.

You just might need to update your web site if

You just might need to update your web site if

• Your pages stretch all the way across the width of the browser, which was fine in 1998, when most computer screens were smaller. Now it just looks ridiculous. Use a "div", which divides up pages now.

• You have important content in Flash. Even though there will be workarounds to support Flash in HTML 5, it's still a pretty old-fashioned technique. Google has trouble indexing it, users have trouble viewing it (if they haven't already blocked Flash content).

• You have old "javascript" tricks on it, like falling snowflashes, or a "tail" on the pointer tool. Nobody has done this since the 20th century.

• You have a counter with the number of visits on it. That is so 20th century!

• Your links say, "click here", instead of what the content is, such as "find out about ABC Widgets". Google indexes hyperlinks, you know.

• You have annoying, moving, flashing, animations. This was an old trick to try to get the attention of your readers. Now it just makes them click away.

Making web pages easier to read with "Readability"

I would like all web pages to be well-designed. The text should be clear and free of clutter. The contrast should be excellent. There should be no moving animations catching the corner of my eye. Unfortunately, too many web pages are cluttered and poorly designed.

But I have a solution when I am reading one of these "eye-burning" web pages. It's a cool little plug-in for your web browser called "Readability".

I've been using this plug-in with Firefox for about a year now and it's a pleasure. When I get to a web page that is poorly designed, or has swirling Flash animation all over it, I click on my "Readability" bookmark and it gives me a cleaned up version. It keeps the images and the videos, by the way. It just gets rid of the clutter, as their site says.

The design of your web pages shouldn't be a "jig-saw puzzle", which confuses the reader. It should be carefully designed to encourage people to read it. If it's a tangle, people will click away. It would be nice if a plug-in like "Readability" wasn't necessary, but it is. So, until you get your design cleaned up, I will use "Readability".

How to recognize a fraudulent web site

I've been a graphic designer all of my adult life, and I've taught design for many years, so I recognize a fraudulent site by it's look. I've seen some pretty good ones and some pretty awful ones. But if you can't recognize a fake site that way, there are other ways.

Fraudulent sites are usually posing as something respectable, like your bank, or a store you know, in order to get information from you. Sometimes they just want your email address, but sometimes they want your credit card information. A good rule of thumb is to not click a link from an email. If you want to go the WalMart web site, type in the address in your browser like you normally do. In the address bar you will see "walmart.com" on the main page, and the rest of the pages will say "walmart.com/something_else"

The fraudulent web site in the picture above has an address that is a clear giveaway. It's just a bunch of numbers. No respectable web site is called "http://163.20.23.149". In their defense, they've done a pretty good job with the design and even included links to the actual Walmart site. But they're bad guys. And if you think that a company will pay someone $150 to do a survey, maybe you're not so nice, either. If you are the kind of person who finds someone's wallet, and returns it to them, then you need have no fear of this type of practice.

This practice is known as "phishing". If you use Firefox, like I do, you can report a fraudulent web site by going to Help>Report Web Forgery. If you're tempted to visit sites like these, it's wise to have a software program that can block automatic downloads. I use the one made by Smith Micro.

How to keep your web site current

Designing a web site is truly like hitting a moving target. Even if you've tested it in all browsers and on all platforms, things can change. Your web page may have been fine in 2008 but now it's having troubles. The best thing that you can do is add a link to the page that says, "Contact webmaster".

Telling someone that their web site isn't displaying properly, like the one about the 1970s pictured, or links are dead, or go to the wrong place, or search engines don't work, is a basic courtesy of people, like me, who design web pages. It's no more trouble to me than telling someone that they have left their sunglasses at a checkout line.

As I surf, when I see a problem with a web site, I look for the "contact webmaster" link and send a cheery note. It usually goes something like, "hi guys, I noticed that...." I sign it "Brad" and with my signature as a link BradHallArt.com. I'm not trying to sell anything and I don't expect anything back. Sometimes a webmaster will write back with a "hey, thanks!", which makes me feel good. Hopefully if anyone sees a problem with a web page of mine, they will take a few seconds and write to me.

Unfortunately, some web pages, even very professional ones, don't have a "contact webmaster". And sometimes, even when they do, I get a message back that says "It looks fine to me", or some other argument. The bottom line is, have a way for someone to contact you on your site. If someone sees a problem with their site, they may take a few moments to let you know, and that small kindness can keep your site from looking stupid.

You have read this article with the title How to design a web page. You can bookmark this page URL https://odetohorror.blogspot.com/2011/06/how-to-design-web-page.html. Thanks!