How to create custom configuration in laravel

How to create custom configuration in laravel :-

All configuration files of Laravel framework stored in the app/config directory.
so if we need to create custom configuration values it would be better to keep separate our custom configuration in custom file.
so we need to create custom file in app/config directory. laravel auto read this file as a config file and will auto manage it
In this topic we are working with custom configuration in laravel and get configuration value in controller or view.

Create custom configuration in laravel :-

create a file in app/config/custom.php which have config keys and value like:-

return array(
  'my_val' => 'mysinglelue',
  'my_arr_val' => array('1', '2', '3'),
);

Now need to get these config values in view/controller so we will use Config class get() method for this
syntax :- echo Config::get('filename.arraykey');
where filename is the config file’s name, custom in our case, and key is the array key of the value you’re wanting to access.

echo Config::get('custom.my_val');

Create run time configuration in laravel :-
Configuration values which are set at run-time are will set for the current request, not be carried over to subsequent requests.

Config::set('custom.my_val', 'mysinglelue');

For more information about laravel configuration.

Boost Your Mobile E-Commerce Sales With Mobile Design Patterns

People are increasingly using their smartphones as a replacement for desktop computers, even for activities such as shopping and purchasing. And as more people move away from the desktop and onto mobile-optimized websites to shop for products and services, website creators can use established design patterns to help kickstart a mobile e-commerce project.


Having a good mobile e-commerce experience matters a lot. In fact, recent research has found that people are 67% more likely to make a purchase if a website they’ve reached on their phone is smartphone-friendly.
The power of design patterns is that they show you how other designers have solved similar problems so that you are not always reinventing the wheel. They also enable you to design your website in a way that meets the expectations that people develop from the other websites they’ve used, and they encourage you to consider design approaches that you would not have thought of on your own.
In this article, which focuses on smartphones, not tablets, we’ll look at design patterns and approaches used for mobile e-commerce functionality, including the following:

• Home pages,
• Site-wide navigation,
• Suggested search,
• Search results,
• Search filtering and sorting,
• Product pages,
• Photo galleries,
• Shopping carts,
• Checking out with an account or as a guest,
• Forms.

All the examples in this article are drawn from mobile websites that run in smartphone browsers. Most are taken from large multi-department retailers because they have large product catalogs that require a thoughtful approach to features such as search and filtering and sorting of search results. There are also countless native apps for e-commerce, and many of these patterns can be applied to them as well.

Home Pages

When visited on mobile devices, home pages are often less about content and more about helping users find what they are looking for. Common patterns are simple single-column layouts for promotions and single-column lists of links to featured website areas or product categories. Keyword search is commonly included on home pages, as are links to store locators and registration forms for promotional emails and loyalty programs.

Amazon and Macy’s both use a mix of promotional elements and list menus.

Target’s promotional content takes up more screen space than a simple list but makes a stronger visual impact. Threadless uses a dashboard pattern, which is more common in native apps than on e-commerce websites on mobile.
If shoppers are coming to your website to compare prices quickly, then a simple list pattern and search function are probably more desirable. If they are coming to explore promotions and sales, then the approach taken by Target may be more appropriate. To answer these questions, you’ll need to mine your analytics to get an idea of what consumers are doing on your website.

Site-Wide Navigation

Beyond using the home page as the main navigational hub, many websites also have navigation menus on most of their pages, usually in the header. This enables shoppers to easily get from one part of the website to another without having to return to the home page.

Lowe’s site-wide menu has icons for each option. Best Buy’s menu has a two-column layout for navigation and has buttons instead of list items. Lowe’s menu covers the page when it appears, while Best Buy’s pushes the page’s content down the screen.

Macy’s has a site-wide menu that contains submenu options. CVS has a two-column menu with an icon for each option. In both cases, the menu is displayed at the top of the page.
As you can see from the screenshots above, there are several ways to design a site-wide menu. Lowe’s design is simple, and the icons add a nice bit of visual polish. The fact that the rest of the page fades into the background when the user chooses to use the navigation helps users focus on their current tasks. CVS seems cluttered in comparison, with two columns of options, each item accompanied by an icon. CVS’ menu also places a lot of tap targets close to each other, which can present usability problems on touchscreens.
It’s interesting that large e-commerce websites usually don’t have many navigation options displayed at once. They try to balance the visual design of the navigation with the information architecture of your website, carefully considering the number of items that should be in the global navigation. Use website analytics to see which menu options shoppers click to help you determine what should be in the menu. Conducting A/B testing and usability tests of different designs to see whether one has too many options and overwhelms people is not just recommended but necessary to find the optimal solution — for your business and for your users.

Suggested Search

Suggested search, also known as type-ahead or autocomplete, displays potential results as soon as a shopper has typed in a few characters. For commonly searched terms, this can be a real convenience to shoppers, especially if the search term is long. One limitation of suggested search is that tapping a wrong character on a virtual keyboard is easy, which would change the suggested results. Showing common “correct” results instead might be useful. Also, consider using an improved Auto-Suggest pattern to reduce the amount of typing needed to enter queries, and utilizes slower mobile bandwidth in the most efficient manner.

Typing “d-r-a-f” into the search box on Office Depot’s website brings several possible results. And mistyping “d-r-a-g” instead of “d-r-a-f” leads to unexpected results for someone who is trying to find drafting supplies. Tapping a letter adjacent to the intended one is a common problem on virtual keyboards.
While designers can’t do anything about people mistyping queries, they can ensure there are other ways to get to product pages from mistyped results, such as drill-down lists for product categories or a site-wide menu of top-level categories. Website managers can also fine-tune their search functionality by suggesting results for “draft” from queries typed as “dragt.” Your ability to do this will depend on the search engine technology you are using.

Search Results

Two primary patterns are used for search results on mobile e-commerce websites: table display and grid display. Tables show a thumbnail photo and some basic information such as product name and price in a compact row. Grids show larger images with less descriptive information. Some websites allow shoppers to switch between the two views.

Zappos shows its search results in a grid to allow for larger photos of its products, a sensible choice in a market like shoe sales. Walgreens has a table that includes buttons for finding item in stores and adding items to a shopping cart.

OfficeMax asks shoppers to select a subcategory for broad search terms like “Paper.” Once a subcategory has been selected, results are displayed as a table. Searches for terms like “Scissors,” which have fewer subcategories, takes shoppers directly to the table view of the results.
Having shoppers select a subcategory can be problematic if it’s not clear where a product fits in a complicated hierarchy. In the OfficeMax example above, someone looking for 8.5 × 11-inch paper for their home printer might not know whether to look in “Copy & multipurpose paper” or “Laser paper.” A better approach might be to list subcategories under search filters, where they can be presented in context with other filters, like “color” and “size.” Regular testing (every 4–6 weeks) with representative users and commonly searched-for terms and top-selling products could give you insight into which approach is better. A/B testing could also reveal whether one approach gets more people to a product page and leads to a higher conversion rate.

Visitors to Gap’s website see a table display by default, with the option to see a grid display. Notice that Gap also retains the search term in the keyword field.
Gap lets shoppers choose how to view search results, allowing them to switch from an easy-to-scan list to a view with larger photos. Gap could have retained some product information though — e.g. prices — in its grid display (as Zappo’s does). Details such as price and color make it easier for a shopper to determine which product they want to learn more about.
Retaining the term in the field also reminds shoppers what they searched for and lets them easily narrow the results by adding another word (like “red”) to the search term.
Searching Gap for “men’s tshirts” takes shoppers to a page with no results (not shown), and without linking to search results for “men’s t-shirts.” Gap could improve its search by adding a “Did you mean?”-type question to the results page. Google handles this scenario by listing “mens t shirts” as a suggested query and then presenting results for “men’s t-shirts” if that suggestion is ignored.

