StormBiz Blog

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

Fastest Way to Ruin a New Web Site?

planning websitePlanning WebsiteI’ve been asked, “How do I design a successful Website?”

I often respond, “Do you know the fastest way to ruin a new Web site design?” As you might suspect, the answer is, “Lack of proper planning beforehand.”

Let's put it another way. In programming, there's an old axiom, which states: "The sooner you start your coding the longer it takes to finish."

Planning out your Website before you build it is essential. To borrow a technique from the film industry, I recommend that you create a storyboard, which is a type of a flow chart of your new Web site design. You don’t have to be an accomplished artist to draw out your idea, but it’s essential to create it on paper first.

On each piece of paper, the goal is to have room for an image at the top, plus space underneath for writing down information. As you might suspect, the first page to start with is your home (or welcome) page, which will typically have the most information as it will contain the page the people visit before they enter your site and as people go through your site, the will encounter more information (in tiers) as they go down.web design planningWeb Design PlanningTypically, the home page links to 5-15 pages below that, which we could refer to as Tier 2. Each of those pages links to another 5-15 pages, which you could call Tier 3

If you use all of these pages, you’ll wind up with an extensive Web site design, of at least 226 pages (including the home page).

It's during this process that all sorts of problems will crop up. But it's much easier to solve them on paper than in the middle of coding rather than when you are finished.. If you don’t, you might run into a major problem along the way that would require a “back to the drawing board” complete site re-design.

Working things out on paper will give you a much better idea of how things will work and how to fix problems. And, if you have knowledgeable friends, get a second opinion.

Once you've completed the on-paper process, and you or your web designer is satisfied with the results, you’re ready to translate it into code. Unless you or your programmer is a pro, I would recommend using a “template”. These are ready-made Web site design formats. You can choose from several templates by typing “template source” in most search engines. Many of them are free.

Commonly Asked Questions

Q: For a Website, do I have to employ a pro, or can I call the guidance counselor at my local high school and ask for the names of some computer whiz kids that I could call to help me out (for a fee)?

A: It really depends on what you want to do. If all you want is 1-2 pages , you can learn how to build the Web site yourself. If it’s an intensive site with many pages, I’d recommend student or a pro (if you have the budget).

website planningWebsite PlanningQ: I see a lot of photo-oriented web sites that have a black background. Is this the best color to use?

A: Not necessarily. It’s a matter of opinion and personal taste. White can work just as well. I don’t recommend the use of other colors as they can compete with your images.

Q: Is “Flash” or audio acceptable?

A: If you absolutely need Flash to demonstrate an animation, then by all means use it. If it’s for a fancy trick, I recommend leaving it out. It’s similar with sound. Unless it adds to your site, don’t use it. And if you do use sound, give users an option to turn it off. If you don’t, you’re likely to lose visitors.

If you would like a free quotation, or more information, please do not hesitate to contact us.

Continue reading
0
  932 Hits
932 Hits

Writing Effective ALT Text For Images

Alt TextAlt-TextAnyone who knows anything about web accessibility knows that images need alternative, or ALT, text assigned to them. This is because screen readers can't understand images, but rather read aloud the alternative text assigned to them. In Internet Explorer we can see this ALT text, simply by mousing over the image and looking at the yellow tooltip that appears. Other browsers (correctly) don't do this.

But surely there can't be a skill to writing ALT text for images? You just pop a description in there and you're good to go, right? Well, kind of. Sure, it's not rocket science, but there are a few guidelines you need to follow...

Spacer images and missing ALT text

Spacer images should always be assigned null ALT text, or alt="" . This way most screen readers will completely ignore the image and won't even announce its presence. Spacer images are invisible images that pretty most websites use. The purpose of them is, as the name suggests, to create space on the page. Sometimes it's not possible to create the visual display you need, so you can stick an image in (specifying its height and width) and volià, you have the extra space you need.

Not everyone uses this null ALT text for spacer images. Some websites stick in alt="spacer image". Imagine how annoying this can be for a screen reader user, especially when you have ten of them in a row. A screen reader would say, “Image, spacer image” ten times in a row (screen readers usually say the word, “Image”, before reading out its ALT text) - now that isn't helpful!

Other web developers simply leave out the ALT attribute for spacer images (and perhaps other images). In this case, most screen readers will read out the filename, which could be ‘newsite/images/onepixelspacer.gif’. A screen reader would announce this image as “Image, new-site slash images slash one pixel spacer dot gif”. Imagine what this would sound like if there were ten of these in a row!

Bullets and icons

Bullets and icons should be treated in much the same way as spacer images, so should be assigned null alternative text, or alt="". Think about a list of items with a fancy bullet proceeding each item. If the ALT text, ‘Bullet’ is assigned to each image then, “Image, bullet” will be read aloud by screen readers before each list item, making it take that bit longer to work through the list.

Icons, usually used to complement links, should also be assigned alt="". Many websites, which place the icon next to the link text, use the link text as the ALT text of the icon. Screen readers would first announce this ALT text, and then the link text, so would then say the link twice, which obviously isn't necessary.

(Ideally, bullets and icons should be called up as background images through the CSS document - this would remove them from the HTML document completely and therefore remove the need for any ALT description.)

no alt textNo Alt TextDecorative images

Decorative images too should be assigned null alternative text, or alt="". If an image is pure eye candy then there's no need for a screen reader user to even know it's there and being informed of its presence simply adds to the noise pollution.

Conversely, you could argue that the images on your site create a brand identity, and by hiding them from screen reader users, you're denying this group of users the same experience. Accessibility experts tend to favour the former argument, but there certainly is a valid case for the latter too.

Navigation & text embedded within images

Navigation menus that require fancy text have no choice but to embed the text within an image. In this situation, the ALT text shouldn't be used to expand on the image. Under no circumstances should the ALT text say, ‘Read all about our fantastic services, designed to help you in everything you do’. If the menu item says, ‘Services’ then the ALT text should also say ‘Services’. ALT text should always describe the content of the image and should repeat the text word-for-word. If you want to expand on the navigation, such as in this example, you can use the title attribute.

The same applies for any other text embedded within an image. The ALT text should simply repeat, word-for-word, the text contained within that image.

(Unless the font being used is especially unique it's often unnecessary to embed text within images - advanced navigation and background effects can now be achieved with CSS.)

Company logo

Websites tend to vary in how they apply ALT text to logos. Some say, ‘Company name’, others ‘Company name logo’, and other describe the function of the image (usually a link back to the homepage), ‘Back to home’. Remember, ALT text should always describe the content of the image so the first example, alt="Company name", is probably the best. If the logo is a link back to the homepage then this can be effectively communicated through the title tag.

blind person with screen readerBlind Person With Screen ReaderConclusion

Writing effective ALT text isn't too difficult. If it's a decorative image then null alternative text, or alt="" should usually be used - never, ever omit the ALT attribute. If the image contains text then the ALT text should simply repeat this text, word-for-word. Remember, ALT text should describe the content of the image and nothing more.

Do also be sure also to keep ALT text as short and succinct as possible. Listening to a web page with a screen reader takes a lot longer than traditional methods, so don't make the surfing experience painful for screen reader users with bloated and unnecessary ALT text.

For more information, or a free quotation, please contact us

Continue reading
0
  923 Hits
923 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.

For a free quotation, or more information, please contact us

Continue reading
0
  990 Hits
990 Hits

Calendar

Wait a minute, while we are rendering the calendar

Latest Blogs

Reward Credit

Login/Register for credits