Following is a full list of the jQueryUI elements included in WordPress, along with their “handles” for use with the wp_enqueue_script() function.

• UI Core
  • Core – jquery-ui-core
  • Widget – jquery-ui-widget
  • Mouse – jquery-ui-mouse
  • Position – jquery-ui-position
• Interactions
  • Draggable – jquery-ui-draggable
  • Droppable – jquery-ui-droppable
  • Resizable – jquery-ui-resizable
  • Selectable – jquery-ui-selectable
  • Sortable – jquery-ui-sortable
• Widgets
  • Accordion – jquery-ui-accordion
  • Autocomplete – jquery-ui-autocomplete
  • Button – jquery-ui-button
  • Dialog – jquery-ui-dialog
  • Slider – jquery-ui-slider
  • Tabs – jquery-ui-tabs
  • DatePicker – jquery-ui-datepicker
  • ProgressBar – jquery-ui-progressbar
• Effects
  • Effects Core – jquery-effects-core
  • Effects “Blind” – jquery-effects-blind
  • Effects “Bounce” – jquery-effects-bounce
  • Effects “Clip” – jquery-effects-clip
  • Effects “Drop” – jquery-effects-drop
  • Effects “Explode” – jquery-effects-explode
  • Effects “Fade” – jquery-effects-fade
  • Effects “Fold” – jquery-effects-fold
  • Effects “Highlight” – jquery-effects-highlight
  • Effects “Pulsate” – jquery-effects-pulsate
  • Effects “Scale” – jquery-effects-scale
  • Effects “Shake” – jquery-effects-shake
  • Effects “Slide” – jquery-effects-slide
  • Effects “Transfer” – jquery-effects-transfer

There is one caveat, though. As of right now, WordPress does not include any CSS for many of these jQueryUI elements. Instead, you will have to temporarily include your own. I honestly couldn’t recommend the best way to do this. It seems to me that the best way is probably to download the appropriate CSS for each element and save them as separate CSS files, then register and enqueue them as they are necessary.

The WordPress team is working on putting together complete jQueryUI themes for the WordPress admin area, so you probably won’t need to use your custom CSS build for long.

Related posts:

1. Using Google’s CDN for WordPress JavaScript
2. Using jQuery in your WordPress plugins
3. WordPress: Adding a Proper Visual Editor to Your Plugin

HTMLCenter Web Development Blog

Advertise here with BSA

We recently ran an excellent giveaway of 5 free Deals from Deals2Have (a site providing great discounts on digital products for Mac enthusiasts, creative professionals and startups). This post announces the 5 lucky Six Revisions winners who’ve won.

The Winners

Here are the winners of the Deals2Have giveaway:

• Eric
• Carrie Cousins
• Jason Morton
• Ron
• Hasitha

Congratulations to all the winners! The winners should’ve already received information from the folks at Deals2Have on how to claim their prize via email.

About Deals2Have

Deals2Have, which started in summer of 2011, is a site where you can find big discounts on useful digital products.

For the latest deals and news, follow Deals2Have on Twitter, join them on Facebook and subscribe to their RSS feed.

Related Content

• Things You Should Do Immediately After Launching a Website
• How to Grow a Community: Insights from Experts
• Launching a Blog Successfully in 15 Days
• Related categories: Website Management and Resources

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Six Revisions

What’s the difference between the “home” page and the “front page”?

To many users, the terms “home” page and “front page” might seem like the same thing. However, in WordPress, they’re treated as two different elements. The “home” page is the main page that shows blog posts. If you install WordPress and don’t change any of the settings, this will be your site’s front page. However, if you modify the “Settings -> Reading -> Front page displays” setting to select “A static page (see below)”, and you choose a page for the “Front page” and a page for the “Posts page”, the “home” page is no longer the first page on your site. Instead, the first page on your site is the “front page”, now.

Therefore, when using the is_front_page() and is_home() conditional functions, you need to know what the distinction is.

The is_front_page() function returns true only when the visitor is viewing the static page you’ve set as your site’s front page. If you don’t have a static page set as your site’s front page, that function will never return true.

The is_home() function will return true on your site’s main blog page (the page that shows your latest blog posts).

