By now, we all know that we should be using HTML5 to build websites. The discussion now is moving on to how to use HTML5 correctly. One important part of HTML5 that is still not widely understood is sectioning content: section, article, aside and nav. To understand sectioning content, we need to grasp the document outlining algorithm.

Understanding the document outlining algorithm can be a challenge, but the rewards are well worth it. No longer will you agonize over whether to use a section or div element — you will know straight away. Moreover, you will know why these elements are used, and this knowledge of semantics is the biggest benefit of learning how the algorithm works.

What Is The Document Outlining Algorithm?

The document outlining algorithm is a mechanism for producing outline summaries of Web pages based on how they are marked up. Every Web page has an outline, and checking it is easy using a really simple free online tool, which we’ll cover shortly.

So, let’s start with a sample outline. Imagine you have built a website for a horse breeder, and he wants a page to advertise horses that he is selling. The structure of the page might look something like this:

That’s all it is: a nice, clean, easy-to-follow list of headings, displayed in a hierarchy — much like a table of contents.

To make things even simpler, only two things in your mark-up affect the outline of a Web page:

• heading content (h1 to h6 and hgroup),
• sectioning content (section, article, aside and nav).

Obviously, the sectioning of content is the new HTML5 way to create outlines. But before we get into that, let’s go back to HTML 101 and review how we should all be using headings.

Creating Outlines With Heading Content

To create a structure for the horses page outlined in figure 1, we could use mark-up like the following:

<div>
   <h1>Horses for sale</h1>

   <h2>Mares</h2>

   <h3>Pink Diva</h3>
   <p>Pink Diva has given birth to three Grand National winners.</p>

   <h3>Ring a Rosies</h3>
   <p>Ring a Rosies has won the Derby three times.</p>

   <h3>Chelsea’s Fancy</h3>
   <p>Chelsea’s Fancy has given birth to three Gold Cup winners.</p>

   <h2>Stallions</h2>

   <h3>Korah’s Fury</h3>
   <p>Korah’s Fury has fathered three champion race horses.</p>

   <h3>Sea Pioneer</h3>
   <p>Sea Pioneer has won The Oaks three times.</p>

   <h3>Brown Biscuit</h3>
   <p>Brown Biscuit has fathered nothing of any note.</p>

   <p>All our horses come with full paperwork and a family tree.</p>
</div>

It’s as simple as that. The outline in figure 1 is created by the levels of the headings.

Just so you know that I’m not making this up, you should copy and paste the code above into Geoffrey Sneddon’s excellent outlining tool. Click the big “Outline this” button, et voila!

An outline created with heading content this way is said to consist of implicit, or implied, sections. Each heading creates its own implicit section, and any subsequent heading of a lower level starts another layer, of implicit sub-section, within it.

An implicit section is ended by a heading of the same level or higher. In our example, the “Mares” section is ended by the beginning of the “Stallions” section, and each section that contains details of an individual horse is ended by the beginning of the next one.

Figure 3 below is an example of an implicit section that ends with a heading of the same level. And figure 4 is an implicit section that ends with a heading of a higher level.

<h3>Sea Pioneer</h3><!-- start of implicit section -->
<p>Sea Pioneer has won The Oaks three times.</p>

<h3>Brown Biscuit</h3><!-- This heading starts a new implicit section,
so the previous Sea Pioneer section is closed -->

<h3>Chelsea’s Fancy</h3><!-- start of implicit section -->
<p>Chelsea’s Fancy has given birth to 3 Gold Cup winners.</p>

<h2>Stallions</h2><!-- this heading starts a new implicit section
using a higher level heading, so Chelsea’s Fancy is now closed -->

Creating Outlines With Sectioning Content

Now that we know how heading content works in creating an outline, let’s mark up our horses page using some new HTML5 structural elements:

<div>
   <h6>Horses for sale</h6>

   <section>
      <h1>Mares</h1>

      <article>
         <h1>Pink Diva</h1>
         <p>Pink Diva has given birth to three Grand National winners.</p>
      </article>

      <article>
         <h5>Ring a Rosies</h5>
         <p>Ring a Rosies has won the Derby three times.</p>
      </article>

      <article>
         <h2>Chelsea’s Fancy</h2>
         <p>Chelsea’s Fancy has given birth to three Gold Cup winners.</p>
      </article>
   </section>

   <section>
      <h6>Stallions</h6>

      <article>
         <h3>Korah’s Fury</h3>
         <p>Korah’s Fury has fathered three champion race horses.</p>
      </article>

      <article>
         <h3>Sea Pioneer</h3>
         <p>Sea Pioneer has won The Oaks three times.</p>
      </article>

      <article>
         <h1>Brown Biscuit</h1>
         <p>Brown Biscuit has fathered nothing of any note.</p>
      </article>
   </section>

   <p>All our horses come with full paperwork and a family tree.</p>
</div>

Now, I know what you’re thinking, but I haven’t taken leave of my senses with these crazy headings. I am making a very important point, which is that the outline is created by the sectioning content, not the headings.

Go ahead and copy and paste that code into the outliner, and you will see that the heading levels have absolutely no effect on the outline where sectioning content is used.

The section, article, aside and nav elements are what create the outline, and this time the sections are called explicit sections.

One of the most talked about features of HTML5 is that multiple h1 elements are allowed, and this is why. It’s not an open invitation to mark up every heading on the page as h1; rather, it’s an acknowledgement that where sectioning content is used, it creates the outline, and that each explicit section has its own heading structure.

The part of the HTML5 spec that deals with headings and sections makes this clear:

Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section’s nesting level.

I would strongly advise that until browsers — and, more critically, screen readers — understand that sectioning content introduces a sub-section, using multiple h1 elements is less safe than using a heading structure that reflects the level of each heading in the document, as shown in figure 6 below.

This means that user agents that haven’t implemented the outlining algorithm can use implicit sectioning, and those that have implemented it can effectively ignore the heading levels and use sectioning content to create the outline.

At the time of this writing, no browsers or screen readers have implemented the outlining algorithm, which is why we need third-party testing tools such as the outliner. The latest versions of Chrome and Firefox style h1 elements in nested sections differently, but that is very different from actually implementing the algorithm.

