<?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>StylizedWeb.com &#187; General</title>
	<atom:link href="http://stylizedweb.com/category/general/feed/" rel="self" type="application/rss+xml" />
	<link>http://stylizedweb.com</link>
	<description>Web Design + Wordpress Tutorials &#38; Resources</description>
	<lastBuildDate>Tue, 27 Mar 2012 09:00:07 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Project Status Plugin for WordPress</title>
		<link>http://stylizedweb.com/2012/03/27/project-status-plugin-for-wordpress/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=rss</link>
		<comments>http://stylizedweb.com/2012/03/27/project-status-plugin-for-wordpress/#comments</comments>
		<pubDate>Tue, 27 Mar 2012 09:00:07 +0000</pubDate>
		<dc:creator>Dejan Cancarevic</dc:creator>
				<category><![CDATA[General]]></category>

		<guid isPermaLink="false">http://stylizedweb.com/?p=634</guid>
		<description><![CDATA[For those of you who don't read the 3.7 Blog, we have recently released a WordPress plugin for managing projects. The following excerpt from the unveiling post explains our inspiration for the plugin. Anytime you experience the same situation a several times there is an opportunity to improve on it. My inspiration was a common [...]]]></description>
			<content:encoded><![CDATA[<p>For those of you who don't read the <a href="http://3.7designs.co/blog/" target="_blank">3.7 Blog</a>, we have recently released a <a href="http://3.7designs.co/blog/2012/03/project-status-plugin-for-wordpress/" target="_blank">WordPress plugin for managing projects</a>.</p>
<p><strong>The following excerpt from the unveiling post explains our inspiration for the plugin.</strong></p>
<blockquote><p>Anytime you experience the same situation a several times there is an opportunity to improve on it. My inspiration was a common occurrence of clients inquiring about the status of their project. This often happened despite setting dates, outlining milestones and creating schedules. To me, this illustrated two issues. Most importantly, clients shouldn’t have to proactively <em>contact me</em> to get an update. Secondarily the materials I delivered were too cumbersome to sort through and reference.</p>
<p>There are plenty of project management tools available, my company uses Basecamp for project management. While I still use it today, it’s use is primarily for internal communication. The problem with these systems is they are designed for the agencies, not clients. Most clients dread the idea of logging into a foreign system and the information provided is not what they are looking for anyways. In my experience, those who try these systems inevitably give up and resorting to e-mail by the time the project is over.</p>
<p>Most clients don’t care about what tasks we are performing or what the key milestones are. They  just want a general idea of how far along their project is, what they are responsible for and an expected completion date. Everything else is noise or irrelevant. Being that I haven’t come across a system that easily does this I went ahead and created one.</p>
<p>This creation is called “Project Status.” It’s a simple WordPress plugin for service based businesses and freelancers. It’s primary function is to give clients a visual indicator of the project status. More specifically it lets you define four key phases of a project, currently activities and client responsibilities. Rather than requiring logins, clients can access their project status through a custom URL.</p>
<p>And that’s just the beginning.</p></blockquote>
<h2>Plugin Features</h2>
<p>This plugin is a simple way to give clients that information while providing you with a high level overview of open projects and their standpoint. It gives you the ability to:</p>
<ul>
<li>Create and manage unlimited projects</li>
<li>Track levels of completion</li>
<li>Track current tasks</li>
<li>Identify client responsibilities and project holds</li>
<li>Identify four major milestones (20%/40%/60%/80%)</li>
<li>Send clients to a page containing the above information</li>
</ul>
<p><strong>Projects are displayed in a responsive template so clients can access and monitor their project from any device.</strong></p>
<h2>Screenshots</h2>
<p><img class="aligncenter size-full wp-image-920" title="screenshot-1-sml" src="http://3.7designs.co/blog/wp-content/uploads/2012/03/screenshot-1-sml.png" alt="" width="680" height="368" /></p>
<p><a href="http://3.7designs.co/blog/wp-content/uploads/2012/03/screenshot-2-sml.png" rel="lightbox[919]"><img class="aligncenter size-full wp-image-921" title="screenshot-2-sml" src="http://3.7designs.co/blog/wp-content/uploads/2012/03/screenshot-2-sml.png" alt="" width="680" height="505" /></a><a href="http://3.7designs.co/blog/wp-content/uploads/2012/03/screenshot-3-sml.png" rel="lightbox[919]"><img class="aligncenter size-full wp-image-922" title="screenshot-3-sml" src="http://3.7designs.co/blog/wp-content/uploads/2012/03/screenshot-3-sml.png" alt="" width="680" height="432" /></a><a href="http://3.7designs.co/blog/wp-content/uploads/2012/03/screenshot-2-sml.png" rel="lightbox[919]"><img class="aligncenter size-full wp-image-923" title="screenshot-4-sml" src="http://3.7designs.co/blog/wp-content/uploads/2012/03/screenshot-4-sml.png" alt="" width="680" height="370" /></a></p>
<h2>Download the Plugin</h2>
<p>You can download the plugin through the WordPress plugin screen, just search for "project status."<a href="http://wordpress.org/extend/plugins/project-status/" target="_blank"> Or download it directly here</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://stylizedweb.com/2012/03/27/project-status-plugin-for-wordpress/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Keeping Your WordPress Database Healthy</title>
		<link>http://stylizedweb.com/2011/12/06/keeping-your-wordpress-database-healthy/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=rss</link>
		<comments>http://stylizedweb.com/2011/12/06/keeping-your-wordpress-database-healthy/#comments</comments>
		<pubDate>Tue, 06 Dec 2011 18:00:04 +0000</pubDate>
		<dc:creator>3pointross</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[caching]]></category>
		<category><![CDATA[database]]></category>
		<category><![CDATA[optimization]]></category>
		<category><![CDATA[size]]></category>
		<category><![CDATA[speed]]></category>

		<guid isPermaLink="false">http://stylizedweb.com/?p=620</guid>
		<description><![CDATA[As far as site maintenance goes most WordPress users know the importance of keeping WordPress and plugins up to date. Some also know to keep frequent site backups. Few realize there is more to website maintenance than these two tasks. The health of your WordPress database is often overlooked. To explain further, WordPress typically stores information (or [...]]]></description>
			<content:encoded><![CDATA[<p>As far as site maintenance goes most WordPress users know the importance of keeping WordPress and plugins up to date. Some also know to keep frequent site backups. Few realize there is more to website maintenance than these two tasks. The health of your WordPress database is often overlooked.</p>
<p>To explain further, WordPress typically stores information (or data) on a MySQL database located on your web host. Storing information in a database, rather than in files, makes WordPress more flexible, capable and reliable. This is why most web based software use databases for information storage. Databases are not with out their drawbacks. It takes time to access a database, look up, retrieve it and display information. Typically the time required to perform these actions is negligible. The capabilities the database affords are worth the minor performance hit. Over time the database can become bloated however, this slowing down the entire site.</p>
<p>Not only are users intolerant of slow websites (many leave after 4 - 5 seconds of load time,) Google now includes site performance in their ranking algorithm. Suffice to say, you can no longer afford to have a slow website regardless of cause and many do because they have not kept their database healthy. To do so you must put your database on a diet, optimize your tables and eliminate the need for it altogether where possible.</p>
<h2>Going on a Database Diet</h2>
<p><a href="http://stylizedweb.com/assets/screenshot-1.jpg"><img class="alignright size-medium wp-image-622" title="screenshot-1" src="http://stylizedweb.com/assets/screenshot-1-300x211.jpg" alt="" width="300" height="211" /></a>The best way to address an "overweight" database is by slimming it down. This means optimizing the database by removing any old, unnecessary information (or tables.) You could login to your MySQL database and do this manually (if you are a gluten for punishment I highly recommend it,) but it's better to have a plugin do it for you. The choice is yours, I choose the later. <a href="http://wordpress.org/extend/plugins/wp-database-optimizer/" target="_blank">The WP Database Optimizer plugin</a> will delete excessive post revisions and other unnecessary information and you can even schedule it to run regularly.</p>
<p>This plugin takes care of obvious bloat, but misses the commonly overlooked pending comments. If you are like me you see pending comments much like e-mail, at a certain point it's not worth manually marking each one as spam which in turn causes them to build up to an excessive level. Those 5,000+ spam comments awaiting moderation are also slowing down your website (damn you spammers,) so you should probably clear them out. Of course WordPress doesn't make it easy to delete thousands of comments at the same time, so we will have to find a plugin to do it for us. Luckily t<a href="http://wordpress.org/extend/plugins/delete-pending-comments/" target="_blank">he Delete Pending Comments</a> plugin does just that. One click and some extra confirmation latter and your database is feeling lean and mean.</p>
<p>With your Database slimmed down you can move onto step two, optimize that sucka!</p>
<h2>Optimize Your Tables</h2>
<p><a href="http://stylizedweb.com/assets/screenshot-1-1.jpg"><img class="alignright size-medium wp-image-623" title="screenshot-1 (1)" src="http://stylizedweb.com/assets/screenshot-1-1-300x300.jpg" alt="" width="300" height="300" /></a>MySQL has an "optimize" function built in which defragments stored data. This reduces the time necessary to query a database and can reduce the file size as well. Again, for <a href="http://www.dbtuna.com/article.php?id=15" target="_blank">those of you who love pain you can do it manually</a>... but I would much rather let the <a href="http://wordpress.org/extend/plugins/wp-optimize/" target="_blank">WP-Optimize</a> plug-in do it for me. Beyond optimizing tables, WP-Optimize can also clean out the database making the two aforementioned plug-ins unnecessary. Three birds with one stone.</p>
<p>Now your database is lean and optimized, you should be good to go right? Not quiet, there is one last step. Eliminate the database where possible.</p>
<h2>Don't Use the Database</h2>
<p>There is no better way to reduce database associated slow downs than removing the database all together. Sound fanatical? Stay with me. I am not suggesting you find some way to run WordPress with out a database, rather use a caching plugin to reduce how often the database is used (my favorite is <a href="http://wordpress.org/extend/plugins/w3-total-cache/" target="_blank">W3 Total Cache</a>.) Caching plugins create a static version of your page the first time a user visits. Meaning, when the first users visits your page the database is accessed to generate the page. That generated page is stored on the server so the next time a user visits the page they are served that same pre-generated page and the database is left alone. When the page is altered, such as an edit or a new comment, the generate page is flushed and a new one is created.</p>
<p>This reduces most of the database associated slow downs. However, since some users will still encounter the database generated page it's worth getting your database trimmed and optimized as described above.</p>
<h2>Summary: Set and Forget</h2>
<p>The great thing about the plugins mentioned is most of them can be automated. Just install them once, schedule them to be run routinely and you have very little to worry about. It just takes the initial twenty minutes to get them installed and configured. Last but not least, the healthiest database is one with several backups. Make sure to backup your database frequently to prevent any unrecoverable issues.</p>
]]></content:encoded>
			<wfw:commentRss>http://stylizedweb.com/2011/12/06/keeping-your-wordpress-database-healthy/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>What I Learned at WordCamp Detroit 2011</title>
		<link>http://stylizedweb.com/2011/11/28/what-i-learned-at-wordcamp-detroit-2011/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=rss</link>
		<comments>http://stylizedweb.com/2011/11/28/what-i-learned-at-wordcamp-detroit-2011/#comments</comments>
		<pubDate>Mon, 28 Nov 2011 15:31:56 +0000</pubDate>
		<dc:creator>3pointross</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Business Models]]></category>
		<category><![CDATA[coding]]></category>
		<category><![CDATA[Detroit]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[security]]></category>
		<category><![CDATA[WordCamp]]></category>

		<guid isPermaLink="false">http://stylizedweb.com/?p=612</guid>
		<description><![CDATA[As a WordPress obsessor, I jumped at the opportunity to not only attend WordCamp Detroit but also help plan it. Months of work finally paid off on November 12th and 13th where 250 WordPress lovers spent two days at the Detroit Renaissance Center and listened to speakers who flew in from all over the US (and Canada). As [...]]]></description>
			<content:encoded><![CDATA[<p>As a WordPress obsessor, I jumped at the opportunity to not only attend WordCamp Detroit but also help plan it. Months of work finally paid off on November 12th and 13th where 250 WordPress lovers spent two days at the Detroit Renaissance Center and listened to speakers who flew in from all over the US (and Canada). As a self labeled "expert" I didn't expect to learn much, but I was wrong. Here are some of my key takeaways:</p>
<h2>Sam Cohen, Local Development</h2>
<p><a href="http://www.samcohen.net/" target="_blank">Designer and Developer at SamCohen.net</a></p>
<ul>
<li>It's time to stop cowboy coding (ie: editing sites directly off the file server)</li>
<li>Instead develop your site locally using <a href="http://sourceforge.net/projects/xampp/" target="_blank">XAMPP</a>, <a href="http://www.mamp.info/en/index.html" target="_blank">MAMP</a>, <a href="http://www.wampserver.com/en/" target="_blank">WAMP</a> or my favorite <a href="http://www.instantwp.com/" target="_blank">InstantWP</a></li>
<li>Use <a href="http://crowdfavorite.com/wordpress/ramp/" target="_blank">RAMP</a> to deploy content from dev to live environments</li>
</ul>
<h2>Chris Ross, Free is Not A Business Model</h2>
<p><a href="http://thisismyurl.com/" target="_blank">WordPress Designer at ThisIsMyURL.com</a></p>
<ul>
<li>In business school, they teach you that "Free is not a business model." With WordPress, it is.</li>
<li>WordPress allows you to make money by giving things away for free.</li>
<ul>
<li>Make free plugins and charge for support</li>
<li>Make free plugins and get freelance gigs (to customize)</li>
<li>Ask for donations</li>
<li>Write / publish free content and get donations or ads</li>
<li>Write / publish free content and make affiliate sales</li>
</ul>
<li>Google is now notifying site owners that they need to upgrade WordPress (through Google Webmaster tools)</li>
</ul>
<h2>Wally Metts, Communication</h2>
<p><a href="http://TheDaysMan.com" target="_blank">Communications Professor at Spring Arbor University</a></p>
<ul>
<li>An adjective is the enemy of the noun. Avoid adjectives, use stronger nouns.</li>
<li>Active writing means using better verbs.</li>
<li>Vivid writing means using better nouns.</li>
<ul>
<li>ie: don't use "they made a decision" use "they decided"</li>
</ul>
<li>When communicating "unpad" everything. Remove meaningless, doubled and inferred words.</li>
</ul>
<div>
<h2>Matt Lincoln Russell, Online Communities</h2>
<p><a href="http://www.lincolnwebs.com/" target="_blank">Software Developer at Vanilla Forums</a></p>
<ul>
<li>Forums are still one of the most popular methods of online socialization</li>
<li>The typical forum design does little to engage the user, they are complicated and overwhelming</li>
<li>Some forum solutions (like<a href="http://vanillaforums.org/" target="_blank"> Vanilla</a>) try and simplify the forum process</li>
<li>Getting forums started is the hardest part</li>
<li>Eventually people will police and moderate your forum for you</li>
</ul>
</div>
<h2>David Wilemski, WordPress Security</h2>
<ul>
<li>A large part of keeping WordPress secure is being "less hackable" than everyone else</li>
<li>Most attacks are not targeted (attacks try thousands of WordPress sites, looking for the most vulnerable.)</li>
<li>Common vulnerabilities:</li>
<ul>
<li>Privilege escalation</li>
<li>SQL Injection</li>
<li>XSS</li>
<li>CSRF</li>
</ul>
<li>Some easy fixes:</li>
<ul>
<li>Change your WordPress table prefix</li>
<li>Rename the "admin" account</li>
<li>Use SSL in your admin</li>
<li>Use 755 file permissions for for directories and 644 for files</li>
<li>Use the wp-config.php secure keys</li>
<li>Limit login attempts (or login via specific IPs)</li>
</ul>
<li>Be prepared backup regularly, including:</li>
<ul>
<li>Database</li>
<li>Theme</li>
<li>Plugins</li>
<li>Uploads</li>
</ul>
<li>When hacked, clear and reinstall (there could be hidden hacks)</li>
</ul>
<h2>Overall Takeaways</h2>
<p>Having used WordPress since 2006 I didn't expect to learn new things, but the community continues to impress me (or maybe I'm not as smart as I think.) I often go to events such as WordCamp for networking and opportunities, not for education. However there are so many smart WordPress experts willing to share their knowledge for free. Additionally, WordCamp Detroit demonstrated the breadth of the WordPress community. The best presentations were not about core WordPress functionality, rather the surrounding topics of being a website owner, developer, designer, etc...</p>
]]></content:encoded>
			<wfw:commentRss>http://stylizedweb.com/2011/11/28/what-i-learned-at-wordcamp-detroit-2011/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Fundamentals of Web Design Layout: Part 2</title>
		<link>http://stylizedweb.com/2011/11/02/fundamentals-of-web-design-layout-part-2/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=rss</link>
		<comments>http://stylizedweb.com/2011/11/02/fundamentals-of-web-design-layout-part-2/#comments</comments>
		<pubDate>Wed, 02 Nov 2011 09:00:05 +0000</pubDate>
		<dc:creator>3pointross</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[fundamentals]]></category>
		<category><![CDATA[layout]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://stylizedweb.com/?p=550</guid>
		<description><![CDATA[In my previous post on web design layout, I discussed the role of layout in design, covered two examples of well executed layout and discussed what contributed to the success of them. In this post, we will cover how to analyze and plan for the most effective layout for your project. To plan a layout, [...]]]></description>
			<content:encoded><![CDATA[<p><a title="Fundamentals of Web Design Layout: Part 1" href="http://stylizedweb.com/2011/09/28/fundamentals-of-web-design-layout-part-1/">In my previous post on web design layout</a>, I discussed the role of layout in design, covered two examples of well executed layout and discussed what contributed to the success of them. In this post, we will cover how to analyze and plan for the most effective layout for your project. To plan a layout, you must first understand its purpose. Layout -- loosely defined -- is the organization of elements on the page. To be more specific, I define effective layout as:</p>
<blockquote><p>The organization of content, elements and objects on a page such that users can scan over the arrangement and understand the relative importance and relationship of everything they see.</p></blockquote>
<p>To elaborate, successful layouts <em><strong>organize</strong></em> elements on the page based on importance and relationship. The more organized your page is, the easier it is to look at, understand and use. An important distinction to make, is that organization is more than arranging things in a neat and cleanly way. Organization is much deeper, the arrangement of elements must inform the user about them.</p>
<p>Applied to the web (and layout specifically,) organization means elements on the page are <strong>arranged based on how they are related or connected</strong>. Elements are <strong>arranged based on their relationship to other elements</strong> on the page and <strong>the context of the website</strong>. Interrelating elements are placed in close proximity to form a cohesive group. Elements involving the sites goals are more important, and are given more space and visual prominence. For example, a site designed to sell books would arrange book listings so they are seen first. Users coming to the site will be looking for books, so placing them in an visually obvious spot (top center of the design, for example) informs them of the site context and makes their primary action (browsing books) effortless.</p>
<p>In order to design an effective layout, you must first understand the relationships of page elements. Only through understanding the relationships can you arrange them in the most organized way.</p>
<h2>Understanding The Relationships</h2>
<p>As I eluded to earlier, there are two types of relationships you should seek to understand. First, is the relationship of an element to the user or clients goal. Elements that are vital to conversion (a user performing a desired task, like purchasing a product) or user's goals are more important and should be organized as such. Second, is the relationship of elements to each other. Users interpret everything they see, one universal interpretation being that elements in close proximity are related. Great layouts are designed around these concepts, allowing users to understand a design without conscious thought.</p>
<h3>Relationship to Goals</h3>
<div id="attachment_576" class="wp-caption alignright" style="width: 310px"><a href="http://stylizedweb.com/wp-content/uploads/goal_lists.jpg"><img class="size-medium wp-image-576" title="goal_lists" src="http://stylizedweb.com/wp-content/uploads/goal_lists-300x157.jpg" alt="" width="300" height="157" /></a><p class="wp-caption-text">Example user and client goals for an online book store</p></div>
<p>How an element relates to user and client goals is the most important aspect of layout, so you will find it best to start here. To do so, you must first know what the client goals and user tasks are. Hopefully you have already uncovered this during planning and discovery phases, if not there is never a better time to clearly define why the site exists. This information can be obtained in many ways, interviewing clients and stakeholders, looking at site statistics, performing field research, etc... Design research is a subject best left for another post. Regardless of your method, first understand what users and clients want from the website.</p>
<div id="attachment_577" class="wp-caption alignright" style="width: 310px"><a href="http://stylizedweb.com/wp-content/uploads/layout_example.jpg"><img class="size-medium wp-image-577" title="layout_example" src="http://stylizedweb.com/wp-content/uploads/layout_example-300x251.jpg" alt="" width="300" height="251" /></a><p class="wp-caption-text">Important elements should be placed in larger spaces with more visual prominence, like a content well. Lesser elements can be placed in smaller, ancillary areas like a sidebar.</p></div>
<p>With this information in hand, list all of the site goals (for both your clients and the users) and then rank them based on importance. Having a clear hierarchy of objectives will make future decisions to prioritize easier. The most important elements should be given the most space and most prime locations. Elements of lessor importance can be placed further down the page.</p>
<p>Once the list is created, create a second list containing any element which relates to the goals (ie: call to action button, primary headline, photo of product, etc...). Elements which relate to the most important goals should receive the most visual prominence, those which relate to non-essential goals can be deemphasized.</p>
<p>Identifying the most important elements is half the battle, but you must still consider how elements relate to each other.</p>
<h3>Relationship to Each Other</h3>
<div id="attachment_579" class="wp-caption alignright" style="width: 310px"><a href="http://stylizedweb.com/wp-content/uploads/submit_cancel.jpg"><img class="size-medium wp-image-579" title="submit_cancel" src="http://stylizedweb.com/wp-content/uploads/submit_cancel-300x210.jpg" alt="" width="300" height="210" /></a><p class="wp-caption-text">On a form, the submit button and cancel link are related. Laying them out next to each other is visually logical.</p></div>
<p>Elements on a page have relationships. Some elements are intimately related, others are practically unrelated (the only commonality between them being the website they live on.) A pair of submit and cancel buttons are closely related as they both control the functionality of a specific form. The cancel button and a home link however, are almost completely unrelated.</p>
<div id="attachment_580" class="wp-caption alignright" style="width: 310px"><a href="http://stylizedweb.com/wp-content/uploads/submit_cancel_home.jpg"><img class="size-medium wp-image-580" title="submit_cancel_home" src="http://stylizedweb.com/wp-content/uploads/submit_cancel_home-300x176.jpg" alt="" width="300" height="176" /></a><p class="wp-caption-text">Adding a home button is illogical and confusing because it&#39;s unrelated to the elements surrounding it.</p></div>
<p>When designing a site you will understand these relationships intuitively. You know enough about the context of the page, user and clients where relationships will be obvious. Users however, have no idea the relationship between elements. This is why the layout must communicate it to them.</p>
<div id="attachment_578" class="wp-caption alignright" style="width: 310px"><a href="http://stylizedweb.com/wp-content/uploads/groups-and-subgroups.png"><img class="size-medium wp-image-578" title="groups and subgroups" src="http://stylizedweb.com/wp-content/uploads/groups-and-subgroups-300x186.png" alt="" width="300" height="186" /></a><p class="wp-caption-text">An example of grouped elements, an a group with a sub-group</p></div>
<p>Related elements should be grouped together into a common space. Unrelated elements should be kept far apart. Often times you will end up with groups and subgroups of related elements. A sidebar for example, typically contains non-critical information and actions. Within a sidebar -- which is a group itself -- you typically have sub-groups of related elements. The "Stay Updated" section of this blog contains several related elements all grouped within the site sidebar. The "Stay Updated" section has a headline, latest tweet (which has the tweet itself, the date and user handle), icons and links to RSS and E-MAIL subscription. All of these elements are closely related.</p>
<p>The grouping instantly tells the user the relationships of the elements. On a broad level, one doesn't need to read every word in the "Stay Updated" section to know the elements within deal with the same subject mater. On a micro-level, the layout informs the users the RSS icon and the Entires RSS link are "one unit."</p>
<p>Another good example of this concept is the split column approach in the Categories / Archives section. These links essentially take the user to the same place, a list of previous articles. They only differ in how the list is filtered. Rather than creating two separate sections (which communicates non-relation) they are contained in a single section (which communicates a relationship.)</p>
<div id="attachment_583" class="wp-caption alignright" style="width: 310px"><a href="http://stylizedweb.com/wp-content/uploads/micro_groups.jpg"><img class="size-medium wp-image-583" title="micro_groups" src="http://stylizedweb.com/wp-content/uploads/micro_groups-300x173.jpg" alt="" width="300" height="173" /></a><p class="wp-caption-text">With in groups are &quot;micro-groups&quot; where closely related elements become perceived as a single unit.</p></div>
<p>To understand the relationships simply create an inventory of all elements on the page and document how you would categorize them. You can do high level categorization such as "navigation, primary content, actions, etc..." or detail level such as "archive links, calls to action, utility navigation, etc..."</p>
<p>If needed, you can always use card sorting (a common IA practice) and put each major element onto a card and pill them together based on their relationships.</p>
<h2>Layout Next Steps</h2>
<p>Once you understand how elements relate to site objectives, user goals and other elements you can begin crafting a layout. Because the function of layout is to best organize and display the elements on the page understanding the relationships is essential. The word "organization" by definition means "the structure or arrangement of connected items," relationships determine connectedness.</p>
<h3>Read the Whole Series</h3>
<p><a href="http://stylizedweb.com/2011/09/28/fundamentals-of-web-design-layout-part-1/">Fundamentals of Web Design Layout Part 1</a></p>
]]></content:encoded>
			<wfw:commentRss>http://stylizedweb.com/2011/11/02/fundamentals-of-web-design-layout-part-2/feed/</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
		<item>
		<title>Fundamentals of Web Design Layout: Part 1</title>
		<link>http://stylizedweb.com/2011/09/28/fundamentals-of-web-design-layout-part-1/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=rss</link>
		<comments>http://stylizedweb.com/2011/09/28/fundamentals-of-web-design-layout-part-1/#comments</comments>
		<pubDate>Wed, 28 Sep 2011 09:00:39 +0000</pubDate>
		<dc:creator>3pointross</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[fundamentals]]></category>
		<category><![CDATA[graphic design]]></category>
		<category><![CDATA[layout]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://stylizedweb.com/?p=536</guid>
		<description><![CDATA[Layout is the foundation of all visual design, yet it commonly sits back seat to "sexier" design techniques like depth, color and typography. When layout is ignored, designs become fundamentally unusable, rendering a website useless to both users and stakeholders. To respect the role of layout requires a solid understanding of what it is. Layout [...]]]></description>
			<content:encoded><![CDATA[<p>Layout is the foundation of all visual design, yet it commonly sits back seat to "sexier" design techniques like depth, color and typography. When layout is ignored, designs become fundamentally unusable, rendering a website useless to both users and stakeholders.</p>
<p>To respect the role of layout requires a solid understanding of what it is.</p>
<h2>Layout Defined</h2>
<p>The classic definition of layout is "The way in which parts of something are arranged." In web design specifically, layout is "The way elements, content and graphics are organized on the page." A key distinction here is the substation of "arranged" for "organized." Arranging elements without organizing them doesn't create a layout, it creates visual vomit.</p>
<p><strong>The purpose of a layout is organization, more specifically layout uses organization to:</strong></p>
<ul>
<li>Convey relative importance of content</li>
<li>Group similar content and separate unrelated</li>
<li>Optimize visual flow</li>
<li>Establish a basic visual hierarchy</li>
</ul>
<p>Each aspect of layout might not be compelling alone, but together they make or break a design.</p>
<h2>When Good Layouts Go Bad</h2>
<p>A great layout makes design look easy. Every element fits so well within the design, you would never consider putting them anywhere else. The "logical" organization of elements makes navigating the website easy. Users don't need to think where desired content is located, the layout tells them. If users are looking for important content, they know to look in the primary content area, typically located in the area with the most space. If they are looking for something less important, like navigation, they look for secondary or tertiary areas which are smaller and placed in less prominent locations.</p>
<p>Because layouts are purely visual, the best way to understand what works and what doesn't is through example.</p>
<h2>Well Organized Layouts</h2>
<h3><a href="http://stylizedweb.com/wp-content/uploads/2011/09/IA-Example1.jpg"><img class="alignright size-full wp-image-546" title="IA-Example" src="http://stylizedweb.com/wp-content/uploads/2011/09/IA-Example1.jpg" alt="" width="300" height="588" /></a>Information Architects</h3>
<p>The Information Architects website, while minimal to the point of being plain, has a beautiful designed layout. The layout is so predominate, it's actually the strongest design element.</p>
<p>The design makes no attempt to hide the underlying grid structure. Ample whitespace makes it easy to identify where each section within the layout starts and stops. The few graphical elements that are on the page receive maximum attention because they heavily contrast the otherwise white and text heavy design.</p>
<p>In terms of layout, the first element a user encounters is the top navigation which is broken up into four columns (1). That same four column structure is retained at the bottom where the footer navigation lies (2). By using the same column structure, users can easily extrapolate that the footer elements are also navigation. This occurs based on principles of consistency. Elements which look alike are thought as related, elements that look different are considered to be unrelated.</p>
<p>The primary area is bold, and large, equipped with a massive photo and supported with text which is broken up into three columns (3). Immediately below lives a news section, which for all intensive purposes is a single column. By shifting that column to the right and confining it to a smaller column whitespace and legibility are maximized (4).</p>
<h4>Why this Layout Works</h4>
<p>The primary goal of any layout is to clearly organize and locate information. The Information Architects website does so beautifully. By observing the layout you can decipher what's most important and in what order. Larger, higher up elements are clearly most important and as elements become less importance they shrink and are moved further down the page. The grid keeps everything organized neatly, everything falls into place in a logical way and your focus is never divided between two elements that seem equally important.</p>
<p>In this design, the layout is fitted the content.</p>
<h3><a href="http://stylizedweb.com/wp-content/uploads/2011/09/mbd_example1.jpg"><img class="alignright size-full wp-image-547" title="mbd_example" src="http://stylizedweb.com/wp-content/uploads/2011/09/mbd_example1.jpg" alt="" width="300" height="317" /></a>Mark Boulton Design</h3>
<p>The Mark Boulton Design website also employs a well executed layout. Like Information Architects, the design uses a grid to clearly organize content on the page. Unlike Information Architects, the design is bold, vibrant and graphical in nature. This demonstrating that using a grids and organization doesn't mean the site must be graphically stark.</p>
<p>The page header is placed at the very top of the page and is larger than anything else by a factor of at least 100. This clearly communicates it's the most important element (1). The header content is case studies, intentionally telling the user that above else, they should be aware of the companies previous work. Once you travel past the header, there is a full column tagline describing what the company does (2). Because the tagline is smaller and placed further down the page, it's apparent that Mark Boulton Design feels previous work is more compelling.</p>
<p>Below the tagline resides four equal width columns (3). The content with in those columns seem unrelated, but their size and placement indicates they are of equal importance. The ample whitespace makes it easy to read and digest content within a column, if you choose to do so.</p>
<h4>Why this Layout Works</h4>
<p>It doesn't feel like it, but there is a lot of content on this page: Case studies, navigation, a logo, the mission statement (or tagline), a brief company description, news, contact information and a portfolio section... phew! Because the content is laid out in a logical, well organized way it is easy to read and comprehend. The layout tells you what to look at and in what capacity.</p>
<p>With a quick glance you know what's most important (the header), almost as important (the tagline) and that everything else is equally important. Additionally, by using four equal width columns you can easily scan the headline of each to determine if the column contains the content you are seeking. If not, you continue scanning until you find the one that does.</p>
<p>Again the design puts content together like a puzzel. Everything fit's into place perfectly.</p>
<h2>What's Next</h2>
<p>Hopefully these examples illustrate what a well designed layout is composed of. Specifically, the layout organizes the content on the page based on it's importance and relationship. More important content is placed in large containers and located at the top of the page. Less important content is contained in smaller cells and placed lower on the page. Similar content (or content that's related) is grouped together which communicates their relationship.</p>
<p>In our next installment we will cover how to design your own layout in the most effective way.</p>
<h3>Read the Whole Series</h3>
<p><a href="http://stylizedweb.com/2011/09/28/fundamentals-of-web-design-layout-part-1/">Fundamentals of Web Design Layout Part 1</a></p>
<p><a href="http://stylizedweb.com/2011/11/02/fundamentals-of-web-design-layout-part-2/">Fundamentals of Web Design Layout Part 2</a></p>
]]></content:encoded>
			<wfw:commentRss>http://stylizedweb.com/2011/09/28/fundamentals-of-web-design-layout-part-1/feed/</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
		<item>
		<title>Voices that Matter Conference 2011</title>
		<link>http://stylizedweb.com/2011/05/24/voices-that-matter-conference-2011/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=rss</link>
		<comments>http://stylizedweb.com/2011/05/24/voices-that-matter-conference-2011/#comments</comments>
		<pubDate>Tue, 24 May 2011 19:21:57 +0000</pubDate>
		<dc:creator>3pointross</dc:creator>
				<category><![CDATA[General]]></category>

		<guid isPermaLink="false">http://stylizedweb.com/?p=523</guid>
		<description><![CDATA[I had the fortune of attending the Voices that Matter Conference last year in San Francisco and enjoyed every minute of it and look forward to attending this years on June 27th. The conference was impeccably run featuring some of the best and brightest of the industry. The highlight is a speaker / attender mixed [...]]]></description>
			<content:encoded><![CDATA[<p>I had the fortune of attending the Voices that Matter Conference last year in San Francisco and enjoyed every minute of it and look forward to attending this years on June 27th. The conference was impeccably run featuring some of the best and brightest of the industry. The highlight is a speaker / attender mixed lunch where I was able to meet some of my favorite authors like Robert Hokeman Jr and the people behind the Filament group.</p>
<p>I recommend anyone that can make it, do so. More info below:</p>
<h2><strong>Design the Future with the Leading Web Design Authors</strong></h2>
<p><strong>New Riders’ <a href="http://webdesign2011.voicesthatmatter.com/">Voices That Matter: Web Design Conference</a>, </strong>taking place June 27-28<sup>th</sup> in San Francisco, is where today’s most<strong> </strong>respected industry authors and thought-leaders of the Web design revolution come together to share some remarkable advances in Web design. Participants in this breakthrough event will gain insight on the best approaches to designing for mobile, social media, HTML5 and CSS3, content strategy, grids, typography, fonts, workflow, user experience, and so much more!<strong> </strong></p>
<p>Not only does this two-day program compress as much learning as humanly possible into a comprehensive format, it provides a forum to hear from some of the industry’s leading gurus. Don’t miss this opportunity to meet face-to-face with dozens of authors and experts. Hear from <strong><a href="http://webdesign2011.voicesthatmatter.com/speakers/15130">Bruce Lawson</a></strong>, <strong><a href="http://webdesign2011.voicesthatmatter.com/speakers/15077">Kelly Goto</a></strong>, <a href="http://webdesign2011.voicesthatmatter.com/speakers/15314"><strong>Shawn Welch</strong></a>, and more at this tremendous and efficient conference filled with education and networking.  Plan to join us in San Francisco this June. We are certain that you will walk away inspired!</p>
<p><strong><span style="text-decoration: underline;">SPECIAL SAVINGS</span>! </strong>As someone that reads this blog, you can save <strong>$200</strong>* off the conference fee by <strong>providing priority code WSDMAL4 and <a href="http://www.voicesthatmatter.com/webdesign2011/register.aspx">registering</a> by</strong> <strong>May 2<sup>7th</sup> </strong>as this $100 discount is combined with the Early Bird pricing! Check out the <strong><a href="http://webdesign2011.voicesthatmatter.com/">conference web site</a></strong> or contact <strong><a href="mailto:Barbara.Gavin@Pearson.com">Barbara Gavin</a></strong>, <strong>617.848.7026 </strong>to register or request more information.</p>
<p>*Valid on new registrations only.</p>
]]></content:encoded>
			<wfw:commentRss>http://stylizedweb.com/2011/05/24/voices-that-matter-conference-2011/feed/</wfw:commentRss>
		<slash:comments>21</slash:comments>
		</item>
		<item>
		<title>Cufon and WordPress &#8211; Clean and Custom Fonts</title>
		<link>http://stylizedweb.com/2010/10/31/cufon-and-wordpress-clean-and-custom-fonts/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=rss</link>
		<comments>http://stylizedweb.com/2010/10/31/cufon-and-wordpress-clean-and-custom-fonts/#comments</comments>
		<pubDate>Sun, 31 Oct 2010 19:47:24 +0000</pubDate>
		<dc:creator>3pointross</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[cufon]]></category>
		<category><![CDATA[fonts]]></category>
		<category><![CDATA[plugins]]></category>
		<category><![CDATA[replacement]]></category>

		<guid isPermaLink="false">http://stylizedweb.com/?p=464</guid>
		<description><![CDATA[Before there was @font-face web designers used advanced font replacement techniques to widen the pool of typefaces that could be used online. Even though all of the popular browsers support @font-face and font embeding there are still good reasons to use some of these font replacement techniques. The major issue that font embeding still faces [...]]]></description>
			<content:encoded><![CDATA[<p>Before there was @font-face web designers used advanced font replacement techniques to widen the pool of typefaces that could be used online. Even though all of the popular browsers support @font-face and font embeding there are still good reasons to use some of these font replacement techniques. The major issue that font embeding still faces is that while it does give you a large pool of typefaces to choose from that pool is still limited due to licensing issues. If you are developing a design that has a specific typeface with in the brand guidelines you might not be able to license it for web usage.</p>
<p>This is where the font replacement methods become extremely useful. Because the font is not downloaded directly (rather used to "create" the rendered font on the screen) you are not faced with the same issues as font embeding. Font replacement has been handled in a number of ways over the years, from automatically generating JPGs to embeding flash. The most effective approach that I have come across is the dynamic creation and rendering of the type through javascript and the SVG or the canvas element (depending on the browser), this being the "cufon" approach.</p>
<p>While installing cufon on a site is relatively easy, it actually is super simple when you are using WordPress.</p>
<h2>The Two Parts of Cufon</h2>
<p>Cufon essentially consists of two parts:</p>
<ol>
<li>A font file that contains a generated version of the font you wish to use</li>
<li>The javascript font rendering engine</li>
</ol>
<p>In order to get Cufon running on your WordPress installation you need the two pieces together. These both end up being javascript files, then you simply declaire which HTML elements you would like to be replaced with the Cufon text. Cufon then uses your CSS styling to determine what the type should look like (in terms of size, color, weight, etc...)</p>
<p>The first step is to generate a Cufon version of the font you wish to use. While this may sound complicated it actually is really simple. Just browse over to the <a href="http://cufon.shoqolate.com/generate/" target="_blank">Cufon font generator</a> site and you are able to select the font you wish to convert off your hard drive. The standard conversion settings are typically fine, the only item you should be sure to enabled is the "WordPress punctuation" with in Glyphs section of options.</p>
<p>This will create a javascript file that contains your now cufon embeded font. Typically the file will follow this format <code>fontname-fontweight.font.js</code>.</p>
<p>Now typically with Cufon you would include the font file and the cufon library javascript in your <code>&lt;head&gt;</code> much like any other javascript library, however it is actually easier to do this in WordPress.</p>
<h2>The WordPress Plugin</h2>
<p><a href="http://stylizedweb.com/wp-content/uploads/2010/10/cufon1.png"><img class="aligncenter size-full wp-image-484" title="cufon" src="http://stylizedweb.com/wp-content/uploads/2010/10/cufon1.png" alt="" width="585" height="383" /></a></p>
<p>There are a couple WordPress plug-ins that make this really easy. Rather than manually including the font files, writing out the Cufon font declarations (which are typically the hardest point) the plug-ins do this for you. While there are two plug-ins, <a href="http://wordpress.org/extend/plugins/wp-cufon/" target="_blank">WP-Cufon</a> seems to be the most user friendly.</p>
<h3>1. Install the Plugin</h3>
<p>After you have obtained your Cufon encoded font file simply <a href="http://wordpress.org/extend/plugins/wp-cufon/" target="_blank">download and install the WP-Cufon plugin</a>. This can be done through manually downloading the plugin or through the WordPress Plugins menu item.</p>
<h3>2. Add Your Fonts</h3>
<p>At this point WordPress is ready to incorporate Cufon, you just need to upload some fonts to WordPress and the plugin. This is done by creating a folder in your plugins directory <code>/wp-content/plugins/fonts/</code>. Then simply upload your previously created font javascript file into this folder.</p>
<h3><a href="http://stylizedweb.com/wp-content/uploads/2010/10/cufon-example2.png"><img class="alignright size-full wp-image-490" title="cufon-example" src="http://stylizedweb.com/wp-content/uploads/2010/10/cufon-example2.png" alt="" width="250" height="263" /></a></h3>
<h3>3. Configure Your Font Replacements</h3>
<p>Now that you have uploaded your fonts you can go to the WP-Cufon settings page and create your Cufon font declarations. These declarations look like this:</p>
<p><code>Cufon.replace('h1', { fontFamily: 'Vegur' });</code></p>
<p>While this may look complicated it is actually really simple. All you have to do is replace the 'h1' with what ever element you wish to use Cufon on. These can be HTML elements such as h1 - h5, classes, ID's, or a combination of them. Then change the <code>fontFamily</code> declaration to the name of your embeded font. For example <code>'Gotham HTF'</code> or <code>'Trajan Pro'</code>.</p>
]]></content:encoded>
			<wfw:commentRss>http://stylizedweb.com/2010/10/31/cufon-and-wordpress-clean-and-custom-fonts/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>Speed up WordPress, WordPress Horsepower Presentation</title>
		<link>http://stylizedweb.com/2010/10/11/speed-up-wordpress-wordpress-horsepower-presentation/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=rss</link>
		<comments>http://stylizedweb.com/2010/10/11/speed-up-wordpress-wordpress-horsepower-presentation/#comments</comments>
		<pubDate>Mon, 11 Oct 2010 00:42:13 +0000</pubDate>
		<dc:creator>3pointross</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[horsepower]]></category>
		<category><![CDATA[optimization]]></category>
		<category><![CDATA[page load]]></category>
		<category><![CDATA[performance]]></category>
		<category><![CDATA[speed]]></category>
		<category><![CDATA[user experience]]></category>

		<guid isPermaLink="false">http://stylizedweb.com/?p=450</guid>
		<description><![CDATA[I had the pleasure of presenting at Wordcamp Detroit this past weekend. I had previous discussed methods to speeding up WordPress at a local WordPress Ann Arbor event. This gave me a great opportunity to revisit the presentation, polish it up and focus on the core elements that are going to make a significant impact [...]]]></description>
			<content:encoded><![CDATA[<p>I had the pleasure of presenting at <a href="http://wordcampdetroit.com">Wordcamp Detroit </a> this past weekend. I had previous discussed methods to speeding up WordPress at a local <a href="http://www.wordpressannarbor.com" target="_blank">WordPress Ann Arbor</a> event. This gave me a great opportunity to revisit the presentation, polish it up and focus on the core elements that are going to make a significant impact on your WordPress site.</p>
<p>Some of the methods are a bit more difficult and require additional budget or capabilities, however there are tips in the presentation for all levels of WordPress users or developers.</p>
<p>The presentiona not only discusses ways to speed up WordPress, but also why page load time still matters and what techniques and plugins cans ensure that your site loads quickly for all users. You can <a href="http://stylizedweb.com/presentations/wp-hp.pdf" target="_blank">access the slides as a PDF here</a>, or via slideshare below:</p>
<div id="__ss_5408234" style="width: 425px;"><strong style="display: block; margin: 12px 0 4px;"><a title="Speed Up WordPress, WordPress Horsepower" href="http://www.slideshare.net/3pointross/speed-up-wordpress-wordpress-horsepower">Speed Up WordPress, WordPress Horsepower</a></strong><object id="__sse5408234" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="355" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="src" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=wp-hp-101010183033-phpapp01&amp;stripped_title=speed-up-wordpress-wordpress-horsepower&amp;userName=3pointross" /><param name="name" value="__sse5408234" /><param name="allowfullscreen" value="true" /><embed id="__sse5408234" type="application/x-shockwave-flash" width="425" height="355" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=wp-hp-101010183033-phpapp01&amp;stripped_title=speed-up-wordpress-wordpress-horsepower&amp;userName=3pointross" name="__sse5408234" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<div style="padding: 5px 0 12px;">View more <a href="http://www.slideshare.net/">presentations</a> from <a href="http://www.slideshare.net/3pointross">3pointross</a>.</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://stylizedweb.com/2010/10/11/speed-up-wordpress-wordpress-horsepower-presentation/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>Use the Link Description in WordPress 3.0 Menus</title>
		<link>http://stylizedweb.com/2010/08/16/use-the-link-description-in-wordpress-3-0-menus/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=rss</link>
		<comments>http://stylizedweb.com/2010/08/16/use-the-link-description-in-wordpress-3-0-menus/#comments</comments>
		<pubDate>Mon, 16 Aug 2010 17:43:49 +0000</pubDate>
		<dc:creator>Dejan Cancarevic</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[Hacks]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[3.0]]></category>
		<category><![CDATA[description]]></category>
		<category><![CDATA[features]]></category>
		<category><![CDATA[functionality]]></category>
		<category><![CDATA[link]]></category>
		<category><![CDATA[menu]]></category>
		<category><![CDATA[subtitle]]></category>
		<category><![CDATA[title]]></category>

		<guid isPermaLink="false">http://stylizedweb.com/?p=426</guid>
		<description><![CDATA[One of the great new features that the recent WordPress 3.0 release has given us is the new and improved menu system. Those of you who have built complex websites in WordPress will undoubtably share my pain in working with menu systems in WordPress. Previously it seemed that we would have to use a mixture [...]]]></description>
			<content:encoded><![CDATA[<p>One of the great new features that the recent WordPress 3.0 release has given us is the new and improved menu system. Those of you who have built complex websites in WordPress will undoubtably share my pain in working with menu systems in WordPress. Previously it seemed that we would have to use a mixture of plug-in cocktails and hard coded sub-menus.</p>
<p>The new menu system alleviates a lot of these problems and gives us easy control over our menus. With multiple menu support, drag and drop ordering and easy title changes it is hard to imagine needing much more.</p>
<p>The new system even addresses a challenge I have always had with WordPress, and that is of using link descriptions. Link descriptions typically are one or two lines of descriptive text below a primary navigation item used to  describe the section or link. They are a nice visual touch and can really enhance usability in a significant way.</p>
<p><img class="alignright size-full wp-image-431" title="link-desc" src="http://stylizedweb.com/wp-content/uploads/2010/08/link-desc.png" alt="" width="491" height="165" /></p>
<p>Until now there wasn't a great way to do this, even with the use of plug-ins. Even with the use of custom fields and some hacking it was never perfect.</p>
<p>The new menu system allows us to do a bit more customization to our menus, such as adding custom classes, titles and even including a description.</p>
<h2>Working with Link Descriptions</h2>
<p>The first step is of course enabling custom menu support through your theme. This can be done with the following simple code in your functions.php file:</p>
<pre><code>add_action( 'init', 'register_menus' );
     function register_menus() {
           register_nav_menus(
                array(
                     'primary-menu' =&gt; __( 'Primary Menu' )
                 )
            );
      }</code></pre>
<p><a href="http://stylizedweb.com/wp-content/uploads/2010/08/screen-options1.png"><img class="alignnone size-full wp-image-433" title="screen-options" src="http://stylizedweb.com/wp-content/uploads/2010/08/screen-options1.png" alt="" width="605" height="191" /></a>You will then find a "Menu" link in your appearance tab with in the WordPress administration interface. Once clicked on make sure that you turn on "link description" with in the Screen Options.</p>
<p>At this point we can now define where we would like our menu to display in our theme by adding the following function to our theme files:</p>
<pre><code>&lt;?php wp_nav_menu( array( 'theme_location' =&gt; 'primary-menu' ) ); ?&gt;</code></pre>
<p>This will output the menu with our defined order and menu titles. It won't however output the description by default, in order to do so we will have to take advantage of the $walker function with in WordPress.</p>
<p>This is done by creating a custom class in our functions.php, such as the following:</p>
<p><br class="clear" /></p>
<pre><code>class My_Walker extends Walker_Nav_Menu
{
	function start_el(&amp;$output, $item, $depth, $args) {
		global $wp_query;
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

		$class_names = $value = '';

		$classes = empty( $item-&gt;classes ) ? array() : (array) $item-&gt;classes;

		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
		$class_names = '';

		$output .= $indent . '&lt;li id="menu-item-'. $item-&gt;ID . '"' . $value . $class_names .'&gt;';

		$attributes  = ! empty( $item-&gt;attr_title ) ? ' title="'  . esc_attr( $item-&gt;attr_title ) .'"' : '';
		$attributes .= ! empty( $item-&gt;target )     ? ' target="' . esc_attr( $item-&gt;target     ) .'"' : '';
		$attributes .= ! empty( $item-&gt;xfn )        ? ' rel="'    . esc_attr( $item-&gt;xfn        ) .'"' : '';
		$attributes .= ! empty( $item-&gt;url )        ? ' href="'   . esc_attr( $item-&gt;url        ) .'"' : '';

		$item_output = $args-&gt;before;
		$item_output .= '&lt;a'. $attributes .'&gt;';
		$item_output .= $args-&gt;link_before . apply_filters( 'the_title', $item-&gt;title, $item-&gt;ID ) . $args-&gt;link_after;
		$item_output .= '&lt;span&gt;' . $item-&gt;description . '&lt;/span&gt;';
		$item_output .= '&lt;/a&gt;';
		$item_output .= $args-&gt;after;

		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}</code></pre>
<p>This will add the description with in a span element when we tweak our template code to the following:</p>
<pre><code>&lt;?php
       $walker = new My_Walker;
	wp_nav_menu(array(
                'theme_location' =&gt; 'primary-menu',
		'walker' =&gt; $walker
	));
?&gt;</code></pre>
<p>Tada, now we can have menu descriptions such as on this <a href="http://100.jrn.msu.edu" target="_new">Buddypress project we worked on here</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://stylizedweb.com/2010/08/16/use-the-link-description-in-wordpress-3-0-menus/feed/</wfw:commentRss>
		<slash:comments>28</slash:comments>
		</item>
		<item>
		<title>5 Rocking Google Analytics Plugins for WordPress</title>
		<link>http://stylizedweb.com/2010/06/03/5-rocking-google-analytics-plugins-for-wordpress/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=rss</link>
		<comments>http://stylizedweb.com/2010/06/03/5-rocking-google-analytics-plugins-for-wordpress/#comments</comments>
		<pubDate>Thu, 03 Jun 2010 08:30:30 +0000</pubDate>
		<dc:creator>3pointross</dc:creator>
				<category><![CDATA[business]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[Strategy]]></category>
		<category><![CDATA[Tools]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[analytics]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[stats]]></category>
		<category><![CDATA[visitors]]></category>

		<guid isPermaLink="false">http://stylizedweb.com/?p=403</guid>
		<description><![CDATA[What is there not to love about Google Analytics? OK, some people may think that Google has gotten a little bit too big and too broad for their own good, but let's face it... Google Analytics is an incredible software package and you can't beat the price. There may be instances where you need a [...]]]></description>
			<content:encoded><![CDATA[<p>What is there not to love about Google Analytics? OK, some people may think that Google has gotten a little bit too big and too broad for their own good, but let's face it... Google Analytics is an incredible software package and you can't beat the price. There may be instances where you need a different web statistics package but 90% of the time Google Analytics fits the bill.</p>
<p>Now pair Google Analytics with another free (and this time open source) solution like WordPress and well, it is hard not to get a warm fuzzy feeling.</p>
<p>What you may not realize is that you can get a lot more out of this Google and WordPress pair than simply sticking the tracking number into the footer. There are quite a few rocking Google Analytics plugins that really kick up the functionality of your Google Analytics up a notch. Check them out.</p>
<h2>1. Google Analyticator</h2>
<p><a rel="lightbox" href="http://stylizedweb.com/wp-content/uploads/2010/06/google-analyticator.png"><img class="alignright size-medium wp-image-408" title="google-analyticator" src="http://stylizedweb.com/wp-content/uploads/2010/06/google-analyticator-300x167.png" alt="" width="300" height="167" /></a>This is my favorite plug-in in this area. Not only does it add the javascript needed to start tracking your site, it turns your WordPress site into a tracking monster! Rather than just tracking the normal "default" elements it also covers:</p>
<ul>
<li>Outbound link tracking of all links on the page, including links not managed by WordPress</li>
<li>Download link tracking</li>
<li>Event tracking with outbound links / downloads instead of the old pageview tracking method</li>
</ul>
<p>It also has plenty of great additional features such as a dashboard widget, front-end visitor widgets, localization and more...</p>
<p><a href="http://wordpress.org/extend/plugins/google-analyticator/" target="_blank">Download Google Analyticator Here</a></p>
<h2>2. Ultimate Google Analytics</h2>
<p><a rel="lightbox" href="http://stylizedweb.com/wp-content/uploads/2010/06/Picture-1.png"><img class="alignright size-medium wp-image-412" title="Picture 1" src="http://stylizedweb.com/wp-content/uploads/2010/06/Picture-1-300x148.png" alt="" width="300" height="148" /></a>This plug-in is on par with Google Analyticator in that not only will it put the necessary google analytics javascript on every page, but it also will track outbound links, downloads and mailto: links. While the default configuration will work for 90% of the users it pays to go through and customize it for your own needs, everything is customizable for your specific situation or need.</p>
<p>The plugin is highly configurable. Read trough the list of features below to get a feeling of what this plugin can do. You can enable and disable all features individually, although the default configuration will suffice for 90% of the users.</p>
<p><a href="http://wordpress.org/extend/plugins/ultimate-google-analytics/" target="_blank">Download Ultimate Google Analytics Here</a></p>
<h2>3. RSS Link Tagger for Analytics</h2>
<p>On many blogs the conversion point is getting new subscribers. Even with services like feedburner you don't always know what is most effective in getting new subscribers as there is no clear way to track an RSS subscription. However with RSS Link Tagger you can actually track your RSS feed using Google analytics to get a better idea as to what types of articles and posts are most effective in recruiting new subscribers.</p>
<p><a href="http://wordpress.org/extend/plugins/rss-link-tagger-for-google-analytics/" target="_blank">Download RSS Link Tagger Here</a></p>
<h2>4. Google Analytics for WordPress</h2>
<p><a rel="lightbox" href="http://stylizedweb.com/wp-content/uploads/2010/06/google-analyticator1.png"><img class="alignright size-medium wp-image-409" title="google-analyticator" src="http://stylizedweb.com/wp-content/uploads/2010/06/google-analyticator1-300x167.png" alt="" width="300" height="167" /></a>Much like Ultimate Google Analytics and Google Analyticator this plugin automatically tracks and segments all outbound links from posts, comment author links, links within comments, blogroll links and other downloads. It even lets you track Adsense clicks! This plugin is great for tracking downloads as it allows you to specify what types of file prefixes should be used as downloads.</p>
<p><a href="http://wordpress.org/extend/plugins/google-analytics-for-wordpress/" target="_blank">Download Google Analytics for WordPress Here</a></p>
<h2><strong>5. Google Analytics Dashboard</strong></h2>
<p><a rel="lightbox" href="http://stylizedweb.com/wp-content/uploads/2010/06/google-analytics-dashboard.png"><img class="alignright size-medium wp-image-410" title="google-analytics-dashboard" src="http://stylizedweb.com/wp-content/uploads/2010/06/google-analytics-dashboard-237x300.png" alt="" width="237" height="300" /></a>This would be my favorite plugin for client sites. Rather than trying to teach your clients how to login and use Google Analytics (which is an extra step and cumbersome) this plugin puts a view of your analytics data right from your WordPress dashboard.</p>
<p>Even for savvy users this plugin is a great way to keep track of your sites performance with out having to log into Google Analytics every day.</p>
<p><a href="http://wordpress.org/extend/plugins/google-analytics-dashboard/" target="_blank">Download Google Analytics Dashboard Here</a></p>
]]></content:encoded>
			<wfw:commentRss>http://stylizedweb.com/2010/06/03/5-rocking-google-analytics-plugins-for-wordpress/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
	</channel>
</rss>