What’s a “site”, a “network” or a “blog”?

Back when WordPressMU was a separate project from WordPress, the term “blog” was used to describe a single site within a WordPressMU installation and the term “site” was used to describe the collection of “blogs” (generally the entire MU installation).

When WordPressMU was merged into the WordPress core and became WordPress Multisite, the term “site” started to refer to single instances within a Multisite installation, and the term “network” began to refer to the collection of “sites”.

In the documentation and in the administration area, the terms “site” and “network” are used to describe these items, but, mostly for backwards-compatibility reasons, the terms “blog” and “site” are still used in the code itself.

Therefore, if you want to retrieve an option from a specific site in the installation, you use the get_blog_option() function; and if you want to retrieve a setting that applies to the entire network, you use the get_site_option() function.

There are a few exceptions to this one, as well, though. To figure out whether you’re viewing the administration area for the entire network, you use is_network_admin(). To add an admin notice that displays only in the network administration area, you hook into the network_admin_notices action. To add a new menu or submenu in the network administration area, you hook into the network_admin_menu action.

Is You Is, or Is You Ain’t My Baby?

A fairly consistent naming convention in WordPress applies to the conditional functions that report which page is currently being viewed. Most of these functions start with “is_”, followed by the type of page for which you’re testing. If you want to know if you’re currently viewing an archive page, you use is_archive(); if you want to know if you’re viewing a page, you use is_page(); etc.

There is one notable gotcha in WordPress Multisite, though. The function is_super_admin() isn’t a conditional tag used to test which page is being viewed; instead it tells you whether or not the user with the ID you supply is a Super Admin user.

Template Function Naming Convention

For the most part, there are two different versions of each template function in WordPress. One of those functions will normally start with “the_” while the other will start with “get_the_”. The “the” function will output (echo) the information into the page directly where you call it, while the “get” function will return the information so you can store it in a variable.

Some examples include:

• the_content() & get_the_content()
• the_title() & get_the_title()
• the_post_thumbnail() & get_the_post_thumbnail()
• the_excerpt() & get_the_excerpt()
• the_category() & get_the_category()
• the_tags() & get_the_tags()
• the_date() & get_the_date()
• the_time() & get_the_time()

There are a few exceptions where things differ slightly from this convention, though. For instance, if you want to echo the URL to a page/post, you would use the_permalink(); but if you just want to retrieve it, you use get_permalink() instead of get_the_permalink().

If you want to retrieve information about the site, or you want to retrieve various URLs related to the site, most of those functions don’t include the word “the” in them. The retrieval functions still start with “get_”, though. For instance, you would use get_bloginfo() to retrieve information about the site, but you just use bloginfo() to echo it.

Templates, Themes and Stylesheets

In WordPress, the word “theme” generally refers to any package of files that governs the appearance of the site.

The word “template” is a little more ambiguous. In most of the documentation and in the administration area, the word “template” refers to a specific file that you can apply to specific pages.

The term “stylesheet” in WordPress refers to the location of the chosen theme, while the term “template” can refer to the chosen theme (in the case of an independent theme), or it can refer to the parent theme on which the chosen theme depends.

If you are using a child theme, using bloginfo( ‘stylesheet_directory’ ) will echo the URL to the directory in which your child theme resides, while bloginfo( ‘template_directory’ ) will echo the URL to the directory in which the parent theme resides. If you’re using an independent theme, both calls will echo the same URL.

To make things even more fun, you can define the WP_DEFAULT_THEME constant, but it can only be used to set independent or parent themes as your default active theme. If you try to set a child theme as your default, you’ll end up with some PHP errors and warnings.

Paths, Directories and URLs

As if the template/themes/stylesheets thing wasn’t confusing enough; this is where it starts to get really confusing. For the most part, the word “path” describes the absolute system path to something, directory refers to the URL to the base directory in which a file resides and url refers to the actual URL to a file.

However, there are a lot of exceptions in WordPress to this nomenclature. In the bloginfo() and get_bloginfo() functions, template_url and template_directory both return exactly the same information (the URL to the base directory for the chosen theme).

