Feel Proud to be an indian

DownloadSOURCE FILES

jQuery sliders offer a simple, elegant way to display content without giving up valuable real estate on your web page. They have skyrocketed in popularity and can be used in a variety of ways. Let’s go over the popular styles, choosing a slider and integrating one into a demo site.

A Little Background

Once upon the time, an image on the web just had one way of showing up: as a flat JPG, GIF or PNG. Sometime a few years ago, images started learning new tricks; They grouped together and started showing up in jQuery sliders to the applause of visitors all around.

Since then, they’ve learned a plethora of new tricks that make them prime material for any web designer. Whether you’ve used them before or not, this tutorial will give you insight into the different flavors of sliders, when to use them in a design, and we’ll even walk you through an installation of one.

If there is one thing jQuery sliders don’t have, it’s a consistent name. The slider goes by a wide array of aliases: gallery, carousel, promos and rotators but they all provide the same general feature – display multiple content items in a shared space on the page. For the purpose of this article, I will refer to them all as a “slider”.

jQuery sliders can be used for nearly anything but most are used display a number of photos in a slideshow format in a way formerly handled by Adobe Flash. Many offer a number of transition effects between slides and can be controlled by previous/next buttons, tabbed or thumbnail navigation.

When to Design Your Own Slider

Although the variety and quantity of sliders is steadily on the increase, sometimes you just can’t find a solution for for your unique situation.

If you are going to be using many sliders in your projects, it is worth your while to dig in and really learn how they work and build one yourself. The best way to learn is by example.

Dissect existing sliders, see how they work and learn from it. Don’t steal other developer’s code but instead focus on what they are doing: animations, changing opacity and reviewing the settings they offer and write it in your own way.

With tools like Firebug, you can “inspect” a slider in real-time, watching it manipulate the z-index, opacity or positioning to move content from one slide to the next.

You will gain a greater understanding of what is going on under the hood, be able to perform customizations, and find problems faster down the road by digging into as many sliders as you can to learn how they function.

Finding The Right jQuery Slider for You

The only thing more plentiful then the number of jQuery sliders are the number of sites showcasing them. Rather than try to list all of them here (new ones come out every week!), let’s walk through how to find one that’s right for you:

A quick Google search will reveal sliders can be found in a variety of places:

Roundup Posts

Often titled something like “25 Useful jQuery Content Slider Scripts” – they are posts created to collect and review the different sliders available at the time. Read the comments as well as the article to see other people’s opinions on the collection.

Tutorial Sites

Sites that offer up tutorials on building sliders will often times include the final source code of the project so you get a step-by-step guide as to how it is built and the final working result. Unless specifically noted, the source project is just for educational purposes, ask before using in any projects.

Online Marketplaces

CodeCanyon offers an entire category for premium sliders.http://codecanyon.net/category/javascript/sliders

View-Source

Sometimes you will come across a site with a slider and you want to see which plugin they may have used. Since JavaScript is a client-side script, do a view-source of the page and look which JavaScript files are imported, the plugin information should be included at the top of the plugin’s source script with a URL for more information on the plugin for download and documentation.

Be courteous of the effort others have done, read and abide by the license agreements included and give credit where credit is due.

Deciding on a Slider

Choosing a slider is largely dependent on the functionality and options you need and the overall style you are going for. Decide on the type of content you need displayed, how you want users to navigate through it and see which slider best matches your requirements.

Once you have narrowed down your choices, compare the overall script size and check whether is is compatible with all browsers.

Some sliders are offered in a “lite” version such as jQuery Cycle Lite if you’re looking to keep the overall file size down in your project. Often times, the light version is just missing the additional transition effects, sticking with the most popular options available.

If you’re not a jQuery master, choose a slider with great live demos you can download and documentation to help guide you through making your customizations.

Skinning a Slider

One of the great things about using a pre-made slider is that most of them are incredibly easy to redesign according to your needs. This process (usually just called “skinning”) isn’t as hard as it might seem. Usually it requires just editing a simple CSS file – the most complex skinning will usually get is swapping out graphics that you’ve created their the default graphics (like backgrounds and buttons).

In addition to skinning sliders, it’s also worth noting that with most sliders, it’s easy to change the size to fit the website that you’re designing.

Integrating Sliders with an Existing Site

Placing a slider in an existing design is not a single-step process but most slider scripts come with a basic sample page to get started, importing jQuery, CSS, sample content and initializing the plugin with the default settings.

