Twenty Ten

To start, we finally have a new default theme. Its called Twenty Ten and is a  two column layout with support for custom background and header images, a widgetized sidebar, and a horizontal drop down menu. Matt Thomas says this: “Our goal with Twenty Ten was to create something stylish, customizable, simple, and most of all,readable. Since every new WordPress user will be seeing Twenty Ten, we wanted to design an example of what a WordPress theme can do.”

Custom Menus

We’ve been playing with these a bit over here at Blueprint Design Studio and let me tell you, this is one of the most useful features WordPress 3 has to offer theme developers. This will allow you to register any number of menus and display them in your themes template files using a simple function call. For the user this simply means you’ll get a new page with some tools on it to help you add, delete, and arrange.

Custom Post Types & Taxonomies

This is my personal favorite of the mix thus far as it enables developers to easily create a more robust CMS, meeting criteria we may not have been able to do before. Custom taxonomies were brought into WordPress with release 2.8 and had some improvements made with the release of 2.9 but WordPress 3 improves this greatly by including hierarchical (category-style) taxonomies, and giving users a custom UI for pages as well as for posts.

Multiple Sites With Single WordPress Install

Another great update is the merging of Wordpress MU into the standalone. If you don’t already know what that means, WordPress MU makes it possible for those with a website to host their own blogging community, as well as control and moderate all the blogs from a single dashboard. This is a good thing because your install can work with sub-domains or sub-directories. The multisite feature in is disabled by default so you will need to enable it.

To do this navigate to Tools > Network under WordPress admin menu and specify Network settings. Create “blogs.dir” in wp-content folder and add the following line in your wp-config.php file:

define(‘WP_ALLOW_MULTISITE’, true);

You may also need to modify your .htaccess file.

When your done with that, you will see a new menu section called “Super Admin”. This will allow adding and managing of the additional sites in your network with your install now being the ‘controller’.

In Conclusion

Hopefully we’ll be able to see the official release sooner than later. As always, for more information on this and other WordPress related news, consult the Codex.

image courtesy of robcubbon.com

1) Tabbed side menu:

Many websites such as WordPress use tabbed navigation to easily sort through a site’s content while saving space.

