Web Design Development Articles

No longer are the days of building a website with a couple of content pages, a contact form and a phone number on top. Websites today include forums, blogs, interactive flash presentations and often, extensive server side programming. What does this mean for your business? There’s an old joke in the programming community that goes something like this - when a client asks you if you know how to do something, first say yes, then learn how. With the amount of competition in web development today, your web programmer should be on the top of his game and be able to implement any solution your company needs.

With that said, here’s the good news. If you can dream it, it can be done. If you want your website to include streaming video, it can be done. If you want an extensive database to track financial statistics in real-time, it can be done. If you need a flying cow dancing across your web viewer’s page, well, yeah, it can be done. The possibilities are endless for your website. Before you start meeting with web developers, have internal meetings with the people that matter at your company to decide what features you want on your final website and then discuss them with your web developer(s). One problem you may encounter is a feature you believe is simple may actually be quite complicated and cost a significant amount of money to develop. This is generally the trade off between “cool features” on your website and the cost to implement them.

Shop around. In reality many web developers have a greater skill set then their competition and can implement a solution with much greater ease then the next guy. Remember, time is money, and thats what you are paying for. Your company doesn’t actually have to absorb the cost of the flying cow, only the time it takes to draw it.

So you’ve just registered with MySpace and now you’re wondering where to start with creating your MySpace Design, you want your profile to uniquely stand out but don’t know how to? Well here are a few tips to make your profile the one everyone is talking about.

Make your Design Simple! You want your profile to stand out and grab people’s attention, without coming across as an attention seeker. This could be as simple as changing the background colour or layout, just remember to choose something that matches your own individual personality.

Be Unique! But this doesn’t have to mean your MySpace Design still can’t be simple right? If you have a unique talent, unusual interest or hobby or just something that makes you different, why not include that somewhere in your design? This can be simply done by including a picture of your hobby or interest into your background.

Choose the Right Name and Headline! This is one of the first parts of your profile people will view and they will make instant judgements about you so make sure they are good ones by choosing a name and headline that reflects you.

Make sure not to include any rude, crude or offensive language and keep jokes to a minimum, something that is funny to you might not be to someone else.

But the most important tip of all is to make your MySpace Design reflect you and your own personality, because this is what makes you unique and will make your profile stand out.

After redesigning over 100 websites I now have a pretty good idea about the most common web design mistakes.

If your site is making some of these mistakes, fix them now! Otherwise, you are leaving money on the table every single day.

Bad Layout

Your navigation and layout have to be simple, obvious, and intuitive. If you expect your visitors to figure out how to get to where they want to go, prepare for them to leave. Don’t make them think, make it obvious for them. Forget about “cool” navigation. Make it simple and elegant.

Slow Websites

Keep your website light so it loads fast. There is nothing more annoying than those “Loading… 1%” messages. People don’t want to wait. Studies show that if a website takes more than 8 seconds to load, 21% of your visitors will leave and if it takes more than 20 seconds to load, 43% of your visitors will be gone! This is a tragedy. There are ways to achieve excellent designs that are also very light.

Bad Colors Choice

Most web designers are not professional graphic designers. They never learned what colors work well together and most importantly, what different colors mean. Make sure your website uses the right colors for your market and it is not hard on your visitors’ eyes.

Bad Music Selection

In most cases I am against music at all. I am talking about music that auto-plays (background music). A lot of people will visit your website from work and they don’t want annoying music popping up. Music also makes websites slow to load. If you decide that you want to have music on your website, choose the right one for your audience.

Under Construction Pages

What is the purpose of “Coming Soon” pages? This looks really unprofessional. Just don’t have them at all! Who wants to read an “Under Construction” message? If you want to generate curiosity about a section that you will be adding soon, have some teaser copy and possibly a list-building box: “Sign Up to Be Notified When We Release this Feature”.

Information is Hard to Find

This happens very often with your phone number and email address. Let’s say you own a restaurant. Most people visit your website to get your phone number and make a reservation. Put your number at the very top and make it huge!

Ads on Commercial Websites

If your website is supported by advertising, displaying ads is your business. But if your main stream of income is not advertising, get rid of ads. They look really unprofessional and they make you look needy.

Low-Resolution Images

There is nothing that makes me angrier than web designers who use low-resolution images. They look terrible! There are ways to optimize images so they are both light and visually appealing.

Splash Screens

Don’t waste your visitors’ time. They are on your website to learn about your company and services, not to see how talented your graphic designer is and the cool animations he can do for you. Don’t force them to take an extra step. They want information. Give it to them.

Passive Marketing

Your website is an excellent opportunity to tell prospects why your company is better than the competition, why they should buy from you, and ask them to take action. Be proactive.

HTML Tags:

HTML is formatted using tags. A tag tells the web browser when to begin and end sections, code, or formats when displaying your page. There are two parts to a tag. The opening and closing tags. A tag has the less than sign (<) then the tag name, and arguments if applicable, then the greater than sign (>)

Most tags also require the closing tag to end. It is the same as the opening tag except it has a slash character and no arguments. Here is what a tag looks like in action:

&lt;em&gt;This is some italicized text&lt;/em&gt; The “em” tag (for “emphasis”) italicizes the text between the &lt;em&gt; and &lt;/em&gt;.

Another simple tag is &lt;strong&gt;This is some bold text&lt;/strong&gt;

