Perspective, tips, and insight

Articles to help you improve your digital marketing

5 Tips for Effective Web Design

What makes a website good is an effective design. I have thought long and hard about what type of effective web design tips to list without leaving the list too long. Here are some of the tips that I came up with. The design needs to include:
  1. Use white space
  2. Avoid whole Flash websites
  3. Use accessible dropdown menus
  4. Embrace simplicity
  5. Design with text instead of graphics

1. Use White Space

White space could be a scary thing for a designer and even a client, but it should be embraced. While designing, a designer might think that they don't have enough pizazz because there is a lot of blank, white space, but this is a good thing. White space is used to help guide your users to the right content. It creates less clutter so the user doesn't get lost on a page. When the important information that the user needs to know is up front and center and clear to find, the user will be informed. Most visitors will not spend the time to look through the site to find out what the website was about or dig for the details or clarification.

Bad - Yahoo
When a user comes to this site, they may not know where to begin. It is cluttered and confusing = overwhelming.
One of their competitors, Google, has nailed white space on the head.
Good  - Silverback App

Silverback has a beautiful amount of white space.
When a user comes to their site, they know exactly where to find information and which is the most important.
Take note: Quickly you can answer 'what the do' because it is the biggest font and up front.



2. Avoid Whole Flash Websites

WHOLE Flash websites should be typically be avoided. I'm not saying to avoid flash all together, but don't make your entire website with Flash. Flash is really neat to use as a call to action, header, or an interactive piece on your site. Flash is a tricky tool, but the primary reasons that I recommend not using it is because Flash movies aren't easily accessible and it takes a long time to load (not to mention space on your server).

Bad - Manzella's Fruit Market

The home page for this site is a little confusing. The user might not know where to click to actually see the rest of their content. Once inside their produce is all listed in links, but if you click on them they don't take you anywhere. It has too much going on.


Good - AutoViewer (Flash application)
This is just an application that is made in Flash. It's a portfolio, it's simple and it wouldn't be the whole website. It would only be used to view the portfolio. The only thing about this Flash application is that it could also be developed with JQuery which is why many Flash website are being redeveloped in the lighter weight technology.


3. Use Accessible DropDown Menus

If it is not necessary to use drop down menus, don't use them. Drop down menus seem "efficient" but they can be a usability nightmare. I suggest this for one main reasons. Consider visually disabled, or physically impaired people who happen to use the internet for instance.For physically impaired people, drop down menus can be very cumbersome. It is often difficult to keep the mouse on a drop down menu even for people who are not physically impaired.

If drop down menus are absolutely necessary in order to save space, make sure to use more accessible drop down menus. "Mega Menus" are even supported by usability experts such as Jakob Nielson. Neilsen supports large, easy-to-hover-over, information-revealing down menus as described in his article Mega Drop-Down Navigation Menus Work Well.

Bad - US Airways

If the users mouse accidentally leaves the hover state of the drop down, the drop down immediately disappears. This leaves no room for error and the user has to go back and re-hover over the link for the drop down to re-appear.
Good - ESPN

When a user accidentally hovers off of ESPN's drop down the user is given a couple of seconds before the menu disappears. The user then has enough time to hover back over without have to start all over.

A Local Good Example - Central Indiana Community Foundation



4. Embrace Simplicity

Simplicity involves many aspects of design. Sticking with a good color scheme is one of them. You don't have to over do it with a bunch of colors, sticking with few will make the design part go faster and end result often very strong. Check out Kuler or Colour Lovers for inspiration and ideas. Another aspect is white space, which was mentioned above. Again, this helps to not confuse the user while they're navigating your site. Use all of your design skills wisely and don't bog your site down with too much information/graphics, often referred to as "over designing".

Bad - Restaurant Guide Atlanta

This website is no where near simple, it's like a country that is on the opposite side of the world that speaks a different language. There are some many different colors happening here and the overwhelming amount of content will definitely confuse the user.

Good - Indie Labs

This website is the epitome of simple. The colors all flow together and the user will be able to navigate through the site easily. No confusion what so ever.  Again, very quickly answering the question: Who are you?