When most user agents finally do support it, using an h1 in every explicit section will be the preferred option. It will allow syndication tools to handle articles without needing to reformat any heading levels in the original content.

   <div>
      <h1>Horses for sale</h1>

      <section>
         <h2>Mares</h2>

         <article>
            <h3>Pink Diva</h3>
            <p>Pink Diva has given birth to three Grand National winners.</p>
         </article>

         <article>
            <h3>Ring a Rosies</h3>
            <p>Ring a Rosies has won the Derby three times.</p>
         </article>

         <article>
            <h3>Chelsea’s Fancy</h3>
            <p>Chelsea’s Fancy has given birth to three Gold Cup winners.</p>
         </article>
      </section>

      <section>
         <h2>Stallions</h2>

         <article>
            <h3>Korah’s Fury</h3>
            <p>Korah’s Fury has fathered three champion race horses.</p>
         </article>

         <article>
            <h3>Sea Pioneer</h3>
            <p>Sea Pioneer has won The Oaks three times.</p>
         </article>

         <article>
            <h3>Brown Biscuit</h3>
            <p>Brown Biscuit has fathered nothing of any note.</p>
         </article>
      </section>

      <p>All our horses come with full paperwork and a family tree.</p>
   </div>

One other point worth noting here is the position of the paragraph “All our horses come with full paperwork and a family tree.” In the example that used headings to create the outline (figure 2), this paragraph is part of the implicit section created by the “Brown Biscuit” heading. Human readers will clearly see that this text applies to the whole document, not just Brown Biscuit.

Sectioning content solves this problem quite easily, moving it back up to the top level, headed by “Horses for sale.”

Mixing It Up

So, what happens when implicit sections and explicit sections are combined? As long as you remember that implicit sections can go inside explicit sections, but not the other way round, you will be fine. For example, the following works well and is perfectly valid:

   <h1>Horses for sale</h1>

   <section>
      <h2>Mares</h2>

      <h3>Pink Diva</h3>
      <p>Pink Diva has given birth to three Grand National winners.</p>

      <h3>Ring a Rosies</h3>
      <p>Ring a Rosies has won the Derby three times.</p>

      <h3>Chelsea’s Fancy</h3>
      <p>Chelsea’s Fancy has given birth to three Gold Cup winners.</p>
   </section>

And it creates a sensible hierarchical outline:

However, if you hope to achieve the same outline by nesting an explicit section inside an implicit section, it won’t work. The sectioning element will simply close the implicit section created by the heading and create a very different outline, as shown below:

   <h1>Horses for sale</h1>

   <h2>Mares</h2>

   <article>
      <h3>Pink Diva</h3>
      <p>Pink Diva has given birth to three Grand National winners.</p>
   </article>

   <article>
      <h3>Ring a Rosies</h3>
      <p>Ring a Rosies has won the Derby three times.</p>
   </article>

   <article>
      <h3>Chelsea’s Fancy</h3>
      <p>Chelsea’s Fancy has given birth to three Gold Cup winners.</p>
   </article>

This would produce the following outline:

There is no way to make the explicit sections created by the article elements become sub-sections of the Mare’s implicit section.

You can use headings to split up the content of sectioning elements, but not the other way round.

Things To Watch Out For

Untitled Sections

Until now we haven’t really looked at nav and aside, but they work exactly the same as section and article. If you have secondary content that is generally related to your website — say, horse-training tips and industry news — you would mark it up as an aside, which creates an explicit section in the document outline. Similarly, major navigation would be marked up as nav, again creating an explicit section.

There is no requirement to use headings for aside and nav, so they can appear in the outline as untitled sections. Go ahead and try the following code in the outliner:

   <nav>
      <ul>
         <li><a href="/">home</a></li>
         <li><a href="/about.html">about us</a></li>
         <li><a href="/horses.html">horses for sale</a></li>
       </ul>
   </nav>

   <h1>Horses for sale</h1>

   <section>
      <h2>Mares</h2>
   </section>

   <section>
      <h2>Stallions</h2>
   </section>

The nav appears as an untitled section. Now, this generally wouldn’t be a problem and is not considered bad HTML5 code, although in his recent HTML5 Doctor article on outlining, Mike Robinson recommends using headings for all sectioning content in order to increase accessibility.

Untitled section and article elements, on the other hand, are generally to be avoided. In fact, if you’re unsure whether to use a section or article, a good rule of thumb is to see whether the content has a natural, logical heading. If it doesn’t, then you will more than likely be wiser to use a good old div.

Now, the spec doesn’t actually require section elements to have a title. It says:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Your interpretation of this probably hinges on your understanding of the word “typically.” I take it to mean that you need a damn good reason not to use headings with section elements. I do not take it to mean that you can ignore it whenever you feel the urge to use a new HTML5 element.

Where the article element is specified, the spec goes even further by showing an example of blog comments marked up as untitled articles, so there are exceptions. However, if you see an untitled section or article in the outline, make sure you have a good reason for not giving it a title.

If you are unsure whether your untitled section is a nav, aside, section or article, a very handy Opera extension will let you know which type of sectioning content you have left untitled. The tool will also let you view the outline without leaving the page, which can be hugely beneficial when you’re debugging sections.

Sectioning Root

The eagle-eyed among you will have noticed that when I said that sectioning content cannot create a sub-section of an implicit section, there was an h1 (“Horses for sale”) not in sectioning content immediately followed by a section (“Mares”), and that the sectioning content did actually create a sub-section of the h1.

The reason for this is sectioning root. As the spec says, sectioning elements create sub-sections of their nearest ancestor sectioning root or sectioning content.

Sectioning content elements are always considered subsections of their nearest ancestor sectioning root or their nearest ancestor element of sectioning content, whichever is nearest, regardless of what implied sections other headings may have created.

The body element is sectioning root. So, if you paste the code from figure 7 into the outliner, the h1 would be the sectioning root heading, and the section element would be a sub-section of the body sectioning root.

The body element is not the only one that acts as sectioning root. There are five others:

1. blockquote
2. details
3. fieldset
4. figure
5. td

The status of these elements as sectioning root has two implications. First, each can have its own outline. Secondly, the outline of nested sectioning root does not appear in, nor does it have an effect on, the outline of its parent sectioning root.

In practice, this means that headings inside any of the five sectioning root elements listed above do not affect the outline of the document that they are a part of.