Some constants, such as WP_CONTENT_DIR, WP_PLUGIN_DIR, WPMU_PLUGIN_DIR, etc., refer to an absolute system path; while others that use “dir”, such as PLUGINDIR and MUPLUGINDIR (both left in the code strictly for backwards-compatibility) refer to relative paths.

Then, there are constants that include the word “path” that refer to absolute paths (as you’d expect), such as TEMPLATEPATH (which actually refers to a “theme” rather than a “template”) and STYLESHEETPATH; but the related functions that are actually used to populate those constants use the word “directory” (get_template_directory() and get_stylesheet_directory()).

Related posts:

1. WordPress Security Tip – Change Your Theme Name
2. Using Javascript in WordPress Themes
3. Get Information About Top-Level Pages in WordPress

HTMLCenter Web Development Blog

Eventually, after quite a bit of investigating and testing, I found the cause of the issue: that particular server (and, presumably, all Zeus servers) doesn’t use any of the same indicators that SSL is being used that apache does. On apache servers, PHP usually has a handful of indicators that SSL is currently being used to serve the page. For instance, there’s a server global variable called “HTTPS” that gets set to “on” for many PHP configurations; SSL is generally served over port 443 instead of port 80; etc.

The WordPress HTTPS plugin runs four different checks to see if SSL is running, but all of them fail on Zeus. Following is the check that WordPress HTTPS runs:

public function is_ssl() {
    $https_url = parse_url($this->https_url);
    // Some extra checks for proxies and Shared SSL
    if ( is_ssl() && strpos($_SERVER['HTTP_HOST'], $https_url['host']) === false && $_SERVER['SERVER_ADDR'] != $_SERVER['HTTP_HOST'] ) {
        return false;
    } else if ( isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && strtolower($_SERVER['HTTP_X_FORWARDED_PROTO']) == 'https' ) {
        return true;
    } else if ( $this->diff_host && !is_ssl() && isset($_SERVER['HTTP_X_FORWARDED_SERVER']) && strpos($this->https_url, 'https://' . $_SERVER['HTTP_X_FORWARDED_SERVER']) !== false ) {
        return true;
    } else if ( $this->diff_host && !is_ssl() && strpos($_SERVER['HTTP_HOST'], $https_url['host']) !== false && (!$this->ssl_port || $_SERVER['SERVER_PORT'] == $this->ssl_port) && (isset($https_url['path']) && !$https_url['path'] || strpos($_SERVER['REQUEST_URI'], $https_url['path']) !== false) ) {
        return true;
    }
    return is_ssl();
}

Like I said, at least on the Zeus server I was dealing with, all four of those checks failed, so it kept reporting that the page wasn’t running over SSL, so it caused an infinite redirect loop.

After a while, I did find a variable (actually, 3 of them) that, while it doesn’t seem to have any consistent value, always seems to be set when running SSL, and never seems to exist when running without SSL. That variable is the $_SERVER['HTTP_SSLCLIENTCERTSTATUS'] variable. Checking for the existence of that variable seems to consistently report whether or not SSL is running for the page.

For my purposes, I ended up editing a plugin called WPSSL (simply because it was simpler than making sure I’d edited all of the correct places within WordPress HTTPS) to check the existence of that variable.

Have you come across this same issue on a Zeus server? Is this common, or is this an issue unique to the particular host that’s being used for this project?

Related posts:

1. Zeus and WordPress Part 2: Fixing Query Strings
2. WordPress and Zeus Part 1: Getting Permalinks Working
3. Programming your own PHP framework Part 2 – MVC

HTMLCenter Web Development Blog

To solve the issue, I wrote a simple function that runs any time a 404 error occurs on the site. Essentially, it parses the path of the requested page, cuts off the query string temporarily, and then searches the database for a post or page that has the slug at the end of the path.

You may be wondering why I didn’t just parse the request/get variables sent with the page. The problem is, those were empty in each of the cases I tested.

Anyway, following is the function I ended up writing.

