StormBiz Blog

Everything you need to know about website design, website hosting, graphic design, our website design courses and more...

Do's and Dont's Guide to Great Web Design

Web Design ProcessWeb Design ProcessWhen followed, this guide will prove to be quite a valuable web design resource. From the inexperienced to the experienced, this guide has something for everyone.

The Process of Great Web Design
Just to make sure we are all on the same page, lets begin with the basic definition for “web design”. According to Wikipedia, web design is:

“a process of conceptualization, planning, modeling, and execution of electronic media delivery via Internet in the form of Markup language suitable for interpretation by Web browser and display as Graphical user interface”.

The process of web design can be compared to the process of writing a research paper. In the conceptualization/planning stage, flowcharts (the outline) are created which illustrate the navigational structure of your website. In the modeling stage, static wireframes are created (the rough draft) which illustrate the skeletal layout for each section of your website. After the wire frames are created, graphics, colors and text are used to create the design of your web pages based on the layout of the wire frames. In the execution stage, your design is converted into a format supported by web browsers, text and content are added, and finally, your website is published live to the Internet for the world to see (final draft).

All three stages of the design process are equally important. Many web designers skip a stage in order to save time or because they don’t think that is is necessary. However, all three stages are necessary if your goal is to create a successful design and respectable website. Even if the three stages are used, there are many mistakes that web designers can make that will lead to poor-quality, non user-friendly websites. It’s time to clean out the cabinet of bad web design practices and restock it with the good ones.

web designingWeb DesigningStage 1: Conceptualization and planning

This stage is skipped more often than the other two stages. Most writers don’t enjoy creating outlines for research papers, and most web designers don’t like creating flowcharts either. Don’t be lazy. If you put forth the effort and plan out your website, then you will find the web design process to go smoothly with fewer mistakes made along the way.

There are a few things that you will need in order to effectively conceptualize and plan your website:

  • a brain
  • a pen and paper
  • (optional) flowchart software
  • a general idea of the different sections of your website

To begin, grab your pen and paper or launch your favorite flowchart software. I use OmniGraffle Professional for Mac OS X which costs $150 per license but is well worth it if you create websites on a regular basis. If you’re on a PC, then SmartDraw is a great FREE piece of flowchart software that you can use. A pen and paper work just fine, though.

There are many methods to creating flowcharts. We are going to show you the most basic way to do it for the sake of time and the length of this article. If you want to learn more about flowcharts visit flowcharts on Wikipedia.

Directly below is a sample flowchart that we created when conceptualizing Chromatic Sites. (1) At the top of the flowchart we list the name of our website. (2) Next, we include each primary section of our website: Home, About, and Services. These sections are the main navigation for your website. What the names of each section will be is entirely dependent on the content of your website. Try to use as few sections as possible so that your visitors are not overwhelmed when navigating through your website.

(3) Next, add all of the secondary pages (subsections) that will be listed on each of the primary pages. For Home, we have included Professional Web Design, Web Development, and Search Engine Optimization. The secondary navigation needs to be more descriptive than the primary navigation. The deeper your websites’ navigational hierarchy goes, the more descriptive each label should be.

The Do's

  • Less is more; keep the number of primary sections to a minimum. We use 6 sections on our website which is more than enough
  • Whether you use a pen and paper or flowchart software, keep things as clean and organized as possible. Although you (and anyone working with you) are the only ones that will be using the flowchart, it still needs to make sense
  • Your primary sections should use broader terms, while secondary and tertiary terms should be more descriptive

The Don'ts

Creating a flowchart is pretty straight forward; however, there are a few mistakes that can easily be made:

  • Don’t use very descriptive terms in your primary navigation unless your entire website focuses on one narrow topic
  • Don’t try and lump multiple topics on the same page. Create a general section for these topics and from that section create subsections. This will make the subsection (descriptive) web pages more likely to have better rankings in the search engines (Google, Yahoo, MSN, Ask)

Once you have created a concise and descriptive flowchart, you’re ready to move on to the second stage of the web design process: modeling.

