Website designs and more
Services
About
Portfolio
Contact

Simple Website Design Tips for Beginners

Jul 18, 2011 | Web Design Tips | 0 comments

Bruce C. Brown asked me for an interview for a website design book he was authoring. He wanted some simple tips on how to get started developing quality websites that are HTML and SEO friendly. Below is that interview.

Interview

h

1. How does someone begin the process of determining what they should put on their web site, what design elements it should have, how navigation should function and what the overall appearance should be? When starting with a blank HTML document, what steps or techniques would you recommend to get to a finished product?

The first thing you need to do is form an objective. What do you want your website to do? The overall appearance depends on your objective. For example, if you are an artist, your web site should reflect your particular genre and style and have lots of cool imagery. Or, if you are offering information for research, then you should probably avoid the fluff and get straight to the point. Once you have your objective and basic appearance guidelines then you can get started laying out your page.

To begin your page layout, I recommend creating a simple page using HTML tables and cells with plain text inside the cells. Most of us web designers now design for a screen resolution of 1024×768. This is currently the most popular screen resolution. This means your HTML document should be no wider than 975 pixels across to accommodate for the scroll bars and have a little bit of a margin. NEVER make your viewers scroll from side to side!

Keep your page simple and familiar. By this I mean put your navigation in an area that folks are familiar with. They will be more apt to click around if they don’t have to think about how to do that. Don’t put your navigation in a place that is hard to find. I recommend using the header and/or left side of the page for navigation. You should think about your web page as having 4 sections; header, navigation, body, and footer. Keep it simple and your viewers will appreciate it.

I highly recommend learning the Adobe Creative Suite and especially Photoshop. You’d be surprised at how much you can do in Photoshop alone. It will even write the HTML for you! Then you can manually edit it. Make sure you keep image file sizes to a minimum for fast load time. You don’t want to keep your visitors waiting for pictures to download. Remember, there are still a lot of folks still using dial up connections.

2. There are many web design products available, such as Microsoft Frontpage, Microsoft Expression Web and Adobe Creative Suite. For a beginner, who wants to have a professional web site, yet use a fairly simple to use web design product, what would you recommend and why?

You can create a website using products that are already installed on most computers today. Any word processing program like Notepad will do the trick. However, this method requires you to know how to write HTML from scratch. I highly recommend learning the basics of HTML and have the ability to write from scratch. Then, progress to using an HTML editor that has color coding and code validation. Color coding makes it easy to find different elements inside your code. Code validation assures you of having valid HTML which is a great start to having an SEO friendly web page.

And again, I highly recommend using Photoshop for most if not all of your website designing. It will do almost anything you want it to and not difficult to learn. You can cut up your design into slices and export it as a web page. It writes clean HTML and you have all kinds of choices of image compression. The down side is it’s a little pricey. I use it exclusively for my images. I export the HTML and then manually edit it for proper display on all browsers and of course use proper SEO techniques and CSS.

I use a great HTML editor called Homesite which is now an Adobe product. It used to be a Macromedia product and I still use their version. I love it for the color coding, automatic tag insight, and excellent code validation. It even has FTP ability so you can work on your site directly on the server. It also comes bundled with Top Style Lite which is a great CSS tool.

NEVER use Microsoft Word to create a web page! This is absolutely the worst way to create web pages! It writes terrible HTML and the size of your HTML files will increase 10 fold making your site very slow to load.

Let’s quickly talk about Flash. This is an awesome program that is very powerful. However, I never recommend building a site completely in Flash. Unless you’re a Flash guru, this makes editing your web site much more difficult. And, the search engines are still not very good at indexing Flash. I recommend using Flash animations in strategic places on your site. Make sure the animations are subtle and add to your design. Don’t make your animations a distraction. And, make sure the file size is small so your viewers aren’t waiting for it to load. And, NEVER create an “Intro” page! This not only annoys the heck out of me but it has been proven to be ineffective and chases people away from your web site.

3. What type of image format do you recommend using on web sites? There are several different formats, such as .gif, .jpg and .png – is there a difference? Is one better than the other?

It’s quite easy to determine which image file format to choose for each image you want to display. You basically have 3 image formats and here are some simple guidelines to follow. I’m all about keeping it simple!

  • GIF should be used for an image that contains solid colors only. This format will handle transparencies but not very well. Stick to the solid color images when using this format.
  • JPG should be used for images that are not solid and use lots of colors such as photographs. There are different levels of compression that can be used to make sure the file size is reasonable. Each graphics program has its own compressions settings. Test a few images before deciding which ratio of compression versus file size looks best to you. Most images in JPG format can be kept below 100k in size. Ideally, you should keep each image below 50k. If you have images that are more than 100k, you should rethink how you are saving your file. Make sure you’re using a good level of compression, use 72 dpi, and RGB format (not CMYK).