Tutorial: (http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial

Demo: (http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html)

This mac style navigation menu provides the user a clean, organized and animated interface for surfing a site’s content.

Tutorial: http://www.ndesign-studio.com/blog/design/css-dock-menu/

Demo:  http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html

This menu was created using a combination of XHTML, CSS and Javascript:

Tutorial: http://www.shopdev.co.uk/blog/animated-menus-using-jquery/

Demo: http://www.shopdev.co.uk/blog/menuDemo.html

This animated menu provides flash-like movements to the page-links. The menu was created using a combination of JQuery and CSS.

Tutorial:  http://net.tutsplus.com/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/

Demo: http://nettuts.s3.amazonaws.com/009_jQueryMenu/sm/result/index.html

The Sliding Nav menu allows multiple links to be contained within one button. This is especially useful for websites with large amounts of content.

Tutorial: http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/

Demo: http://www.hv-designs.co.uk/tutorials/sliding_menu/sliding_menu.html

The Fading menu is an example of how to use CSS with JQuery to create a clean and simple navigation for Web 2.0.

Tutorial: http://css-tricks.com/learning-jquery-fading-menu-replacing-content/

Demo: http://css-tricks.com/examples/MenuFader/

This animated menu provides flash-like movement and interactivity to your navigation using the “easing” function of JQuery.

Tutorial: http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/

Demo: http://buildinternet.com/live/smoothmenu/animated-menu.html

The Jquery MB menu is another good example of a drop menu capable of organizing a large number of sub-categories. Categories can be multi-level or contextual (right click).

Tutorial: http://pupunzi.open-lab.com/2009/01/18/mbmenu/

Demo: http://www.open-lab.com/mb.ideas/index.html#mbMenu

The Lavalamp menu is a simple navigation with an animated, flash-like slider.

Tutorial: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

Demo: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

This drop-down menu uses a combination of JQuery and CSS to neatly organize multiple sub-sections. This is convenient for organizing large amounts of content on a site.

Tutorial: http://www.clarklab.net/blog/posts/animated-drop-down-menu-with-jquery/

Demo: http://clarklab.net/blog/articles/dropdown/example.html

This attractive JQuery effect slides the navigation bar onto the page on load.

Tutorial: http://net.tutsplus.com/html-css-techniques/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/

Demo: http://net.tutsplus.com/html-css-techniques/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. Created by Patrick Griffiths and Dan Webb.

Tutorial: http://greengeckodesign.com/?q=menumatic

Demo: http://greengeckodesign.com/projects/menumatic/examples/horizontal/

The Garage style menu uses JQuery to animate each button revealing information to the user when passed over with the mouse.

Tutorial: http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/

Demo: http://www.gayadesign.com/scripts/jquerygaragedoor/

The sliding navigation adds a flash-like movement to the menu with a highlight which follows the users movement. This menu can be easily customized using CSS.

Tutorial: http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/

Demo: http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/

This menu is simple to create yet powerful when organizing sub-menus and categories. The drop-down is created with JQuery and styled with CSS.

Tutorial: http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/

Demo: http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/

The JQuery floating menu moves over content as the user scrolls up or down the page.

Tutorial: http://net.tutsplus.com/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/

Demo: https://nettuts.s3.amazonaws.com/018_Floating_Menu/demo/dhtml_float_menu_final_nettut.html

The JQuery Top Nav Menu is a navigation bar which shows it’s sub-categories on the top when rolled over.

Tutorial: http://net.tutsplus.com/tutorials/javascript-ajax/a-different-top-navigation/

Demo: http://nettuts.s3.amazonaws.com/386_navigation/top-nav-demo/index.html

The Apple Style Menu tutorial takes you step-by-step into the creation of a sliding “leopard flavor” navigation.

Tutorial: http://www.kriesi.at/archives/apple-menu-improved-with-jquery

Demo: http://www.kriesi.at/wp-content/extra_data/kwicks_tutorial/kwicks_final.html

The JQuery Fancy rollover displays a subtle flash like ease motion when the menu item is selected.

Tutorial: http://www.sohtanaka.com/web-design/animate-navigation-with-css-jquery/

Demo: http://www.sohtanaka.com/web-design/examples/fancy-navigation/

Demo: http://www.jeremymartin.name/examples/kwicks.php?example=1

Tutorial: http://www.jeremymartin.name/projects.php?project=kwicks

Demo: http://www.queness.com/resources/html/scrollmenu/index.html

Tutorial: http://www.queness.com/post/256/horizontal-scroll-menu-with-jquery-tutorial

Demo: http://www.distinctcorp.com.au/jquery/spritemenu.html

Tutorial: http://www.distinctcorp.com.au/jquery/spritemenu.html

Demo: http://www.sitepoint.com/blogs/2009/03/31/make-a-mega-drop-down-menu-with-jquery/

Tutorial: http://www.sitepoint.com/blogs/2009/03/31/make-a-mega-drop-down-menu-with-jquery/

Demo: http://www.queness.com/resources/html/floatmenu/index.html

Tutorial: http://www.queness.com/post/762/create-a-nice-looking-floating-menu-with-jquery-easing

Demo: http://css-tricks.com/examples/ColorFadingMenu/

Tutorial: http://css-tricks.com/color-fading-menu-with-jquery/

Demo: http://nettuts.s3.amazonaws.com/013_keypress/demo/demo.html#about

Tutorial: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-keypress-navigation-using-jquery/

Demo: http://css-tricks.com/examples/DiggHeader/#

Tutorial: http://css-tricks.com/designing-the-digg-header-how-to-download/

Demo: http://demo.marcofolio.net/slick_jquery_css3_menu/default.html

tutorial: http://www.marcofolio.net/webdesign/jslickmenu_a_jquery_plugin_for_slick_css3_menus.html

Demo: http://www.jampmark.com/html+css-techniques-demos/pure-css-fish-eye-menu-demo.html

Tutorial: http://www.jampmark.com/html+css-techniques/pure-css-fish-eye-menu.html

Tutorial: http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/create_image_menu_with_jquery.html

Demo: http://www.alohatechsupport.net/examples/image-menu-1.html

32) SuckerFish Style Menu