difference between wireframe and mockupWireframe and MockupStage 2: Modeling

In the modeling stage, static “wireframe” mockups are created. Each mockup illustrates a bare-bones skeleton of the layout for each of the web pages that will be included in your website. This stage is important because it gives us an idea of where different elements will be placed in our design. Some of these elements are:

  • logo
  • navigational menu
  • content
  • images, videos

To create these mockups, you can use a pen and paper or your preferred mockup software. In the past we have used Photoshop, but lately we have been using OmniGraffle Professional. OmniGraffle is not as resource intensive as Photoshop is and it allows us to assemble our wireframe mockups much quicker.

In addition, make sure that you have the flowchart(s) that you created nearby as you will need to reference these from time to time to make sure that you are mocking up all of the pages that will appear on your website.

To the right is an example of how a wireframe mockup should look. As you can see, there are no colors or graphics included. This is exactly how a wireframe mockup should be - a skeletal layout of your design. The purpose is to be able to have a general idea of where each of the web page’s elements will be placed.

We usually begin from the top left and work our way down to the bottom. There is no specific way that a wireframe should look. Use your imagination. However, make sure that when creating your wireframes you don’t forget to include the most important elements of a website (logo, navigational menu, content placement, images/video placement).

If some of your pages will be using the same layout, then it is not necessary to mock all of those pages up (although you certainly can). Just be sure to mockup any unique layout that your website will have. You’ll thank yourself later.

website mock upWebsite MockupThe Do's

  • mockup all unique pages
  • include important elements (logo, navigation, content placement, images/video placement)
  • start from the top and work your way down
  • reference your flowchart created in stage 1 to make you don’t forget to mockup any pages
  • save, save, save - like with anything on the computer, save your mockup(s) every 10 minutes or so
  • focus on clean, user friendly layouts
  • label your elements so you don’t forget what they are when you reference them in stage 3, execution
  • use other web sites as inspiration; there is nothing wrong with taking elements from other sites and making them your own (see “donts”)

The Dont's

  • don’t include graphics or colors (that’s for the next stage)
  • don’t make your mockups too “busy”; focus on clean, well organized, user friendly layouts
  • don’t skip this stage; it is just as important as the first and the last
  • if you take elements from other websites, make sure you don’t plagiarize; there is a difference between being inspired by another website to create certain elements of your design and blatantly ripping off their layout and colors

Stage 3: Execution

In the third and final stage, execution, the planning from stages 1 and 2 are combined to assist in creating a live, interactive website. The third stage is by far the most time intensive since you will be 1) creating the graphics 2) creating the content, and finally, 3) converting the web designs from images into code that web browsers use to present your website to the world.

By the time you reach the third stage, you should have a clear idea of:

  • how your visitors will get from one place to another (stage 1, flowchart)
  • how your web pages will be laid out (stage 2, wireframe mockups)

If you don’t have a clear idea of these two things, go back to the first and second stages and continue to develop them. You will find that the third stage is easiest when you have constructed a clear, concise battle plan for designing your website.

ditch pen and paperDitch Pen and PaperDitch the pen and paper

In stage 3, you need to be using Photoshop or another image editing program since you will be using colors and graphics to create the layout for your website.

We usually begin creating the “home” page (index) first. Use your wireframes that you created in stage 2 as a template for each of the pages you create. However, instead of using solid boxes, use graphics, colors and text instead. Each page must look exactly how you want them to look on the Internet since this is the final stage of the design process.

Be sure to include the background for your navigation (but don’t actually add the text to your image). When converted using CSS (cascading style sheets), your navigation should be in the form of text and not images. Images are not crawl-able by the search engines (the keywords used in your navigation won’t be indexed in the search engine results pages, meaning fewer people will be able to find your website). For additional information about things that you should not do involving Search Engine Optimization visit Mr. SEO’s blog.