Let’s import jQuery Cycle into a quick sample site created for the purpose of this tutorial.

Download the before and after sites to follow along.

1. Initial Site Structure

The demo site consists of basic HTML, CSS and an image which will be the starting point for integrating the slider.

index.html – The sample home page we are using
css/screen.css – General style information
images/sample_water.jpg – Current static image for the home page

2. Download jQuery Cycle

We will be integrating the jQuery Cycle plugin for this demo.

Visit http://jquery.malsup.com/cycle/
Download and unzip the latest version to your computer.
Copy jquery.cycle.all.min.js to your site in a new /js/ directory

3. Import the Necessary Scripts

Import the jQuery library and the Cycle plugin in the of your site by adding this code:

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

The first script should be the latest version of jQuery. You can grab it off jquery.com or load it from the Google Libraries as we have done above.

The second script is the plugin source which we placed in the /js/ folder.

4. Add the Slider HTML

Swap out the current static sample_water.jpg image used in the demo site with an unordered list for slides:

<ul id="promo">
    <li><img src="images/sample_water.jpg" alt="Slide One" /></li>
    <li><img src="images/sample_hills.jpg" alt="Slide Two" /></li>
    <li><img src="images/sample_park.jpg" alt="Slide Three" /></li>
</ul>

We will just use three images to get started, note the id=”promo” attribute, we’ll use this later to tell our plugin this is the container of our slides. Since the slides are essentially just a list of related content, a UL tag is a good choice.

5. Add the Optional Slider Navigation

Underneath the unordered list of promos we added above, we will add the navigation to control the slides. The plugin will create the individual navigation links dynamically at runtime as you add and remove slides from the list.

 <div id="promonav">
    <a href="javascript:void(0);" class="next">Next Slide</a>
    <div id="promoindex"></div>
</div>

The next slide button’s class corresponds to the ‘next’ parameter we will use to advance the slides manually.

The promo index is automatically generated if the ‘pager’ parameter is set in the options. By entering it manually, we can control where it goes on the page in case you wanted it somewhere other than where the plugin places it.

6. Style the Slider

Let’s add CSS to style the slider list. Some sliders like Nivo Slider have a custom stylesheet you can download and get started but for this demo, let’s add our custom CSS directly into the end of the site’s main screen.css file.

/* Remove list formatting from Promo UL/LI */
#promo, #promo li
{
    margin:0;
    padding:0;
    list-style-type:none;
}

/* Styles for the optional promo navigation container */
#promonav
{
    padding:4px;
    background:#eee;
    border:1px solid #e0e0e0;
    margin-top:1px;
}

/* Keep the next button at the right edge */
#promonav .next
{
    float:right;
}

/* Link styles in promo navigation  */
#promonav a
{
    padding:0 3px;
    border:1px solid #eee;
    text-decoration:none;
    outline:0;
    color:#777;
}

/* Style applied on mouseover of promo navigation link(s) */
#promonav a:hover
{
    color:#000;
}
/* The index automatically gets an activeSlide class, use this to indicate the current slide */
#promoindex a.activeSlide
{
    font-weight:bold;
    background:#fff;
    border-color:#ccc;
}

7. Initialize the Plugin:

At this point, we have jQuery and the plugin imported but nothing telling the plugin which element on the page is our slider or what options to include – it needs to be initialized.

Create a file called setup.js and place it in the /js/ directory.

Import it in underneath the jQuery and Cycle scripts you imported in the area of the site earlier in the tutorial.

<script type="text/javascript" src="js/setup.js"></script>

It is important that you import jQuery, jQuery Cycle and then setup.js in that exact order or the plugin will not work.

Inside setup.js add the following code:

$(document).ready(function() {
    $('#promo').cycle({
        fx: 'scrollHorz',
        timeout:    4000,
        speed:      800,
        next: '#promonav .next',
        pager:    '#promoindex',
        height: 200,
        pause: 1
    });
});

Lets me explain what is going on in the code above.

We start out by checking if the document is ready with the document.ready, otherwise the plugin may try to modify elements on the page that are not available or ready.

The next line is telling the Cycle plugin what element we are using as a container of the items we want to cycle through. In our case, the container has an ID of promo so we enter #promo.