Sorting Results

Sorting results helps shoppers organize a large set of results along a continuum of values, usually numerical ones such as price and consumer rating. Common interface patterns for sorting are buttons and <select> menus.

Walmart lets shoppers select one of three buttons to sort results. Sears uses a similar approach, but with a “segmented control”. JavaScript frameworks such as jQuery Mobile are making these app-like interface widgets more readily available to designers.

J.C. Penney allows for sorting through a <select> menu that is slightly customized in style, while Eddie Bauer uses the browser’s default <select> menu. Both trigger the browser’s native control for <select> menus (in these examples, the iPhone picker).
The size and generous spacing between Walmart’s buttons make for better tap targets; although, to be fair, Walmart has only three options, while Sears has four. Sears’ inclusion of an “All” button allows shoppers to get back to the original results page if they don’t find what they want after having sorted. Using a <select> menu is a quite safe choice because it is supported by modern mobile browsers and allows for longer lists of sorting options. However, it also takes a lot of valuable space. These are the types of design trade-offs that can be evaluated with regular testing.

Filtering Results

Filters enable shoppers to narrow their results based on one or more attributes, like color, brand and size. Filters are usually organized by type (called facets), with several values appearing under each facet (for example, color is a facet, and red is a facet value). Common interface patterns for displaying filtering options are <select> menus, drop-down lists and accordion displays. Filtering can be applied when one or more values are selected from within a facet. While allowing a single search to include values from more than one facet is technically possible, it comes with a higher interaction cost and could lead to no results (for example, cross-training athletic shoes that cost less than $75).

CVS uses <select> menus in its “Refine” tab for filtering. Selecting a menu option will immediately filter the results. J.C. Penney offers a drop-down list for selecting filters and indicates the number of products that match a filter value. J.C. Penney also allows multiple values from a single facet to be selected on one screen, the trade-off being that the shopper has to tap the “Apply” button.

Kohl’s uses an accordion to expose a set of checkboxes for each filter type. Threadless exposes the values for all of its search facets as buttons. On both websites, selecting a single filter value will immediately filter the results.
Showing the number of items available under each facet value offers greater transparency into what shoppers will get with each selection. Threadless’ approach of showing all available facet values takes up the entire screen, but it offers consumers an at-a-glance view of all filtering choices available to them. Whether you take this approach or use an accordion like Kohl’s will likely depend on how many facet values are present for a given category of products. If your catalog has a high degree of variability in the number of facet values for each category, then you will need to experiment to find the right design. You could optimize the filtering interface for those product categories for which shoppers use filters the most.

Product Pages

Product pages are where e-commerce websites really showcase their products in detail. They are not a “pattern” in the true sense of the word, but rather a collection of patterns that include elements such as tabs, accordions and photo galleries. Two common approaches to product pages are one long page with all of a product’s information or a page with tabs or accordions to allow for progressive disclosure of information as shoppers need it.

Samsung and Dell progressively disclose content on their product pages, which have a lot of information for shoppers. Samsung uses accordions to expose chunks of information, while Dell uses tabs.

Cabela’s and Office Depot both use a single long page to display product information. This approach requires more swiping up and down to get to information, but it frees shoppers from having to work with small tabs or manipulate accordion headers. Your choice will depend on the amount of information associated with a product and how the information can be broken down into logical sections.
Long product pages require more scrolling than pages broken into manageable chunks with tabs or accordions. They also require shoppers to put more effort into finding the specific information they are seeking. In my own usability testing, I’ve heard people express preferences for both approaches, but they seem to have an easier time working with a page broken into logical chunks. If you take this approach, make sure any content not initially displayed renders quickly when the shopper taps on the tab or accordion.
The obvious way to accomplish this is to load all of the page’s content at once so that the hidden content appears almost instantly. This approach has an advantage for when the user’s network connection drops while they are switching between sections. The big downside is that all product information has to be downloaded, whether it is actually viewed or not; this adds more load to your servers and uses more of the shopper’s data plan, which could be metered.

Photo Galleries

Photo galleries are particularly critical in e-commerce industries such as apparel and consumer electronics. You might not need to see a wrench from three different angles when shopping at Home Depot, but more images are better when looking for clothes, shoes or a high-end smartphone or tablet. A few commonly used patterns are the swipeable gallery, “double-tap to zoom”, and thumbnails for selecting photos.

Payless uses a swipeable gallery to show its products from different angles. Users can also double-tap to zoom in to see details like stitching and eyelets.
Payless wisely keeps its “Tap tap to zoom” call-out on the screen for several seconds, giving the shopper time to understand how to navigate the page and still notice it. The ability to zoom in to a photo to view a product’s details is critical for apparel and shoes.

Dockers (above left) has a swipeable photo gallery, with double-tap to zoom in to details, and shoppers can see a product in different colors. Levi’s (above right) takes a similar approach, with the addition of thumbnails to indicate the photo angles in the gallery. Selecting a new color on Dockers’ website causes a full-page refresh, while Levi’s does not.
Levi’s keeps most of the page from refreshing when the shopper changes colors, which at first seems like a better user experience. But, from a brief review of both websites on the same date and at the same time of day, Dockers’ full-page refreshes appeared to run faster from the time I tapped a color swatch to the moment the page with the new photo appeared. Levi’s slowness could have been caused by the five thumbnails needing to be refreshed, in addition to the main photo, or other unseen factors, such as a heavy traffic load. Each approach has its trade-offs.

Samsung (above left) and Dell (above right) both use swipeable photo galleries for their products. Samsung incorporates the gallery into an accordion on its product page, while Dell uses a separate page.
Samsung’s approach seems more user-friendly because it has fewer pages to navigate. Both Samsung and Dell go with large high-resolution photos, because apparently image quality is critical when looking at expensive products. One advantage to Dell’s approach is that it allows shoppers to focus on the photos themselves without any distracting page content.

Shopping Carts

Shopping carts usually display products using a table pattern. Besides displaying the contents to be purchased, they also offer additional functionality, such as the ability to save an order, to save a product to a favorites or wish list, to remove products or update quantities, to choose shipping or in-store pickup, to apply promotional or coupon codes, and to check out. Once a product has been added, a shopping cart is commonly reached through an icon in the website’s header or an option in the global navigation menu.

Each table row in the Lowe’s shopping cart (above left) lets the user remove the corresponding product from their cart, and it includes options for shipping or in-store pickup. Bed Bath & Beyond (above right) also allows items to be removed; product quantities may be changed for each item in the table, and a single button farther down updates the page.

Crate & Barrel (above left) has table rows that allow users to remove products, save to favorites and update quantities. Each row also includes shipping information such as cost and delivery time. Payless (above right) also allows consumers to update quantities and remove items; its cart also offers a choice of delivery options, including having the product sent to a Payless store (not shown).
Shopping carts should provide maximum utility because shoppers are close to the final point of purchase. Allowing shoppers to change quantities, remove items and apply promotional or coupon codes without having to go to another page is critical to getting them through the purchasing funnel quickly. If you feel this adds too much content to the page, you can use progressive disclosure to hide some content (such as promo code fields) behind accordions until it is needed.

Checkout