The final thing (you’ll be glad to hear) that I’ll say about sectioning root is that the first heading in the document that is not inside sectioning content is considered to be the document title.

Try the following code in the outliner to see what happens:

<section>
   <h1>this is an h1</h1>
</section>

<h6>this h6 comes first in the source</h6>

<h1>this h1 comes last in the source</h1>

I won’t try to explain this to you because it will probably only confuse both of us, so I’ll let you play with it in the outliner. Hint: try using different heading levels for the implicit sections to see how the outline is affected; for example, h3 and h4, or two h5s.

Untitled Documents

If no heading is at the root level of the document (i.e. not inside sectioning content), then the document itself will be untitled. This is a pretty serious problem, and it can occur either through carelessness or, paradoxically, by thinking carefully about how sectioning content should be used.

Roger Johansson addresses this issue in his excellent article on document outlines and HTML5 and the follow-up article.

Johansson asks how a proper document outline is supposed to be created for a blog post or other news-type item using HTML5. If you subscribe to the belief that your logo or website name should not be in an h1 element, you could mark up your blog post along the lines of the following:

<body>
   <article>
      <h1>Blog post title</h1>

      <p>Blog post content</p>
   </article>
</body>

The document is untitled. Somewhat reluctantly, Johansson settles on marking up the website’s title in h1 and using another h1 to mark up the article’s title. This is a sensible solution and is backed up by the results of the WebAIM screenreader user survey, in which the majority of respondents stated a preference for two top-level headings in exactly this format.

This same approach is also widely used on static pages that are built with HTML5 structural elements, and it could be very useful indeed for screen reader users. Imagine that you are using a screen reader to find a decent recipe for chicken pie, and you have a handful of recipe websites open for comparison. Being able to quickly find out which website you are on using the shortcut key for headings would be much more useful than seeing only “chicken pie” on each one.

Not too far behind two top-level headings in the screen reader user survey was one top-level heading for the document. This is probably my preferred option in most cases; but as we have already seen, it creates an untitled body, which is undesirable.

In my opinion, there is an easy way around this problem: don’t use article as a wrapper for single-blog posts, news items or static page main content. Remember that article is sectioning content: it creates a sub-section of the document. But in these cases, the document is the content, and the content is the document. Setting aside the name of the element, why would we want to create a sub-section of a document before it has even begun?

Remember, you can still use div!

hgroup

This is the final item in the list of things to watch out for, and it’s very easy to understand. The hgroup element can contain only headings (h1 to h6), and its purpose is to remove all but the highest-level heading it contains from the outline.

It has been and continues to be the subject of controversy, and its inclusion in the specification is by no means a given. However, for now, it does exactly what it says on the tin: it groups headings into one, as far as the outlining algorithm is concerned.

In Conclusion

The logic behind the document outlining algorithm can be hard to grasp, and the spec can sometimes feel like physics: understandable as you’re reading it, but when you try to confirm your understanding, it dissolves and you find yourself re-reading it again and again.

But if you remember the basics — that section, article, aside and nav create sub-sections on Web pages — then you are 90% of the way there. Get used to marking up content with sectioning elements and to checking your pages in the outliner, because the more you practice creating well-outlined documents, the sooner you will grasp the algorithm.

I promise, you will have it cracked after only a handful of times, and you will never look back. And from that moment on, every Web page you create will be structured, semantic, robust, well-outlined content.

Other Resources

• “Creating an Outline”
  The full W3C specification of the outlining algorithm.
• “Document Outlines”
  An explanation of the document outlines from the HTML5 Doctor.
• “Sectioning content” and “Sectioning root”
  The W3C specifications of sectioning content and sectioning root.
• “Sections and Outlines of an HTML5 Document”
  HTML5 sections and outlines explained on the Mozilla Developer Network. Note that header and footer are not sectioning content.
• “HTML5 Sectioning Elements, Headings, and Document Outlines” and “HTML5 Document Outline Revisited”
  Roger Johansson’s articles on the issue of sectioning content creating untitled documents.

(al)

© Derek Johnson for Smashing Magazine, 2011.

Go to Source

Most RSS feed readers work just like an email subscription, and all new posts will automatically show up in your unread list. Today we’re going to look at NewsBlur, a new feed reader webapp that brings an intelligent approach to RSS feeds. It automatically shows the articles you’ll be interest in based on articles you’ve previously liked, and makes it easy to browse the original site or the RSS feed itself.

Getting Started

Similar to Google Reader and other feed apps, NewsBlur lists feeds in folders on the left, and then displays the feed contents in the main content section of the page. Just browse to their site and you can automatically try it out without creating an account, simply by browsing the feeds that are already added to NewsBlur. This is a great way to get a feel for the interface before taking the time to create an account and add your own feeds. You can also install it as a webapp in Chrome directly if you wish.

Try NewsBlur out without signing up

Once you’re ready to signup, click the top black bar on the left to get back to the main screen. Here you can get more info about the app or signup for your own account. You don’t need to enter much info; just import your Google Reader account or add a new username and optionally add a password. One click later, you’ll be ready to start managing your own feeds with NewsBlur.

Signup directly with your Google account, or enter a new username

Using NewsBlur

Your new account will be sparse at first, but not for long. If you signed in with your Google Account, you’ll be prompted to select the feeds you want to keep; otherwise, you’ll have no feeds by default. Just click the green plus in the bottom left to start adding feeds.

NewsBlur helps you get started with info bubbles

Here you can add a feed from a URL or RSS feed directly, import your Google Reader account or add new folders to keep you feeds organized. Alternately, if you’ve been using a desktop RSS program such as NetNewsWire or FeedDemon, you can import your feeds from an OPML file. Check your current RSS app’s help if you’re unsure about how to export the OPML file.

Add feeds directly, or import from Google Reader or an OPML file

Free NewsBlur accounts let you add up to 64 feeds, so if your Google Reader account or OPML file included more feeds you’ll need to select some feeds to disable. NewsBlur will automatically select the feeds in your list that are most popular, but you can adjust it as you want. Alternately, for $12 per year you can upgrade to a Premium account which lets you add unlimited feeds and access premium features when they’re added.

Add up to 64 feeds to a free account, or upgrade for unlimited feeds

Training NewsBlur