5. Use Text vs. Graphics When Possible

Two words, loading time. In the fight of text vs. graphics, text will always win. The advantage text has over graphics is loading time. It will always take less time to load text than it will a graphic.

The web offers a ton of new fonts to use for websites. You can easily embellish your website with intriguing text and font treatment without having to use graphics. Typekit offers one free font when you sign up for an account and you can pay for additional fonts. Google also offers new web fonts and is growing every day. You can find these fonts at GoogleFonts.

When using graphics, remember to use an "alt" tag incase the images don't load. This will leave text where your images would be so that the user can read it and also for disabled users who use screenreaders to browse your website.

Bad - April Zero (loaded with and without images)

With images: this site looks beautiful. But what happens when the images won't load?
Without images: ummmm where did the navigation go? How about the logo? At least there was an "alt" tag for their dragon lab image.

Good - Elliot Jay Stocks (with and without images)

With images: this site is pretty simple, and it definitely helps them out when the images won't load.

Without images: okay their logo disappeared, but the slogan is still there as well as the navigation. The only problem with this is the overlapping text from the alt tags, but at least they are tagged.

Good - TBH Creative

With images: We have used graphics and text combined.


Without images: As you can see, the majority of the design composition stays in tack. One trick we use is background colors behind colored graphics.
 Summary
To conclude this blog, I just want to acknowledge that there are plenty more tips for effective design, but you should definitely use these tips with all of your designs. Remember that when you use Flash to evaluate the need and other options, and text the accessibility of your dropdown menus. Also pick a great color scheme and don't over pack your site with colors just to make it look more creative, because it could get messy or cluttered.

The last tip I'm going to leave is to keep up with CSS3 -- it is changing websites as we speak. There is so much you can do with it from the animation I mentioned, to drop shadows, to rounded corners, and even gradients. Don't hesitate to use this to your advantage to help minimize your loading time.

Website Redesign for RJE Business Furniture

Your website home page is your first impression to your audience (your clients, partners and colleagues). Immediately, a business home page should answer the question "What do you do?" (or "What do you sell?" or "What do service do you offer?") and allow visitors to quickly and easily find what they need. These things should happen within seconds and without effort or thinking from the end-user. This is called intuitive web design.

With these two important things in mind, TBH Creative redesigned the home page for RJE Business Interiors in Indianapolis. Their old home page did not tell visitors that they sold furniture and their navigation naming was clever, but not intuitive. Our goal in the redesign was to keep the strong brand elements and basic structure, but to make it very clear that RJE sells high quality business furniture for a variety of industries, as well as show off some of the products and spaces. The navigation was also simplified, and we added secondary navigation for quick access and better organization.

New Website Homepage for RJE -- Launched February 2011
Visit RJE Business Interiors Website

The Previous Homepage for RJE
The new home page and navigation was developed using CSS and JQuery, both allowing for easy additions and changes in the future.

Visit RJE Business Interiors and tell us, do you know what they do? My favorite piece of furniture from RJE is the generation chair.

Become a fan of RJE on Facebook.

Web Design Awards 2011

In honor of the Oscars this year, I decided to give out awards for my favorite designs of 2011. Some of the websites could go into many categories, but I picked out their best feature that they succeeded in creating.

CREATIVE DESIGN

Creative Design

Greater Dunnellon Historical Society made their web design look like a home, which is appropriate because they focus on keeping Dunnellon a historic area. Not to mention their color scheme is really nice and their illustration for their header is amazing. All in all the site is really simple and clean, which I'm a huge fan of. They receive the "Creative Design" award for their designing as a home.


INTRIGUING THEME

Intriguing Theme

Envira Media picked a statement about their business and developed a theme around it. "We plant dreams and ideas. Then grow successfull business models."What Envria Media did was take this concept and create an underground theme that grows their navigation, logo, and information out from the ground. Their color scheme is also aesthetically pleasing, but what stands out the most is their creative theme. This is why I have given them the "Intriguing Theme" award.


FANTASTIC COLOR

Fantastic Color

