• Shortcuts : 'n' next unread feed - 'p' previous unread feed • Styles : 1 2

» Publishers, Monetize your RSS feeds with FeedShow:  More infos  (Show/Hide Ads)


Date: Tuesday, 21 Aug 2012 09:00

One of the more exciting features of CSS3 is animation. A task that was once doomed to wrangling of JavaScript, animation can not be executed with ease using well known CSS style syntax. Like any capable system, CSS3 animations have the potential to be both complicated and confusing. That being said, they don't have to be. I found the best way to understand CSS3 animations is just getting started with some basic transitions. But first, one must understand how CSS3 animations work.

How CSS3 Animations Work

In a nutshell, these animations work by defining "frames" and then deciding how the changes should transition from frame to frame. Let me explain with an example. You have an element that begins at 200 pixels wide, you want it to expand to 400 pixels. The beginning 200 pixel state is the first frame, the ending 400 pixel the last. From here you can decide how you want the element to expand and how long it should take to happen. Simple enough, right?

A Basic Example

With the idea that "less is more" in mind, the easiest way to get started is by using pseudo selectors. If you don't recognize the term, it's a fancy way of describing a :hover or :focus selector. By using pseudo selectors we can easily code a starting frame (unhovered) and a finishing frame (hovered.) In this example we are going to make an anchor tag grow and change color when hovered upon.

The HTML

 <p class="css3anim" ><a href="#">Hover Over Me</a></p>

The CSS


   .css3anim a { 
               display: block; 
               width: 150px; 
               height: 75px; 
               font-size: 18px;
               background: #ddd; 
               color: #fff;
               text-decoration: none;
               padding: 10px;
   }
  .css3anim a:hover { 
               width: 175px;
               height: 100px;
               background: #000;
               color: #fff;
               font-size: 20px;
 }

At this point if you hovered over our example it will grow in size but it would happen instantly, not the effect we are looking to achieve. In comes the CSS3 "transition" property. The transition property allows you to control how an element transitions from frame to frame. In this case the unhovered state to the hovered state.

The transition property has four options:

  • What to transition
  • How long it should take
  • And style of transition
  • How long to delay the start of the animation

While there are lot of aspects you can transition, for simplicities sake lets transition all changes in the element, for 1 second using ease-in-out (a pretty standard transition style.)

So our CSS would be updated to the following:


.css3anim a { 
            display: block; 
            width: 150px; 
            height: 75px; 
            font-size: 18px;
            background: #ddd; 
            color: #fff;
            text-decoration: none;
            padding: 10px;
            transition: all 1s ease-in-out;
}

If CSS3 was fully supported that's all one would have to do. Since it's still in beta we need to use vendor prefixes to ensure our browsers will recognize the command.


.css3anim a { 
            display: block; 
            width: 150px; 
            height: 75px; 
            font-size: 18px;
            background: #ddd; 
            color: #fff;
            text-decoration: none;
            padding: 10px;
            -o-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -webkit-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
}

And there you have it! That's all you need to do. See the demo below for a live example (if you are using a modern browser of course.)

Hover Over Me

Additional Resources

With a grasp of the transition property, you can begin to explore other transition options and capabilities. For more information take a look at the official spec here or a more down to earth tutorial at w3schools.

Author: "3pointross" Tags: "CSS, animation, css3, tutorials"
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 27 Mar 2012 09:00

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 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 contact me to get an update. Secondarily the materials I delivered were too cumbersome to sort through and reference.

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.

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.

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.

And that’s just the beginning.

Plugin Features

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:

  • Create and manage unlimited projects
  • Track levels of completion
  • Track current tasks
  • Identify client responsibilities and project holds
  • Identify four major milestones (20%/40%/60%/80%)
  • Send clients to a page containing the above information

Projects are displayed in a responsive template so clients can access and monitor their project from any device.

Screenshots

Download the Plugin

You can download the plugin through the WordPress plugin screen, just search for "project status." Or download it directly here.

Author: "Dejan Cancarevic" Tags: "General"
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 06 Dec 2011 18:00

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 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.

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.

Going on a Database Diet

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. The WP Database Optimizer plugin will delete excessive post revisions and other unnecessary information and you can even schedule it to run regularly.

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 the Delete Pending Comments plugin does just that. One click and some extra confirmation latter and your database is feeling lean and mean.

With your Database slimmed down you can move onto step two, optimize that sucka!

Optimize Your Tables

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 those of you who love pain you can do it manually... but I would much rather let the WP-Optimize 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.

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.

Don't Use the Database

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 W3 Total Cache.) 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.

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.

Summary: Set and Forget

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.

Author: "3pointross" Tags: "General, Tools, WordPress, caching, data..."
Comments Send by mail Print  Save  Delicious 
Date: Monday, 28 Nov 2011 15:31

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:

Sam Cohen, Local Development

Designer and Developer at SamCohen.net

  • It's time to stop cowboy coding (ie: editing sites directly off the file server)
  • Instead develop your site locally using XAMPP, MAMP, WAMP or my favorite InstantWP
  • Use RAMP to deploy content from dev to live environments

Chris Ross, Free is Not A Business Model

WordPress Designer at ThisIsMyURL.com

  • In business school, they teach you that "Free is not a business model." With WordPress, it is.
  • WordPress allows you to make money by giving things away for free.
    • Make free plugins and charge for support
    • Make free plugins and get freelance gigs (to customize)
    • Ask for donations
    • Write / publish free content and get donations or ads
    • Write / publish free content and make affiliate sales
  • Google is now notifying site owners that they need to upgrade WordPress (through Google Webmaster tools)

Wally Metts, Communication

Communications Professor at Spring Arbor University

  • An adjective is the enemy of the noun. Avoid adjectives, use stronger nouns.
  • Active writing means using better verbs.
  • Vivid writing means using better nouns.
    • ie: don't use "they made a decision" use "they decided"
  • When communicating "unpad" everything. Remove meaningless, doubled and inferred words.

Matt Lincoln Russell, Online Communities

Software Developer at Vanilla Forums

  • Forums are still one of the most popular methods of online socialization
  • The typical forum design does little to engage the user, they are complicated and overwhelming
  • Some forum solutions (like Vanilla) try and simplify the forum process
  • Getting forums started is the hardest part
  • Eventually people will police and moderate your forum for you

David Wilemski, WordPress Security

  • A large part of keeping WordPress secure is being "less hackable" than everyone else
  • Most attacks are not targeted (attacks try thousands of WordPress sites, looking for the most vulnerable.)
  • Common vulnerabilities:
    • Privilege escalation
    • SQL Injection
    • XSS
    • CSRF
  • Some easy fixes:
    • Change your WordPress table prefix
    • Rename the "admin" account
    • Use SSL in your admin
    • Use 755 file permissions for for directories and 644 for files
    • Use the wp-config.php secure keys
    • Limit login attempts (or login via specific IPs)
  • Be prepared backup regularly, including:
    • Database
    • Theme
    • Plugins
    • Uploads
  • When hacked, clear and reinstall (there could be hidden hacks)

