Perspective, tips, and insight

Articles to help you improve your digital marketing

5 tips for effective web design

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

Website Redesign for RJE Business Furniture

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.

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

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.

Find out Why Mobile Web Design is Good (and Necessary) for your Business

As smart phones continue to climb in popularity, mobile web design is becoming extremely important for visibility and your online 'image'. And since the iPhone is now available for Verizon, more people will be joining the crowd with touch screen smart phones.

Mobile web design is important for your business. Why? Because your audience (clients, partners, supporters) are using their phones to find you and read about your business. They will be frustrated if your website does not work for them on their phones. This trend is not going anywhere. If anything, it will become more and more important in 2011.

Below are some important things to consider while creating a design for a phone.

Usability

Aesthetics and usability go hand in hand when designing for a computer screen, but as far as mobile design goes, usability is a MUST. Usability is how easy your website is to 'use' (e.g. find what they are looking for) for your visitors. Navigation should remain simple -- an easy tap to take the user to the corresponding page. Drop down menus should be used with discretion because they are more difficult to click with a touch screen phone and 'jumpy' movement.

Links

There are small details that you can add into a mobile design. Sure email links are always important on a computer and a phone, but now a phone number can be a link to click and call that number directly. iPhone's automatically have phone numbers set to call, but for other mobile phones you can add a snippet of code to make it clickable. Also remember the size of your links -- they big enough for the user to click with ease.

More helpful hints can be found in Abduzeedo's blog about mobile web design.

Also, don't forget to add social media buttons because they are becoming very important. Read our blog about using Facebook for your business to find out why.

Design

Design should remain simple and at a minimalistic.

White space, white space, white space. An example is Mashable.com. They have created a lot of white space and simple navigation so that the user is not confused or searching through it. The white space also leads the user straight to the content so that they can scroll through the entries easily.

Screen Size

Another thing to keep in mind while creating a design is the width and height as well as resolution. Web phones displays range from 128x160 pixels to 320x480 pixels (iPhone).

Examples of great Mobile Web Design











Check out more great mobile designs at Mobile Awesomeness.

Receive articles in your inbox