function zeus_reply_fix() {
	if ( ! isset( $_SERVER['PATH_INFO'] ) ) {
		return;
	}
	if ( ! is_404() ) {
		return;
	}

	$path = $_SERVER['PATH_INFO'];
	$parts = explode( '/', $path );
	$qs = array_pop( $parts );
	$parsed = array();
	if ( strstr( $qs, '&' ) || strstr( $qs, '?' ) ) {
		parse_str( $qs, $parsed );
	} else {
		return;
	}
	if ( is_array( $parsed ) ) {
		global $wpdb, $post, $wp_query;
		$post_ID = $wpdb->get_var( $wpdb->prepare( "SELECT ID FROM {$wpdb->posts} WHERE post_name=%s", array_pop( $parts ) ) );

		if ( empty( $post_ID ) ) {
			return;
		}

		$wp_query = new WP_Query( array( 'page_id' => $post_ID ) );
		$wp_query->is_404 = false;
		foreach ( $parsed as $k=>$v ) {
			if ( ! empty( $k ) && ! empty( $v ) )
				set_query_var( $k, $v );
		}

		$_GET = $_GET + $parsed;

		$use_template = 'index.php';
		$post = $wp_query->get_queried_object();

		load_template( trailingslashit( get_template_directory() ) . $use_template );
		die();
	}
}
add_action( 'wp', 'zeus_reply_fix', 99 );

Have you found a better way of dealing with this issue? Do you see anything that could be done better? I’d love to see other solutions to this particular problem with Zeus & WordPress.

Related posts:

1. WordPress and Zeus Part 1: Getting Permalinks Working
2. WordPress Multi-Site: Get Featured Image from Another Blog
3. Order WordPress Pages By Multiple Fields

HTMLCenter Web Development Blog

Advertise here with BSA

We’ve partnered up again with our wonderful friends at Next Day Flyers to give away two sets of 1/4-page flyers with free shipping anywhere in the Continental U.S. Each set contains 100 flyers. Flyer printing can be used and customized for a variety of purposes including promoting a club event, marketing a small business and sending out announcements. Read on to see how you can win!

About Next Day Flyers

Next Day Flyers is an offset printing company offering an array of printed materials such as flyers, business cards, postcards, brochures, tickets and more.

They’re not newcomers to the industry. They’ve been in business for 13 years and have over 100,000 satisfied customers.

And with longevity comes experience. They know what their customers are seeking and how to meet the high expectations.

Quality is of utmost importance as Next Day Flyers utilizes a quality checkpoint system which includes 33 steps to ensure the files are printed correctly and ready on time.

And speaking of time, this is a strong point of Next Day Flyers. As the name suggests, they offer next day turnaround time, but as customers asked for a same-day print option, that was added too. So files in by 10:00 AM PST can be printed the same day, while files in by 6:00 PM PST can be printed and ready to pick up or ship the next day.

The Next Day Flyers online ordering system allows for easy file uploads of print ready files. They have file prep guides and templates available to make sure the bleeds, size, color are set to print correctly.

How to Win

To win, simply answer the following question:

• How can these flyers help you and/or your business?

Giveaway Details

This giveaway ends on Monday, January 30, 2012 after which the comments section on this post will be closed and you will no longer be able to leave a comment. Shipping outside of the continental U.S. will incur extra costs. Please leave a valid email address when filling out the comment form so that we can contact you if you have won. Please only comment once. The winners will be randomly selected using a similar method as previous Six Revisions giveaways. The winners will be announced on a separate post. You are advised to subscribe to our RSS feed so that you can be quickly notified when the winners announcement post has been published. Please note that comments are moderated and so your comment may not show up right away. Please note that comments that do not follow the instructions on how to win (described above) may not be published, or may be removed later on.

Related Content

• Create a Slick Business Card Design with Stunning Typography
• 15 Excellent Logo Design Tutorials Using Illustrator
• 20 Useful Websites for Graphic Design Textures and Patterns
• Related categories: Graphic Design and Resources

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Six Revisions

WordPress will work out of the box with Zeus, but a lot of things won’t behave the way you might expect. One of those things is the permalink structure.

Instead of getting nice, clean URLs like “http://example.com/blog/2012/01/my-first-blog-post/”, you get “index.php” shoved in there (like “http://example.com/index.php/blog/2012/01/my-first-blog-post/”). You can correct this issue, but it’s not quite as simple as updating an .htaccess file (in fact, without some jiggery-pokery by your Web host, Zeus doesn’t support .htaccess at all). Instead, you have to apply a rewrite script to your server configuration.