Overall Takeaways

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...

Author: "3pointross" Tags: "Design, General, WordPress, Business Mod..."
Comments Send by mail Print  Save  Delicious 
Date: Monday, 21 Nov 2011 15:39

We've been saying it for years... "Mobile is going to be big." Well now it is, only a year or two later than expected. Smart phones are ubiquitous, app developers are making millions and every day more people surf the web using a mobile browser. In fact, Verizon, AT&T, and T-Mobile smartphones are now so popular and so advanced, they are replacing the every day use of computers. Unfortunately most websites have a lackluster mobile experience. Sure, mobile browsers can handle a normal website but they don't do-so particularly well.

A year ago I would have said mobile can be an afterthought, now this isn't the case. In fact, some authors stress you should design for the mobile web first. I can't say I disagree, it's a solid strategy. Mobile web design sounds easy, you're "just" designing a simplified website right? If only it were so easy.

The first consideration many overlook is the method of delivering a mobile website. The second is that the user experience of mobile interfaces are inherently different. As this is a mobile 101 post, we will first look at the approach to designing and delivering a mobile version of a site. Mobile UX will be examined in a later post.

Even before we discuss design methods, we must first clarify the difference between a mobile website and a mobile app.

Website vs Application

While seemingly basic, many still confuse mobile applications with mobile websites. The distinction is different because users interact with an app differently than they do a website. An application is a program which is downloaded onto the users phone. The program resides on the users device and can (but doesn't necessarily) connect to an online server. A mobile website isn't downloaded nor is it stored on a users device. It is accessed by visiting the site URL through a browser.

This can be confusing (especially for users) because some designers choose to style their mobile websites to look like mobile applications. There are some circumstances where this makes sense as the user is likely familiar with the interface and conventions, but often times they are just as familiar with web browsing (even in a smaller, more basic form.) Unless you are specifically trying to emulate a mobile application through a website it's best to avoid the "application style."

Mobile Application Usage

The use of mobile applications is very intentional. A user must search for the application (or a type of application), decide to download and install it and then learn how to use it. There is little chance of them "stumbling" onto it. Many mobile apps remain unfound because no one would think to try and find them. A shopping application for a local designer shoe store for example, will get very little usage for this reason.

Mobile Website Usage

Mobile websites are much more accessible. A user doesn't need to search, download or install anything. They just visit your website. Any marketing targeting your website also promotes the mobile version. It requires less effort for the user and the company/organization. The only drawback is lack of persistency. An app remains on the users device until they decide to remove it. A website is gone until the user decides to access it again.

Once you understand the distinction between application and website, you can consider your approach to mobile design.

Approaches to Mobile Website Design

There are four primary approaches to mobile website design, each with strengths and weaknesses. They are:

  1. Do nothing
  2. Modifying the existing design for mobile (using css)
  3. Designing a separate mobile site
  4. Design a responsive website
Let's examine them one by one.

Modern smart phone browsers provide an acceptable (but lack luster) mobile web experience.

1. Do Nothing

As stated earlier, modern mobile browsers are capable of handling most websites "as is." Most mobile browser allow users to zoom in for reading and out for navigating a page. While clunky, users are getting acclimated to the workflow. Doing nothing is the cheapest of all the options because you literally "do nothing." It's also the least effective method. Sure mobile browsers are greatly improved, but as a whole mobile users are less experienced than before. It won't detour all mobile users from browsing your site but it will detour some.

This site has a mobile specific stylesheet which simplifies the layout but uses the same markup.

2. Modify the Existing Design

Maintaining the original markup but tweaking the design for mobile devices is a long standing method of improving the mobile experience. Typically this is done by giving mobile browsers a different stylesheet which simplifies the layout, hides large graphics/animation and makes the navigation easier to use.

Pros:

  • Low cost to maintain and implement since you are only modifying presentation
  • Capable of producing an improved experience over the "do nothing" approach

Cons:

  • Limited in the amount of changes that can be made
  • Content is still downloaded causing speed and bandwidth issues (for the user)
  • No ability to change content based on the context of the site
  • Difficult to design for multiple mobile devices or screen resolutions

BestBuy.com has a mobile specific site with a different design and contextually relevant content.

3. Design a Separate Mobile Site

For those with flush budgets, the most desirable approach is a separate mobile specific site. The mobile site is designed, organized and populated from the ground up with focus mobile users needs. Because the site is completely independent of a companies primary website it can be completely different. Even the content can be changed (and often should). This provides the best experience for the user, when they access the primary website they are identified as a mobile user and forwarded onto the mobile specific version. They can then browse a site design specifically for their mobile needs and tasks.

Pros:

  • Completely customizable for the best mobile experience

Cons:

  • Expensive to build and maintain
  • Some users are accustom to the desktop version of the site and would prefer to browse normally
  • Difficult to design for multiple mobile devices or screen resolutions

Web Designer Wall has a responsive design which expands / collapses based on the users screen resolution.

4. Design a Responsive Website

Responsive design is the new kid on the block (and his parents bought him a BMW.) Responsive design is useful and practical hence it's rise in popularity. The concept behind it is simple, rather than having one stylesheet which (hopefully) works for all resolutions, you use different stylesheets for different resolutions. The result is a site that expands and collapses based on the size of the browser window. Responsive design allows you to maintain the best presentation regardless if the user is on a mobile phone, tablet or desktop with a large monitor.

Pros:

  • Capability to design a good visual experience for multiple resolutions
  • Less expensive than a mobile specific site

Cons:

  • More expensive to design / build than a mobile specific stylesheet
  • There is little capability to modify the content/context of the site based on mobile usage
  • Layout is constrained by source order

Summary

The first step in designing any mobile site is selecting your approach. The approach reveals design constraints and capabilities. Currently, their are four conventional methods each with strengths and weaknesses. The oldest, most customizable and expensive method is designing a mobile specific site. The lower cost long standing method is using a mobile specific stylesheet and the new (sexy) approach is to create a design which responds to different screen resolutions. If budgets are tight and mobile visitors infrequent, you can always do nothing. Modern mobile browsers offer an acceptable experience on their own.

Author: "3pointross" Tags: "Design, featured, Mobile, 101, android, ..."
Comments Send by mail Print  Save  Delicious 
Date: Monday, 07 Nov 2011 15:10

We talk a lot about WordPress on StylizedWeb because it's a great content management system. Like all great products it has developed a strong following and community, which in my opinion, is one of the best advantages WordPress has to offer. There is an incredibly active forum, tens of thousands of plug-ins and themes, countless blogs and best of all WordCamp's. WordCamp Detroit is coming up and if you are anywhere near Michigan you should attend. Having spoken at the last WordCamp Detroit I can honestly say last years even was great but this year will blow it out of the water.

First off, WordCamp Detroit will be held at the Renaissance Center in downtown Detroit. The beautiful GM High Rise that overlooks the riverfront. Secondarily, there are two days full of interesting and unique speakers and activities. Finally, there will be a "help bar" in which anyone can get 1 on 1 advice for their WordPress websites... for free.

Buy tickets now as they are running low and the even is only a week away (November 11th and 12th).

Author: "3pointross" Tags: "WordPress"
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 02 Nov 2011 09:00

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, 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:

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.

To elaborate, successful layouts organize 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.

Applied to the web (and layout specifically,) organization means elements on the page are arranged based on how they are related or connected. Elements are arranged based on their relationship to other elements on the page and the context of the website. 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.

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.

Understanding The Relationships

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.

Relationship to Goals

Example user and client goals for an online book store

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.

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.

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.

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.

Identifying the most important elements is half the battle, but you must still consider how elements relate to each other.

Relationship to Each Other

On a form, the submit button and cancel link are related. Laying them out next to each other is visually logical.

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.

Adding a home button is illogical and confusing because it's unrelated to the elements surrounding it.

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.

An example of grouped elements, an a group with a sub-group

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.

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."

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.)