When you’re happy with your designs and feel that they are ready to be put on the Internet, it’s time to break apart the designs so that you can create a CSS based layout. For more information on converting your layouts to CSS or marking up your website in CSS, visit W3Schools.com or The Blog Herald. After looking around the Internet, we couldn’t find a decent image-to-CSS tutorial - so expect one from us in the coming weeks. Converting your designs into CSS is extremely important since table layouts are a thing of the past.

Above and to the right is a screen shot of a nearly-completed example of the layout we mocked up in stage 2. This was taken directly from our web browser and as you can see, there is now a logo, colors, a pretty navigation system, a footer, and a most importantly, a clean, organized layout. Thanks to the planning in stages 1 and 2, our layout is well-organized and easy to use.

The Do's

  • reference your templates that were created in stage 2; though it is fine to deviate from your original layout, you shouldn’t need to
  • do some research before creating your actual design; get ideas from other sites and make them your own (without plagiarizing)
  • include color and graphics to create the final look for your web pages
  • use CSS (cascading style sheets) to convert your designs from images into markup understandable by web browsers
  • reference your flowchart from stage 1 when coding your pages with hyperlinks; it is better to use a drop down menu that includes all (or the majority) of the links in your website on every page; this will allow for easier navigation and also make your pages easier to crawl when the search engine spiders stop by; a great place to get CSS drop down menus is at Dynamic Drive
  • finalize your design while working in Photoshop or whatever image editing software you use; it can be a pain to make changes to your design once it is converted into markup (code)

Search Engine SpiderSearch Engine SpiderThe Dont's

  • don’t include the text in your navigation menus when converting to CSS; instead of using image text, use regular text that is readable by search engine spiders
  • don’t use tables when converting; even if you need to buy a book on CSS, it will be worth it; tables are dead
  • don’t skip the first two stages just to save time; your website WILL be better if you start from the beginning of the web design process (instead of at the end)
  • don’t forget to compress your images when they are cut apart for CSS; there is nothing worse than a slow loading website because of large image files; Photoshop has a “Save Optimized For Web” option (CS3 - “Save for Web and Devices”)

Process Makes Perfect

By following a web design process such as the one illustrated in this article, you increase the chances of creating a website that is well-organized, easily navigable, and very user-friendly. Lets face it - if visitors get lost or become confused while attempting to surf your website, they might hit the back button and look for a more user friendly website. People do not like to think when it comes to finding their way around websites. Don’t make them think. You do the thinking by planning out your website from stage 1 to stage 3 and you will find that more people will enjoy visiting your website.

Don’t delay, give Stanley a call today on 081-525-1727 to discuss your requirements or send him an email to This email address is being protected from spambots. You need JavaScript enabled to view it.' to request a free quotation

Continue reading
0
  2444 Hits
2444 Hits

What to Do When a Client is Ticked Off

angry customer on phoneAngry Customer on PhoneMy client Jerry was threatening to sue. Worse, my programmer was dragging his feet and didn't see the seriousness of Jerry's threats. I was on the phone with Jerry for hours at a time.

The custom ordering system we designed for Jerry's web site needed some small changes that really weren't affecting the performance of his site. Jerry kept saying that the whole system was flawed and that it needed to be completely redone. However, he already had more than 600 sales adding up to more than $100,000. What to do?

We eventually got all the problems fixed up but Jerry ended up having the site and ordering system redone by another company so Jerry was now out of my hair. Was this a good thing or a bad thing?

Customer retention is crucial in all businesses and handling ticked off customers is a part of growing great long-term relationships. Sometimes you choose not to retain a customer even if they are happy with the work you're doing. The time and energy they cost you isn't worth the money you make from them.

High and Fire Clients Judiciously

Reflecting on the situation with Jerry, I probably shouldn't have ever taken him as a client because he smelled of trouble from the outset. The first time I came into Jerry's shop he was arguing with a customer while I waited. He was unbending and wasn't willing to make concessions.

Malcolm Gladwell writes of this in his book, "Blink". We need to be aware of when something doesn't feel right and do something about it before getting in too deep. I should have just walked. Advertising guru David Ogilvy proudly admitted that he fired more clients than fired him.