A more complicated tag would be a hyperlink. A hyperlink is the “A” tag.

Here is how a hyperlink to Google might look. &lt;a href=”http://www.google.com”&gt;

The HTML Page:

A basic HTML page is broken up into sections. The sections are denoted by tags.

Below is just a very brief overview.

1. There is the &lt;!DOCTYPE&gt; tag. It tells the web browser what sort of content to expect on the page. It usually does not have a closing tag.
2. Below the DOCTYPE tag begins the html. The HTML section begins with &lt;html&gt; and ends with &lt;/html&gt;. Usually the very last line of the web page is the &lt;/html&gt;.
3. Inside the HTML section is the “head” section. The contents of the head section are not directly displayed to the user. They tell the web browser some important information about the web page. Inside the &lt;head&gt; section are various other tags. Strictly speaking, these tags are all optional but they can be very important in helping Search Engines determine where to place your page.

The &lt;Title&gt; tag is where you determine what text is displayed in the title bar of the web page.

The &lt;Description&gt; tag gives a summary of what can be found in the page. The description will be displayed if someone finds your page in a search engine.

“Meta” tags, such as the “Keywords” meta tag and others can help search engines determine where to place your pages in search results.

Sometimes code snippets (scripts) will be placed in the head section as well.

After the head section, comes the Body section This is the part that people will see when they pull up your site in their browsers. The body section begins with and ends with &lt;/body&gt;. Inside the body section is all of your text, images, hyperlinks, tables, charts, etc. that people will see in their web browser.

The body tag can contain formatting instructions for how to display your web page. You may define top, left, right, and bottom margins, text alignment, background color, background image, etc. in the body tag, itself. If you just want a plain page, you need do nothing in the body tag. Here is a body tag with a few arguments.

&lt;BODY leftmargin=”0″ topmargin=”0″ rightmargin=”0″ bg&gt; Most of the arguments should be self-explanatory. The “bgcolor” argument sets the background color to white.

Tables are one of the most important and powerful tools for any web page. Only the simplest of web sites can look right without the use of tables. A table is commonly used as a matrix or grid. They are also great for keeping text in line with pictures. Especially if the pictures vary in size, there may be no other way to get your page to look right. Many websites with multiple columns use tables within tables to keep everything lined up and separated neatly.

Tables in HTML seem to baffle people. But if you break them down into their components, they are really quite simple.

A Simple Table:

To tell the browser your are beginning a table, use the Table tag (&lt;table&gt;).

Tables have rows and cells (columns).

To start a new row, use the &lt;tr&gt; tag

To start a new cell, use the &lt;td&gt; tag.

To end a cell, use &lt;/td&gt;; to end the row, use &lt;/tr&gt;; and to end the table use &lt;/table&gt;

Here is a simple 3×3 grid in HTML
&lt;table&gt;
&lt;tr&gt;&lt;td&gt;Name&lt;/td&gt;&lt;td&gt;Salary&lt;/td&gt;&lt;td&gt;Marital&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Steve&lt;/td&gt;&lt;td&gt;$200.00&lt;/td&gt;&lt;td&gt;Single&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Maria&lt;/td&gt;&lt;td&gt;$275.00&lt;/td&gt;&lt;td&gt;Married&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;

Making the table look just right.

Using the example, above, the browser will make the table as small as possible to fit the material in. If you want to spread it out some more, you can adjust the table width by “hard-coding” the desired width in pixels, or by a percentage of available screen width.

&lt;table width=”80%”&gt; will make the table span 80% of the available screen width.
&lt;table width=”400px”&gt; will make the table span 400 Pixels wide.

You will want to be careful when forcing tables to be a certain width, because some people still have smaller screen resolutions and your tables may look awry.

You can make the individual columns (cells) different widths as a percentage of the table width, or fixed pixel width as well: &lt;td width=”25%”&gt;

You can change the text alignment. &lt;td width=”25%” align=”center”&gt;

Large amounts of text or large images:

If the contents of the cells in your HTML table are of markedly different size, the text in the smaller of the cells will be aligned centered top to bottom. A very common reason for needing to fix the vertical alignment is if you have a caption or description in one column, and a large picture in the column next to it. If this does not look right, you can change the vertical alignment to make it line up at the top of the cell: &lt;td width=”33%” valign=”top”&gt;

Table Borders in HTML

Left to their own devices, most web browsers will put a 1 pixel wide border around the cells by default. You can make a borderless table by specifying &lt;table border=0&gt; or you can make the border thicker by increasing the border. For example, &lt;table border=2&gt;

You can change the border color if you’d like. You can use plain English words for the border color, or the RGB function, but they may not work on all browsers. The safest way is to use the Hexadecimal notation for the actual color. This gives a finer control over the color.

Color Name: &lt;table border=1 border&gt; will make the border a dark blue color
RGB Function: &lt;table border=1 border&gt; will make a bright pink border
Hexadecimal:&lt;table border=1 border&gt; will make the border a lime green color

A good resource for HTML color names and their hexadecimal equivalents can be found at w3schools.com/tags/ref_colornames.asp

Summary:

This is only a basic introduction to HTML tables. You can do much, much more with tables. For example, you can define header rows that will stay in place when scrolling up and down on very long tables.

You can set the background color for the entire table.

You can change the background color of the individual cells, and much more.