<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>David Beck&#039;s Blog &#187; WordPress</title>
	<atom:link href="http://davidbeckblog.com/tag/wordpress/feed/" rel="self" type="application/rss+xml" />
	<link>http://davidbeckblog.com</link>
	<description>The ramblings of an obsessed programmer</description>
	<lastBuildDate>Thu, 22 Jul 2010 18:01:18 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Correct Paging</title>
		<link>http://davidbeckblog.com/2009/11/correct-paging/</link>
		<comments>http://davidbeckblog.com/2009/11/correct-paging/#comments</comments>
		<pubDate>Tue, 17 Nov 2009 20:59:49 +0000</pubDate>
		<dc:creator>David Beck</dc:creator>
				<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://davidbeckblog.com/?p=168</guid>
		<description><![CDATA[Paging is separating out content to multiple pages, and it is a really common task for websites. The problem is that like oh so many things on the web, it is rarely done well. Come with me on this journey (rant?) on the correct way to implement paging. Each page should have a &#8220;Next&#8221; and [...]]]></description>
			<content:encoded><![CDATA[<p>Paging is separating out content to multiple pages, and it is a really common task for websites. The problem is that like oh so many things on the web, it is rarely done well. Come with me on this journey (rant?) on the correct way to implement paging.</p>
<p>Each page should have a &#8220;Next&#8221; and &#8220;Previous&#8221; button. If you are referring to chronological content, such as blog posts, use &#8220;Newer&#8221; and &#8220;Older&#8221; to be more specific. They should be the most prominent part of the paging area, since anyone interacting with that area of the page will most likely be going back and forth through the results.</p>
<p>There should also be a list of the pages in between the next/previous button.</p>
<p>Here is an example from <a href="http://bubble.davidbeckblog.com" onclick="pageTracker._trackPageview('/outgoing/bubble.davidbeckblog.com?referer=');">Bubble Burster website</a>:</p>
<div id="attachment_169" class="wp-caption aligncenter" style="width: 356px"><img class="size-full wp-image-169 " title="Newer and Previous" src="http://davidbeckblog.com/wp-content/uploads/Screen-shot-2009-11-17-at-12.31.33-PM.png" alt="An example of using Newer and Previous buttons" width="346" height="53" /><p class="wp-caption-text">An example of using Newer and Previous buttons</p></div>
<p><span id="more-168"></span></p>
<p>Here I am using <a href="http://wordpress.org/extend/plugins/wp-page-numbers/" onclick="pageTracker._trackPageview('/outgoing/wordpress.org/extend/plugins/wp-page-numbers/?referer=');">WP Page Numbers</a>.</p>
<p>When the page is at the beginning or the end, leave the Next/Previous buttons in place, but disable the one that is no longer valid.</p>
<div id="attachment_171" class="wp-caption aligncenter" style="width: 322px"><img class="size-full wp-image-171 " title="Disable Previous" src="http://davidbeckblog.com/wp-content/uploads/Screen-shot-2009-11-17-at-12.32.38-PM.png" alt="Example of a disabled Newer button" width="312" height="55" /><p class="wp-caption-text">Example of a disabled Newer button</p></div>
<p>&#8220;First&#8221; and &#8220;Last&#8221; buttons should be 1&#8230; and &#8230;(last page number) because they are smaller than the entire word and more obvious than a symbol. This is best described by a picture:</p>
<div id="attachment_173" class="wp-caption aligncenter" style="width: 442px"><img class="size-full wp-image-173  " title="First and Last Example" src="http://davidbeckblog.com/wp-content/uploads/Screen-shot-2009-11-17-at-12.34.00-PM.png" alt="An example of using the first and last page number for first and last" width="432" height="56" /><p class="wp-caption-text">An example of using the first and last page number for first and last</p></div>
<p>Here you see that the first and last page numbers are present, even when they are many pages away from the current page. This replaces the need for first and last buttons and is a bit more obvious what they do. Clicking 1 goes to page 1. Just like clicking page 3 goes to page 3. You may not think about these kinds of things but every user has to learn how to user your interface and even if it only takes 10 seconds to understand what clicking &#8220;First&#8221; does, it is one more thing that makes your interface easier to use.</p>
<p>Also, it is more common for a user to want to go back or forward than to the first page. This is because they will only go to page 1 once (that is unless you have some really addictive content on page one that people keep trying to stop looking at but just can&#8217;t resist). If they were to go through your content page by page though, they would be hitting the &#8220;Next&#8221; button every page.</p>
<p>Finally, put a little padding on the numbers. This example is a little big and bubbly (for a <a href="http://bubble.davidbeckblog.com" onclick="pageTracker._trackPageview('/outgoing/bubble.davidbeckblog.com?referer=');">big and bubbly site</a>) but realize that you are putting a dozen links right next to each other. And while I&#8217;m at it, put a little effort into the appearance. Don&#8217;t just through raw links on a page, that&#8217;s ugly.</p>
]]></content:encoded>
			<wfw:commentRss>http://davidbeckblog.com/2009/11/correct-paging/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Bubble Burster website now live</title>
		<link>http://davidbeckblog.com/2009/09/bubble-burster-website-now-live/</link>
		<comments>http://davidbeckblog.com/2009/09/bubble-burster-website-now-live/#comments</comments>
		<pubDate>Mon, 14 Sep 2009 21:33:58 +0000</pubDate>
		<dc:creator>David Beck</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[Bubble Burster]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://davidbeckblog.com/?p=98</guid>
		<description><![CDATA[I finished up the Bubble Burster website today. You can find it at bubble.davidbeckblog.com. I built it with WordPress (same as this site) but I made the theme myself and wrote and edited several plugins to get it just right. I use to make sites by hand using PHP. I always figured any prebuilt package would [...]]]></description>
			<content:encoded><![CDATA[<p>I finished up the Bubble Burster website today. You can find it at <a href="http://bubble.davidbeckblog.com" onclick="pageTracker._trackPageview('/outgoing/bubble.davidbeckblog.com?referer=');">bubble.davidbeckblog.com</a>. I built it with WordPress (same as this site) but I made the theme myself and wrote and edited several plugins to get it just right.<br />
<span id="more-98"></span><br />
I use to make sites by hand using PHP. I always figured any prebuilt package would take you longer to learn the custom weirdness of the system that it would be quicker to do it yourself. But with wordpress, it is done so well that that isn&#8217;t really the truth. I plan to make all my sites with it from now on.</p>
]]></content:encoded>
			<wfw:commentRss>http://davidbeckblog.com/2009/09/bubble-burster-website-now-live/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