Checkout is more of a process than a pattern, although form patterns can be applied to checkout flows. Many e-commerce websites allow customers who use their websites on mobile to check out with an existing account or as a guest. For people who already have an account, the checkout process is greatly streamlined by using existing payment and shipping information.

Crutchfield and Nordstrom both allow customers to check out as guests or by using their existing account. Both allow mobile shoppers who have checked out as guests to create an account after placing their order, and both support password resetting.

Amazon asks for an email address on the first page of the checkout, whether the shopper has an account or is checking out as a guest. The experience is very much the same like for users of the website on desktop. Target offers options on the mobile website to sign in with an account, to check out as a guest or to create an account. Both support password resetting.
Allowing customers to either sign in or check out as a guest and to reset their password is a must for mobile e-commerce websites. Also, consider inviting shoppers to create an account on their phone after placing their order, because they have already given you enough information (except for a password) to do so. This could make guests more likely to create an account because the effort should be minimal at this point.
The “Create a Target.com account” button could lead to some abandoned carts if shoppers go down that path and decide it’s too much effort. Confirming the order first and then inviting registration on the invoice page might be better. Limiting the initial checkout screen to two choices could improve conversions because the shopper will have fewer decisions to make while working on a small screen. Fewer choices in critical tasks such as check out usually works better.

Forms

Forms are most commonly used in mobile e-commerce for searching, checking out, registering, and entering coupon and promotional codes. Be aware of a few good practices when designing forms for the small screen:

• Place form labels above input fields so that they don’t shift off screen when the user zooms into the input.
• Use HTML5 input types to display the appropriate keyboard for the field being used. For email addresses, use type="email". For numeric fields, like ZIP codes, use type="number" or type="tel" (the latter will display a numeric keypad with larger buttons).
• Make fields mandatory only when absolutely necessary. This will reduce friction in getting customers through the checkout process.

The best way to handle forms on a smartphone is to use as few of them as possible. You can use geo-location to suggest the shopper’s ZIP code, and you can allow customers to check out using the account information they entered earlier when using your site. Remember that the best form is the one the shopper never has to complete.

CVS (above left) doesn’t bring up a numeric keyboard when the user taps the ZIP code field on the checkout page. This requires one unnecessary tap from the shopper to get the correct keyboard. CVS also aligns labels to the left of form fields, where they could get pushed off screen if the user zooms into a field. Crate & Barrel (above right) has a much more mobile-friendly form. It brings up the large numeric keypad when someone taps the ZIP code field. It also top-aligns form labels so that they don’t slide off the page.
Remember that forms are how shoppers complete their transactions on websites. Pay special attention to them, and do everything you can to reduce the interaction cost of completing them. Sometimes it might even mean trying out something entirely different. For example, Typeform recently suggested a new kind of experience for more responsive, simple and user-friendly Web forms. The idea is to ask just one question at a time, but display it prominently, allowing users to type the hotkeys when filling in the form. This is not the option that would work in every situation, but for some forms it might be quite helpful.

Conclusion

With the increasing importance of mobile e-commerce as a source of revenue to retailers, mobile-optimized websites are offering many of the features that shoppers want and expect based on their desktop shopping experiences. And as the research by Sterling Brands and SmithGeiger shows, mobile consumers are more willing to purchase when the website is mobile-friendly.
By using existing design patterns, you can begin to explore different options to more quickly get your e-commerce website ready for the small screen. But don’t stop with existing patterns; use them as a jumping-off point to explore a design and to help you consider options you might not have thought of. And as browser capabilities increase, consider bringing interface design and interaction patterns from native apps into your browser-based smartphone shopping experience.

Resources

• “UI Patterns for iOS, Android and More,” Theresa Neil, Mobile Design Pattern Gallery
• Designing Mobile Interfaces: Patterns for Interaction Design, Steven Hoober and Eric Berkman
• “Design Patterns for Mobile Faceted Search: Part 1,” Greg Nudelman, UX Matters
• “Design Patterns for Mobile Faceted Search: Part 2,” Greg Nudelman, UX Matters
• Search Patterns: Design for Discovery, Peter Morville and Jeffery Callender
• “Better Mobile Form Design,” Luke Wroblewski
• “A Form of Madness,” Mark Pilgrim, Dive Into HTML5

Create a diagonal rotation with CSS transitions and jQuery

This article shows us how to turn an unordered list into a rotating diagonal portfolio with CSS3 and jQuery.

One of the hardest tasks any designer undertakes is the creation of his or her own site. It has to be interesting, informative, unique and show the work well. All this while satisfying the toughest critic, yourself.  What set it apart for me was a combination of simple design, extreme focus and technical interest.

I wanted to spend some time on an element that had some technical challenge and integrated well with the site. The diagonal rotating portfolio brought the excitement of taking on a new challenge and paired it with an overall fun way to display content without sacrificing usability. One of the restraints removed from a personal site is dealing with older browsers. Your past work speaks to your ability to code for the IE7s of the world, so your site can really experiment with what’s fresh.  So, let’s dig in and create a diagonal rotation with CSS3 and jQuery.

Semantics and setup

We start with minimal markup. Always make your markup as simple as possible; don’t duplicate elements unless absolutely necessary. Markup should be a semantic outline of your content. With that in mind, here’s all the markup we need:

1. <ul class="portfolio">
2.         <li><img src="img/portfolio-1.jpg" alt="Image 1"></li>
3.         <li><img src="img/portfolio-2.jpg" alt="Image 2"></li>
4.         <li class="feature"><img src="img/portfolio-3.jpg" alt="Image 3"></li>
5.         <li><img src="img/portfolio-4.jpg" alt="Image 4"></li>
6.         <li><img src="img/portfolio-5.jpg" alt="Image 5"></li>
7. </ul>

There is one simple unordered list of images for the portfolio. A class of “feature” is applied to the list item housing the current highlighted image. That’s it for the HTML, let’s give this list some style.

Create only the large form of your images and use CSS to scale down. In this case all the images are 600 x 300.

15. }
16.  
17.         ul.portfolio li.feature img{
18.                 height: 300px;
19.                 width: 600px;
20.         }

This is applying a series of styles to the list item with the “feature” class to override the inherited styles, and also create the other end of the transition. The negative rotation is canceling out the initial rotation of the list. Setting a high z-index will place this image above the other images in the list, don’t forget the relative positioning to help z-index. We’re also increasing the opacity and size. The result is a really unique list of images ready for action.

Scripting

Now that we have everything set up and looking nice, it’s time to get moving. Take time to set up jQuery, then we’re ready to go. Since the transitions are already coded into the CSS, we only need a small amount of jQuery to make this work.

Our transitions are dependent on the feature class, so we use jQuery to switch classes on click. Here’s the code:

1. $(document).ready(function(){
2.        
3.         $('.portfolio li').click(function() {
4.                
5.                 var new_feature = $(this);
6.                
7.                 if (!new_feature.hasClass('feature')){
8.                
9.                         $('li.feature').removeClass('feature');
10.                
11.                         setTimeout(function(){
12.  
13.                                 new_feature.addClass('feature');
14.  
15.                         }, 500);
16.                 }
17.         });
18. });

We start with the click function. Once a list item is clicked, we want to make sure it isn’t already the current li. After we know it’s a new one, we remove the feature class from the old list item. This causes a transition to occur shrinking and rotating the element back into the structure of the list.

The setTimeout function allows the transitions to occur sequentially as opposed to simultaneously. Once the first event is complete, the clicked li begins to grow and rotate into the values of the feature class. The change in features is complete.