It takes bravado and diplomacy to drop a client, especially if they are a big source of income. You have to weigh the headaches they cause with the checks that are deposited in your bank account. Are they worth it?

boundariesSet BoundariesSetting Expectations Early and Realistically

I lost another client around the same time because I did not set expectations. Daniel and I had more of a friendship than a client/vendor relationship. He looked and smelled like a good client, but I realized later that he was a problem. He took a lot of my time and had too high of expectations for the work we were doing for the price he was paying.

If you have a friendship with a client, you still have to set strong boundaries with them. You communicate your expectations and bill them accordingly for the work you do. It's easy not to bill for your time if someone is a friend. You have to set the expectation that you will be billing them for all the work that you are doing for them.

angryAngryDon't Let Problems Fester

Daniel and I had a blow up when he misunderstood something that I had written in one of my blogs. He wrote me a strong email that I reacted to in kind by email. If he had read the blog or clicked on the link in the posting he would have seen I had great intentions. And the blog wasn't even about him-there was just a link on the side of the page pointing to his site.

If I could go back in time I would have waited a day or two to cool down. Then I would have written an email explaining my writing and suggested talking face-to-face or by phone. Live and learn.

things fall through cracksThings fall through cracksHire Skilled, Responsible People to Handle Your Client's Work

My problem was I was trying to do everything myself, and things were falling through the cracks. Now I tell my clients to communicate their web site changes directly to the designer and they will be billed accordingly. That way changes don't get stuck in my In Box.

Make the Hand-off Easy

If the client chooses to leave or you fire the client, make the transition as smooth as possible. Provide all the files and information they need to move forward if that is the nature of your business. Even if the break up is hostile, make a point to be civil and professional. They may never return as a client, but they may not badmouth you if things end more positively. Daniel got a new company to work on his sites, and I made the transition as smooth as possible for him. I doubt I will ever have him as a client again, but I needed to know in my heart that can make the transition easy for the next person.

smooch some hineySmooch Some HineySmooch Some Hiney

Okay, you have a client who pays well and is worth keeping. Now is the time to kiss some butt. You have to admit you did something wrong and make amends.

My client Scott didn't know some of the work we were supposed to do for him was done. But I knew. I took the risk of telling and then also told him that we would do work for him during the following month at no cost to him. It cost me $600 but it was worth keeping Scott as a client.

Handling ticked off clients is all about doing crisis management, and then deciding how far you will go to keep them as a client. You may choose to give up peacefully and let them go, or you can fight to keep them. Sometimes you have no choice. But when you have the choice and want to keep them as a client, do all you can to make things right. They may represent many more years of income.

Don’t delay, give Stanley a call today on 081-525-1727 to discuss your requirements or send him an email to This email address is being protected from spambots. You need JavaScript enabled to view it.' to request a free quotation

Continue reading
0
  1685 Hits
1685 Hits

Designing your own website vs. Storm Biz designing your site for you?

what you need to knowWhat You Need to KnowYou may ask yourself, "why should I pay for designing my website, when there are so many different free website designing programs?"

Before I explain what we do for your website, let me ask you 10 important questions you need to know before designing a Search Engine Friendly, and User Friendly website? If you can answer all these questions below, then by all means you are qualified to design your site. If there is even 1 question you are unable to answer, then your site will fail, and it will be better to get a professional designer to develop your website.

  1. What is html, and how do I manipulate it for my web design?
  2. What is Photoshop / Corel?
  3. What is Search Engine Optimization (SEO)?
  4. What is Search Engine Submission (SES)?
  5. Why should I not use microsoft word to design my site?
  6. Why should I not use frontpage to design my site?
  7. What is google analytics, how will it help me?
  8. What is the difference between php, and asp?
  9. What is Meta Tags and Meta Keywords, how will my site do without it?
  10. What is a sitemap, what will it do for my site?