With in groups are "micro-groups" where closely related elements become perceived as a single unit.

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..."

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.

Layout Next Steps

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.

Read the Whole Series

Fundamentals of Web Design Layout Part 1

Author: "3pointross" Tags: "Design, featured, General, fundamentals,..."
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 28 Sep 2011 09:00

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 Defined

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.

The purpose of a layout is organization, more specifically layout uses organization to:

  • Convey relative importance of content
  • Group similar content and separate unrelated
  • Optimize visual flow
  • Establish a basic visual hierarchy

Each aspect of layout might not be compelling alone, but together they make or break a design.

When Good Layouts Go Bad

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.

Because layouts are purely visual, the best way to understand what works and what doesn't is through example.

Well Organized Layouts

Information Architects

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.

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.

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.

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).

Why this Layout Works

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.

In this design, the layout is fitted the content.

Mark Boulton Design

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.

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.

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.

Why this Layout Works

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.

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.

Again the design puts content together like a puzzel. Everything fit's into place perfectly.

What's Next

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.

In our next installment we will cover how to design your own layout in the most effective way.

Read the Whole Series

Fundamentals of Web Design Layout Part 1

Fundamentals of Web Design Layout Part 2

Author: "3pointross" Tags: "Design, featured, General, fundamentals,..."
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 02 Jun 2011 15:49

Yesterday I was asked to defend WordPress' against 400lbs gorilla Drupal at local marketing group LA2M. Having used both systems for some time, I have a strong sense as the pro's and con's of each platform (neither is perfect). Of course WordPress is my top choice and I do have reasoning to back it up which I communicated to the group of 70+ attendees. Interestingly enough, as the discussion was not so much a debate as panel that answered questions I noticed an interesting pattern. Much of the supposed benefits of Drupal were expressed in such a way that it made WordPress seem incapable of those benefits... which was not the case. Unable to rebut before the next question, many viewers (and the pro-Drupal speakers) didn't get to hear this. To address this I felt it would be best to outline these common misunderstandings in this blog post.

Here are the six things that dissenters don't know about WordPress:

1. WordPress is Incredibly Scaleable

There is a misconception that WordPress can only handle small sites because it was built as a blogging tool. If you need a large site with a lot of content WordPress will choke and die. Not true, sites like SmashingMagazine and TechCrunch have hundreds of thousands of pages of content and still run lightening fast. WordPress can be run on multiple servers if needed or integrated with a content delivery network if you have high amounts of traffic or a particularly large website.

Additionally WordPress.com, the hosted version of WordPress has over 20 million blogs running on a version of WordPress (using the multisite mode). If that doesn't demonstrate scalability I don't know what would.

2. WordPress is NOT Just Posts and Pages

While WordPress originated as a simple blogging platform that only had posts and pages, it has come along way with custom content types. Drupal has always been strong in this area, with the CCK (Custom Content Kit) allowing the creation of flexible data models and have now integrated that capability into the Drupal core. Unbeknownst to most Drupal developers, WordPress also has this capability built into the core (since version 3.0).

The custom post type gives developers the abilities to create content types that have have their own data structure that doesn't need any resemblance to  posts or pages. This content can be displayed anyway you wish and can be dissected, mashed up and output if you so desire. Additionally, with plugins like Magic Fields, Custom Post Type UI, PODS and Advanced Custom Fields this can all be done from the WordPress backend. Along with custom taxonomies content can take any shape, can be sorted, classified and output anyway you need it.

3. WordPress is NOT Just for Simple Sites

Many people gravitate towards Drupal because they think that it has more capabilities than WordPress. WordPress is thought of a "simple CMS for simple websites." In reality, WordPress is extremely extendable. In fact I have yet to come across a project that you outright couldn't do in WordPress (not that it is the best fit for all projects, just that it would be technically possible.) In fact here are some capabilities WordPress can easily accomplish:

  • Facebook clone
  • Forums
  • Digg Clone
  • Newsletter
  • Wiki
  • Customer Relationship Management System
  • Twitter clone
  • Invoicing system
  • Project management system
  • Calendar system
  • E-commerce website
  • Job board
  • Classified board
  • Real estate listing site
  • Business directory
  • Auctions website
  • Review website

And that isn't even all of them. With custom post types you could conceivably do just about anything.

4. WordPress Has Great User Management

I have no problem admitting that Drupal has really powerful user management capabilities. Drupal was originally a community based platform that has evolved into a CMS "Framework," so much of the user management capabilities have been left in the core. That being said, WordPress can have extremely powerful user management if you need it. I would say that the average website doesn't need complex user management capabilities, for most businesses you only have one or two people maintaining the website. If you do need more power there are plugins like User Permissions, User Access Manager or User Role Editor that can give you that functionality.

Those plugins allow you to create groups, restrict group capabilities on a detail level (including editing, adding or modifying plugins, etc...) restrict page editing to specific groups, etc... Pretty much anything you would need with a community based site.

5. WordPress Can Address Your Workflow Needs

It is likely that new web content will need to be approved before it goes live. This is described as workflow and it is the process of how the content must be created, reviewed and published. By default WordPress has a few ways to manage this, including private pages (you must be logged in to see), password protected pages and draft pages. If you need a more sophisticated system you can use Edit Flow, Zensor, User Submitted Posts, Peter's Collaboration E-mails or Peter's Post Notes to add the functionality you need.

6. WordPress Can Rock E-Commerce

In my presentation I made the mistake of saying that at some point you should use a full fledged E-Commerce system rather than WordPress. While I still believe that hard core e-commerce sites should run on an e-commerce specific platform, it did make WordPress sound like an poor candidate for selling items online. Through a handful of great e-commerce plugins, you can use WordPress to sell products online including the following features:

  • Real products
  • Digital / downloadable products
  • Tickets / event registration
  • Subscription / site access services
  • Real time shipping integration
  • Payment gateway integration
  • Product variations (colors, sizes, types, costs, etc...)
  • Quickbooks integration
  • Affiliate management
  • Custom fields / product types
  • Pricing levels
  • Wish lists
  • Recommend products
  • Discount codes
  • Stock management
  • Import / export capabilities