Once you get the basics of the transitions down you can experiment with other properties. You can fade in information about the feature elements or add in next and previous buttons, even apply keyboard shortcuts. The combination of jQuery and CSS3 is a strong partnerships that leaves the door for creativity wide open.

This is just a small step into the world of CSS transitions. Just in the past week I’ve seen amazing examples like beta.theexpressiveweb.com. It’s a great time to be involved in front-end development. I would love to see what you come up with, don’t hesitate to email your experiments.

Tripping the DOM fantastic with jQuery

• Knowledge needed: Basic HTML, basic JavaScript and jQuery
• Requires: jQuery library, text editor and web browser

This article explains how to work with elements in your markup that are either ancestors or descendants of an HTML element that you have selected. Here he focuses on the DOM tree traversal methods

Don’t get me wrong, I can dance. But it’s certainly not the thing of beauty you see in the old Hollywood musicals – unless you’re watching me dance through the DOM (the Document Object Model) with jQuery.
There are many times when you need to be able to work with elements in your markup that are either ancestors (parents, grandparents, etc) or descendants (children, grandchildren, etc) of an HTML element that you have selected. The concept is that you’re moving up, down and sideways in the family tree, the DOM, from the limb (the current element) on which you’re standing. This movement is known as traversing the DOM.
jQuery offers several categories of methods that will allow you to traverse the DOM with ease and grace to get to the elements that you need to work with when coding your frontend interfaces. The jQuery library breaks up the library like this:

• Miscellaneous traversing methods include add(), andSelf(), contents(), and end(): api.jquery.com/category/traversing/miscellaneous-traversal/
• Filtering methods are comprised of eq(), filter(), first(), has(), is(), last(), map(), not() and slice(): api.jquery.com/category/traversing/filtering/
• Tree traversal, which is the largest category of traversal methods. Home to 14 functions including children(), closest(), find(), next(), nextAll(), nextUntil(), offsetParent(), parent(), parents(), parentsUntil(), prev(), prevAll(), prevUntil() and siblings(): api.jquery.com/category/traversing/tree-traversal/

For this article I will focus on the tree traversal methods.

Anatomy of a DOM tree

The DOM ensures that everything is placed within a tree-like hierarchy so that all of your virtual limb-to-limb movement is easy to visualise and to perform. Have a look at the following illustration to see an example of the branches that might be on your DOM tree.

The branches should look pretty familiar to you. There is a div that contains an unordered list, another div that contains more divs, a table and another div containing paragraphs and images. Let’s start putting jQuery’s tree traversal methods to work to move around this tree.

Up and down we go

With no further markup, including ids or classes, and throwing in a couple of the other filter methods you can traverse the tree quite easily.
(NOTE: all examples were tested at jsfiddle.net).
The markup for the unordered list looks like this:

1. <div>
2.     <ul>
3.         <li><a href="#">one</a></li>
4.         <li><a href="#">two</a></li>
5.         <li><a href="#">three</a></li>
6.     </ul>
7. </div>

For this exercise the goal is to click a link in the unordered list and change the background colour of all of the ancestors. Here is the jQuery code to perform that action:

1. $('a').click(function(e){
2.     if(0 == $(this).parent().index()){
3.         $(this).parents().css('background-color', '#CCFFCC');
4.     }else if(1 == $(this).parent().index()){
5.         $(this).parents().css('background-color', '#99CC99');
6.     }else if(2 == $(this).parent().index()){
7.         $(this).parents().css('background-color', '#669966');
8.     }
9. });

Since you want each link to have a specific action, you need to determine where it is in relation to the rest of the tree. Each anchor tag is a direct descendant of a list item, so the anchor tag in this case will always have an index value of 0. That index value does not uniquely identify the link in this case but the direct ancestor, the parent, of the link is a member of a group of list items. The DOM makes sure that each of these list items has a unique index identity as descendants of the unordered list element. Look at the annotated markup:

1. <div>
2.     <ul>
3.         <li><a href="#">one</a></li> // li is index 0 of ul
4.         <li><a href="#">two</a></li> // li is index 1 of ul
5.         <li><a href="#">three</a></li> // li is index 2 of ul
6.     </ul>
7. </div>

Using $(this).parent().index() causes the anchor tag to locate its parent and then determine the parent’s index value.
Next you want to apply some CSS properties to all of the ancestors of the anchor tag. By simply specifying the parents() method, jQuery will apply the change as called for. Head over to jsfiddle.net/jayblanchard/8PqvJ/ and check out the results.
You’ll no doubt notice that things did not necessarily go as you expected. If you clicked all three links in order from top to bottom you got the end result as shown in the next illustration.

In order to understand what occurred all you have to do is look at all of the ancestors of the anchor tag, which are the list item, the unordered list, the div, the body and the HTML elements. Without defining a selector for the parents() method you get all of the parents. Clicking on the next indexed item only changes the background colour of the parents of that anchor tag and this behaviour continues as each of the links are clicked. Since the other anchor tags and list items are not in the parents chain they are not changed.
You can limit the climb up the ancestor tree using jQuery’s parentsUntil() method. Change the jQuery code from the previous example to the following:

1. $('a').click(function(e){
2.     if(0 == $(this).parent().index()){
3.         $(this).parentsUntil('ul').css('background-color', '#CCFFCC');
4.     }else if(1 == $(this).parent().index()){
5.         $(this).parentsUntil('ul').css('background-color', '#99CC99');
6.     }else if(2 == $(this).parent().index()){
7.         $(this).parentsUntil('ul').css('background-color', '#669966');
8.     }
9. });

The CSS is applied only to the direct parent (yes – I know there is a much more succinct way to do this!) of the clicked element. You can see this in action here: jsfiddle.net/jayblanchard/uTakJ/.
Another way to find a particular ancestor is to use jQuery’s closest() method. The closest() method begins at the currently selected element and works its way up the ancestor chain until it finds the first item matching the selector.

1. $('a').click(function(e){
2.     e.preventDefault();
3.     $(this).closest('li').css('background-color', '#999966');
4. });

Still using the unordered list created earlier, the closest() method used here will start with the anchor tag and search up the ancestor tree until it finds a list item.
What about descendants? They’re just as easy to get to with jQuery’s traversal methods. The following markup is applied to the table from our tree:

1. <table>
2.     <tr>
3.         <td>Row 1 Cell 1</td>
4.         <td>Row 1 Cell 2</td>
5.     </tr>
6.     <tr>
7.         <td>Row 2 Cell 1</td>
8.         <td>Row 2 Cell 2</td>
9.     </tr>
10. </table>

If you want all of the children of the table, the rows (tr) to have a style applied to them you select them like this:

1. $('table').children().css('background-color', '#FFFF00');

The children are always one-level down from the parent element, the immediate children. If you want to work with descendants further down the line you should use the find() method. For instance if you want to change the background colour of last cells in each row you could write the following:

1. $('tr').find('td:last').css('background-color', '#FFFF00');

The find() method was used to locate all table cells and the jQuery filter :last was used to make sure that only the last cell in row had the CSS applied to it. Changing the selector from table row (tr) to table yields an entirely different result as seen in the next illustration:

Now that you can find ancestor and descendant elements, let’s turn our focus to finding those elements next to each other.

Brothers and sisters

jQuery exposes a couple of methods for working with the brothers and sisters of DOM elements. The most commonly used of these methods is the siblings() method. Using this method will identify all of the siblings of a selected element. For this example I expanded the unordered list and used the following jQuery to change the background colour of the siblings in question:

1. $('a').click(function(e){
2.     e.preventDefault();
3.     $(this).parent().siblings().css('background-color', '#666699');
4. });

The anchor tag has no siblings but its parent element, the list item, does. Clicking on the link containing the word ‘two’ yields the following result:

Each of the siblings of the list item have had their CSS modified.
When working with an element’s siblings you can think of them just as you would any group of brothers and sisters. Some children (elements) are older than others.
If you want to select siblings that come before the current child, the older children, you can use the prev(), prevAll() and prevUntil() jQuery methods. As you might imagine, the prev() method chooses the sibling that immediately precedes the selected child. The prevAll() method encompasses all of the older children. You also have the ability to choose a group of older children up to a certain point (just as you did with parentsUntil()) with prevUntil().
Siblings younger than the selected child element can be defined with the next(), nextAll() and nextUntil().

More on jQuery’s traversal methods

I encourage you to have a look at the other traversal methods, including some filters that are very useful, offered by the jQuery library. You can find the documentation at api.jquery.com/category/traversing/.

General Process for Producing a Website

When it comes to building a website, it helps to have a process to follow, especially if you are just getting started as a web designer. Good guidelines can help you work better by keeping forgetfulness to a minimum.
Every designer or company will develop unique components to their web design process over time, but the basics remain the same: learn, plan, design, code, launch and maintain.

In this article, I will share my process for designing a website.

Before we get into it, let me first share two parallel processes that should be taking place throughout your design process.
The first thing you should be doing continuously is seeking feedback. You’ll save yourself a lot of wasted time and effort by getting feedback at regular intervals.
The second thing you should do continuously is testing. Test the heck out of everything as you go to avoid mega-headaches down the road.
With that said, let’s get started!

1. Learn

What do you think is the most important step of the web design process? Planning? Designing? Coding?
Guess again.
It shouldn’t surprise you that learning — discovering and understanding what you need to build in the first place — is the most important part of the entire website design process.
Why? It’s simple, really. The more you know about what you need to accomplish, the better your chances will be of creating a successful website.
Think of it like this: If you are an archer, don’t you need to know where to aim your arrow? That’s what the target is for. The little red dot in the middle is the bullseye. Since it’s smaller, it’s harder to hit, but even if you aim for it and miss, you’re sure to get closer than if you aimed your arrow up into the air and hoped for a random direct hit.

So how can you score a bullseye as a web designer? Before you go any further, you need to define what hitting the bullseye in your project means.
As a web designer, hitting the bullseye is giving your clients what they want — it’s what they are paying you for.
What clients want varies widely on a case-by-case basis. Since you aren’t a mind reader (no, you’re not), you need to proactively find out what they want.
In some cases, they may not even know what they want, and in other cases, they may have a hard time verbalizing what they have envisioned because they don’t know industry terms and concepts like CSS, Ajax, or relational databases.

The Creative Brief

Fortunately, there’s a tool web designers can use to easily gather this information. It’s called a creative brief. A creative brief is basically a series of questions that you ask your clients so that you can understand the scope and goals of a project.
You can ask these questions during a face-to-face meeting or a phone call — or you can simply make a web form available on your website that handles the answers of your clients.
You should obtain this information in the way you and your clients are most comfortable with — but whatever you do, don’t skip the creative brief because it will become the lifeblood of your project.
What kind of questions should you ask in your creative brief? At the minimum, find out:

• The client’s target audience
• Their primary and secondary goals for the website
• Current branding characteristics
• Budget
• Deadlines they need to meet

I also like asking clients what websites they like and don’t like to give me a visual idea of where I should be heading and what I should avoid.
You might also want to find out if they need an online store, if they already have a logo (if not, you can make one for them), who will be responsible for maintaining the site once it goes live, and so forth.
You might have unique questions that you will want to include; use them and don’t be afraid to tailor your questions on a per-project basis.

2. Plan

Once you’ve learned what you need to build, it’s time to start planning how you are going to make it happen. Before you can start designing a website, you need to know exactly what, and how, to design it in the first place — and it all starts with creating a design strategy.
Your design strategy for each website you make should be handcrafted to fit the client’s vision (if you are designing a site for yourself, then you would qualify as the client).
So what factors will shape your design strategy? The creative brief will act as the foundation of your plan by providing you with some basic information, such as what your timeframes are and who the target audience of the website is.
It’s especially important to know your audience because it will affect where and how the site gets viewed. For example, will you also need to create a mobile version or an iPad-specific version that works with touch?

Research and Note-Taking

Whatever gaps are left in the overall strategic picture will need to be filled by doing some research of your own. Now is the time to visit competing websites and see what types of designs are already out there in the target market so you will know how to differentiate your own design.
See who comes up first in a Google search and try to find out why. Within 10 minutes, you should be able to start piecing together the beginnings of your design plan.
While you are researching, you’ll also start brainstorming about what colors to use, where to place the call(s)-to-action, what kind of fonts you should use and other similar details.
At this point, you should also be taking notes, snapping screenshots and starting a mood board.

Sketching and Mock-Up

Next, it’s time to create a mock-up and start letting your ideas take on more of a tangible state. I like to start by sketching out my ideas on a regular old piece of paper, as do many other web designers.
Other people prefer to use a wireframing tool like OmniGraffle. During this phase, not only will you want to start thinking seriously about the layout of the site, but also the structure of your site and how the navigation will shape up.
This is your chance to see what works best and a good place to experiment with different ideas before actually hitting Photoshop or Illustrator to create something more concrete.

Pick Your Tools

This part of the process is also the perfect opportunity to assess which tools you will need to use. You absolutely should not fall into a pattern of using a predetermined set of tools for each site you create. It’s a potentially hazardous practice for everyone involved, including the site’s end users and the client (not to mention how monotonous your portfolio would look).
Put some real thought into what content management system would work the best considering the site’s goals, whether or not including Flash at all is a good idea, and so on.

3. Design

Now I know there are many web designers out there who like to skip directly to the design stage without giving a second thought to learning or planning, but design is more than just the act of creating. You want to actually create something good and useful and you just can’t do that without first doing some preliminary work before starting to design.
If you’ve already done the legwork of learning and planning, it makes the actual designing much easier. When you don’t have to worry about the little details, it really opens up a whole new level of effectiveness and productivity because you can focus on more important things.
Once you are ready to start designing, keep in mind that you need to design more than just a home page. You’ll need a design for the sub-pages of your site as well. It can sometimes be easy to design a home page concept, slice it up and start coding only to get to sub-pages and have no direction. You may also need to design a mobile or iPad version of your site as well.
The design phase itself is straightforward. Just open up Photoshop (or your graphics creation tool of choice) and start bringing your mock-up to life. Sweat the details. Make it pixel perfect. Even if you feel like the project you are working on is more boring that staring at a wall for 24 hours straight, put your all into it. Your client will notice and you’ll be proud of the work you did.
You’ll have to decide at this point whether you want to use real content in your design or some dummy text (e.g. Lorem Ipsum). There are plenty of fans in either camp, but I personally prefer to use real copy and photos if they are available to make it as close to reality as possible.
During the design phase, it is incredibly important to seek feedback often to make sure all specified requirements have been met. If the client wants to make changes, now is the time to do it before the design is sliced and coded, making it ten times more difficult to make what would be a simple change if you were to do it during the design phase.

4. Code

Once you have a killer design, you’ll need to turn it into a real, live website. A safe bet, no matter what content management system you are going to be working with, is to start with a generic HTML and CSS template.