In my opinion, PNG files should only be used if the image you are displaying requires transparency for one reason or another. PNG files handle transparencies very well but the file sizes can get large if you’re not careful.

4. How much should someone spend on Web Site Hosting? Is there a web hosting platform or other features we should specifically be looking for? If you were to recommend a web hosting provider, who would it be?

This really depends on your objective, but for the context of this book I would recommend using a shared server on any one of many reputable web hosts such as GoDaddy, Yahoo, Lunar Pages, Host Gator, etc. For the most part they all offer the same basics; disc space, bandwidth, email addresses, domain registration and SSL.

If you’re building an ecommerce web site I recommend going with a plan that includes Linux, MySQL and PHP because they are the most economical and there are lots of great free open source products written for this configuration. Most web hosts will include shopping carts on this platform for free! I do not recommend using a Microsoft server for several reasons.

1. Web hosting plans are more expensive.
2. Shopping cart software is expensive.
3. Hackers love to hack Microsoft servers.

You can buy the book on Amazon by clicking the following link:

How to Build Your Own Web Site With Little or No Money
How to Build Your Own Web Site With Little or No Money: The Complete Guide for Business and Personal Use

5. What low or no cost options would you recommend for selling products on a web site, such as paypal integration or other shopping carts? Is all shopping cart software essentially the same? For a website with hundreds of products, what shopping cart software would you recommend? What do you recommend for SSL?

Here is a great way to get started with ecommerce.

  1. Purchase a web hosting plan from GoDaddy with Linux, MySQL, PHP and SSL. (No, I’m not a GoDaddy reseller! I’ve had good results and good support from these folks for the past few years and my clients seem to like them.) If you want better service with faster server speed, they have good virtual server plans for business that start around $150 per month.
  2. Install the free shopping cart software called Zen Cart and learn how to use it. Install a template and customize it. Populate it with your products. You can easily add and edit an unlimited amount of products (including product images), categories and sub-categories.
  3. Offer 2 methods of payment for your customers; PayPal and a standard credit card method. You will need to purchase a payment gateway service that handles the credit card transactions and makes the deposits to your business bank account. I recommend using Authorize.net. They are the most popular and their support is very good. PayPal is rapidly becoming the payment method of choice for many customers. If you don’t offer this method you’re losing a lot of sales. Zen Cart easily integrates with all of the above and more. Test, test, test using a real credit card and get used to the process before going live with your web site.
  4. Look thru the “Free Software Add Ons” section of the Zen Cart website for any special features you want to add. There many contributions I’m sure you’ll want to add. Make sure you add features that keep with your objective. Don’t add too much fluff as it will only cause you problems. I love Zen Cart because you can always add more features to your site as it grows and there are lots of resources on their forum and lots of great programmers willing to help you.

6. There are dozens of companies which you can buy domain names from. Is there any company in particular which is “better” than the others, and why? Is there any advantage to buying several domain name types for my domain, such as .com, .biz, .us, .net, etc?

I always recommend purchasing your domain thru the company you choose to host your web site. This makes life a lot easier. But, make sure you don’t fall for the tricks of some of those not so recognizable web hosts. Some will actually purchase the domain in their name and you never actually own it! Stick with the known brands such as the companies I mentioned above. They’re ridiculously cheap so to try and save a measly $50 per year is simply not worth the risk. Let’s use the GoDaddy example. They charge less than $10 per year for domains and less than $10 per month for web hosting. That’s less than $100 per year for your web site. Why would you want to risk going with an unknown if your fee is $100 per year?

As far as purchasing other TLDs (.biz, .tv, etc), I think it’s only necessary if you think your web site will become so popular that someone else will purchase your domain with these TLDs. If you’re a small local business there is no need to purchase these in my opinion. I would always try to stick with a .com address as this is the most popular and most folks automatically use .com when typing a web site URL.

7. When designing a web site, we want to ensure compatibility with major web browsers, such as Microsoft Internet Explorer, Mozilla Firefox, Google Chrome and others. Do you have recommendations for how to design the site to ensure maximum compatibility and user functionality?

If you use a quality HTML editor with code validation and proper CSS, your web site should look relatively the same across these browsers. Each browser has its own nuances and I highly recommend installing and testing your web site on all these browsers. The browsers are getting much better at rendering things similarly but you may be surprised at how some of your pages may look completely different especially if you use fancy CSS in your pages. If you’ve installed a shopping cart like Zen Cart, you really won’t have to worry too much about the browsers rendering your pages differently because most of the templates have already been tested in each browser before being offered.