These capabilities exist in the plugins or through already available plugin extensions. No custom development is required.

Additionally WordPress has been able to integrate with outside e-commerce systems like Magento, ZenCart and OS Commerce since as early as 2008.

Summary: Why I Love WordPress, but Drupal is Great Too...

I love WordPress because it is kind to my users, the end client. WordPress was designed to make the management of your site easy and that is exactly what it does. Because of it's ease of use it has reached the level of fame that it now enjoys (powering over 60% of the top 1 million websites that have a CMS). This level of fame has lead to the endless capabilities that allow us to take this simple website CMS and turn it into complex web applications.

That being said I recognize that WordPress is not right for every project. There will be situations where Drupal is a better fit (or some other system all together). I don't think Drupal is a bad platform, I have used it enough in the past to understand it's capabilities. I just prefer WordPress because it makes it easier for me to build sites and my clients to manage them.

Author: "3pointross" Tags: "WordPress, capabilities, drupal, feature..."
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 24 May 2011 19:21

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.

I recommend anyone that can make it, do so. More info below:

Design the Future with the Leading Web Design Authors

New Riders’ Voices That Matter: Web Design Conference, taking place June 27-28th in San Francisco, is where today’s most 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!

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 Bruce Lawson, Kelly Goto, Shawn Welch, 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!

SPECIAL SAVINGS! As someone that reads this blog, you can save $200* off the conference fee by providing priority code WSDMAL4 and registering by May 27th as this $100 discount is combined with the Early Bird pricing! Check out the conference web site or contact Barbara Gavin, 617.848.7026 to register or request more information.

*Valid on new registrations only.

Author: "3pointross" Tags: "General"
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 26 Jan 2011 02:17

Despite the obvious explosion of the mobile market some website owners feel like very few, if any users will decide to browse their site using a mobile device. Well it is time to wake up and realize that there never has been a better time to ensure your site is mobile friendly. A quick look at some stats will show you how important this has become.

  • According to Apple mobile web usage increased over 140% in 2009
  • Experts predict that there will be 1.1 Billion smart phones in use by 2013
  • New forms of mobile devices are entering the market every month (iPad, eBook readers, PDA’s, etc...)

Mobile Web Design

Designing for mobile devices is tricky. There are countless different devices capable of browsing the web, all with different technological capabilities, browser software, resolution and screen sizes. Because of this we have to give up some control and sophistication and accept that our primary goal is to make the sites simple and usable not pretty and exciting.

Screen Size & Resolution

Different phones and operating systems run at different resolutions. An article published by PhoneArea.com recorded that half of all the smartphone traffic worldwide was done on an iPhone. Android based phones had grown to 11%, Blackberry had a declining 7% and Symbian OS (Nokia) accounted for 25% but was also declining.

Much like in traditional web design you typically want to design for the most common denominator. These days on the web you are looking to design a site with in the 1024 x 768 window. When it comes to mobile over 75% of the phones display a screen resolution of 240x320 pixels or more.

Based on this you can take two approaches. One is to try and stay with in this window to ensure an optimal experience for the largest possible audience. Alternatively you could make your mobile site fluid (meaning that the design scales with the window) and let the browser figure out how wide it should be.

Browser Capabilities

Another common mobile design challenge is the differing technological support of phones. Currently very few devices support the flash platform and almost none of them do a great job working with javascript either. For these reasons it makes sense to try and keep your sites as simple as possible. Sticking to clean XHTML and CSS is the best way to go.

Even if the browsers don’t support CSS (which some don’t) they can still render HTML and the site will be usable.

Common Browsers

  • Mobile Safari (iPhone, iPad, iPod Touch)
  • Mobile Chrome / Android Browser (Android)
  • Opera Moble (Smartphone compatible)
  • Blackberry Browser (Blackberry’s with varying levels of support)

These browser behave a lot like full browsers, often only missing a few capabilities such as Flash or Javascript. However this doesn’t mean that you should be aware of the users experience if they are using them. Keep in mind that on mobile devices you are not going to be able to take advantage of OnClick or :hover capabilities, so even if the users is accessing your site on an iPad you will still want to make sure the site is usable.

  • Constrained Browsers
  • Opera Mini
  • Blackberry Browser (depending on the generation of the Blackberry)

These browsers try and simplify the website as much as possible automatically before displaying it to the user. This can be good and bad. It might mean that you have less to worry about when a user accesses your site, however it also means you have less control. Being that it is automated you can be sure that it is not going to present the perfect solution.

Text Browsers

Many mobile browsers are incapable of rendering graphics or complex layouts. Again there are varying levels of capabilities with text based browsers. Some of them have basic CSS support where others strip out all styling and can only render HTML or WAP-HTML.

Planning & Approach

There are many different ways you can go about making your site mobile friendly. Each of them can work perfectly well and which one you should use is entirely dependent on the situation. The best way to approach this is to understand the pros and cons of each technique and then develop a plan as to which avenue best fits your use case.

1.Altering the Design but Keeping the Content The Same

The first and most obvious method is to alter how the design looks to better fit a mobile browser while keeping the content and site structure entirely the same. Typically people will simplify the navigation, remove unnecessary design elements and shrink the overall design to better fit in a smaller window.

This not only will save the users bandwidth (which many pay for by the megabyte), but it will also make accessing the content much easier. This is of course what they are on your site for in the first place, not to see your cool looking design in super small scale.

Example Sites

2.Tweaking Both Design & Content

While altering the design will make your site mobile “friendly” it ignores a very important fact about mobile web users. Typically people accessing your site on a mobile device are doing so for very different reasons than they would if they were at a desktop.

Think of the common situation, a user needs to find some information, is unable to access a computer and doesn’t feel that it is worth waiting. While what type of information they are looking for is going to change depending on the situation it wouldn’t take too much insight to come up with a clear plan of how you can alter both the design and what content the site shows to better fit the users needs.

A common example might be IMDB.com (internet movie database), if someone is looking up the site on their mobile device chances are they really want to look up some important details. The chance that they care about the news desk, what is coming out on DVD etc... is pretty slim.

IMDB.com would benefit from a “search centric” mobile version of their homepage.

3.Completely Different Mobile Site

Sometimes users will be accessing your site from a mobile device so much, or their needs will be so different than a traditional site that it makes sense to develop a completely new version of your site for mobile users. This frees you from all constraints and allows you to create the most optimal mobile experience possible.

Sites such as Twitter and Facebook are both good examples. Both sites have a high frequency of mobile users and the goals and actions of the mobile users are going to be significantly different than computer users.