Start with a Base Template

If you’re like me, you’ve already got a set of starter HTML and CSS files ready to go that are already linked to each other and already contain some basic starter code (such as a CSS reset).
If you’re not like me and don’t have these generic files at the ready, go ahead and create some that you can reuse at this stage in the future.
Before you go any further, it’s a good idea to go ahead and add in your title, descriptions and meta tags, or at least make a note of what they should be if you are going to be using a content management system later on.

Lay Out the Main Sections and Content

Begin carving up your HTML/CSS by inserting the major sections (your main

s) for your header, footer and content area.
Next, begin adding your text and image content. The goal is to keep your markup as semantic as possible so that each element is meaningful.
Avoid divitis — the act of utilizing too many divs. For example, you don’t need a div just to contain the logo. Try using an

or a instead — it can be styled exactly the same way (e.g. making them into a block elements using the display CSS property).

Validate and Test

Don’t forget to make sure your code validates by using the validation tool provided by the W3C (but also understand that validation tools have shortcomings).
You’ll also need to do some browser testing to make sure the site looks and acts as intended and provides a uniform brand experience no matter how a user accesses it. You can use a tool like Browsershots if you have limited access to different types of computers.
Use Firebug and YSlow to debug your site and make sure your work is running at an optimal speed.
One last thing: don’t forget to implement Google Analytics or your favorite analytics alternative so you won’t miss out on tracking the stats during the big launch.

5. Launch

When you’ve finally perfected the site, it’s time to release it to the public. Launching can mean different things to different people, mostly because there are various content management systems and development circumstances out there.
For instance, if you are redesigning a site that uses a content management system or publishing platform, your launch may be as simple as applying a new theme.
If you are designing a brand new site in a sandbox or local development environment, then "going live" means FTP’ing your files to the production server.

6. Maintain

During your planning phase, you should have determined who will be in charge of site maintenance. If a client is unable to maintain the site, you may want to suggest that they hire you on a regular or as-needed basis to manage and perform maintenance tasks.
During the hand-off/closeout of the project, it might also help to provide some guidelines and basic training to your client to make sure they understand how to properly maintain the site.

Why developers cannot afford to ignore design

We developers sometimes take design for granted. And let’s be honest: who doesn’t hate taking things for granted.
Some say we will never truly appreciate the importance of design until we have been trained in the essence of design and beauty. Well, I say BS to that. I want to break us our of this box and clear away the cobwebs from our code-oriented minds.
Development, by its very nature, reflects the knowledge base of the person in charge. And the skills required to develop such a knowledge base can leave us in the dark about design. Developers often sweep design under the rug in order to be able to learn the intricacies of PHP and MySQL.
But as someone who has been writing code for 13 years, I can tell you it doesn’t have to be this way. In fact, many of the world’s greatest developers have an excellent grasp of UI and UX and of what their users want. The best way to get a handle on it is to figure out what you want in a UI.

People in business say to start with what you know, and this works equally well in design. The best designers aren’t the ones who know a thousand fonts (although that helps), but rather who know exactly what will “feel” best on the page.
To get started, simply go to a website that you feel “would be better if” and write down all of your ideas. Before you know it, you will be debugging design patterns and UIs.
This is just a start. But after doing it a few times, you’ll start to understand why these factors are so important. You might even discover that you have these questions about more websites than you had imagined. Below are a few critical reasons why design is important, courtesy of two great competitors.

Google Video: the case for strategic design

Google has been known to solve problems by throwing development resources at them for months. It analyzed data patterns in order to improve the UI of its Google Video project. This was absolutely detrimental to the functioning of the product, as evidenced by its canceling of the service. Let’s look back at Google Video to see why it didn’t work.
It started out simple enough, with that minimal design that Google is so famous for. Even the search wasn’t too bad, with the classic Google row streaming down the page.
This changed when Google found that people hated those early horizontal rows. It restructured the page to try to make it more enjoyable. In fact, it took a page from YouTube’s book by adding links to related videos on the side.
This is a key problem of developers who aren’t sensitive to design: copying or borrowing elements from other successful products. “If it worked for them, it will work for us” is one of the most dangerous attitudes to have in web design. There were hundreds of Digg clones over the years, but only one stands out: Reddit. There were hundreds of YouTube clones over the years, but only one stands out: Vimeo.
Products gain acceptance not by ripping off other services, but by innovating on the user experience through interesting design and UI. These small innovations are exactly where Google Video lost users. Google assumed that people would stay if it removed every feature except what was similar to proven products. In fact, users did not stay, and the only real use anyone had for the product was the one thing that Google truly innovated on: allowing bigger and longer videos.
So, what does this product teach us about design? It teaches us that innovating carelessly is just as bad as not innovating at all, and that going minimal for the sake of minimalism is not always the right approach. Google would have been better off not developing products like these at all, because it has left us questioning its judgment.
With all of its failures—Buzz, Wave, Google Video, etc.—we begin to question its understanding of these spaces. We know that Google understand advertising and search (it pretty much owns these markets), but that doesn’t keep us from questioning its overall understanding of design. This erodes Google’s image. It’s detrimental to a company that is trying to take over the world, or even one that’s just trying to put food on the table. Focusing on design and not changing for the sake of change would have helped. Let this be a lesson to developers everywhere.

Yahoo: the case against overdesign

Yahoo may be a household name, but it could have permeated the Internet even more than it has. Going to a party that offers everything is sometimes as unsettling as going to one that offers nothing. People think that they like choice, but sometimes they just want someone else to decide for them. Apple has made more money than God by exploiting this business principle. But web designers overlook it all too often.
Yahoo’s home page shows hundreds of things to do, to click on and to consume. You can customize it to display your favorite sources; and as we all know, you’re welcome to make it your “first and last stop on the web.” This has led it to become a top property online (perhaps because it was first to market), but this has also kept it from dominating the competition.
Why did the competitors win? To put it simply, because they didn’t add anything extra. Google didn’t try any BS in the beginning. It cut out the fat, leaving only the lean, delicious search box that we know today. And despite Google’s problems in other spaces, it still dominates search.
People often say that Yahoo offers a much broader service—weather, news, film times, horoscopes, etc.—and that Google did only one thing in the beginning. But this is exactly why Google dominated. There is something to be said for having a million different products and revenue streams, but it can still be awfully detrimental to the brand’s image.
Google also chose to pursue multiple products and revenue streams, but it didn’t go about it by shoving them in our faces. The relative elegance with which it went about it is perhaps the reason those products were more welcome by users and less confusing.
Granted, appealing to people who aren’t web savvy has its merits, too. But mastering a niche is better than starting out grand. Take the overall valuations and stock prices of the two companies: one started out big and has since contracted, while the other started in a niche (for developers, designers and web-savvy users) and has since grown to become the most reputable company in the US. If that isn’t a case against overdesign, I don’t know what is.

In sum

A lot has been said about Google and Yahoo here, and the lessons to be learned are notable. Developers by nature lock themselves into boxes (or IDEs), and getting out of them can be hard. The point is that we should recognize the importance of design going forward and focus on bringing authentic user experiences to the forefront of our products.
In this Web 2.0 world and beyond, these are some of the most important considerations in developing brand equity, understanding users and cultivating an aesthetic. If we leave everything up to trained designers, then we will be missing out on some valuable UI insight. Graphic design and user experience will never decrease in importance, nor will development. But unless we bridge the gap, we may never find the authentic experience that arises from balancing the two.