Now that you’ve added your feeds, you could just start using NewsBlur, but that’d take away the best part. NewsBlur can automatically highlight the posts in your feeds that you’re most likely to find interesting, but you’ll have to train it to know what you like first. To do this, click the Launch Intelligent Trainer button on your NewsBlur dashboard after importing your feeds. This will present a page for each of your feeds, listing the top authors and tags on the site.

Teach NewsBlur what you're interested in

See if you'll like articles before you read a feed

You’ll need to do this for each feed, but once you’ve done it, you’ll find your RSS experience much more personalized and less time consuming. Articles NewsBlur thinks you’ll like based on info you’ve added will be listed in green, while unrated articles will be yellow and red articles cover topics you’ve downvoted in the past.

Read Feeds the Way You Like

While Google Reader and other RSS apps usually only let you read feeds in RSS view, NewsBlur includes a unique interface that shows the original site with the RSS feed listed underneath. This way you can still take advantage of each site’s unique design with the convenience of seeing which articles you haven’t read yet. It’s also nice for reading sites that include a truncated RSS feed without the full article content.

RSS combined with the original site in NewsBlur

Alternately, you can view articles in a traditional feed mode. Here NewsBlur’s design shines with a clean, elegant interface that makes articles nice to read.

Traditional RSS mode makes articles clean and easy to read

Like or Dislike Articles

You can keep training NewsBlur as you read articles so it’ll get better at knowing what feeds you like. If you like or dislike an article, click the thumb symbol on the left of the feed name. Alternately, if you just want to save the article to read later, click the star and you’ll be able to quickly find it in the Saved Stories entry on the top of the feed list.

Like or save articles to keep training NewsBlur and make it easier to use

If you pressed the thumb icon, you can now mark what you liked or disliked about an article. NewsBlur will use this info to keep your feeds focused on what you want to read. Over time, you should find yourself able to quickly read the news most important to you and let NewsBlur help you ignore the rest.

Mark what you like and dislike about an article

Or, if you’d like to read something out of your ordinary readings, you can always turn down NewsBlur’s filtering to let you see articles you otherwise might miss. Your choice!

Conclusion

While many people have switched to only reading links shared on networks such as Twitter or Facebook, NewsBlur shows how you can have a curated and personalized news experience from the sites you love. It does a great job surfacing the articles you’ll find most interesting, and seemed to run faster than Google Reader. At the very least, you should spend less time using it since you’ll only see the most important items.

You also have much more control over your experience than you do in Google Reader, and can even run it on your own server if you wish as NewsBlur is fully open source and can be downloaded from GitHub.

Do you use Google Reader, NewsBlur, or another RSS reader app? We’d love to hear what you’re using, so let us know in the comments. While you’re at it, don’t forget to give NewsBlur a try!

Go to Source

What happens when your main content area needs two specific background colors: one for the primary content, and another for the sidebar? If you’ve ever tried applying the background to each container itself, you’ll no doubt have realized that your layout quickly becomes fragmented as soon as, say, the primary content section exceeds the height of the sidebar.

Generally, the solution is to set a background image on the parent element, and set it to repeat vertically. However, if we get clever with CSS3 gradients, we can achieve the same effect with zero images. The irony in this is that we’re using CSS3 gradients to create an effect that doesn’t contain a gradient! Read on to learn more.

Prefer a Video Tutorial?

Step 1. Construction

Let’s begin by building a ridiculously simple layout. That way, we can demonstrate a common layout issue that we’ve all experienced at one point or another.

Create a new HTML document, and add the following to your body tag:

<body>

   <header>
      <h1> My Header </h1>
   </header>

   <div id="main">
      <div id="primary">Primary content.</div>
      <aside>
         Sidebar
      </aside>
   </div>

</body>

Don’t forget that you can use the body element as a wrapper for your layout. Simply set a width directly to the body.

What we have here is fairly common. A header element contains a heading tag; and, then we have a main div, which houses the primary content, as well as the sidebar.

Step 2. Create the Columns

Next, let’s style this layout a bit. As we’re using the body element as our wrapper, of sorts, let’s set a width and background color.

body {
  width: 700px;
  margin: auto;
  background: #e3e3e3;
}

Now, we’ll float the primary content and the sidebar to the left and right, respectively. Also, as we’re not working with any real content, we’ll set a height to each container to present the illusion of content. This itself won’t be enough; we must also specify precisely how wide each should be. Otherwise, they’ll take up all of the available space, due to their block nature.

#primary {
 float: left;
 width: 75%;
 height: 500px;

 background: red;
}

aside {
 display: block; /* Because is HTML5 element */
 float: right;
 width: 25%;
 height: 500px;

 background: green;

}

Step 3. The Rub

So, all this looks just fine — for now. However, issues arise as soon as the height of the primary content exceeds the height of the sidebar. Further, this will typically be the case in most situations.

To simulate added content, let’s increase the height of the #primary div to be 700px.

Typically, the solution to these types of dilemmas is to apply a background image to the parent (#main) element. This will usually be a small slice of the background, which will then be vertically repeated.

#main {
...
background: url(small/slice/of/background.png) repeat-y;

}

Problem solved! Well, not exactly. True, this does work, however, as soon as you decide to change a background color, you’re then forced to return to Photoshop to create a new background image. What a drag!

Another common solution is to use JavaScript to dynamically detect the width of each container, and then make them the same height. Keep in mind that this then requires your layout to be dependent upon JS being enabled.

Step 4. The Solution

If we want to be forward thinkers, we can use CSS3 gradients to achieve this effect. What is that you say? “But Jeff, these are solid colors; not gradients!” True, but I’ll show you a little trick I learned. If you create two stops at the same location in a CSS3 gradient, you’ll end up with two solid colors. That’s a bit confusing; let me demonstrate.

Before we continue, if you’re working along, return to your project, and remove the background colors. They’re no longer needed. Now, we’ll add a background gradient to the parent, #main, container instead.

#main {
   background: -moz-linear-gradient(left, red, green);
}

So, that’s probably what you were expecting. But how will that help us? We need a distinct separation between the primary content and the sidebar.

This time, let’s specify that both the red and the green color-stops should be placed at the 75% marker.

#main {
   background: -moz-linear-gradient(left, red 75%, green 75%);
}

Isn’t that awesome? Not only are we using a gradient to create solid colors, ironically, but, also, the heights of each child container are now identical.