This approach isn’t limited to large scale social networks either. Even small businesses can benefit from this approach. Consider any local service provider, if someone is looking at their site from a mobile phone chances are they are looking for contact information. To provide them with a mobile specific site that has phone, fax and directions would greatly increase a users experience. You can always give them the option to navigate to the full site afterward.

Now it is important that if you do have a mobile specific version of your site, you want to give users the option to switch back to a standard version of the sit. Especially if you are automatically redirecting mobile browsers to said version.

Mobile Usability

Even “usable” version of mobile browsers such as Safari can be tricky and difficult to use. Let’s face it, there is a lot working against a mobile web user. The screen is small, the keys are small, the software is still in it’s infancy...

Doing everything you can to make your mobile site as usable as possible is what is going to really bring a notable return on your investment. There are some key ways to make your mobile site usable and the most effective ones are:

  1. Simplifying your site
  2. Have a high quality search function
  3. Make the navigation extremely accessible

1. Simplify

The first step to any mobile site should be simplifying. I recommend a simple audit of the entire site, using the following method:

  1. Determine which user tasks are likely to apply to mobile
  2. Remove any content that doesn’t apply to your list of tasks
  3. Remove any graphics or styling that doesn’t assist in the tasks or branding
  4. Turn complex multi-column layouts into one simple column

2. Search

Having a high quality search function is another great way to maximize usability. It is difficult to click, and navigate through multiple pages. Rather than making a user hunt around, you can simply let them search for what they are looking for.

3. Navigation

Many mobile web designers will place the navigation as the very first thing on the top of the page. This way it can’t be missed and is one of the easiest elements to access. Remember unless you have a one page mobile specific site chances are the user is not going to find what they are looking for on the first page.

Methods of Making Mobile Specific Sites

Anyone can build a mobile version of their site, but unless you find some way to get mobile users to it you really haven’t accomplished much. Not unlike everything else in web design there is more than one way to skin a cat.

1. Mobile Specific Styling

If you are simply changing the design and hiding unnecessary content then a mobile style sheet might be the best approach. A mobile style sheet is like any other style sheet, only it is only activated when a browser acknowledges that it is a mobile device.

The sheet can then completely change the layout, hide unnecessary elements (through display:none) and improve the overall experience for the user.

There are two approaches to using mobile specific style sheets, by including a mobile specific stylesheet in your HTML or by importing mobile specific rules through an existing style sheet.

Creating a Handheld Media Stylesheets

The first technique simply requires you add a media=”handheld” attribute to your stylesheet mark-up, for example:

You can then add any amount of simplification or mobile styling into that mobile.css stylesheet, perhaps changing the width, hiding a third column or moving the navigation to the top of the page.


    #pageWidth { width: auto; }
    #columnThree { display: none; }
    #mainNavigation { position: absolute; top: 0; left: 0; }

The @media Include

If you are including a mobile specific styling through an existing stylesheet you would use the following code:


     @media handheld { /* rules for handheld devices */ }

OR


     @import "handheld.css" handheld;

When to Use Which Method

It seems like one could use either technique depending on their personal preference. However you should know that some mobile devices will not load a stylesheet that is defined as media=”handheld” but will still pay attention to the @media handheld { } styling.

These are often fully capable browsers such as Opera Mobile / Mini, Safari, etc... So if you are looking to optimize for these devices through a stylesheet it is important to know that doing a media=”handheld” HTML link will not work.

2. Mobile Device Detection

A more sophisticated method would be to detect the user agent of the browser and decide send mobile users to a specific version of the site that is better suited towards their set of tasks and specific design needs.

The user agent in reference to the web is simply the software that someone is using to browse the site. So you can use a script that identifies mobile user agents and forward them to a new address accordingly.

The benefit here is that you can completely customize the user experience for mobile specific situations. Not only in layout (which can be done through a stylesheet) but also in content and information architecture.

The trick is that you need to ensure that your method of detecting and redirecting different user agents is up to date, if a new browser enters the market it might be ignored by your out dated script all together.

Luckily there are some great plug-ins and existing scripts available to do this for you. If you are interested in taking this approach I recommend you look into one of the following resources:

Mobile Detection Scripts

3. Mobile Specific URLS

For heavy trafficked mobile sites it can make sense to build a site specifically around mobile use. While you may also want to employ the user agent detection method above, it often makes sense to promote the mobile site separately to encourage more mobile users to try accessing the site.

Common examples of this would be Facebook, Twitter and Bank of America. All three sites actively promoted their mobile specific site as a way to encourage users to try using the site through their mobile device. All three sites also employe the detect and forward concept illustrated earlier.

The Bottom Line

There are so many different variables in mobile web design that you are unlikely to find a perfect solution for everyone. Because of this you will end up making the best design choices by really understanding your target audience.

The better you understand what technology they are using, what content they want and when they are trying to access it you can tailor the mobile experience to that situation. If you don’t understand these key points you are just guessing and could even be making the experience worse.

Ultimately the growth of the mobile market is so dramatic that you should be thinking about (if not implementing) a mobile web strategy right now.

Author: "3pointross" Tags: "Design, Mobile, Strategy, android, devic..."
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 19 Jan 2011 14:36

If you haven't started using Dropbox yet I highly recommend it. It boasts a huge range of valuable features from as simple as easy online storage to version control, cloud based backups and syncing your files amongst multiple computers. With the free version giving you 2GB to play with it is hard to find a reason not to at least give it a try. To add one more reason to the list I wrote up a description of how we use it at our design agency as a effective and efficient project management tool.

Author: "3pointross" Tags: "Tools, business, freelancing, dropbox, p..."
Comments Send by mail Print  Save  Delicious 
Date: Saturday, 20 Nov 2010 16:27

The people at Next Day Flyers contacted me and offered a giveaway for the readers of StylizedWeb. It should be fairly obvious that a lot of the posts on this blog are focused around WordPress, so I wanted to take this opportunity to give you all a chance to show WordPress some love and win free business cards. Maybe you can use them to kick start your freelancer career, try out a new design or perhaps offer them to a client.

To enter is simple, all you have to do is leave a comment on this blog post mentioning one WordPress plug-in that you think is extremely useful. At the end of the week Leslie from Next Day Flyers will pick a comment to win the 500 business cards.

The details are here: 500 Standard Business Cards, Full Color Printing on the front, Black printing on the back. Printed next day service turnaround time and free ground shipping to the Continental U.S. Provided by Next Day Flyers, providers of business cards and brochures.

Leave a comment mentioning a great WordPress plug-in to enter. Content ends November 26th at midnight.

Author: "Dejan Cancarevic" Tags: "Freebies"
Comments Send by mail Print  Save  Delicious 
Date: Sunday, 31 Oct 2010 19:47

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.

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.

While installing cufon on a site is relatively easy, it actually is super simple when you are using WordPress.

The Two Parts of Cufon

