How and why to reduce page loading times

Posted on September 1, 2010 by Admin

Page loading times are an often overlooked part of optimizing websites. People are apt to spend more time on a site that responds quickly than a slow and unresponsive one, giving them more time to (hopefully) click on your ads, buy what you’re, or sign up to your email list.  Many users will just click the back button and visit the next result on a search engine if your site takes more than a few seconds to load. Google is also beginning to use site speed as a factor in their search rankings; at the moment less than 1% of searches are affected, but why not prepare for the future?  Decreasing loading times will also reduce your bandwidth usage, possibly lowering your hosting costs.

You can check your loading times and how they compare to other sites using Page speed, a Firefox addon, or using Google Webmaster Tools in Labs > Site Performance.

How can I decrease loading times?

1.  Limit the number of posts per page

Simple – the more text and images there are on a page, the more time it takes to load.  If people want to see more posts there’s always the “Older posts” link.  There’s no exact number of posts per page that works best, so you should try finding the right balance between speed and content.  In WordPress, you can alter your posts per page in Settings > Reading.

2. Use the “More” button

If you usually include full posts on the home page, you can also try using the “more” button so that only the beginning of each post is shown, reducing the amount of text/images that must be loaded.

3. Use a cache plugin

A plugin like W3 Total Cache can greatly increase your site speed. It can reduce the size of JavaScript and CSS files, generate simple HTML pages to serve to visitors (reducing the amount of database queries), and do Database caching (saving the results of queries.)

4. Using a CDN

A CDN, or content delivery network, is a network of servers around the world that can contain copies of your site’s data. Visitors are served data from the server nearest to their location, cutting load times for people far away from your regular server location.

Amazon has well priced CDN hosting.

5. Deactivate unused plugins

Plugins sometimes increase page loading times because they use extra CSS and JavaScript files.  If you have plugins that you never use or provide little value, you should deactivate them.  You can also try finding plugins similar to those you use but with better performance.

6. Reduce and/or optimize images

Images make up a large part of page loading times.  You should remove images that provide no value, and you should optimize those that do with tools like Smush.it, a WordPress plugin that reduces image file sizes without reducing quality.

Posted in Web Design | Tagged , , , , , , , | Comments Off

test

Posted on August 31, 2010 by Admin

video chat provided by Tinychat
Posted in Uncategorized | Comments Off

Good Site Navigation Techniques

Posted on August 30, 2010 by Admin

The navigation bar is an important part of any site. Many sites use only boring, regular links for navigation, which can have a detrimental effect on the site as a whole. A good interface should be simple, clean, dynamic, and organized. Here I’ll show you three techniques to create a great navigation bar for your site.

idTabs

idTabs is a jQuery plugin that makes creating a tabbed menu extremely simple.  To use it, you can include the following code in your page’s <head> section:

<script type=”text/javascript” src=”http://www.sunsean.com/idTabs/jquery.idTabs.min.js“></script>

Alternatively, you can download the script from the site and include the local file.

Now, when you include an <a href=”#tabname”> (tabname being replaced with the name of your choice) element inside an element with, clicking on it will show the element with the same id as the link.  See this code, for example:

<ul class="idTabs"> 
  <li><a href="#Home">Home</a></li> 
  <li><a href="#Videos">Videos</a></li> 
  <li><a href="#Pictures">Pictures</a></li>
</ul> 
<div id="Home">Welcome to our home page!</div> 
<div id="Videos">Check out youtube.com for some cool videos.</div>
<div id="Pictures">You can find some good pictures on flickr.com.</div>

When you click “Home”, it will show the “Home” div, when you click on Videos, the Video div will appear, and upon clicking the “Pictures” link, the div of the same name will be shown.

Smooth jQuery Dropdown Menu

The following code creates a dropdown menu made in jQuery, using animations to make menu transitions appear smooth.  I will walk you through the HTML, CSS and jQuery needed to create this menu.

<ul>
    <li><a href="#">Dogs</a>
         <ul>
                 <li><a href="#">German Shepherd</a></li>
                 <li><a href="#">Golden Retriever</a></li>
         </ul>
</li>
    <li><a href="#">Cats</a></li>
    <li><a href="#">Amphibians</a>
        <ul>
            <li><a href="#">Turtles</a>
                <ul>
                    <li><a href="#">Snapping turtle</a></li>
                    <li><a href="#">Painted turtle</a></li>
                </ul>
            </li>
            <li><a href="#">Frogs</a></li>
            <li><a href="#">Toads</a></li>
        </ul>
    </li>
</ul>

Next we have a block of CSS to style our navigation bar. I won’t go over all of it, but here are some key points: we use “list-style-type” to remove bullets that usually appear on lists, we use “display:none” to hide submenus, and we use “float”, margins, position, width and height to make sure the links are aligned/positioned correctly.

#menu, #menu ul{

margin:0;

padding:0;

list-style-type:none;

position:relative;

line-height:2em;

font-family:arial, “sans serif”;

}

#menu a:link, #menu a:active, #menu a:visited{

display:block;

padding:0px 5px;

border:1px solid #000000;

color:#FFFFFF;

text-decoration:none;

background-color:#000000;

}

#menu a:hover{

background-color:#FFFFFF;

color:#000000;

}

#menu li{

float:left;

position:relative;

}

#menu ul {

position:absolute;

width:16em;

top:2.1em;

display:none;

}

#menu li ul a{

width:12em;

float:left;

}

#menu ul ul{

top:auto;

}

#menu li ul ul {

left:12em;

margin-left:10px;

}

#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{

display:none;

}

#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{

display:block;

}

