Web Design

December 11, 2009

JQuery Infinite Carousel

Filed under: JQuery — Tags: , — Tim @ 7:29 pm

If you’ve been around our site you probably noticed we REALLY like the JQuery Infinite Carousel. We like it because it is really easy to implement and customize. Plus the result looks great, and is more search engine friendly than a Flash carousel.

Here is a quick and easy step-by-step for implementing the carousel into your site.

Step 1: Download the .js file here… http://www.mywebdept.com/js/jquery.infinitecarousel.js and save it into a JS folder on your site

Step 2:  Add these two lines to the head of your page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.infinitecarousel.js"></script>
 

Step 3:  Also add this code inside the head of your page. Adjust the images sizes accordingly.

<script type="text/javascript">
$(function(){
 $('#carousel').infiniteCarousel({
  displayTime: 6000,
  textholderHeight : .15,
  displayThumbnails: 1,
  thumbnailWidth: '242px',
  thumbnailHeight: '25px',
  displayThumbnailNumbers: 0
 });
});
</script>
<style type="text/css">
#carousel {
 margin: 0 auto;
 width: 1000px;
 height: 349px;
 padding: 0;
 overflow: scroll;
�
}
<!--NOTE THE WIDTH HERE  it is the sum of all your pictures - so 2 pics at 150 width each would change this to 300 -->
#carousel ul {
 list-style: none;
 width: 4000px;
 margin: 0;
 padding: 0;
 position: relative;
}
#carousel li {
 display: inline;
 float: left;
}
.textholder {
 text-align:center;
 font-size: 22px;
 color:black;
 font-weight:bold;
 padding: 6px;
 -moz-border-radius: 6px 6px 0 0;
 -webkit-border-top-left-radius: 6px;
 -webkit-border-top-right-radius: 6px;
}
</style>

Step 4: Add this code where you want the carousel to go on your page.

<div id="carousel">
    <ul>
     <li><a href="services/web-design/"><img alt="" src="Images/Home/web-design.jpg" border="0" width="1000" height="349" style="border:0px;" /></a><p>New Websites : Website Redesign : Search Engine Optimized Web Designs</p></li>
     <li><a href="services/web-development/"><img alt="" src="Images/Home/web-development.jpg" border="0" width="1000" height="349" /></a><p>Custom Development : E-Commerce : Business Process Automation</p></li>
     <li><a href="services/online-marketing/"><img alt="" src="Images/Home/online-marketing.jpg" border="0" width="1000" height="349" /></a><p>Search Engine Optimization : Email Marketing : Social Media Marketing</p></li>
           <li><a href="services/content-management/"><img alt="" src="Images/Home/website-management.jpg" border="0" width="1000" height="349" /></a><p>Content Management Systems : Website Updates : Hosting Plans</p></li>
    </ul>
   </div>

Step 5: Adjust the image paths and captions as desired.

Here is a link to more information about this carousel.

If you have any questions email me or call us.

~Tim Laubacher

November 28, 2009

10 Tips for Good Website Design

Filed under: Tips and Ideas — Tags: , , — Tim @ 5:46 pm

If you are thinking of designing a new website for your business, or redesigning your existing site, these tips will help you make smart decisions about the design of your site.

Tip 1: Understand the purpose of your site before starting

Think about what you want your site to do. Do you want it to attract new visitors? Maybe sell your products online? Or maybe you want your site to help close a sale that you’ve started in person. Or it could be that you just want to provide information to your customers.

Each of these would give a designer different clues about how to design your site. Why? Because the purpose of your site needs to be translated into a mood or feeling that the users gets when visiting your site. Also, the purpose of the site will effect the type of navigation used and the way it is styled.

Having a good handle of what you are really trying to accomplish with your site will help your designer choose an effective style and theme.

Tip 2: Plan your site with your visitor’s goals in mind

Keep in mind that your customer may have a different goal when visiting your site than you have for them. If you design your site to tell visitors what you want to tell them, and you don’t take into consideration what they are hoping to do on your site, you will no convert many visitors to customers.

For example, you might want to welcome them to your site and tell them how important customer service is to you and how you are different from your competitors. But your customers may just want to know where to buy your product. Welcoming them and filling the page with text about your company will just result in them bouncing (leaving without looking around).

So take the time to gather information from your customers about what they would want to see on your site.

Tip 3: Pay extra attention to your site’s navigation

Research shows that when a user visits a website they scan for things to click on that will get them to the information they are looking for. The navigation, or menu bar, is the first thing a user looks for and usually what they will use to naigate and move around the site. So you want to make it stand out and easy to understand.

As simple as this sounds, it is amazing to see how many websites there are with poor navigation. Take a look around at your competition, see how they word things, and what stands out to you. Bring the best things about several sites together for your site’s navigation.

Have others look at your navigation plan. Make sure they easily understand how they would get to the main areas of your site. Make sure that they understand the words you use and that they don’t have to look at it too long before understanding your menu system.

Tip 4: Make your site as visually appealing as possible

Although visual appeal is subjective, first impressions are important. Users make a judgement about your site, and your company as a whole, within the first 15 seconds on your site. Use good pictures. Avoid website templates that are cookie-cutter, and look it. Don’t overdo the graphical elements, but pay attention to the layout, use of fonts, color scheme, and other elements that make up the look and feel of your site.

It can be tempting to use a template website, or website building utility. Some even look really good at first glance. But beware. Oftentimes these designs are very inflexible and adding your own flair can be difficult. Also, these systems are usually very unfriendly to search engines.

Tip 5:  Apply a consistent look and feel throughout your site

It is important for your users to have a consistent experience throughout your site. Keep the menu in the same location of every page and don’t rearrange the links. Users will get confused if they have to constantly look for the link to the next place they want to go.

Use a consistent color scheme throughout the site. Try to keep your design to 3 colors for headings, text, and links. Too many colors can be distracting and users won’t know what is clickable and what is not.

Tip 6: Integrate your website with your offline branding

Build your brand by making your website, brochures, business cards, and other documents all have a consistent look and feel. If you already have a lot of print in stock when you create your website you should try to design the site with the same logo, colors, and fonts unless you are going to rebrand all of your materials at once.

Tip 7: Make sure your hottest topics are easy to find

Your most important pages should be linked three times from your home page or other important pages. Once in the main menu. Once in text content on the page. And once in a graphic banner. Having three types of links will make sure that the pages are found by all types of users.

Tip 8: Make sure the content is relevant, accurate, and up-to-date

Old and stale content is one way to ensure that visitors leave your site and don’t come back. Change the content of your pages regularly, even if the information hasn’t changed. Find a new and fresh way to presenting the information so that returning visitors have a reason to stay.

Tip 9: Encourage interaction

Find ways of interacting with your customers through your site. Interaction gets users to stay on your site longer and they are more likely to convert to customers if they feel as though they can really connect with you. Ask them questions or let them ask questions of you. Add video or audio to your site. Or allow users to pay for products or services through your site.

Tip 10: Make your website a “seamless” experience

Make sure that if your customers contact you through your website that you respond quickly. Blend your site into your normal business processes so that customers get a consistent experience with your company.

Also, make sure that your contact forms have auto responders so that users get a confirmation that their communication was received.

We hope that these tips are helpful to you as you design your website.