Gerren Lamson puts together a beautiful website full of color. On his home page he has used, pretty much, all of the colors of a spectrum and has done a fantastic job. He has kept his website simple and to the point and uses his white space wisely. He also has some great typography on each page as the header, but he is in this post for his "Fantastic Color" scheme.


TASTY SLIDESHOW

Tasty Slideshow

Bageterie Boulevard has a simple color scheme going on that works very well together. They sell sandwiches and what is selling their sandwiches on their website is this delicious slideshow. Every slideshow is different with every site, I found this one to be very original and creative. An easy way to skim through and actually see what each sandwich contains. This slideshow makes me want to eat sandwiches, so I awarded them the "Tasty Slideshow".


FLASHY

Flashy

The Basement Design + Motion creates some great games, interactive marketing and online advertisements using Flash. So as it should be, their website is made with Flash and it is made well. Unlike many Flash sites, which are usually crazy interaction and sometimes confusing, The Basement has a solid website featuring only small, enhancing effects for their website. Check out their site to see their website and their work. In my book, their award is called "Flashy". The Basement Design + Motion is also TBH Creative's interactive/Flash partner.


UNIQUE PAGES

Unique Pages

Carsonified is an extremely inspiring website to me. Not only is every page different with a brilliant color, but it's kept clean and crisp with a two tone color scheme. Though both of those are great qualities in a website, Carsonified is receiving the award for "Unique Pages". Creating a different feel for each page makes a great experience for the user.


BEST TYPOGRAPHY


Best Typography

Jason Santa Maria is a graphic artist, web designer, and blogger (which is featured on the home page). When you visit this site, click through his blog posts with the "Prev" button and you'll see a completely different layout and typography used for each blog post. These layouts follow the theme of the blog topic and they flow beautifully. The ability to match the typography with the layout on each blog awards Jason the "Best Typography" award.

CSS3 MANIA

CSS3 Mania

Things We Left On The Moon is a site created by SimpleBits to show how versatile CSS3 can be. Everything on this page is created with CSS3, there are no jQuery tricks here. To view all of the CSS3 tricks on this site, it's best to view it in Safari. If you don't have Safari, FireFox allows most of the tricks. There are also no Photoshopped files of text either. This site is best explained by simply looking at it, you'll notice why it's awarded "CSS3 Mania".

BEST ADAPTED DESIGN

Best Adapted Design

Robot or Not? is a website that was created by Ethan Marcotte to show how one website can be used for different screen sizes, but simply change CSS depending on the width of the screen. To view how this works you'll have to shrink your browser to different sizes, it even compensates for mobile phones. It rearranges the text so that it's not cluttered and shows only what is necessary for the user, especially if it's a mobile phone. I've created an image below to help explain, but you'll really have to view it for yourself. This site has been awarded "Best Adapted Design".

INVENTIVE FOOTER

Inventive Footer

Esteban Muñoz website seems like a basic, nicely styled black and white website. Once you drift to the footer of the site there is a beautiful surprise waiting for you. When the mouse is over the footer and you move it around, all of the images move at a different pace creating a 3D layered illustration. This site has been awarded the "Inventive Footer" and it is definitely one of my favorite footers that I have seen in awhile.


I feel as though I should have a "Best Website" award, but I can't choose. All of these websites are unique in many ways and all having their strong points. So I'll award all of these sites with this special award...
SHANNON'S FAVORITE WEBSITES

Please feel free to comment with some of your favorite websites in celebration of the Web Design Awards of 2011.


Four Guidelines for Hosting Videos on your website

Video is visual, it's immediate and it's powerfully persuasive tool to communicate your message online. If you have invested in video production for your website, you need it to play and load properly without interruptions.


For hosting video, one of the major video sharing sites like YouTube, Vimeo or Kewego are good options.  As long as the hosting servers are optimized for video, any one of the above sites will do.  The important factors are:

File Size
Generally, you can get uninterrupted streaming when the video file is 5 megs per minute or less.  Of course there are a number of other factors involved not the least of which is how functional the visitors Mac or PC is.  I have found that the more junk I have on my Mac desktop, the slower my Mac performs and I think the same thing is true of PCs.

Download speed from the local Internet Service Provider (ISP)
The ISP may be experiencing a lot of video downloads taking up bandwidth or the video sharing site is having the same issue.