The items listed from fx to pause are options we are passing into the plugin. If we do not include any and simply use: $(‘#promo’).cycle(); the plugin would use its default settings. Options are listed in a comma separated list. The number and type of options vary per-plugin but for jQuery Cycle can be found athttp://jquery.malsup.com/cycle/options.html

The next and pager options refer to the navigation we built in step 5 above and can be removed if you do not want to include navigation on the slider.

Download the before and after sites to follow along.

Think Outside the Container

Sliders do not need to be large photo sliders stretching across a page of your site. Use them to display sections of rotating content such as testimonials, your latest tweets or popular blog articles in areas of the site that could benefit from the extra room.

Thanks for reading!

The Z-Layout is a great way to start just about any web design project because it addresses the core requirements for any effective site: branding, hierarchy, structure, and call to action. While the classic “Z-Layout” isn’t going to be the perfect solution for each and every website out there, it’s certainly a layout that’s effective enough to warrant inclusion in any web designer’s arsenal of layout ideas.

Attaining a better grasp of how different layouts can change user behavior is one of the central principles of creating an effective user experience.

This post marks the first in a series where we’ll be examining the wide variety of layout paradigms that exist in the world of web design. The goal: to better understand why you might choose one layout concept over another. In this series, we’ll also be looking at the “F” shaped pattern, the open layout, and some out of the box layouts that are sure to give you some great ideas. Attaining a better grasp of how different layouts can change user behavior is one of the central principles of the creating an effective user experience.

Introducing the Z-Layout

The premise of the Z-Layout is actually pretty simple: super-impose the letter Z on the page. Place the items that you want the reader to see first along the top of the Z. The eye will naturally follow the path of the Z, so the goal is to place your “call to action” at the end. All along the path you can include bits of information that build up to the call-to-action. Let’s take a look at the diagram:

Notice that we’ve numbered the key points along the path – these represent the order in which a reader is likely to view the page content. Let’s see how this translates to an actual layout:

Now let’s overlay the Z-Diagram on top of the layout:

Simple, right? There’s certainly nothing complicated about this layout – but it quickly and effectively moves the eye from Point 1 to Point 4 in a logical order – concluding with a powerful call to action. There’s still a few things that we can do to spice this layout up though… so let’s add a few things to the design:

Background separation to focus the eye movement inside the framework of our design.
A styled logo to grab the user’s attention at point #1.
A colorful “sign up” button at point #2: this will reinforce the desired eye movement.
A Featured Image Slider in the center of the page: this will separate the top section of the design from the bottom, and facilitate eye movement downward.
Icons at point #3 and along the bottom axis: this will encourage “title scanning” as the eye moves to the call to action.
A big “call to action” at point #4 – thanks to the new background separation, this feature should stand out more.

Here you can see that the new “sign up” button in the navigation stands out more; The “slider” that we’ve added to the leaderboard area helps keep the user’s attention within the center of the frame; The 2 icons next to the blocks of content in Point 3 also help to make them a bit more visually interesting. Again – this stuff is simple as it can be, but simple can be good when it comes to website design! You can layers in complexity as you please, but don’t overlook the power of a simple, effective layout.

Why it Works

The Z-Layout certainly doesn’t need to be the final concrete solution for all sites, but as I mentioned before, it’s often a great jumping off point for any design project because it tackles the 4 of the big principles of an effective design:

Branding
Hierarchy
Structure
A Call to Action

It works because most Western readers will scan a site the same way that they would scan a book – top to bottom, left to right. From this simple foundation you can pretty much go anywhere: Add multiple calls to action, shrink the height of the Z, extend it, do whatever you’d like that makes sense to the goal of the site.

Let’s take a look at a few great site designs that use the Z-Layout as the basic structure. One thing you’ll want to note in these examples is how the z-layout is able to adapt. The Call to Action may not always be the same (some sites may want to drive you to their portfolio more than they want to you “Sign Up”); the content along the path may look markedly different than our example. The thing to notice is how the storytelling aspect is carried across: 1, 2, 3, Action! By moving the eye along the Z-Path, the chances that a viewer will end up doing what you want them to do is increased.

While you view these examples, try to find the Z-path that the designer wants you to follow.

Examples of the Z-Layout in Action

Evernote looks complex at first glance, but a closer inspection reveals a z-path ending with the “download” button.

Much simpler, the Daina Reed site delivers a couple quick bits of information, then prompts a “Get in Touch” action.

The path on CodeMonkey starts at the logo and ends on “Get Started”.

It’s a bit harder to see here because of the duo-chrome palette, but the z-layout creates the general framework.

This example ends with a bright, bold price tag.

Probably one of the clearest uses of the Z-Layout, the Blue Acorn design hits each point along the path.

Campaign Monitor’s design mixes up the layout, but the 1, 2, 3, 4 steps are all intact.

Caveats Worth Mentioning

It’s important to note that the Z-Layout isn’t the only layout paradigm that’s out there. Heck, there are about as many layouts as there are letters in the alphabet. The Z-Layout is one of the principle layouts because it’s so simple to use as a foundation, but you’ll always want to trust your instincts when it’s time to make a final layout decision.

…Regardless of any specific layout design, viewers are more likely to first look at the biggest, brightest, and most highly contrasted elements on a page.

There have been a bunch of interesting studies done on eye-tracking that suggest trying to predict eye-movement across a website is about as erratic as sending 1,000 kids into a candy store. Several studies have also shown that the “F” shaped layout (which we’ll be reviewing next in this series) is more effective at controlling a viewer’s eye movement across a page. The simple truth is that, regardless of any specific layout design, viewers are more likely to first look at the biggest, brightest, and most highly contrasted elements on a page. Keep this in mind; if your goal is to guide a viewer through the Z-Layout, don’t give them any more opportunity to be distracted along the way than they already have.

Where the Z-Layout truly shines is in design projects where simplicity and a call-to-action are the most important principles. Trying to force a Z-Layout on a complicated content structure probably won’t work well, but allowing the Z-pattern to form a framework for a very basic site can bring a sense of order that can help increase your conversion rate.

Check out the “F” shaped pattern post!

Oh! Check out a list of stock-templates that use the Z-Layout here.

Congratulations! You’ve designed your site and you feel like it’s ready to be sent off to a coding team. You might have a developer in mind, or you might be comparing the popular PSD > HTML shops that are out there… you might even plan to code it all yourself. No matter what solution you decide upon, there are a few tricks that I think every designer should know when they are preparing their designs to be coded into fully functional websites.

Philo Hermans is a freelance web developer from Utrecht, The Netherlands. He has over 9 years of experience and often works with designers to turn their designs turned into fully coded websites or web applications. Philo is also a successful plugin developer on CodeCanyon, and has written frequently atNettuts+. With that introduction out of the way, let’s get started with the tips!

Tip 01: Make it “Pixel Perfect”

The theory behind creating “pixel perfect” comps can be stated like this: To us coders, what we see is what you get! Most coders won’t interpret your designs for you. If you hand over a design comp with mis-matching margins, padding, font sizes, colors, etc., most developers will code it exactly as we see it – including the errors! This can mean lots of frustration and wasted time (and money) making revisions; so save yourself a headache and send out pixel-perfect comps if you want pixel-perfect coding.

Prior to sending your design to the coding phase, take an hour or two to review it with a fine toothed comb.

The workflow solution here is simple – Prior to sending your design to the coding phase, take an hour or two to review it with a fine toothed comb. You don’t necessarily need to document your entire design (although some developers will require this), but taking care to make sure the following elements are exactly how you want them is crucial:

Margins: All margins between elements should more or less match up. If you intend all margins to be 25px, make sure that they are exactly 25px inside the design.
Padding: This is the same rule as with margins: make sure the padding inside elements is consistent with your intentions.
Font usage: Make sure that every time you use a font in the design, it’s exactly what you want to be coded – if you want “all paragraph text to be 10px Arial with 18pt line height”, make sure that each paragraph in the design is set in this exact way.
Colors: If you have an exact color in mind, whether it’s for a font, background, or anything else, make sure you use the exact hexadecimal value that you want used in coding.

It’s also worth taking a moment to set some “guidelines” inside the design files that you hand over. An easy way is to use a grid template like the 960.gs website provides. The guidelines in the grid template make sure that the widths of the elements are all precise. So instead of having a container that’s 957px wide, it will be the exact 960px that you intended.

Tip 02: Leave Notes

If you want something that’s not obvious, such as a navigation menu that has to slide down when you move your mouse to the top of the screen. Make sure that you make it clear by adding notes. There’s a few ways that you could do this (I’ve seen everything from PowerPoint documents to printouts with hand-writing on it), but my favorite way is actually pretty simple: Use the Note Tool in Photoshop (see image below). The note tool will automatically make notes show up when a developer opens up the file, and it’s easy quickly read up on what a designer has intended.

If you aren’t using Photoshop, that’s okay. Most graphics software that I’ve found (from Fireworks to Illustrator) have a similar way of adding notes. If for some reason this isn’t an option – just make your notes into a text file that you include with the files you deliver to the developer.

Tip 03: Include Designs for Interaction

The more detailed your design is in terms of interaction, the easier it is for a developer to code it. Be sure to add some examples of what your design will look like when it’s interacted with. Every design is going to be different, but the important interactions that shouldn’t be forgotten include:

Dropdown Menus
Link/Button Hover States
Image Sliders
Lightboxes
Tooltips
Form Elements

The reason behind this tip is this: if you don’t show a developer how you expect a certain interaction to look, chances are that they’ll use an unstyled generic design, which could stand out like a sore thumb. Sure, there are some coders (like me!) that will do our best to guess what you would have wanted, by why leave something so important to guesswork when it takes you just a few minutes to design it yourself?

Tip 04: Have a Script in Mind

Time is money, so if you design a website with a nice looking slider and you know exactly which script would be perfect for it, tell the developer before they start coding it from scratch! If you don’t have a particular script in mind, it’s probably worth your time to spend a couple minutes searching for whether or not one exists. Custom scripts can cost lots of time and money – and it’s a lot easier for you to create a design with a particular script in mind than it is to create a custom script from scratch to match your design.

Using pre-made scripts isn’t a bad thing! This might seem like advice meant to crush your creativity, but think of it this way: it can easily take 20x as much time to code something from scratch rather than using a pre-made piece of code. Pre-built scripts are usually easy to adapt and re-design, and there are thousands upon thousands of them available through a simple Google search. Envato even has it’s own marketplace for premium scripts if you can’t find a free one that works: CodeCanyon!

Tip 05: Get to Know the Technology You Are Designing For

Let’s imagine that you’re a designer on a major project. You spend weeks laboring over a design and finally get the approval of your client… only to find out a week later that the design is nearly impossible to code and that it’s going to cost 10x as much as the client had budgeted; All because you designed the entire site without an understanding for what is and isn’t possible with a certain technology (Flash, HTML, etc.).

One of the most important tips that I can give out is this: It’s vital that every web designer have someknowledge about the platform that they are designing for. This could be HTML, Flash, PHP, or even a device like a phone or tablet. How much you learn is up to you, but the basic understanding of how a platform works will save you a lot of heartache in the long run. Far too often I’m given a gorgeous design that isn’t practical (or affordable) to code because it hasn’t been designed with practicality in mind.

Far too often I’m given a gorgeous design that isn’t practical (or affordable) to code because it hasn’t been designed with practicality in mind.

I’m not suggesting that you limit your creativity (just about anything can be coded with enough time and energy); and I’m also not suggesting that you go out and become a coding guru (you’d put me out of a job!)… But having even a basic knowledge of the technology that you are designing for will help inform your designs with some basic rules of thumb that will make coding them easier and more affordable.

For instance: if you designed a site to be built as a static web page, it would make sense to learn a little bit about how HTML and CSS work. Having even just a basic understanding of how HTML and CSS relate to each other will be enough for you to make better decisions when you are designing. The more informed a designer is about the technology he/she is designing for, the better they will become at designing!

*Yes, HTML isn’t the only technology out there, so if you’re designing with Flash or another technology in mind, make that the focus of your research… you get it though, the architect should know how to swing a hammer, even if he never does it.

Bonus Tip : Speak Up!

You don’t need to provide a 20 page style guide for every website you design, but communicating principles that might not show up in comps can be really important to the success of any coding project. If your design has special requirements (ie: it needs to be meet certain accessibility standards, or it must be 100% compatible with IE5.1, etc.), make sure you let the coder know up front so we can plan ahead for it. Finding out major requirements AFTER the design is coded is a recipe for expensive revisions, which aren’t nearly as fun or lucrative for coders as you might imagine! Most of us would much rather move on to another exciting project rather than spend months making revisions with a frustrated client.

Conclusion

The last thing that I’ll mention is this: if you follow these tips, not only will you find that your designs become easier and more affordable to code, you’ll also probably notice that your work will improve as a result. Taking a few extra steps to ensure that you designs make sense in the practical world of web development can be the difference between a good website and an exceptional website. I hope you enjoyed this article!

How to Start Using jQuery Sliders in Your Designs

A Little Background

Popular Styles of jQuery Sliders

Standard Photo Slider

Mixed Content Slider

Gallery Style Slider

3D Block Slider

3D Space Slider

Full Size Slider

Thumbnail Slider

Horizontal Sliding Tabs / Accordion Slider

Large Tabbed Slider