Cufon essentially consists of two parts:

  1. A font file that contains a generated version of the font you wish to use
  2. The javascript font rendering engine

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...)

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 Cufon font generator 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.

This will create a javascript file that contains your now cufon embeded font. Typically the file will follow this format fontname-fontweight.font.js.

Now typically with Cufon you would include the font file and the cufon library javascript in your <head> much like any other javascript library, however it is actually easier to do this in WordPress.

The WordPress Plugin

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, WP-Cufon seems to be the most user friendly.

1. Install the Plugin

After you have obtained your Cufon encoded font file simply download and install the WP-Cufon plugin. This can be done through manually downloading the plugin or through the WordPress Plugins menu item.

2. Add Your Fonts

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 /wp-content/plugins/fonts/. Then simply upload your previously created font javascript file into this folder.

3. Configure Your Font Replacements

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:

Cufon.replace('h1', { fontFamily: 'Vegur' });

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 fontFamily declaration to the name of your embeded font. For example 'Gotham HTF' or 'Trajan Pro'.

Author: "3pointross" Tags: "General, WordPress, cufon, fonts, plugin..."
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 26 Oct 2010 09:00

The recent release of WordPress 3.0 has shifted the already rockstar popular WordPress from a capable but simple CMS/Blogging Platform into a full featured website framework. It is safe to say that the quick rise and wide-spread popularity of WordPress is largely in part of it's simplicity. It seems that the team behind WordPress is careful not to try and make it all things to all people, as there are plenty of other CMS solutions out there that are already fighting in that space (Joomla, Drupal).

Adding new and complex new features to the system may sound sacrilegious. Wasn't the whole point that it was simple and easy? The truth is that WordPress has always been a limitless solution... if you were a capable WordPress developer. However now there are easy to "enable" features that make it the ideal solution for designers. What previous required heavy hacking or several plug-ins can be integrated into your themes right out of the box (or should I say download?)

What you will find is that the WordPress team has addressed the most common requests by top designers with this 3.0 release. Where previous version have made large strides towards a better system none have included quite so many notable capabilities. This now allows designers who use WordPress to add new layers of visual interest and style to their designs with the knowledge that not only can it be done in WordPress, but the design features can be administered easily as well. While the features are powerful and have already created waves in the design communities, there are so many different capabilities that many are unaware of what now can be done with ease.

WordPress 3.0 has included the following key designer features that we will cover:

  • Custom background images
  • Custom header images
  • Custom content types
  • Author templates
  • Custom menus

Custom Background Images

Custom Backgrounds

With the adoption of broadband and better server technologies, a visually rich background image doesn't pose a major experience issue on most users. As a result it is common to see more sites with different visually interesting background images.

Visually interesting background images are a great way to draw a user in and engage them. WordPress 3.0 has given us the ability to upload and select different background images through the administration interface.

Why Designers Should Care

As designers we are no longer held back by complicated implementation issues. We also can give our clients the ability to manage and select different background images with ease. The new functionality includes a full administration interface that has such features as image sizing/editing, positioning, tiling and uploading.

As a site grows and evolves there may be good reason to change the background. Being able to easily switch the background image allows designers to use the background as a tool rather than just an area to fill. We can now design sites with the idea that the background can on the site from time to time (seasonal backgrounds anyone?)

How To Use Custom Background Images

The first step to implementing custom background images is turning on the functionality through your themes functions.php file by adding the following line of code:

if (function_exists('add_custom_background')) { add_custom_background(); }

This will turn on the capability through the WordPress Administration so that users can upload and manage different background images. This functionality puts custom CSS in the head and stylizes the body element.

Custom Header Images

Custom Headers

Sticking with the theme of making WordPress a more media rich tool, we now have the capability to upload and manage header banners through the administration panel. The system is sophisticated enough where it will resize large images to fit with in the desired area.

While you could previously force this sort of functionality through post thumbnails it lacked the polish and sophistication of the new custom header images. With WordPress you can now define the size, set the default image and manage them all in one place.

Why Designers Should Care

It used to be that design agencies would design a homepage and subpage for clients. The client could input what ever content they develop into those templates and be on their merry way. While there is nothing inherently wrong with this process the header images rarely could be contextually relevant for every page of content on the site. It is more common these days to have a different header image for each page.

How to Use Custom Header Images

Using and working with custom header images is a bit more tricky than backgrounds, but with a few functions added to the functions.php code you can setup the functionality and turn the keys over to your staff or clients.

(This code was found in the new TwentyTen theme, thanks to wpbeginner.com for the tutorial)


	if ( ! function_exists('customtheme_setup') ):

		function customtheme_setup() {

		add_theme_support( 'post-thumbnails' );

		define( 'HEADER_TEXTCOLOR', '' );
		 array (
		     'url' => '%s/images/headers/customHeaderOne.jpg',
		    'thumbnail_url' => '%s/images/headers/customHeaderOne-thumbnail.jpg',
		    'description' => __( 'Business People', 'customtheme' )
		),
		    'cherryblossom' => array (
		     'url' => '%s/images/headers/customHeaderTwo.jpg',
		     'thumbnail_url' => '%s/images/headers/customHeaderTwo-thumbnail.jpg',
		    'description' => __( 'Chess Set', 'customtheme' )
		),
		    'concave' => array (
		    'url' => '%s/images/headers/customHeaderThree.jpg',
		    'thumbnail_url' => '%s/images/headers/customHeaderThree-thumbnail.jpg',
		    'description' => __( 'Puzzle Pieces', 'customtheme' )
		)
		) );
		}
		endif;

		if ( ! function_exists( 'customtheme_admin_header_style' ) ) :
		/**
		* Styles the header image displayed on the Appearance > Header admin panel.
		*
		* Referenced via add_custom_image_header() in customtheme_setup().
		*
		* @since 3.0.0
		*/
		function customtheme_admin_header_style() {
		?>
		<style type="text/css">
			#headimg {
				height: px;
				width: px;
			}
			#headimg h1, #headimg #desc {
				display: none;
			}
                </style>
                }
                endif;

		

This will setup your theme so that you can upload and manage new custom images. Additionally it allows you to set the banner size so that images that don't fit those dimensions can be cropped to fit. This is half of the work that needs to be done, the next step you must actually insert the code to render the banner into your WordPress theme templates. In most cases this will end up in the header.php file.



<?php
    // Check if this is a post or page, if it has a thumbnail, and if it's a big one
    if ( is_singular() &&
        has_post_thumbnail( $post->ID ) &&
        ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail') ) &&
        $image[1] >= HEADER_IMAGE_WIDTH ) :
        // We have a new header image!
        echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
    else : ?>
        <img src="/images/wp/<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
    <?php endif; ?>
			

		

This code will go through the process of identifying the type of page, if there is a thumbnail and then if the attached image is large enough to fill the space. If it is the image will be rendered, otherwise it will output a default header.

Custom Content Types

Custom Content