Google Ranking FactorHigh Google RankingsWe consider all of the above when designing a website, we use our experience in high google rankings, and implement this in every site we design... So, considering all of this, we recommend / do the following:

  • All our websites will be designed using php, and css, this will help with speed, and with search engines.
  • All websites are customized to the clients requirements.
  • All our web design packages come with the small SEO Package, ensuring all links are search engine friendly
  • Search Engine Submission is offered at a low monthly rate, which means we submit your website, meta tags and meta keywords to 150+ websites every month, getting the best possible rank for your keywords, resulting in possible clients finding your site..
  • We include a sitemap in every website we design, this helps search engines navigate, and index all your site pages.

Before considering designing your site we advise you to consult a professional, as this is what we do, and we are good at it.

You know your business, we know our business... and we would never try to run your business for you!

Don’t delay, give Stanley a call today on 081-525-1727 to discuss your requirements or send him an email to This email address is being protected from spambots. You need JavaScript enabled to view it.' to request a free quotation

Continue reading
0
  1672 Hits
1672 Hits

5 Things To Hate About Web Design (and how to fix them)

hateHateWhat do you hate most about websites? If you browse websites as much as we do, then there is a lot to hate. Because there are so many terribly designed, user non-friendly websites on the Internet today, we have put together this short but detailed list of things to hate about web design. In addition to compiling this list, we’ve also provided a solution for each of the problems.

When creating a web design, there are a number of things that a web designer should take into consideration if their goal is to produce a high quality, user friendly website.

vomiting manVomiting Man1. Vomit Inducing Color Schemes

There is nothing worse than visiting a website and seeing a borderline-gruesome, mismatched, out of control color scheme. As basic as it is, some people have a terrible time choosing successful color schemes. Though there are millions of colors to choose from, it doesn’t have to be a difficult process. Whether you want to pay for a piece of software that will significantly simplify the color scheme selection process or use one of the free color scheme tools available on the Internet, you will be implementing attractive and successful color schemes in no time.

To Pay

If you want to pay for a color scheme application that will do all of the work for you, then your best solution is the Color Schemer Studio. Located at http://www.colorschemer.com and available in both Mac OS X and Windows flavors, this tool not only builds you an entire color scheme based on a single color, but it also generates monochromatic, complement, split complement, triad, tetrad, and analogous harmonies based off of that same single color that you choose. It is absolutely remarkable. There are a lot of other neat and extremely useful features built into this application, too.

colorschemer studioColorschemer Studio Not to Pay

If you would rather not pay the $49.99 for the Color Schemer Studio (even though it is worth every penny), then there are free alternatives available. Navigate to http://www.colorsontheweb.comand you will find a Flash based color scheme tool called the Color Wizard. Although not quite as user friendly as the Color Schemer Studio, the Color Wizard has a lot of features built into it. You can either enter a hex color code or move the sliders back and forth to find the color that you’re looking for. The Color Wizard also gives you multiple harmonies based off of the single color that you choose. The Color Wizard is a solid (and free) color schemer product. The only downside to the Color Wizard is that it is available only to be used on the Internet. In comparison, the Color Schemer Studio does not require an Internet connection since it is located on your computer’s hard drive.

Less is More

When choosing your color scheme, don’t use too many colors. The statement “less is more” should always be applied during the color scheme selection process. How many colors should one use? Thats a difficult question to answer. Although there is no set number, it is generally best to work around three colors if possible:

  • Primary color: The main color that occupies the majority of the page. The primary color sets the overall tone.
  • Secondary color: The second color that has a purpose of backing up and reinforcing the primary color. The secondary color is usually a color that is similar to the primary color.
  • Highlight color: This is a color that is used to emphasize certain areas of the page. It is usually a color which contrasts more with the primary and secondary colors, and as such, it should be used with moderation. If you’re using color schemer software like the ones mentioned above, it is common to use a complimentary or split-complimentary color for this.

There are a lot of resources available on the Internet that explain color schemes in greater detail. However, if you use any of the color schemer solutions mentioned above and follow the basic tips which we have mentioned, then you shouldn’t have a problem creating a beautiful color scheme for your website.