What are your thoughts on design? Has it gotten enough attention in the last few years? How important will design be as the world becomes more web-centric?

30 Handy Cheat Sheets and Reference Guides for Web Professionals

Cheat sheets and reference guides are useful for both beginners and advanced web professionals.
They can be used to help you remember syntax or as a tool to aid in memorization.
In this post, we aim to cover the reference guides for all of the most commonly used platforms, software and coding languages.
Below you’ll find a compilation of the 30 most useful and well-organized cheat sheets, checklists and reference guides.
If you know of a useful cheat sheet that we haven’t covered here, please share the link in the comments’ section at the end of the article.

1. 25-Point Website Usability Checklist

Usability is a central concern for any web developer. The 25-Point Website Usability Checklist is a simple step-by-step list that can help your website achieve maximum usability.
Four major components are covered in this checklist: accessibility, identity, navigation and content. The list is a printable PDF and contains a rating system and space for comments.
Download the 25-Point Website Usability Checklist

2. Browser Compatibility Table

This is a great reference guide to ensure browser compatibility.
Below is an extract from a table that contains a list of various CSS rules and their compatibility with common browsers and operating systems. With a quick glance, the designer or developer can note which CSS properties should be used or avoided.
The table also offers an interactive feature that highlights the row your cursor is on. This makes pinpointing the compatibility of a specific CSS property much easier.
Go to the Browser Compatibility Table

3. Web Standards Checklist

A website that is compliant with W3C’s standards will be more usable and search-engine friendly than one that is not.
There are a number of ways to ensure that a website is standards-compliant; one way is to use a checklist.
This checklist contains a chronological list of factors to consider while building a website.
Download The Web Standards Checklist

4. Search Engine Optimization Cheat Sheet

Search Engine Optimization (SEO) is very important if a website is to be successful. This cheat sheet may seem to be for beginners, but it holds valuable information for reference and education. The ten categories are SEO rules at the coding level.
The ten essential categories for good optimization are: important HTML tags, search engine indexing limits, title tag syntax, common canonical issues, 301 redirects on Apache, search engine robot user agents, common robot traps to avoid, robot meta tags syntax, robots.txt syntax and site map syntax.
Included in each category is further explanation and an example.
The cheat sheet can be downloaded as a two-page printer-friendly PDF.
Download the Web Developer’s SEO Cheat Sheet

5. Tweet Sheet 2

Because Twitter is fast becoming a mainstream news feed, using it to your website’s advantage is important.
Tweet Sheet is a fairly simple cheat sheet about Twitter use and syntax, created by Jason Theodor. Tweet Sheet includes Twitter’s mobile URL and text numbers, personal commands, mobile commands, user name commands, tracking commands and information on Twitter applications and tools.
Version 2 is offered in PDF form, a change from the simple image in Version 1. The second version is a grid of smaller cheat sheets, with a cut-out line so that it can easily be shared with friends or posted in other locations.
Download Tweet Sheet 2

6. XHTML Cheat Sheet v1.03

This XHTML cheat sheet is excellent for XHTML coders. Along with many basic attributes, this two-page grid includes references that even experienced web professionals would find useful.
Three types of elements are defined in this cheat sheet: block, inline and table elements. The miscellaneous section includes 22 additional elements. Each row contains the name, description and attributes of each of the elements available for use.
More references are on the side, including %attrs, %focus, input types, link types, deprecated elements, HTML ASCII entities and more. Being so detailed, this is a great tool for anyone who uses XHTML frequently.
Download the XHTML Cheat Sheet v1.03

7. CSS Cheat Sheet

The CSS Cheat Sheet is a two-page PDF and is the most detailed CSS reference guide available. It contains a lot of information and is great as a printed reference.
Sections you may find useful are the ones on the CSS box model, selectors, pseudo-elements and pseudo-classes, colors, text properties and layout properties.

8. Blueprint Framework and Blueprint CSS Cheat Sheet

The Blueprint CSS framework is a great shortcut for designers. The developers of this tool explain:

“Blueprint is a CSS framework that aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plug-ins and even a style sheet for printing.”

To download the blueprint framework, go to BlueprintCSS.org
Paired with the framework is the Blueprint CSS cheat sheet to help shorten development time. The cheat sheet is well laid out, nicely color-coded and detailed. It works in sync with the framework and was made with designers in mind, featuring a visual representation of a 950 pixel-wide grid system, a detailed list of Blueprint features and call and syntax examples.
Download the Blueprint CSS Cheat Sheet.

9. Mixing Typefaces

This PDF is an excellent reference for designers who don’t want to spend a lot of time figuring out whether two or more fonts will work well together. This tool enables designers to choose the perfect typography combination.
Although the cheat sheet was created in 1992, most of the widely used web fonts are present. As the image above shows, a list of fonts is repeated along the top and left side.
A number from 1 to 3 appears where each pair intersects. 1 means that the two fonts are compatible, 2 means that with proper implementation the two fonts could work well together, and 3 means that they will clash.
Download the Mixing Typefaces PDF

10. Common Fonts for all Versions of Windows, and Mac Equivalents

While this guide isn’t exhaustive, it’s a perfect quick reference tool for choosing the typography for a new website. All 18 font groups listed are web safe and cross-browser compatible.
All of the fonts are grouped together with syntax: Windows version, Mac version, font family. The bottom of the page has very specific information on using fonts on different operating systems and browsers and even has a screenshot of each scenario.
Although this web page is already well known in the web designer community, we felt it was important to include on this list.
Download Common Fonts for all Versions of Windows, and Mac Equivalents

11. Official Adobe Photoshop CS4 Reference

The official Adobe Reference guide is available online and in PDF form. While not exactly a “quick” reference guide, it is essential for anyone who uses Photoshop professionally.
Download Adobe Photoshop CS4 Help Guide Online
Download the Adobe Photoshop CS4 Help Guide PDF

12. Adobe Photoshop CS4 Keyboard Shortcuts

This is the keyboard shortcuts cheat sheet for the newest version of Photoshop. This four-page guide can help designers cut their production time by as much as half.
For easy navigation, the PDF is arranged according to the main menu in Photoshop, and then under each menu item it lists the shortcuts in alphabetical order. Because PC and Mac have different shortcuts, there are two different reference guides.
Download the PC version | Download the Mac version

13. Adobe Flash CS4 Keyboard Shortcuts

This is a keyboard shortcuts guide for Adobe Flash CS4. This PDF is also arranged to reflect the Flash CS4 menu, but the list of shortcuts, rather than being in alphabetical order, is arranged according to the application’s menu listing, too. This cheat sheet even has a friendly graphic at the top with the menu order presented in Flash.
As with most Adobe keyboard shortcut cheat sheets, both PC and Mac versions are available.
Download the PC version | Download the Mac version

14. ActionScript 2.0 to 3.0 Migration Cheat Sheet

This cheat sheet covers both ActionScript 2.0 and ActionScript 3.0 and is organized to help those who need to switch to 3.0. Below is a short extract from the six-page PDF.
The functions and classes of ActionScript 2.0 are to the left of each section, followed by their equivalents in ActionScript 3.0. This cheat sheet is great for anyone transitioning to 3.0 or learning ActionScript.
Download the ActionScript 2.0 to 3.0 Migration Cheat Sheet

15. Adobe Dreamweaver CS4 Keyboard Shortcuts