Keep in mind that this isn’t entirely accurate. They have the illusion of being the same height. In truth, though, we’re only applying a background to the parent element. The sidebar is still shorter; you just can’t tell.

Step 5. Webkit

The final step is to make Webkit browsers (Safari and Chrome) happy. Unfortunately, they don’t quite agree with Mozilla on the correct syntax for creating gradients. Their method isn’t quite as succinct as Mozilla’s.

#main {
   background: -moz-linear-gradient(left, red 75%, green 75%);
   background: -webkit-gradient(linear, left top, right top, from(red), color-stop(.75, red), color-stop(.75, green));
}

If you’re used to the from() and to() functions, keep in mind that they’re simply helper functions, which direct to color-stop().

color-stop accepts two parameters:

• The position to stop
• The desired color

To clarify, color-stop(.75, green) means, “at 75% of the width of the element, the color should now be green.” So yes, the syntax is different, but it only takes a few seconds to convert.

Conclusion

That’s all there is to it! Please remember that these are CSS3 techniques, meaning, IE is left out in the cold. Keep in mind, though: “not all websites must look identical in every browser.”

What do you think? Will you use this method, knowing that you’ll have to provide a fallback color for IE, or resort to using conditional statements to use a fallback image?

Go to Source

But data is data, and visualizing how Google Analytics data relates to
specific pages can be a difficult task. So last week, Google launched
In-Page Analytics, which it hopes will make Analytics more useful by
adding “visual context” to data.

Located in the Content section of Analytics, In-Page Analytics is designed to answer questions like “Is my page layout optimal for what I want users to accomplish on the page?” and “Are my users seeing the content I want them to see?“

In-Page Analytics works by superimposing Analytics data on your website so that it can be viewed while actually browsing. So, for instance, while browsing a particular page on your website, In-Page Analytics will display ‘bubbles‘ detailing what percentage of clicks each link on the page generated. When clicked, these bubbles can provide additional data, such as goal conversion metrics.

One of the coolest features of In-Page Analytics is integration with advanced segments. With a couple of clicks, it’s possible to visualize how different types of visitors are interacting with a page. If you’re particularly interested in how paid traffic is interacting with a particular page, for instance, it’s easy to visualize this using In-Page Analytics and advanced segments.

Overall, In-Page Analytics is a feature that many Google Analytics users will likely come to use on a regular basis, and it will probably be especially beneficial to Google Analytics users who aren’t dataheads. After all, one picture is worth a thousand Google Analytics reports.

Gradients, rounded corners, drop shadows, it’s extremely hard to get away from the strongest of trends in our industry.

Each year however, some people manage to set themselves totally apart from everyone else and produce stunning designs with inspiration seemingly flowing directly out of their fingers and into their work.

In this post, we’ll take a look at a few of those people and some of the things which they do to be unique from everyone else.

What Constitutes Being Unique?

It’s all well and good suggesting that you should be unique and different from the competition, but what does that really mean? There are so many websites and great designers out there, what individual elements constitute being unique?

Well, in simple terms being unique just means doing something differently. You don’t have to create a design with the navigation in the footer and the copyright information up where the logo would normally be just for the sake of standing out. It’s about not just following what everyone else is doing and coming up with your very own way of displaying the information and the message which you are trying to get across to the user.

How many sites have you seen with a full width header (with a gradient), followed by a full width navigation bar, then a content section and a sidebar, then a full width footer? Hundreds? Thousands? If your focus is going to be being unique, then this is probably a design recipe which you should steer clear of. It’s too easy to create yet another site like that. Don’t get me wrong, they are popular because they are effective and easy to create… but they don’t stand out.

Being unique is largely about doing small things differently to everyone else rather than trying to reinvent the wheel. Of course you also have to accept that the time period for which it remains unique will be limited. If you do a great job, then unfortunately (or fortunately, depending on how you look at it) it’s going to be copied by many, many people. That being said, innovation is almost always remembered.

Using Details To Stand Out

Details are a fantastic way to set yourself apart from everyone else and the best part is that the word “details” encompasses a fairly wide array of possibilities. Adding detail to something just gives it that little edge, or that little bit of “pop” as a client might call it. You’re adding something small that isn’t essential to the design but that really impacts it in a positive way.

Jason Santa Maria

Jason Santa Maria’s focus on detail often largely surrounds his attention to typography and textual layout. He goes the extra mile to make the words he’s written look really good. Regardless of the design surrounding them it’s instantly apparently how much thought and effort has gone into styling the body text. How much time and effort do you usually put into styling your bog-standard page content?

Jesse Bennett Chamberlain

Jesse Bennett is a master of light sources. Looking at his designs you’ll rarely find a flat surface that hasn’t had lighting considered in some way. Now we to be clear here, he’s not just using pretty gradients because they’re…. pretty. He’s applying lighting effects using gradients. All the light-to-dark effects flow in the same direction and he’ll frequently create abstract background images to offset this even more. This clean and consistent attention to detail really stands out.

Having a Signature Style

A signature style is perhaps what we all long for. In the same way that people are able to identify a Picasso when viewing it for the first time, we all have a little ego inside us that would love to have a style so strong and recognizable that others would immediately be able to pick it out without being prompted.

Elliot Jay Stocks

Elliot Jay Stocks is usually the first name that comes to mind when thinking about signature styles. His uses of grungy textured backgrounds and typography are unmistakable. Significantly, he doesn’t over use them. You don’t get the impression that all of his sites look the same in any way, but more often than not you can tell if you’ve just arrived at a site which has been designed by him because all the signature elements are right there, subtly woven into the whole design.

Mike Kus

Mike Kus is another classic case study for having a signature style. With both Elliot and Mike having roots in Carsonified one has to wonder whether this is the type of designer which Ryan Carson looks for, or whether he fosters and encourages it amongst all of his employees? Mike’s style is bold and very heavily print influenced. Strong, solid colors, a lot over overlapping elements and clever uses of opacity are what make Mike’s designs instantly identifiable.

Illustration To Blow Away The Competition

Illustration is one of the most stunning but also perhaps one of the most difficult ways of standing out from the crowd. Very few designers are also great illustrators. Illustration is (for the most part) very artistic whereas design is (for the most part) very analytical. To find these two qualities mixed in a single person is somewhat rare though definitely not unheard of.