2. Flash Abuse

When used excessively or in inappropriate places, Flash is terrible for your website - terrible for Search Engine Optimization and perhaps more importantly, terrible for your visitors. Don’t get us wrong - Flash is a remarkable program that allows creative multimedia geniuses to produce some fascinating work. However, the following implementations of Flash should be excluded from your website:

flash website navigation elementsFlash Website NavigationNavigation

Probably the most abused and misused method of using Flash, Flash navigation is usually bad or extremely bad. Why is it bad you ask? Well, there are a number of reasons:

  • Search Engine Optimization: If you’re familiar with SEO, then you know the importance of having text on your website. Text is what makes indexing your website in the search engines possible. The problem with Flash is that the search engines do not go inside of the Flash files to collect the text information. What this basically means is that when the search engine spiders crawl through your website and come across your Flash navigation file, they crawl right over the top of it. If you have keywords in your Flash navigation that are relevant to the content of your website, then they won’t be indexed or even noticed by the search engine spiders.
  • Page load time: Using Flash for your navigation will slow down the load time for your web page. Yes, using anything on your website will add to the load time; however, some things (such as Flash navigation) are avoidable. Some Flash file sizes are larger than others - the larger the file size means a longer download time means the more your already impatient visitors have to wait.
  • User non-friendly: The purpose of website navigation is to provide for your visitors a means of, well, navigating throughout your website. Flash navigation crosses over from bad to extremely bad when the visitor must wait for an animation to complete each time their mouse cursor rolls over an item in the menu. In case you didn’t already know, people hate waiting. There is nothing worse than having to wait even just a few seconds in order to activate a particular navigational item after rolling over it. Not only can the animations be annoying, but sometimes the menus are just downright confusing (i.e. Picture elements are used instead of words for each item).
  • What about people who don’t have Flash?: Not everyone is using Flash these days. Although it is usually rare that someone doesn’t have Flash activated on their computer, it still occurs. These Flash-disabled users will have no way of finding their way around your website. And since one of the key ingredients to a successful website is navigation, not having navigation to those with Flash disabled will make your website look quite terrible (and more importantly, non-interactive and useless).

The best way to build a SEO friendly, fast loading, user friendly, ultra compatible navigational menu is by using CSS (cascading style sheets). CSS solves all of these problems that you will encounter when using Flash navigation. There a number of free CSS navigational menu resources available on the Internet. Dynamic Drive CSS based navigational menus located at dynamicdrive.com are extremely popular and widely used by web designers and web developers, including us.

flash introFlash IntroFlash Intros

Without a doubt the worst way to use (or should we say misuse) Flash is to have a Flash intro on your website. In case you don’t already know, Flash intros are those annoying animations that play when you first arrive at some websites. If the content of your website is engaging and useful, then there is no real reason to have a Flash intro. Adding to the fact that most people are impatient when surfing the web, many of them do not have the time or patience to watch a lengthy Flash intro.

If you’re going to have a Flash intro, then at least include a “Skip Intro” button that is clearly visible to the user. Even better, instead of making the Flash intro something that is automatically shown to all visitors, place a descriptive link somewhere inside of your website that, when clicked, allows the user to view your promotional animation (usually what Flash intros are).

Finally, be careful with the inclusion of sound in your Flash intro. If someone has their speakers turned up to a high volume, then you could be responsible for scaring the living daylights out of them (and scaring them away from your website as well).

information overloadInformation Overload3. Information Overload

Having too little information on pages of your website can make them seem bare and boring; however, having too much information can overwhelm the user (which isn’t something you particularly want to do). Ads, images, text, more ads, navigation, secondary navigation, content, more ads… they all start to add up.