This is another guide in the family of cheat sheets for Adobe, this one for Dreamweaver CS4 keyboard shortcuts. It was made by the creator of the Flash CS4 sheet and so has many of the same features.
The cheat sheet also follows the exact menu structure of Dreamweaver CS4 and has the same graphic at the top showing the menu order.
Unfortunately, a Mac version of this cheat sheet is still in the works; only the PC version is available at this time.
Either way, it is a great cheat sheet and could be easily adapted into a Mac version. For most shortcuts, you would just have to replace Control with the Command key. Keep checking the cheat sheet’s page for the release of the Mac version.
Download the Dreamweaver CS4 Keyboard Shortcuts PDF

16. WordPress Help Sheet

The WordPress Help Sheet is the most useful cheat sheet if you are a WordPress theme developer. It is a quick reference guide for the most commonly used WordPress snippets.
Only four categories are covered in this guide, but the simplicity of this sheet makes it so appealing.
Only the most needed and commonly used snippets are included, making them all easy to find. The four sections include: file names of a basic WordPress theme, header snippets, all other template snippets and commonly used extras.
Download the WordPress Help Sheet

17. Advanced WordPress Help Sheet

For those who create WordPress themes regularly, WPCandy has created an advanced help sheet. It contains commonly used snippets for themes that require added functionality.
The three-page PDF covers a wide range of snippets, such as for content going only on the front page, styling for certain categories, unique images for each category, dynamic page titles, query posts and more.
Any designer who creates professional WordPress themes should have this help sheet at hand. Most of the snippets are required in professional themes.
Download the Advanced WordPress Help Sheet

18. WordPress Theme Development Checklist

The WordPress Theme Development Checklist is an extensive checklist in nine parts. The checklist covers general topics (like theme information and screenshots), blog components (like RSS feeds), timestamps, as well as category and page navigation. Below is an example of the first half.
This checklist can be used while creating a WordPress theme or to help finalize one. As extensive as it is, it’s only one page and can be easily printed when it comes time to develop a new theme.
Download the WordPress Theme Development Checklist

19. JavaScript Cheat Sheet

Several of the cheat sheets featured here are from AddedBytes.com, because of the detailed and exceptionally high quality of the resources there. The first one on the AddedBytes list is the JavaScript cheat sheet.
This cheat sheet is logically organized into DOM methods, functions, regular expressions, etc. It’s easy to use and a great reference for all common JavaScript uses.
The guide is not only excellent for JavaScript beginners (covering items as basic as the syntax for putting JavaScript into HTML) but is also suited to programmers at an advanced level (referring to more advanced JavaScript functionality).
Download the JavaScript Cheat Sheet

20. Regular Expressions Cheat Sheet (v2)

Although some references to Regular Expressions are in the above JavaScript cheat sheet, this one is more detailed. Now in version 2, this cheat sheet has additional material, including information for those who may not be familiar with Regular Expressions.
Although we’ve positioned this entry just below the JavaScript cheat sheet, this PDF is not a guide to any specific language, and so would be great for developers who do not code in any specific language (or who code in more than one language).
Download the Regular Expressions Cheat Sheet

21. jQuery Visual Map

Although the jQuery Visual Map is not a printable reference like most of the other cheat sheets on this list, it is still a great tool for referencing, learning jQuery and grabbing snippets.
The tool’s interactive nature makes finding exactly what you need easy, and code is included in all of the examples for easy copying and pasting. This guide is ultimately an interactive jQuery manual.
Download jQuery Visual Map

22. MooTools Cheat Sheet

Those who prefer the MooTools JavaScript framework to jQuery may find this cheat sheet useful. This colorful and detailed reference guide includes every commonly used feature of MooTools 1.2.
The references are compact, yet the “pseudo-code” serves perfectly as illustration. Within the one-page PDF are 22 sections of reference material.
In addition to the older version, the updated cheat sheet now contains documentation for Core, Native, Class, Element, Utilities and Request.
Download the MooTools 1.2 Cheat Sheet

23. Prototype 1.6.0.2 Cheat Sheet

This one-page informative PDF is a great resource for those using Prototype.js and includes a visual reference for offsets and dimensions.
The modules are in a logical order, with the most commonly used ones in the top left and less common ones in the bottom right. The page is printable and easy to use as a desk-side reference guide.
Download the Prototype 1.6.0.2 Cheat Sheet

24. Python

This one-page cheat sheet is a wonderful reference tool if you code mainly in Python.
The 11 sections that make up the cheat sheet are system variables, string methods, datetime methods, time methods, date formatting, sys.argv, OS variables, list methods, file methods, class special methods, indexes and slices.
This is a convenient all-in-one general reference for anyone who codes in Python or is trying to learn Python. There are also some side notes and general pseudo-code.
Download the Python Cheat Sheet

25. mod_rewrite Cheat Sheet (v2)

URL rewriting can improve your website’s usability, search functionality and navigation cleanliness.
The mod_rewrite cheat sheet has everything from basic regular expression syntax to listing flags for the RewriteRule and RewriteCond directives. It also provides examples and general syntax so that you don’t have to be a mod_rewrite expert to use the PDF.
Download the mod_rewrite cheat sheet

26. PHP Cheat Sheet (V2)

This one-page cheat sheet is a full reference for the PHP programming language. It is better suited to those who already know how to code in PHP and serves as a reminder of certain syntax and names of functions and variables.
Now in its second edition, this cheat sheet is better organized and has new components, giving it a total of nine sections: array functions, regular expression functions, date formatting, regular expression syntax, string functions, file system functions, PCRE modifiers, date and time functions and fopen() modes.
Download the PHP Cheat Sheet

27. SQL Server Cheat Sheet

This handy, one-page cheat sheet provides quick reference for the SQL server.
Included in the 14 sections are: functions, syntax for creating a function, date parts, syntax for creating a trigger and syntax for creating a stored procedure.
It is available for download as a PDF or PNG file.
Download the SQL Server Cheat Sheet

28. MySQL Cheat Sheet

This cheat sheet is a great reference for anyone who frequently uses MySQL or PHP with MySQL. It contains the most commonly used MySQL functions in PHP, data types and ranges and sample select queries.
Along the side of the main cheat sheet are various keywords and functions used in MySQL: mathematical keywords, date and time keywords, group words, control flow, string, comparison, cast and more.
No need to memorize the exact names of MySQL functions or full range of each data type; just download the PDF or PNG version of the MySQL cheat sheet to have on hand.
Download the MySQL cheat sheet

29. Ruby on Rails Cheat Sheet

This Ruby on Rails one-page printable reference is a useful go-to guide for anyone who uses Ruby on Rails extensively.
Included in the cheat sheet are five main sections and a few side sections containing methods. The main section features a directory structure, predefined variables in Ruby, reserved keywords, regular expression syntax and a side note reminder of methods.
In addition to the center blocks is a list of methods along the side, arranged in the following categories: strings, regex, time, arrays, validation and enumerable mixin.
Download the Ruby on Rails cheat sheet

30. ASP/VBScript Cheat Sheet

The last resource on our list is the ASP/VBScript cheat sheet, for anyone who is an ASP developer.
Similar in layout to many of the other cheat sheets on AddedBytes, this one is well organized and contains crucial, often-forgotten information for the ASP developer.
The cheat sheet includes regular expressions, date function arguments, redirect with 301 header, file inclusion, function argument orders, file modes, common LCID modes, constants, methods, properties, functions and collections.
Download the ASP/VBScript cheat sheet


 Which cheat sheets do you use the most? Please share other favorite cheat sheets that we may have missed in the comments’ area below…