The first factor your video editor can control and the second not so much.

Here are some other guidelines:

  1. Design videos that are 2:30 or less in length. Videos that are longer should be broken into smaller videos which is a great way to market. A series has a higher perceived value than a single video. Also, viewers respond much better to a collection of 2 minute videos compared to one 30 minute video.   
    • TIP: The optimal length for a video is 1:30 - 2:00 minutes. 
  2. The content needs to be keyword relevant with appropriate KW density as well as well-written and compelling.
  3. Save videos as a .mp4 format. this format gives the best quality to file size ratio
  4. Minimize movement in the video, i.e., fast pans or zooms or animation that changes each frame completely.
A few of our clients have jumped on the video bandwagon and are seeing some great results. Check out their videos:
Content contributor to this post is Tim McKee of Traffic Geyser: Tim@TrafficGeyser.com

6 Secret Weapon JQuery Tricks

JQuery is a secret weapon being used throughout the web. If you aren't sure what it's being used for or when you've seen it, you'll soon find out through these great examples. JQuery is JavaScript code that allows a developer to create animation without Flash software. Plus most of the JQuery code doesn't take as long to develop or make changes.

There are several key benefits to JQuery:
  • Adds interest, appeal and interactivity to a static web page
  • Easy to update and maintain
  • Optimal for search engines
Here are a few of those secret JQuery tricks that the average web surfer can run into.

#1 Image Slideshow

An image slideshow is one of the most popular used JQuery trick. There are many types of JQuery slideshows out there that have different features. One could have all of it's images in thumbnails underneath the slideshow and one could have arrows to click through the images.
Here are some of my favorite slide shows to use.

Galleriffic Demo; Tutorial


Supersized (a fullscreen slideshow) Demo By Build Internet!; Tutorial
 

Easy Slider Demo by CSS Globe; Tutorial


Image/Content Slideshow by TBH Creative


Image/Content Slideshow by TBH Creative


#2 Menu Navigation

Up there in popularity with the image sliders, menu navigation is a great JQuery trick to learn. From animated drop downs to neat, rounded corner buttons, it really makes a navigation (and your website) stand out.

Sleek Drop Down Menu Demo by Soh Tanaka; Tutorial


Smooth Rollover Menu Demo by Build Internet!; Tutorial


#3 Pop Up Box/LightBox

A pop up image slideshow or single image. I know, it's a slideshow like above, but it has a different feel to it. It's simple and classy, plus it pops out so the users focus is directed straight to the images. Another great thing about this particular lightbox is that it's easy to find how to close out of the image. I'm sure everyone has seen this trick before.

LightBox Demo by Leandro Vieira Pinho; Tutorial



#4 Tabbed Content

Another cool trick with JQuery is creating tabbed content. This allows the user to place a lot of content into one container and create interaction for the user. There are a couple of ways that I have seen this done. One is with actually tabs and the other is a clickable menu that reveals content hiding behind it. Here are some examples for those.

Tabbed Content Demo by Nut.Tuts+; Tutorial


Horizontal Accordion by Jose Francisco Rives Lirola; Tutorial


#5 Hover Clouds

This is a trick that I stumbled upon the other day. It's more for show, but it's pretty cool. If you hover over a link, a hover cloud appears. The cloud can be styled to the designers liking to display extra information, thumbnails or links. Take a look at these examples.

Hover Sub Tags by Noupe; Tutorial


Fancy Thumbnail Hover by Soh Tanaka; Tutorial
 

#6 Style Switcher

Style switcher allows the user to click on a button that changes the style of the page. This changes the css template based on which button the user chooses. Some designers do this with color palettes, others use it to change the whole theme of the page. This example is of a theme change between night and day.

JQuery Style Switcher by Net.Tuts+; Tutorial



Theme Switch by ANidea; Tutorial



All of these examples are just few of many JQuery tricks that a developer has to dabble with. With JQuery heading in an amazing direction with animation for almost every area of a web page, Flash is slowly loosing credibility for websites. (Though it still makes some awesome online games.)

Receive articles in your inbox