For many of us though, seeing stunning illustrations in website designs is a point of the utmost jealousy. Not being an illustrator doesn’t mean that you can’t use illustrations in your designs though, as well as the many stock websites dealing in illustrations there is also always the option to partner with a great illustrator in a collaborative effort from both parties.

Nick La

Nick La has got to be the epitome of using illustrations to create unique websites. Over the years he has churned out site after site with the most gorgeous illustrations grabbing you by the eyeballs and refusing to let go. The key thing about Nick’s work is that not only are his illustrations immaculate but they are also woven flawlessly into the very fabric of the design which they sit on top of. Such a seamless approach forces users to consider the beauty of the design as well as its effectiveness.

Veerle Pieters

Veerle Pieters is another example of a designer who makes fantastic use of illustrations within her designs and has become well known for it as a result. Rightfully so, her illustrations in particular make her designs stand out a mile and half from everything else. Veerle’s designs by themselves are excellent but browsing through her portfolio of work you can’t help but noticing how it’s the illustrated characters in each one that really take it to the next level.

Putting Time & Effort Into Extras

What else is there? Well aside from just details, there are also extras. You know, little things that you just don’t expect to be meticulously designed because they’re so small. Surprising users (or even customers, in the physical world) is a fantastic way to set yourself apart from everyone else because you’re giving them something they weren’t expecting. Their expectations are based on what everyone else is doing, so if you exceed those expectations… you win.

Clearleft

It’s hard to pinpoint a single name at ClearLeft in the UK to single out for this achievement (though former staffer Paul Annett would be high on the list) but they seem to have a knack for producing websites which do really interesting things when hovered over or re-sized. The Silverback website is of course the main one which everyone thinks of here but they’ve done similar things on both client sites and the multitude of sites produced for the dConstruct conference each year.

Liam McKay

Liam McKay is the final name which comes to mind when discussing putting that extra bit of effort into things which most people take for granted. Liam has a knack for seeing something simple and turning it into something beautiful. Whether that be with one of his bespoke icons (which are used throughout the entire Envato network), or by adding an incredibly subtle texture or enhancement that’s only visible to a few users, he’s constantly going the extra mile to design things which most people don’t bother with.

In Closing

Being unique isn’t about trying to turn the world on its head, it isn’t about massive typography, it isn’t about rounded corners.

Truly standing out from everyone else is about adding a personal touch to your designs, one which only you can create. Truly standing out is about going above and beyond the call of duty and not stopping until you hit that eureka moment.

This post was authored exclusively for WDD by John O’Nolan, a core contributor to the WordPress UI Team, writer and entrepreneur based in Surrey in the United Kingdom. John loves to talk to people, so why not follow @JohnONolan on twitter too?

What do you think? Are there any other particular factors that make designs really unique? What techniques have you used in order to stand out from the crowd?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

Source

Go to Source

My usual answer is that they cannot be compared. While WordPress had made huge strides in usability, for anything other than a blog it is an apple.

ExpressionEngine, with the release of version 2.0, makes for a lovely platform that is, as we will see, an orange.

Handling Content

The biggest difference between WordPress and ExpressionEngine is the way in which content is handled.

In WordPress, we all know that you can create a new post. This new post usually has a content section but may have some custom fields that are defined either on the fly or by the developer who created the template’s framework.

So, when you create a new post, the content will be displayed in different ways, depending on the category chosen and whether the category is a parent or child (i.e. sub-category). For the most part, though, whether they choose a new category or input data into pre-defined custom fields, the user will see the same input screen.

The items chosen by the user determine how the content is displayed. Some users like this. I think it shows WordPress’ roots as a blogging platform. This is not a knock because WordPress has certainly pushed the envelope on what can be done with a CMS just by uploading a few files. More to come on themes later.

Changing Channels

ExpressionEngine handles content quite differently. In ExpressionEngine, the user defines channels.

Each channel can be thought of as a separate blog—in fact, this is what it was called back in version 1.6.x. For each channel, you can define custom fields, categories and behaviors.

All of this is hidden from the average user in the administration portion of the website. The user would typically have access only to the “Publish” and “Edit” sections of the website and possibly some modules (which is similar to plug-ins in WordPress).

An Example

Recently we built a website for the Bay Community Church using ExpressionEngine. The website has a media section, and in that channel we created the following custom fields: title, description, image, audio and video files, file sizes, file lengths, and date on which the files were recorded.

Of course, channels can be as simple or as complex as you like (this particular website had five to six more custom fields for the media channel alone).

Most ExpressionEngine developers realize the power of the CMS’ add-ons, which also happens to be why most of them have been slow to move from version 1.6.x to 2.0. They know that most of the add-ons won’t be available for 2.0 for another couple of months.

With just a few add-ons, we extended ExpressionEngine, allowing church staff to add multiple files per entry. In the content structure of this particular website, a sermon series would be an entry on its own, and individual sermons for that series would be added to it.

To make it even more complicated, you could have any number of different types of fields in a channel (e.g. textbox, textarea, checkbox, S3 Integrated BucketList, FieldFrame Matrix, nGen File Field).

The website also has a section for small groups of people who gather for studies or fellowship.

If you navigate to a “New entry” page for the small groups, you would see a completely different set of custom fields (title, leader, location, meeting time, etc). So, from the user’s perspective, entering new content is easy because each channel is tailored to the content they are recording.

Why I Love ExpressionEngine

As a web designer, I love ExpressionEngine because it gives me extensive control. Most of my clients don’t have a single WYSIWYG editor anywhere on their website! I can control headings, MP3s, PDFs, lists and whatever else needs styling through CSS.

Unless they decide to learn HTML in order to apply inline styling, the design won’t be horrendously violated with 50-pixel blinking red fonts.

Content Construction Kit

I believe the Drupal community originally coined the term Content Construction Kit (CCK). CCK basically allows the user to define various types of content.

Perhaps the folks at EllisLab would disagree, but I would define ExpressionEngine as a CCK system. WordPress seems to be moving in that direction but is not there yet. Plenty of WordPress template developers are designing and adding to the framework, giving WordPress new kinds of functionality.

Changing the Look and Feel

For the most part, anyone can set up a WordPress blog or website with little knowledge of WordPress, PHP, HTML or anything else that would keep an Internet newcomer from blogging.