If you wrote the HTML yourself, I highly recommend using CSS as it makes it much easier to deal with fonts. If you start getting fancy with the CSS then you’ll need to pay closer attention to testing in the different browsers. Some may not render certain elements properly and you may need to add additional lines or “hacks” to the CSS code.

8. What is a useful CSS technique that you use often? What is the most common font you use when designing web pages? What advice can you give regarding web site navigation?

First, let me answer the question about type of font. Use Verdana and/or Arial, period. Do not ever use any fancy looking font. The fonts used on HTML pages are being pulled from the viewer’s machine. So, chances are they don’t have the same fancy font as you do and their computer will automatically choose another font. You never want that! Verdana and Arial are installed on every personal computer and they have been proven to be the most legible and easiest on the eyes when reading on a computer monitor. I never recommend using a serif font like Times. This font is better suited for print.

CSS is perfect for managing fonts and great for creating navigation because it eliminates the need to create images for rollovers, for example. And, it makes it much easier to add and/or edit your navigation because you’re editing text rather than images. I like to use CSS to create drop down menus that use the HTML <UL> and <LI> tags. You can really make them look great across all browsers. Do some research on this and have some fun making your own!

9. A challenge of any new web site is obtaining search engine rankings. What practical advice can you give to someone with a new web site to achieve “visibility” in major search engines?

Ah, the search engines. Is there a magic pill? Heck no! I always start by telling my clients that Google updated their search algorithm over 400 times in 2008. That’s more than once per day! So, don’t fall for the false guarantees of the so called SEO companies! If you build your site using proper HTML and don’t use any “tricks” to try and get better search engine placement, you’re off to a good start.

The old phrase “content is king” still applies. The more quality content and pages you have on your web site, the better your SEO. Make sure you have quality content and you’re not just filling your pages with text just to have content. If you’re not a good writer, I recommend using a service like Amazon Turks. You can get some very well written content at very cheap prices.

Here are some simple tips when writing your own HTML for proper SEO. Always use a well written <title> and closely matched <h1> tag on each page. Below is an example. Notice how they are not exactly the same but very close.

Example title tag:
<title> hardwood floor repair & restoration, Orlando, FL</title>

Example H1 tag:
<H1> ABC Hardwood – hardwood floor repair & restoration</H1>

Don’t get too wordy and make sure you use keywords you think your audience will use to search for you. Try to use a maximum of 50-60 characters in these. The rest of the textural content should be wrapped in a <p> tag. Again, make sure you are using good keywords in the copy. Try to have at least one, preferably two paragraphs of well written keyword rich text on your home page. This is a good foundation to start from.

Some other simple ways to improve SEO is to add alt tags to all your images with well written descriptions. Try to use keywords in your navigation links. Use bulleted lists when possible to highlight areas of importance. Search engines like bulleted lists when they are written using proper HTML. Link appropriate keywords in your copy and bulleted lists to other pages on your web site.

I see a lot of websites that have a ton of text content on their home page that scrolls forever. They may get good SEO placement but I think it turns a lot of people off when there is too much information on one page. I think you should strategically create as many pages as you can to house your content and make sure all of the pages are linked from your home page somewhere. This way the search engines will be assured of indexing all your pages.

Of course, don’t forget to submit your site to the search engines. Most search engines allow you to submit your site for free. Don’t worry, if you submit your site to Google only, most of the other engines will find you sooner or later.

Here is a tip. Most of the time, your business will be focusing on a general demographic area such as a large city you live in or near. Or, maybe an entire state or tri-state area, etc. You get my point. Make sure you use these keywords on your pages. Most folks looking for local businesses will use the local town, city or state in their searches. This also makes your SEO work a little easier because you’ve now substantially reduced your search engine competition.

10. If you could only give three pieces of advice, what you would tell a business or individual as they attempt to build and/or establish a viable web presence.

1. Make sure you go with a reputable web host.
2. Make sure your HTML is written properly.
3. Make sure your site is easy to navigate.

Start with this foundation. As you get more experience, you can add more sophisticated methods including content writing, affiliate marketing, search engine advertising, etc, etc.
And, always stay on track with your objective!

You can buy the book on Amazon by clicking the following link:

How to Build Your Own Web Site With Little or No Money
How to Build Your Own Web Site With Little or No Money: The Complete Guide for Business and Personal Use

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.