One of the areas that has always pained me with WordPress is the lack of Custom Content Types. Systems like Drupal and Joomla have had this capability for a long time and in most projects you are going to end up with situations in which the site has different types of content. Whether you have employee bios or need individual listings for homes just having a standard "page" is rarely ideal.

WordPress 3.0 now has the capability to have Custom Content Types. No longer are we restricted to trying to make all content fit with in a post or page, we can define what ever content we need.

Why Designers Should Care

Previously if you were designing a site you couldn't design any sort of standard layout that differed greatly from your standard page as there were no great ways to implement it. Meaning if you had a standard set of employee information, unless you worked with more complicated plug-ins or taught your client how to use custom fields you had to keep the content pretty free form.

Now that WordPress supports custom content we can customize the administration panel, add our own custom fields and inputs and then design rich interfaces around them.

How to Use Custom Content Types

I will be honest and say that WordPress hasn't made this extremely easy at this point in time. Certainly not as easy as the visual interface of building Custom Content of Drupal's CCK (Content Construction Kit). Much like the other features if you are doing this by hand you will be adding a fair amount of code to your functions.php.

If you are the type that likes to get your hands dirty I recommend you read this great article about setting up custom content types and fields.

If you are like me then you would rather be designing than hacking through your functions.php, in which case you can choose from a wide range of capable plug-ins that will help you build the new content types easily.

Author Templates

WordPress has always had a very flexible templating system. Creating new templates for different sections of your site, blog or categories has always been as simple as creating a new file and adding a comment to give the template a name.

Previous releases of WordPress have resulted in category specific template capabilities, and to make a strength even stronger the new version of WordPress now features the capability to have author specific templates.

Why Designers Should Care

Experienced designers will agree that context is everything. Not only is it important that the template match the content and context of the site, but also the author.

While this won't apply to all sites, it is becoming more and more common to have different authors writing for a single blog. When you have faced with multiple authors you are going to end up with different writing styles, opinions and content. With these differences it simply makes sense to have different templates for the different authors.

Now of course I am not suggesting that you have a drastically different design, rather a slightly different template that indicates and reflects the author and their characteristics.

How to Create Custom Author Templates

Creating an author specific template is incredibly simple, WordPress will look for an author specific template when ever a post is rendered. Finding none it will use a default template. So all you have to do is create a varied template using the WordPress naming structure:

author-{nicename}.php

or

author-{id}.php

Custom Menus

Custom Menus

The custom menu system developed from the WooThemes crew is one of the most significant advances in this release. WordPress always had ways to outputting a menu based on page structure, but it was hardly ideal. Often times you had to use a few plug-ins to hide unwanted pages and it really only worked for a primary navigation.

The new menu system makes it easy for clients and designers alike to design and work with rich menu systems with out hacking and extra plug-ins.

Why Designers Should Care

Beyond the fact that it makes designing menus easier it also opens up several new options that we previously couldn't do well with WordPress. We can now have multiple menus that don't need to be hard coded. This means easier footer navigation, utility navigation, etc...

Additionally the new menu system gives us a wide range of additional options such as custom CSS classes, descriptions, etc... This gives us a whole range of options that were difficult before, such as:

  • Icons for each menu item
  • Menu item descriptions (more popular)
  • Better placement / styling through .first and .last style classes
  • Better Microformat support through XFN

This really opens up a whole new level of design options that were previously very difficult to do.

How to Use Custom Menus

When it comes to adding custom menu support for our themes there are two steps, the first involves altering the functions.php file to add menu support.


			add_action( 'init', 'register_menus' );

			function register_menus() {
				register_nav_menus(
					array(
						'primary-menu' => __( 'Primary Menu' ),
						'utility-menu' => __( 'Utility Menu' ),
						'footer-menu' => __( 'Footer Menu' )
					)
				);
			}
		

This code here calls a function to register the different menus we wish to create. In this example we are creating a primary menu, utility menu and footer menu. The regster_nav_menus() function will create areas in which we can define menus through the administration panel. We just populate the array with the menu name and description (which can be what ever you would like).

From this point we can include the function to display the nav menu in our WordPress theme through the wp_nav_menu() function.

<?php wp_nav_menu( array( 'theme_location' => 'primary-menu' ) ); ?>

This will output the menu we have defined as 'primary-menu'. WordPress will automatically output an unordered list containing the complete menu that is created through the administration panel. By default it also includes quite a bit of extra xhtml and css, but luckily the function can be customized fairly easily. If you are looking to customize your mark-up a bit more consider reading the reference for the wp_nav_menu() function.

Those of you looking to display the description can do so by using the walker function of the menu, which you can read more about here.

Conclusion

The new version of WordPress has given designers a whole new tool set of functionality and capabilities. We can now put a whole new layer of polish and depth into our designs to provide a better experience for our users.

There is no doubt that WordPress will continue to evolve as a formidable platform and framework for designers and developers alike. As a designer, what features and functionality do you find most useful?

Author: "Dejan Cancarevic" Tags: "Design, Hacks, Tools, WordPress"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 11 Oct 2010 00:42

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 on your WordPress site.

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.

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 access the slides as a PDF here, or via slideshare below:

Author: "3pointross" Tags: "General, Tools, WordPress, horsepower, o..."
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 07 Sep 2010 22:37

It seems to be more and more common for companies to have special areas of their websites specifically for their existing clients. There are a lot of reasons this approach can be a great business strategy. Not only are you able to reward your loyal customers with rewards, you are also encouraging additional interactions and client registrations. While you should always avoid using registration data for malicious reasons it can be a great way to develop a list, evaluate your marketing demographics or get feedback.

While WordPress has a fairly fully functioning registration system out of the box it is really designed for subscribing to a blog and leaving comments. However with a few plug-ins and some tweaks it is pretty easy to develop a full featured client section through your WordPress Installation.

The Behavior

Typically a client area works something like this:

  • Client registers for access (or you may want to manually give them access)
  • They are either approved or auto sent a username / password
  • They can now login and are forwarded to a section of the site that contains special content, downloads, etc...
  • When they are done they log out.

WordPress can do quite a bit of this for us, including user registration, private pages and the assignment of username and password. The areas in which we would like to get a bit more capabilities would be a more streamlined login page (one that matches the theme vs the WordPress admin login), forwarding the user to the proper area and collecting more information about the customer than just username and password.

Collecting More Data

The first step is either creating a user for clients (if you want to be more selective and hand them out on a case by case bases) or allowing them to register for the client area. While the WordPress user profile does allow the storing of some basic information it is not included in the normal registration process and leaves out some potentially important details. With the Register Plus plugin you can add common fields such as phone number, address, etc... but you can also manually create additional profile fields and include them in the registration form.

Moderate Registrations

Worried that just anyone is going to sign up and access the special area? The appropriately titled New User Approval plugin has got you covered. Now you will be e-mailed when a user tries to register and can manually approve or disallow case by case.

Move Users in the Right Direction