I have a non-technical friend who has set up several WordPress blogs without any of my help. Just download a template package; unzip it; upload it to wp-content/themes; log in; activate the new template; and voila! Magic happens, and you end up with a whole new website. WordPress shines in this area.

ExpressionEngine 2.0 Moving in the Right Direction

ExpressionEngine, on the other hand, has no easy way to add or change themes… yet.

With version 2.0, we are seeing the team at EllisLab starting to move in that direction. The team has added functionality that allows users to upload HTML and CSS files into folders with specific naming conventions (blog.group, main.group, portfolio.group, etc.), and you can synchronize the HTML and CSS files with ExpressionEngine, which will recognize and render them.

The problem is that ExpressionEngine only begins to shine when you get into its CCK capabilities. So, syncing files is great, but that does not get you the custom fields, categories and channels that bring ExpressionEngine to life.

EllisLab has added a file to the CMS named default_content.php, which is required to install a theme and which specifies default content, channels, custom fields and the like. But the file is not exactly intuitive.

ExpressionEngine fields are highly relational, so you definitely need to grasp SQL if you want to put a default_content.php file together.

Changing Themes

With WordPress, you can upload a new theme to change the look of the website at any time.

ExpressionEngine, on the other hand, allows a theme to be added only at the point of installation. So, if a user wants to change the look of their website, they’ll have to jump through hoops.

They would either have to keep their HTML, custom fields and other elements and then change the CSS and images. Or they would have to learn the system and then define custom fields, categories and channels. But this goes back to the way the two systems handle content.

Themes in WordPress typically all handle content the same way. Themes in ExpressionEngine do not.

What Have We Learned?

WordPress is especially good for PHP developers, tinkerers and bloggers. It is great for PHP developers because they can bend the CMS to their will; they can add functionality to the framework, as well as add custom fields and modify them at will.

It is great for tinkerers, who can set up a website easily; and if they ever get bored with the look and feel, they can search online for a new theme and have a completely new website in 20 minutes.

They can also download widgets and plug-ins that add functionality quickly. And having started out as a blogging system, WordPress really shines as a personal blog.

ExpressionEngine is great for front-end developers and designers because it does not require that users learn a difficult programming language in order to manipulate it.

Most HTML and CSS gurus can grasp the simple expressions and how to use them.

ExpressionEngine is the tool of choice for some well-known designers: Jesse Bennett-Chamberlain, Veerle Pieters and Andy Clarke, to name a few. It is extremely flexible, and few things cannot be accomplished with it.

As you can see, then, it really is an apples to oranges comparison.

This post was written exclusively for Webdesigner Depot by Marcus Neto. Marcus is a member of the ExpressionEngine Pro Network and is the man behind the curtain at EETemplates.com and Blue Fish Design Studio. He also has his say on Twitter @marcusneto.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: K0nb3p

Go to Source

Here are some of my favorite recent trends in web design. Although the examples listed here may not be the orginator of the trend, they are the first to catch my eye.

Web 2.0

The design trend associated with Web 2.0 is actually multiple trends rolled into one.

• Round corners
• Glossy/Shiny graphics
• Big, prominent graphics
• Larger, non-serif typography

Simple

I’ve often said, a designer who can pull off a simplistic design is just as talented as the one that can create a super-complex one. That is because a simple design is more than just leaving elements out. It is about balancing design, carefully choosing colors and typography, and expertly integration navigation and content to create an effective and smooth design.

Whole site branding integration

Orginally, web designs included a header, with a logo and a content section, with the content. Recently, designers are pushing the limits by incorporating colors, logos, branding, messaging and graphics throughout the entire site, not just the header.

Advanced typography

Web designers are putting much more thought into typography. There are many resources popping up to pick a typography set. Once upon a time, designs included an h1, h2, and p style. Now some designs include dozens of different font stylings.

Single page design

Along with designing simpler sites, designers are exploring ways to keep content on one page. In portfolios, showcases or simple informational sites, developers are looking for ways to put all content on page one so the readers sees it all without having to click through anywhere. The example below you will recognized as Twitter. As arguably one of the top 5 sites on the web, everything you need to know about Twitter is located on the front page.

AJAX

You know AJAX (asynchronous JavaScript and XML), it is that cool interaction when you click something on a site and it changes, without reloading. This is a huge advancement in web design technology and allows users to get the content they desire without moving about the site. Most major publishing platforms have integrated AJAX into their codex. The leader is easily seen in all the WordPress AJAX plugins.

Large images

Advances in compression technology, increased internet access speeds have allowed designers to grow the size and quality of images they use in new designs. This makes for an appealing and graphically pleasing design.

Perspective and depth

Strategically using dropshadows, angles and overlaps, designers have added a 3rd dimension to web design that was previously limited to 2 dimensions. Using these techniques, designers are able to draw user attention to specific areas consistent with the goals of the site. Perhaps conversion forms, twitter buttons or featured content.

Themed designs

Designers are adding overarching themes like grunge, retro, whimsical, etc. These themes tie together all elements of a design and give the user a feeling of continuity, adding to the overall experience.

Specific purpose

Designers have realized that themes should be designed for a specific purpose such as magazine, portfolio, green, blogging, etc. Designing for a purpose allows the designer and webmaster to focus on function and not generalize the design so it can be used across multiple different sites.

Additional Resources

• Web Design Trends for 2010
• WordPress Magazine Themes
• WordPress Portfolio Themes
• Typography tools

Related posts:

1. 63 Popular And Promising Web Design Blogs
2. Logo Design Trends 2009 – Showcase
3. 21 Sites Where To Find Free WordPress Themes Daily
4. 30 Sources To Get Your Web Design Inspiration
5. 13 Beautiful WordPress Showcase Sites

Go to Source

Here are some of my favorite recent trends in web design. Although the examples listed here may not be the orginator of the trend, they are the first to catch my eye.

Web 2.0

The design trend associated with Web 2.0 is actually multiple trends rolled into one.

• Round corners
• Glossy/Shiny graphics
• Big, prominent graphics
• Larger, non-serif typography

Simple

I’ve often said, a designer who can pull off a simplistic design is just as talented as the one that can create a super-complex one. That is because a simple design is more than just leaving elements out. It is about balancing design, carefully choosing colors and typography, and expertly integration navigation and content to create an effective and smooth design.