Although there is no rule as to how much information per web page is enough, you should try and limit your web pages to the following:

  • Header/logo: All websites need a header/logo to identify who they are. For usability purposes, try and keep the height of your header at a moderate size. Most of our headers are no more than 200 - 300 pixels tall. Anything taller than 300 pixels and you take the risk of forcing the user to have to scroll down just to see the navigation and content of your website. Yes, we want the user to look at the navigation and content of your website; however, less scrolling makes for an easier and more enjoyable visit for the user.
  • Navigation: All websites must have a functional navigational system in order for users to be able to find their way around the website. Using vertical or horizontal menus are a matter of personal preference. Although one menu is necessary, try not to have more than one. Multiple navigational menus can easily confuse the user. If you have a lot of sections on your website, then try using a CSS drop down menu which will allow you to include a great deal of navigational items while taking up a minimal amount of space.
  • Ads: Many websites provide a service to their visitors for free. It is because of advertisements that most of these services are available for free. When using advertisements, don’t abuse their usage. Google AdSense allows a maximum of 3 ads per web page for a reason - too many ads can make your web site look like spam in no time. Placement of advertisements is also important. Don’t try to trick your visitors by placing your ads in areas where they look like actual content on your web site. People do not like to be tricked. If they want to visit your advertising sponsor, then they will click on the ad.
  • Content: Each web page should have an area for content. This main section should be the focal point for each web page. Having a lot of information about the topic for each web page is absolutely fine. Make sure not to include too many different topics on one web page. Instead, split the topics up and allow for each to have its own page.
  • Images: Use images moderately and only when necessary in your content area. Images take longer to download than text. Make sure that your images are properly compressed so that the download time for your web pages are not compromised due to large images. Nothing says “amateur web designer” more than having large, uncompressed images that take minutes to load.
  • Footer: The information contained in footers vary from website to website. Try not to stuff too much information in the footer - especially important information. Not all users scroll down to the bottom of web pages to see the footer - some stop at the end of the content. If you have important information that must be placed inside of the footer, then begin the footer soon after the content area ends. Placing the main links for your website in the footer is a practice commonly used by designers.

There may be additional things that a website requires depending on the topic and the industry; however, all websites should contain these 6 elements. Developing a navigation and layout strategy before building a website is essential in guaranteeing that your website doesn’t suffer from information overload.

text inside imageText Inside Image4. Image Text: A Big No No

Like a car inside of an airplane hanger, text does not belong inside of an image. The only exception to this should be using text inside of a logo. Yes, it can be boring using the same text that everyone else uses for their websites. However, you can still make rich and compelling designs without sticking fancy text inside of your images.

There are a few reasons why using text inside of images is a no-no:

  • Larger image file sizes: Each piece of information inside of an image adds size to the file. As we mentioned earlier, the larger the file size means a longer download time means the more your already impatient visitors have to wait.
  • Not SEO friendly: Just like Flash files, search engine spiders cannot detect the textual information inside of image files.

If you have an image that requires text, then try an alternative method using CSS layers. Not only is this method easy to implement, but it will help keep the image file size smaller. It is also SEO friendly.

too many columnsToo Many Columns5. Attack of the Columns

No, this isn’t a spin off of the Star Wars movie. Attack of the Columns is a phrase we use when a web designer uses more than a few columns in their layout. Some designers believe that by using more than a few columns they can better organize and display the information on their web page. The problem is, just like information overload, using too many columns will overwhelm the user.

When more than 2 or 3 columns are used, a focal point is usually eliminated from the web page. Without a focal point, the user has no idea where to look. Instead, the user’s eyes wander aimlessly throughout the web page. This will cause the user to feel confused and overwhelmed and might make them go to a similar website with a cleaner, less-busy layout.

Even if there is a focal point, there is probably going to be too much information on a 4+ column layout. If huge sites with massive amounts of content (i.e. Amazon.com) are able to work with a 3 column layout, then there is no reason that any other website can’t do the same. Plan your layout before you start building your website and you will find that even if you have a lot information and content, a 3 column layout is more than enough.

all smilesAll SmilesHappier Visitors