After quite a bit of searching and trial & error, I finally found a working rewrite script configuration for WordPress. A hosting company called ZipHosting posted the scripts below in their knowledgebase. The first script is set up for you to use if WordPress is hosted in a subdirectory, and the second is for use with WordPress in the root directory.

WordPress in a Subdirectory

RULE_0_START:
    # Get the document root path and put value into the SCRATCH array.
    # This is the server path not the web URL.
    # i.e. /clientdata/clients/p/h/php.testing.au.com/www/

map path into SCRATCH:DOCROOT from /

    # Get the URL without the domain.
    # e.g. /test&colour=red
    # e.g. /an-example-post/?color=red

 set SCRATCH:ORIG_URL = %{URL}
 set SCRATCH:REQUEST_URI = %{URL}

    # See if there are any queries in our URL.

 match URL into $ with ^(.*)\?(.*)$

    # If there are...

 if matched then
    # Set a var to path without the domain part.
    # e.g. /an-example-post

     set SCRATCH:REQUEST_URI = 

    # Set a var to the passed queries.
    # e.g. colour=red

     set SCRATCH:QUERY_STRING =
 endif
 RULE_0_END:

RULE_1_START:
    # This is setting a var to the server path and sub folders.
    # e.g. /clientdata/clients/p/h/php.testing.au.com/www/wordpress/an-example-post/

 set SCRATCH:REQUEST_FILENAME = %{SCRATCH:DOCROOT}
 set SCRATCH:REQUEST_FILENAME . %{SCRATCH:REQUEST_URI}

    # Check to see if the file exists.

 look for file at %{SCRATCH:REQUEST_FILENAME}
 if not exists then

    # The file wasn't found so is it a folder?

     look for dir at %{SCRATCH:REQUEST_FILENAME}
     if not exists then

    # No folder either. So now check the URL for special hosting folders.

         match SCRATCH:ORIG_URL into % with ^/stats|^/logs
         if matched then

    # If a special folder was requested end the script.

             goto END
         else

    # There were no files, folders or special folders so set the new URL.
    # -- Sub directory -------------------------------------------------------------
    # If the blog is in a sub directory...replace the words in bold  with your directory name.
    # e.g. /wordpress/index.php/an-example-post

             match SCRATCH:REQUEST_URI into $ with ^/wordpress(.*)
             if matched then
                 set URL = /wordpress/index.php
             endif

    # -- Sub directory ends --------------------------------------------------------
    # or...
    # -- Top level -----------------------------------------------------------------
    # If the blog is in the top level of the site...
    # e.g. /index.php/an-example-post
    # set URL = /index.php%{SCRATCH:REQUEST_URI}
    # -- Top level ends ------------------------------------------------------------
    # Go to the next rule.

             goto RULE_2_START
         endif
     endif
 endif

    # If files or folders were found end the rewrite script.

 goto END
 RULE_1_END:

RULE_2_START:

    # Check for queries in the requested URL.

 match SCRATCH:ORIG_URL into % with \?(.*)$
 if matched then

    # If queries were found add them to the new URL.
    # e.g. /index.php/an-example-post/&colour=red

     set URL = %{URL}&%{SCRATCH:QUERY_STRING}

 endif

    # -- Sub directory -------------------------------------------------------------
    # If you only want to rewrite the sub directory uncomment this bit.
      match SCRATCH:ORIG_URL into % with ^/wordpress
 if matched then
    # -- Sub directory ends --------------------------------------------------------

    # End the script.

     goto END

    # -- Sub directory -------------------------------------------------------------
 endif
    # -- Sub directory ends --------------------------------------------------------
 RULE_2_END:

WordPress Installed in the Root Directory

RULE_0_START:
    # Get the document root path and put value into the SCRATCH array.
    # This is the server path not the web URL.
    # i.e. /clientdata/clients/p/h/php.testing.au.com/www/