Whole site branding integration

Orginally, web designs included a header, with a logo and a content section, with the content. Recently, designers are pushing the limits by incorporating colors, logos, branding, messaging and graphics throughout the entire site, not just the header.

Advanced typography

Web designers are putting much more thought into typography. There are many resources popping up to pick a typography set. Once upon a time, designs included an h1, h2, and p style. Now some designs include dozens of different font stylings.

Single page design

Along with designing simpler sites, designers are exploring ways to keep content on one page. In portfolios, showcases or simple informational sites, developers are looking for ways to put all content on page one so the readers sees it all without having to click through anywhere. The example below you will recognized as Twitter. As arguably one of the top 5 sites on the web, everything you need to know about Twitter is located on the front page.

AJAX

You know AJAX (asynchronous JavaScript and XML), it is that cool interaction when you click something on a site and it changes, without reloading. This is a huge advancement in web design technology and allows users to get the content they desire without moving about the site. Most major publishing platforms have integrated AJAX into their codex. The leader is easily seen in all the WordPress AJAX plugins.

Large images

Advances in compression technology, increased internet access speeds have allowed designers to grow the size and quality of images they use in new designs. This makes for an appealing and graphically pleasing design.

Perspective and depth

Strategically using dropshadows, angles and overlaps, designers have added a 3rd dimension to web design that was previously limited to 2 dimensions. Using these techniques, designers are able to draw user attention to specific areas consistent with the goals of the site. Perhaps conversion forms, twitter buttons or featured content.

Themed designs

Designers are adding overarching themes like grunge, retro, whimsical, etc. These themes tie together all elements of a design and give the user a feeling of continuity, adding to the overall experience.

Specific purpose

Designers have realized that themes should be designed for a specific purpose such as magazine, portfolio, green, blogging, etc. Designing for a purpose allows the designer and webmaster to focus on function and not generalize the design so it can be used across multiple different sites.

Additional Resources

• Web Design Trends for 2010
• WordPress Magazine Themes
• WordPress Portfolio Themes
• Typography tools

Related posts:

1. 63 Popular And Promising Web Design Blogs
2. Logo Design Trends 2009 – Showcase
3. 65 Popular And Professional Free Fonts For Creative Typography
4. 21 Sites Where To Find Free WordPress Themes Daily
5. 30 Sources To Get Your Web Design Inspiration

Go to Source

Here are some of my favorite recent trends in web design. Although the examples listed here may not be the orginator of the trend, they are the first to catch my eye.

<h2>Web 2.0</h2>

The design trend associated with Web 2.0 is actually multiple trends rolled into one.

• Round corners
• Glossy/Shiny graphics
• Big, prominent graphics
• Larger, non-serif typography

<h2>Simple</h2>

I’ve often said, a designer who can pull off a simplistic design is just as talented as the one that can create a super-complex one. That is because a simple design is more than just leaving elements out. It is about balancing design, carefully choosing colors and typography, and expertly integration navigation and content to create an effective and smooth design.

<h2>Whole site branding integration</h2>

Orginally, web designs included a header, with a logo and a content section, with the content. Recently, designers are pushing the limits by incorporating colors, logos, branding, messaging and graphics throughout the entire site, not just the header.

<h2>Advanced typography</h2>

Web designers are putting much more thought into typography. There are many resources popping up to pick a typography set. Once upon a time, designs included an h1, h2, and p style. Now some designs include dozens of different font stylings.

<h2>Single page design</h2>

Along with designing simpler sites, designers are exploring ways to keep content on one page. In portfolios, showcases or simple informational sites, developers are looking for ways to put all content on page one so the readers sees it all without having to click through anywhere. The example below you will recognized as Twitter. As arguably one of the top 5 sites on the web, everything you need to know about Twitter is located on the front page.

<h2>AJAX</h2>

You know AJAX (asynchronous JavaScript and XML), it is that cool interaction when you click something on a site and it changes, without reloading. This is a huge advancement in web design technology and allows users to get the content they desire without moving about the site. Most major publishing platforms have integrated AJAX into their codex. The leader is easily seen in all the WordPress AJAX plugins.

<h2>Large images</h2>

Advances in compression technology, increased internet access speeds have allowed designers to grow the size and quality of images they use in new designs. This makes for an appealing and graphically pleasing design.

<h2>Perspective and depth</h2>

Strategically using dropshadows, angles and overlaps, designers have added a 3rd dimension to web design that was previously limited to 2 dimensions. Using these techniques, designers are able to draw user attention to specific areas consistent with the goals of the site. Perhaps conversion forms, twitter buttons or featured content.

<h2>Themed designs</h2>

Designers are adding overarching themes like grunge, retro, whimsical, etc. These themes tie together all elements of a design and give the user a feeling of continuity, adding to the overall experience.

<h2>Specific purpose</h2>

Designers have realized that themes should be designed for a specific purpose such as magazine, portfolio, green, blogging, etc. Designing for a purpose allows the designer and webmaster to focus on function and not generalize the design so it can be used across multiple different sites.

<h2>Additional Resources</h2>

• Web Design Trends for 2010
• WordPress Magazine Themes
• WordPress Portfolio Themes
• Typography tools

<h2>About the author</h2>

Cyrus Patten is a community consultant, university instructor and social worker in Burlington, VT. He is the editor of Pingable.org, a blog about WordPress plugins, themes and tools. His recent interests include WordPress Hosting and Green Hosting.

Related posts:

1. 63 Popular And Promising Web Design Blogs
2. Logo Design Trends 2009 – Showcase
3. 30 Sources To Get Your Web Design Inspiration
4. 21 Sites Where To Find Free WordPress Themes Daily

Go to Source

Details : 2 columns, right sidebar, widget ready, 125×125px ad spots ready, Ajax sliding header content, sticky post feature, footer content section.

Find freelance jobs or post freelance projects on GetAFreelancer

Want to advertise here ? Contact us

Related posts

You might also like these similar articles:

1. Versatility Lite – Free WordPress Theme
2. ZinePress – Free WordPress Theme
3. SohoMag – Free WordPress Theme
4. Deskspace – Free WordPress Theme
5. Dark Forest – Free WordPress theme

Go to Source