These 5 Things to Hate About Web Design are very important - perhaps the most important things a web designer should take into consideration when building a website. All 5 of these items have one thing in common: when followed, the user will have an easy, fast loading, straight forward experience when they visit your website. What more could they ask for? Well, maybe less advertising.

Don’t delay, give Stanley a call today on 081-525-1727 to discuss your requirements or send him an email to This email address is being protected from spambots. You need JavaScript enabled to view it.' to request a free quotation

Continue reading
0
  1718 Hits
1718 Hits

Keywords are the key to good website design

SEO Keyword researchS.E.O Keyword ResearchWe all know potential clients won't come just because you built the site - the site has to place well in the search engines to pull the traffic. Of course, placement can be bought through Pay Per Click advertising, but there is nothing as satisfying to a web designer as a top position in the free results.

How do you get there? In a word: keywords. Design your web site for search engines from the very get go, and that means, start with your keyword research. Once you have those terms in hand, use them to plan your site and content.

domain name registrationDomain Name RegistrationWhat's in a Name?

If you haven't purchased a domain name yet, then think about ways to incorporate at least one of your keywords. Hyphens are fine, but if you can get bluewidgets.com, go for it. Or www.companynamewidgets.com ... you can rank well without it, but every little bit helps.

website widgetWebsite WidgetsSite Content - Give Them What They Want

If you plan your content based on your keyword research, you give searchers what they are looking for. Sometimes you have to get creative, of course. For example, if you sell red widgets, but your research tells you people search far more often for blue widgets, then you might want to create and optimize a page "red Widgets Vs. Blue Widgets." Sounds silly, but you get the idea. And it not only brings the searcher for red widgets to your page, it converts them to a blue widget buyer.

Create at least one page for each keyword variation, and on that page use your phrase:

  • In an h1 tag once
  • In an h2 or h3 tag once
  • In the first paragraph
  • In bold somewhere in the content
  • In the anchor text of a link to an authority site.
  • In the anchor text of a link to another page on the site

keywordsKeywordsSite Design Architecture and SEO

Your keywords will also figure heavily in the website's structure - especially if it's a large site. Where there are natural divisions, create sub-directories with keyword rich names: www.yourdomain/blue-widgets/ for example.

It can also be a powerful move to use your keywords in file names - your HTML and graphic file names. Assume for a moment you sell widgets of all different colours, and they are search terms ... you would have pages named:

- www.yourdomain/blue-widgets.html,

- www.yourdomain/black-widgets.html,

- www.yourdomain/white-widgets.html and so on.

Use those keywords in the graphic files names as well. Take your home page, for example. Your logo should be called widgets-logo.gif.

alternative textAlternative Text for ImagesOther On Site SEO Design Elements

Be sure to use Alt Tags for images, and title attributes for links. Don't stuff the alt tags with keywords, but describe the images accurately, and do it with the visitor in mind too. Here's why: we know the search engines do use the text from alt tags to help index a site, but did you know that Google sometimes uses the alt tag text as the description in the SERPs! It's rare, but it happens. I've seen it on my own site.

The jury's out on whether this last technique is really effective, but many SEO Web Designers now use the title attribute on links. If you look at the code for the link to my site – or put your mouse over the link, you will see what I mean.

Off Site SEO – Link Building

Wait a minute, link building isn't part of design is it? Yes, it is! You used to be able to build link popularity through reciprocal link programs, but that is no longer an effective gambit. To get links, you need to create the sort of content that makes other webmasters link to your site. It might be a forum, a blog with constantly updated information, or a tool that people need. Build your content to attract links, as well as visitors.

Incorporate these suggestions into your web site, and you will begin to see how SEO and Web Design can be synonymous!

Don’t delay, give Stanley a call today on 081-525-1727 to discuss your requirements or send him an email to This email address is being protected from spambots. You need JavaScript enabled to view it.' to request a free quotation

Continue reading
0
  1746 Hits
1746 Hits

Calendar

Wait a minute, while we are rendering the calendar

Latest Blogs

Reward Credit

Login/Register for credits