map path into SCRATCH:DOCROOT from /

    # Get the URL without the domain.
    # e.g. /test&colour=red
    # e.g. /an-example-post/?color=red

 set SCRATCH:ORIG_URL = %{URL}
 set SCRATCH:REQUEST_URI = %{URL}

    # See if there are any queries in our URL.

 match URL into $ with ^(.*)\?(.*)$

    # If there are...

 if matched then
    # Set a var to path without the domain part.
    # e.g. /an-example-post

     set SCRATCH:REQUEST_URI = 

    # Set a var to the passed queries.
    # e.g. colour=red

     set SCRATCH:QUERY_STRING =
 endif
 RULE_0_END:

RULE_1_START:
    # This is setting a var to the server path and sub folders.
    # e.g. /clientdata/clients/p/h/php.testing.au.com/www/wordpress/an-example-post/

 set SCRATCH:REQUEST_FILENAME = %{SCRATCH:DOCROOT}
 set SCRATCH:REQUEST_FILENAME . %{SCRATCH:REQUEST_URI}

    # Check to see if the file exists.

 look for file at %{SCRATCH:REQUEST_FILENAME}
 if not exists then

    # The file wasn't found so is it a folder?

     look for dir at %{SCRATCH:REQUEST_FILENAME}
     if not exists then

    # No folder either. So now check the URL for special hosting folders.

         match SCRATCH:ORIG_URL into % with ^/stats|^/logs
         if matched then

    # If a special folder was requested end the script.

             goto END
         else

    # There were no files, folders or special folders so set the new URL.
    # -- Sub directory -------------------------------------------------------------
    # If the blog is in a sub directory...replace the words in bold  with your directory name.
    # e.g. /wordpress/index.php/an-example-post

    # match SCRATCH:REQUEST_URI into $ with ^/wordpress(.*)
    # if matched then
    #     set URL = /wordpress/index.php
    # endif

    # -- Sub directory ends --------------------------------------------------------
    # or...
    # -- Top level -----------------------------------------------------------------
    # If the blog is in the top level of the site...
    # e.g. /index.php/an-example-post
     set URL = /index.php%{SCRATCH:REQUEST_URI}
    # -- Top level ends ------------------------------------------------------------
    # Go to the next rule.

             goto RULE_2_START
         endif
     endif
 endif

    # If files or folders were found end the rewrite script.

 goto END
 RULE_1_END:

RULE_2_START:

    # Check for queries in the requested URL.

 match SCRATCH:ORIG_URL into % with \?(.*)$
 if matched then

    # If queries were found add them to the new URL.
    # e.g. /index.php/an-example-post/&colour=red

     set URL = %{URL}&%{SCRATCH:QUERY_STRING}

 endif

    # -- Sub directory -------------------------------------------------------------
     # If you only want to rewrite the sub directory uncomment this bit.
    # match SCRATCH:ORIG_URL into % with ^/wordpress
 if matched then
    # -- Sub directory ends --------------------------------------------------------

    # End the script.

     goto END

    # -- Sub directory -------------------------------------------------------------
 endif
    # -- Sub directory ends --------------------------------------------------------
 RULE_2_END:

Unfortunately, that won’t solve all of your permalink issues, but it will get you started. One serious issue you might encounter is the fact that query strings aren’t recognized at the end of your permalinks; instead, WordPress shows a 404 error page whenever a query string is attached. In my next article, I’ll explain how I fixed that issue.

Related posts:

1. WordPress: Creating Custom Permalinks for Plug-Ins
2. Installing WordPress Through SSH
3. My First Official WordPress Plugin

HTMLCenter Web Development Blog

Advertise here with BSA

Mindomo, a mind mapping application for brainstorming,  has teamed up with us to give out 10 Premium Account subscriptions for one year (worth each). Read on to see how you can win this awesome prize.

About Mindomo

Mindomo is a simple mind mapping application, which can be used individually or in group for creative idea generation, gathering project requirements, building quick site-maps and simple project management.

A designer’s mind map created by Mindomo.

Mindomo allows easy development of a design concept or idea. When you start a web design project, you need to analyze the requirements from your clients, then you need to come up with a proposal which contains proposed solution, terms of agreement, financial points a simple site map and required resources.

Mindomo allows to handle all these intuitively, and when you are done, you can quickly present the whole project settings with Mindomo’s unique Presentation mode.

Mindomo’s Presentation mode.

Some of the things you can do with Mindomo:

• Work on mind maps simultaneously with your clients
• Create full detail sitemaps
• Comment or vote on topics to evaluate
• Show your work to clients with no login required
• Drag and drop pictures

Try Mindomo for Free!

Mindomo has a free account with a limited number of maps so you can evaluate their tool.

Signup now and start using mind maps for your projects.

How to Win

For a chance to win, simply answer the following question in the comments:

• How would you use your subscription to Mindomo if you won?

This giveaway ends on Wednesday, January 25, 2012 after which the comments section on this post will be closed and you will no longer be able to leave a comment. Please leave a valid email address when filling out the comment form so that we can contact you if you have won. Please only comment once. The winners will be randomly selected using a similar method as previous Six Revisions giveaways. The winners will be announced on a separate post. You are advised to subscribe to our RSS feed so that you can be quickly notified when the winners announcement post has been published. Please note that comments are moderated and so your comment may not show up right away. Please note that comments that do not follow the instructions on how to win (described above) may not be published, or may be removed later on.

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Six Revisions

• Jeff Carouth :: Follow Jeff on Twitter
• Jeff Carouth home :: Jeff's home on the web

File Download (38:16 min / 26 MB)

WebDevRadio.com – web development podcast

Advertise here with BSA

In web design, the position of design elements and the layout of web pages is everything. So many cool, exciting techniques are available to help us lay out our designs (especially with CSS3 at our disposal) that we often forget that structure is as important as aesthetics.

How do you determine where content should appear, and how can a well-oiled interface increase website readability? This is what we’ll aim to uncover in this article.

We’re going to examine a basic technique that could help you improve your general content flow, and, for lack of a better term, I’m going to call that technique the proxority principle (a portmanteau word that combines "proximity" and "priority").

Communication through Design

Designers already understand that the relationships between objects on a page matter. That’s why when we create a design, we think about visual hierarchy, visual weight, Gestalt psychology, the distinctiveness of important elements and other principles that affect relationships between the various components of a web page. It’s one of the reasons why we tend to get neurotic when it comes to navigation menus, headers or footers.

With so much going on inside the average web page, getting the right content to users in the right place and at the right time is quite an achievement!

If your content isn’t structured suitably, there can be a number of downsides, such as:

• Critical information getting lost or skipped
• User interaction issues like error-proneness or confusion
• Reduced web accessibility for screen readers

The proxority principle, in a nutshell, puts forth the idea that if we can prioritize our content to ensure that the most relevant material is visible and appealing, users will immediately be drawn to it.

This principle asserts that all related, important content should be grouped or joined together whenever possible to allow flow and feedback.

The art of this technique isn’t in the theory, because we often lay out content logically as we write it (headings, subheadings, bullet points, etc.); instead, it’s in the planning stage.

Proxority Principle in Site Navigation

Consider something like a navigation menu. One of the first things we do when producing the information architecture of a site is to organize pages and links into one cohesive structure, after which we add categories or subsections if appropriate.

This technique leads to the development of drop-down menus and other unique browsing aids which help us to further bind content that lacks proxority.

When planning navigation menus, one must pay particularly close attention to the value of pages and their connections, in order to make them a perfect example of proxority in action.

This particular technique works for any style of website, so whether you’re scaling a huge service-heavy but content-light layout (like Amazon) or a content-heavy but feature-light design (like a blog), the technique should be of use.

Better yet, the principle can help you organize your website’s information architecture; the proxority between pages is as important as what exists upon individual pages.

If you find yourself struggling to determine where stuff should be placed, this strategic guide will help you.

Priority: Boost the Best, Weed out the Worst

Many of us know only too well the benefits of prioritizing. The priority we give our content plays a huge part in the perceived value it has upon a page.

A site’s logo/name, for example, is recognizable because of its critically high placement, usually in the top left-hand corner, and it maintains visibility in that position on every page of a website.

A logo should be dominant over all other objects on a page. That’s its proxority.

Rate Each Element’s Value

To identify which pieces of a web page are most critical and important, we need to begin by examining every object in a layout, no matter how small.

Rate them based on their perceived value (according to what your visitors need to know or are likely to want to know) and their functional value (according to what contributions they make to the website, such as functionality or advertisements).