Demo: http://be.twixt.us/jquery/suckerFish.php

Tutorial: http://be.twixt.us/jquery/suckerFish.php

Demo: http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm

Tutorial: http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm

Demo: http://stilbuero.de/jquery/tabs_3/

Tutorial:http://stilbuero.de/jquery/tabs_3/

Demo: http://plugins.jquery.com/project/bdc-ddmenu

Tutorial: http://plugins.jquery.com/project/bdc-ddmenu

Demo: http://plugins.jquery.com/project/jBreadCrumb

Tutorial:http://plugins.jquery.com/project/jBreadCrumb

Demo: http://jdsharp.us/jQuery/plugins/jdMenu/

Tutorial: http://jdsharp.us/jQuery/plugins/jdMenu/

Demo: http://labs.activespotlight.net/jQuery/menu_demo.html

Tutorial: http://labs.activespotlight.net/jQuery/menu_demo.html

demo: http://www.ndoherty.biz/demos/coda-slider/1.1.1/

Tutorial: http://www.ndoherty.biz/demos/coda-slider/1.1.1/

Demo: http://uvumitools.com/dropdown.html

Tutorial:http://uvumitools.com/dropdown.html

Related Articles:
36 Eye-Catching Jquery Navigation Menus
25 jQuery Tutorials for Improved Navigation Menus
10 Fresh jQuery Tutorials to Enhance Navigation Menus
26 jQuery Plugins for Superb Navigation
10 incredible JQuery navigation menus
“Outside the Box” Navigation with jQuery
25 jQuery Plugins for Navigation
13 excellent tutorials on creating jquery navigation menu
15 Excellent jQuery Navigation Techniques and Solutions
8 Sites with Excellent jQuery Navigation
50+ Amazing Jquery Examples- Part1
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials
Animated Navigation with CSS & jQuery
Outstanding jQuery Navigation Menu Tutorials
5 Examples of jQuery Navigation at its Very Best
11 New jQuery Navigation Solutions
15 Best jQuery Navigation Plugins

People read websites in an F shaped pattern. Why is this important to know? The more aware you are of how people will be reading or scanning your website the more effectively you can layout the information on your pages. This knowledge can help you place important information and navigation in the obvious “hot spots.” It will help make your site more efficient in helping users find information quickly.  Many studies have been done concerning the way people scan web pages. A particularly helpful eye-tracking study can be found on Jakob Nielson’s alert box on useit.com. In this study, over 200 users looked at thousands of websites. Using advanced eye-tracking technology, they found that the users’ reading behavior was consistent. Their eyes scanned the pages in a way that resembles an F shape.  Obviously this is a GENERAL pattern, but the study found that typically people scan horizontally across the top part, then horizontally a little lower, and finish by scrolling vertically down the left side. If you squint your eyes at the image below, it is easier to see the F pattern in all of the examples.

Nielson goes on to make three important implications:

1. Users will rarely read text thoroughly and word-for-word. Keep text concise and to the point so that users can find relevant information quickly.

2. The first two paragraphs must include the most important information

3. Start subheads and bullet points with significant and information carrying words

Something to take note of however, is that these web pages are mostly text based.  In websites with a lot of images and graphics the patterns are very different, and vary significantly from each other.  In an article by Jeff Sexton, he further discusses how we can control the scan patterns by the graphics we use and how we place them on the page. Take a look at the image below and you can see how by simply changing the angle of the babies head, the focus of the web page is directed towards the text and product instead of the image. While most web pages contain minimum graphics it is still important to know how images can affect the users scan pattern

At Blueprint, we design all of our websites using this knowledge. Below are a couple examples of past sites that we have designed with the desired Scan patterns.  You’ll notice that the first two implement the F Shape Pattern. However, the third is an example of a graphic based web page.

Will Call Sports Grill

Patch Landscaping

The Burback Brothers Inc. Animation Group.

Related Articles:

The F shape Pattern

12 Eye-tracking Website Tactics

How Graphic Design Layouts Affect Scanning Patterns