Next comes the jQuery.

$(document).ready(function(){

$(“#menu li”).hover(function(){

$(this).find(‘ul:first’).fadeIn(500);

},function(){

$(this).find(‘ul:first’).css({display: “none”});

});

});

We put our code inside “$(document).ready” to ensure that it is only executed once the page is ready.  Then we select the menu list item (any of the regular, not sub-menu links) and say when the mouse hovers over it, to complete a function, and then complete the second function once the mouse moves away.

That function is to find the first unordered list within the list item with “$(this).find(‘ul:first’)”, and use the fadeIn function to display the submenu, in 500 milliseconds.  You can change this value to adjust the animation speed.  You can also try using “show” instead of fadeIn for a different effect.

The second function, used when the mouse moves away, sets the display to none to hide the submenu.

Coda-Slider

CodaSlider is a jQuery plugin that creates a sliding effect.  When you click a menu link, the old content slides out and the new slides in.  You can see it in action here: http://www.ndoherty.biz/demos/coda-slider/2.0/. Using Coda-Slider is as simple as downloading the script from http://www.ndoherty.biz/demos/coda-slider/2.0/coda-slider-2.0.zip and changing the text to fit your needs.

Posted in Programming, Web Design | Tagged , , , , , , | Comments Off

Top-10 Best Black & White WordPress Themes

Posted on August 28, 2010 by Admin

No matter what kind of a site you’re building with WordPress, from business to personal black and white is always a hit. It’s crisp and clean and offers you some outstanding ways to showcase your photos, your clothing or anything else you may have to offer.

Blog or CMS, WordPress is a sharp way to show it off and your new black and white theme won’t detract in the least from your excellent content or your perfect photos. From a gallery to a diamond showcase, these black and whites make it all look good.

Note that the following 10 proposals are not entirely restricted to black and white combination rather they come with a fine touch of catchy color insertions to maximize visual impact.

The Top Ten Black and White WordPress Themes (in our humble opinion) are:

Number 1 – AdvancePress

The focus will all be on you when you use this minimalist black and white that features sharp edges and a subtle tone that is perfect for the most serious blogger or the business owner. Thumbnail images make is crisp and sharp in every detail. Advance press is a premium theme that really lives up to its name.

AdvancePress

Number 2 – Handgloves

One of the most outstanding free themes we’ve seen come down the road for quite some time, the black and white understatement that Handgloves offers could well be a premium theme. It offers you a very striking touch in the simple dual column design that puts the emphasis on your photos and content, detracting nothing by design.

Two-Handgloves

Number 3 – TutorialPress

Catching the eye and offering a superb design as well as outstanding theme elements, the modern Tutorial Press was designed to offer up your content in a way that is pleasing but does not detract from it in any way. The splash of blue that’s been added to the black and white coloration is just enough to draw your interest. Perfect for offering graphic or WordPress tutorials Tutorial Press is simplicity at its complicated best.

TutorialPress

Number 4 – P2

A sleek and clean powerful addition to the wordpress themes P2 is a lot more than just a typical WP theme. It offers you comments inline, outstanding customization, real time publishing and auto updates for those who are logged in without the need to refresh your pages. One of the best in the clean black and white category P2 has it all.

P2

Number 5 - Zenko Magazine

The magazine style is simple and easy to use and to read, and this black and white does a whole new take on it. Small spots of color make it interesting without detracting from the content focus. Keeping it all in place, organization is the focus of the Zenko theme with a well-polished, easy to use triple column style, it’s elegant and simple. Menu drop downs and built in analytics for Google round the whole thing out to an outstanding user experience.

Zenko Magazine

Number 6 - Foliotastic

Crisp is the only word that springs immediately to mind when you look at this clean dual column beauty. A lot of room for customizing as well as a ton of extras built into the site make it ideal for a gallery page or a design site. Two methods of use, dark and light offer you an outstanding assortment of possibilities and as if that were not enough there is also a built in ability to customize your colors completely in the administration panel.

Foliotastic

Number 7 - Frugal

Clean and tidy, the black and white makes for some outstanding focus on your photos and content. It comes in both free, as well as professional and premium and all are widget ready, offer some great convenience such as a guide to the workings of the theme as well as an amazing propensity for customizing the theme. Three columns and the professional look will draw you in. The only down side is that if you really want some great customization to this one, it will take someone familiar with the code.

Frugal

Number 8 – Clean Home

Totally and amazingly light, there are less than fifty pixels of image in the entire theme. There are two versions, free and professional that will allow you to customize to your heart’s content.

The dual column design assures you that your design isn’t talking when your content should be. Perfect in nearly every way, this is a black and white that will be around for a while.

Clean Home

Number 9 - Manifest

Truly minimalist in nature and beautiful in form and function, the Manifest offers you an excellent surrounding for any type of content and does not interfere with it. Elegance in the font and a simple navigational design makes it clutter-free zone on your WordPress website. Nothing will draw the eye from the things it is supposed to be focusing on with Manifest.

Manifest

Number 10 - Advanced Newspaper

Very well organized and quite polished in its layout, the professional method of offering news to your readers is one that will impress you. While effective in offering the information and we love the layout and the clean colors, Advanced Newspaper is our last place selection because it does tend to offer a look of clutter, although it is reminiscent of lifting your morning paper to read.

Newspaper

We looked for inspiration at WPStart.org, WordPress.org, WPZoom.com and ILoveYouWP.com and of course

Posted in WordPress | Tagged , , , , | Leave a comment

Open Again

Posted on August 28, 2010 by Admin

The site will be re-opening shortly.

Posted in Uncategorized | Leave a comment