You can do this either by taking a screen capture (or printout) of the entire page and annotating it, or by producing a list of everything that appears on a page. This exercise will help you reassess the value of your website’s content.

Rate images, media, content (at a paragraph level), and everything else according to this numbering system:

Eliminate Unneeded Elements

When you’ve gone through everything, review the results.

Before we go any further, it’s probably worth mentioning that if you find content, links or objects that are no longer useful or don’t contribute anything, remove them.

Eliminating clutter from an interface is tough, but reductionism improves the general user experience of a website.

For elements rated at a 3, removal might be a bit harsh, so consider rewording or attaching things together to add value.

This website arranges its critical information into clearly defined segments for readability.

After you’ve identified the stuff that can be deleted, merged or moved, look at everything you’ve given a rating of 2. These elements can be the toughest to deal with because you want visitors to benefit from them, but you don’t want to overburden them.

One solution to giving these these needed, but non-essential elements an appropriate proxority is to use progressive disclosure: make content appear on demand with drop-down menus or tooltips, or display it further down the page so that it’s still available but less prominent.

Many websites use progressive disclosure to avoid swamping their users with details.

Proximity: Flow, Feedback and Functionality

We’ve considered the importance of prioritizing every asset on your page, identifying which bits have more sway than others, eliminating the fluff that has accumulated, combining weak material into a strong structure and pushing the less critical data out of the field of vision.

We now need to take all the remaining content and follow through on the second part of the process: to connect everything logically and put it all back together, as if it were a jigsaw puzzle — or a storybook, wherein the plot develops at consecutive points.

You should be left with everything that needs to be on your website, in its most diluted form, with supplementary content either hidden down the page or waiting in tooltips and extensible data boxes.

Rate Important Elements in Relation to Each Other

Go back over everything to which you have assigned ranks of 1 and 2, and rank them again; number everything according to what order you believe readers need to know about it.

If everything ends up where it should end up, it will all make perfect sense when you read it aloud.

The developers and designers behind this website clearly understand the need for organization and feedback.

Redesign

Once you’ve got everything labeled, re-shuffle your source code to match the new reading order. Pay special attention to bits of content that connect to or depend on other pieces of content (such as image captions), and put them as close together as possible.

Then, make the necessary changes to your CSS and JavaScript.

Proxority: Examples and Patterns in Action

Many websites already exhibit what I’d define as high proxority in that they take great care to use techniques that account for both priority (bringing attention to certain elements) and proximity (making reactions happen directly next to or above the objects being interacted with).

Below is a showcase of a few examples of best practices in use. Some we’ve briefly mentioned before, and others are being introduced here. By following similar practices, you can avoid user confusion and increase reading efficiency.

Using progressive disclosure to track the progress of a form:

Informing visitors of errors as they enter data:

Drop-down menus expanding close to the cursor icon:

Input objects disabling once they’ve been submitted:

Progress bars showing loading progress:

Content or light boxes expanding upon user interaction:

Proxority: Origami for the Web

The proxority principle posits that everything you find on a web page can be assigned a value and a place in sequence, in relation to the objects that surround it. This idea has existed since the early days of the Web, but too few designers pay enough attention to it. Think through what is actually needed, where it is needed and when it should appear (as opposed to simply putting all of the content on the screen, in its entirety, in an order that "looks pretty"). The need for such techniques is increasing, especially given the proliferation of handheld devices and the idea of designing with a "mobile-first" philosophy.

If content isn’t worthy of a restrictive mobile layout, why is it needed in the desktop layout?

If you have ten spare minutes, give this simple activity a try. Go through your website and weed out anything that isn’t offering what it should. Make existing objects provide greater value to users (or use less space), and don’t be afraid to reorganize your code and its content to ensure that what’s needed is what appears. Oh, and if you do feel tempted to make actions elicit responses, ensure that users know that your website is responding; after all, you don’t want them clicking "submit" ten times in a row, only to fail.

Related Content

• Quick Overview of User Experience for Web Designers
• Is It Time to Rethink Website Navigation?
• 10 Important UI Design Considerations for Web Apps
• Related categories: Web Design and User Interface

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

Six Revisions