Are you the type of person who likes to skip brainstorming and outlining and simply jump into your project or writing? That process of working can be a real headache if there is a lot of content to discuss and organize. The same is true for designing websites.  The best way to approach designing a website is to plan! The first and perhaps most important step to creating an efficient and user-friendly website starts with careful research and brainstorming.  It is crucial to write and/or sketch out your ideas before heading to a computer.  Unfortunately, many designers skip over this step, jumping straight into the project hoping it will turn out a success. Thus polluting the web with mediocre to some very bad websites.  

Websites can be very complex and no two are the same, so it is important to treat each one individually and plan accordingly. An efficient and well-functioning website should be an enjoyable experience for its users.  Below are a few easy tips and advice that experienced web developers use.  It may seem like common sense, but hey, surprisingly people don’t always use their common sense, so check it out! 

1) Establish a clear goal and objective.

Be sure to know the objectives and goals you or your client is trying to achieve.  It is also very important to know who the audience is and what they are looking for.  Be on the same page with your client in terms of understanding the goals for the website and what is realistically achievable before starting any design. This will save you time and stress by preventing any mistakes from happening before the site is made.  

2) Structure the content.

Use site mapping to define the structure of your site.  A site map is a collection of your ideas and the content that you will organize on your site. Scottie Claiborne claims in his article, Effective Site Navigation, that when planning your site or site redesign, think about the structure first.  It helps to physically map out these pages. Use index cards or post it notes, write a page topic on each card, lay them out and organize them into groups. Once satisfied with your plan, you will have yourself a site map and will be ready for the next step; wire framing. 

Use wire framing to come up with the skeleton of the site. According to Andy Budd, creative director of Clearleft (clearleft.com), wire framing is similar to a director’s storyboard or an architect’s blueprint. There are two different (and necessary) ways to approach wire framing.  The first is a design free wire frame. This allows to focus on the purely functional aspect of the site, keeping in mind effective and consistent navigation. The second is a structure-free wire fame.  This allows for focus on the aesthetic aspect of the website. Combining these two wireframes will result in a very effective skeleton of your site (Grannell, 10).

3) Use Effective and Efficient Navigation. 

In his book Designing Web usability, Jakob Neilson stresses that online navigation must answer these questions:

- Where am I?

- Where have I been going?

- Where can I go? 

Consistency in navigation placement is vital if you want your website to be a success.  It allows users to move fluidly to and from pages without hassle.  Scottie Claiborne makes an analogy in his article on Effective Site Navigation (webcredible.co.uk) relating website navigation with hospital navigation. If you walk down a hallway in a hospital and see a sign for where you want to go, but suddenly the main entrance, cafeteria and emergency signs are gone how are you supposed to find your way back? Many sites use breadcrumb trails, which are links (usually in a small font, placed directly below the page header) that show where the user is in relation to the homepage.  

So what exactly is the most effective layout for navigation? Both horizontal and vertical navigation work well, but which is the best of the two is debatable.  Designer Chris Garnett argues “vertical navigation doesn’t demand the same amount of visual attention. I want primary navigation to be one of the most instantly recognizable elements of any site I build.” 

Here are 5 sites that demonstrate efficient navigation according to the Ultimate Guide to Web Design:

Unfortunately, what we have found with many of these sites is that the design aspect of the site suffers in order to enhance effective navigation.  Here are some sites that we have found to have both effective navigation and great design: 

The Fox website uses a consistent top bar navigation throughout the entire site. Any information the user might need is accessible within 2 clicks.  

The Chicago Water Taxi website is a good example of using an effective vertical navigation bar. 

The NFL website is a great example of how to organize a site with A LOT of information on it. They utilizing two top navigation bars: one with all the team logos and one for the general content of the site.  

If you want to read an article that helps explain how to plan a website for consistency and intuitive navigation in more detail, read Claiborne’s article Effective Site Navigation. It is worth checking out if you find yourself to be someone who has a hard time planning a site or if you feel your process of planning isn’t really working for you. The article even provides a helpful section of Dos and Don’ts on website navigation. 

One more important thing keep in mind when making any website — efficiency. Your aim should be to enable users to get to content swiftly, in a logical manner, and with few clicks as possible and remember, stay consistent!

Two articles from .Net’s issue The Ultimate Guide to Web Design contributed to this blog, Plan the Perfect Site and Master Site Navigation by Craig Grannell.