Now when a user logins in you probably don't want them to go to the dashboard. This would be pretty confusing and disorienting and they likely would have little idea on how to get to the client section they were interested in. With Peters Login Redirect plugin you can choose exactly where logged in users will go. Typically this will be done based on userlevel, however if you are looking to have content and information specific to a given client then you can also redirect them to pages based on their username.

Protecting Pages

Now the whole point of all of this is that we want some content to only be available to some users. At the most basic level all you have to do is change the default visibility with in the publishing properties from "Public" to "Private." However this only works if you don't mind all registered users being able to see all of the private content. IE: It is an "all or nothing" system. If you need more granularity then it is time to install the User Access Manager plugin, which will give you the capability to setup groups which have access to specific pages and sections.

Better Login & Register

While the Register Plus plugin will let you change the default login logo from WordPress to your own, it is highly unlikely that the login page will actually match the rest of your sites design. While you could figure it is close enough and be on your marry way it wouldn't be a bad idea to include a login form from one of your templates. This way the users experience is never put at jeopardy and there is no risk of confusion.

While you could simply hard code the form HTML from the login page it is much easier to use one of the many available plugins to facilitate the experience.

These plugins will help you integration the login and registration forms into your site rather than take them to the WordPress styled administrative register / login pages.

Build, Build, Build

Once you have these plugins put together you should be ready to build out the content like you would any other pages in WordPress. This is a simple and easy way to go about making a WordPress Client area. Depending on your creativity it wouldn't be hard to develop Calendars for specific groups, file upload sections, etc... Really the possibilities become endless.

In a later post we will cover how to build a more complex client area for WordPress using current_user information and extra fields.

Author: "3pointross" Tags: "WordPress, area, client, login, members,..."
Comments Send by mail Print  Save  Delicious 
Date: Monday, 16 Aug 2010 17:43

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.

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.

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.

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.

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.

Working with Link Descriptions

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:

add_action( 'init', 'register_menus' );
     function register_menus() {
           register_nav_menus(
                array(
                     'primary-menu' => __( 'Primary Menu' )
                 )
            );
      }

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.

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:

<?php wp_nav_menu( array( 'theme_location' => 'primary-menu' ) ); ?>

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.

This is done by creating a custom class in our functions.php, such as the following:


class My_Walker extends Walker_Nav_Menu
{
	function start_el(&$output, $item, $depth, $args) {
		global $wp_query;
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

		$class_names = $value = '';

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

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

		$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

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

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

		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

This will add the description with in a span element when we tweak our template code to the following:

<?php
       $walker = new My_Walker;
	wp_nav_menu(array(
                'theme_location' => 'primary-menu',
		'walker' => $walker
	));
?>

Tada, now we can have menu descriptions such as on this Buddypress project we worked on here.

Author: "Dejan Cancarevic" Tags: "General, Hacks, Tools, WordPress, 3.0, d..."
Comments Send by mail Print  Save  Delicious 
Date: Friday, 02 Jul 2010 13:56

If you have been reading this blog for the past few months you will be aware that I was given the opportunity to attend the Voices that Matter conference this past weekend. Conferences are refreshing for many reasons including networking, re-energizing you about your passion and of course education. While I have always been aware of Microformats, technically knew how to do them and even had a good understanding of what they did, I had never felt compelled to include them in the standard 3.7 DESIGNS development process.

However one of the great presentations from the conference reminded me not only how easy they are to implement but also reminded me of the benefits as well. As a result I have started to write them into the web development standards at 3.7 and have also posted an article with more information on the company blog. If you are at all interested in Microformats give it a read.

Author: "3pointross" Tags: "Design, business, 3.7 designs, benefits,..."
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 22 Jun 2010 01:27

WordPress 3.0 is really a revolutionary upgrade compared to WordPress 2.0. With integrated multi-users, custom post types, custom background images, custom taxonomies, the new menu system and custom header images it is now both a blogging powerhouse and enterprise capable CMS out of the box. Despite the official release only being a week or two ago there are already some powerful plugins that will help you take advantage of the new features.

While you are upgrading to WordPress 3.0 don't hesitate to install these plugins as well.

Custom Post Type UI

One of the powerful new features to WordPress is the ability to create custom post types. This has long been a lacking feature in WordPress. The custom post types allows you to define custom "types" of content such as listings, locations, employee bios, etc...

The usage of custom post types is not exactly straight forward however. You have to be pretty comfortable working with your functions.php file and even then it is time consuming. Custom Post Type UI allows you to easily define and customize your post types through the WordPress administration panel using a GUI. Clearly an essential plugin for WordPress 3.0.

Download Custom Post Type UI Here

WP Post Type UI

Inspired by Custom Post Type this plug-in takes the same concept to the next level and gives you additional control and customization.

  • True WP user interface look and feel
  • Add/Edit/Delete dynamic "Post Types" and "Taxonomies"
  • Search "Post Types" from name and description
  • Search "Taxonomies" from name and "Post Type"
  • Matching labels when creating records
  • Shows post and active taxonomy count
  • Advanced "Post Types" and "Taxonomies" options

Download WP Post Type UI Here

GD Taxonomies Tools

The ability to define custom tags and taxonomies opens up endless possibilities for WordPress. We can now use WordPress to develop custom taxonomies like colors, sizes, locations, etc... Again, list custom post types it can be a bit complicated to figure out and work with. This plugin adds many tools including custom post types and taxonomies management and widget for taxonomies terms cloud.

Download GD Taxonomies Tools Here

WP Multi Networks

While WordPress Multi User has been around for awhile the new WordPress 3.0 has merged the two versions of the site and allow the easy development of networks of sites. This plugin is able to turn your multi-site installation of WordPress into many multi-site networks, all surrounding one central user base.

WP Multi Network allows cape wearing super admins to create new network collections of sites, allowing for infinitely extensible site, network, and domain arrangements.

Download WP Multi Networks Here

WP Title 2

Once you take advantage of WordPress custom post types and the menu management tool you are very likely to run into a situation in which you want the title of the page and the title used in the menu would be different. Some content management systems already take advantage of this and now with this plug-in WordPress does too.

WP Title 2 lets you easily define a different menu label than your page title. This makes the site easier to administer and can improve usability of the site as well.

Download WP Title 2 Here

Post Type Switcher

Have an existing post that you want to change to a different custom post type? Rather than deleting and recreating simply use this plugin that gives you the capability to switch between posts, pages and custom post types.

Download Post Type Switcher Here

Multi Post Thumbnails

While post thumbnails were introduced earlier this is still a great plugin. If you have ever wanted the ability to have more than one post thumbnail than this plugin is for you.

Download Multi Post Thumbnails Here

Author: "Dejan Cancarevic" Tags: "WordPress, 3.0, custom post types, plugi..."
Comments Send by mail Print  Save  Delicious 
Next page
» You can also retrieve older items : Read
» © All content and copyrights belong to their respective authors.«
» © FeedShow - Online RSS Feeds Reader