octubre 16, 2009

Impresario OneWe Love WP – The Best WordPress Gallery

(author unknown)

octubre 16, 2009

MulletizedWe Love WP – The Best WordPress Gallery

(author unknown)

octubre 16, 2009

Reduce tu Huella

Rundes

octubre 5, 2009

Mastering CSS Coding: Getting Started

astering CSS Coding: Getting Started (via @smashingmag) -

CSS has become the standard for building websites in today’s industry. Whether you are a hardcore developer or designer, you should be familiar with it. CSS is the bridge between programming and design, and any Web professional must have some general knowledge of it. If you are getting your feet wet with CSS, this is the perfect time to fire up your favorite text editor and follow along in this tutorial as we cover the most common and practical uses of CSS.

Overview: What We Will Cover Today

We’ll start with what you could call the fundamental properties and capabilities of CSS, ones that we commonly use to build CSS-based websites:

Once you are comfortable with the basics, we will kick it up a notch with some neat tricks to build your CSS website from scratch and make some enhancements to it.

1. Padding vs. Margin

Most beginners get padding and margins mixed up and use them incorrectly. Practices such as using the height to create padding or margins also lead to bugs and inconsistencies. Understanding padding and margins is fundamental to using CSS.

What Is Padding and Margin?

Padding is the inner space of an element, and margin is the outer space of an element.

The difference becomes clear once you apply backgrounds and borders to an element. Unlike padding, margins are not covered by either the background or border because they are the space outside of the actual element.

Take a look at the visual below:

Box Model

Padding/Margin Values
Margin and padding values are set clockwise, starting from the top.

Practical example: Here is an <h2> heading between two paragraphs. As you can see, the margin creates white space between the paragraphs, and the padding (where you see the background gray color) gives it some breathing room.

Box Model - Example

Margin and Padding Values

In the above example of the heading, the values for the margin and padding would be:

margin: 15px 0 15px 0;
padding: 15px 15px 15px 15px;

To optimize this line of code further, we use an optimization technique called “shorthand,” which cuts down on repetitive code. Applying the shorthand technique would slim the code down to this:

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

Here is what the complete CSS would look like for this heading:

h2 {
background: #f0f0f0;
border: 1px solid #ddd;
margin: 15px 0;
padding: 15px;
}

Quick Tip

Keep in mind that padding adds to the total width of your element. For example, if you had specified that the element should be 100 pixels wide, and you had a left and right padding of 10 pixels, then you would end up with 120 pixels in total.

100px (content) + 10px (left padding) + 10px (right padding) = 120px (total width of element)

Margin, however, expands the box model but does not directly affect the element itself. This tip is especially handy when lining up columns in a layout!

Additional resources:

2. Floats

Floats are a fundamental element in building CSS-based websites and can be used to align images and build layouts and columns. If you recall how to align elements left and right in HTML, floating works in a similar way.

According to HTML Dog, the float property “specifies whether a fixed-width box should float, shifting it to the right or left, with surrounding content flowing around it.”

Float

The float: left value aligns elements to the left and can also be used as a solid container to create layouts and columns. Let’s look at a practical situation in which you can use float: left.

Float to Create Layouts

The float: right value aligns elements to the right, with surrounding elements flowing to the left.

Quick tip: Because block elements typically span 100% of their parent container’s width, floating an element to the right knocks it down to the next line. This also applies to plain text that runs next to it because the floated element cannot squeeze in the same line.

Floating right bug

You can correct this issue in one of two ways:

Reverse the order of the HTML markup so that you call the floated element first, and the neighboring element second.
Specify an exact width for the neighboring element so that when the two elements sit side by side, their combined width is less than or equal to the width of their parent container.

Internet Explorer 6 (IE6) has been known to double a floated element’s margin. So, what you originally specified as a 5-pixel margin becomes 10 pixels in IE6.

Double Margin Bug - IE6

A simple trick to get around this bug is to add display: inline to your floated element, like so:

.floated_element {
float: left;
width: 200px;
margin: 5px;
display: inline; /*--IE6 workaround--*/
}

Additional resources:

3. Center Alignment

The days of using the <center> HTML tag are long gone. Let’s look at the various ways of center-aligning an element.

Horizontal Alignment

You can horizontally align text elements using the text-align property. This is quite simple to do, but keep in mind when center-aligning inline elements that you must add display: block. This allows the browser to determine the boundaries on which to base its alignment of your element.

.center {
text-align: center;
display: block; /*--For inline elements only--*/
}

To horizontally align non-textual elements, use the margin property.

The W3C says, “If both margin-left and margin-right are auto, their used values are equal. This horizontally centers the element with respect to the edges of the containing block.”

Horizontal alignment can be achieved, then, by setting the left and right margins to auto. This is an ideal method of horizontally aligning non-text-based elements; for example, layouts and images. But when center-aligning a layout or element without a specified width, you must specify a width in order for this to work.

To center-align a layout:

.layout_container {
margin: 0 auto;
width: 960px;
}

To center-align an image:

img.center {
margin: 0 auto;
display: block; /*--Since IMG is an inline element--*/
}

Vertical Alignment

You can vertically align text-based elements using the line-height property, which specifies the amount of vertical space between lines of text. This is ideal for vertically aligning headings and other text-based elements. Simply match the line-height with the height of the element.

Line-height

h1 {
font-size: 3em;
height: 100px;
line-height: 100px;
}

To vertically align non-textual elements, use absolute positioning.

The trick with this technique is that you must specify the exact height and width of the centered element.

With the position: absolute property, an element is positioned according to its base position (0,0: the top-left corner). In the image below, the red point indicates the 0,0 base of the element, before a negative margin is applied.

By applying negative top and left margins, we can now perfectly align this element both vertically and horizontally.

Absolute Position

Here is the complete CSS for horizontal and vertical alignment:

.vertical {
width: 600px; /*--Specify Width--*/
height: 300px; /*--Specify Height--*/
position: absolute; /*--Set positioning to absolute--*/
top: 50%; /*--Set top coordinate to 50%--*/
left: 50%; /*--Set left coordinate to 50%--*/
margin: -150px 0 0 -300px; /*--Set negative top/left margin--*/
}

4. Ordered vs. Unordered Lists

An ordered list, <ol>, is a list whose items are marked with numbers.

An unordered list, <ul>, is a list whose items are marked with bullets.

By default, both of these list item styles are plain and simple. But with the help of CSS, you can easily customize them.

To keep the code semantic, lists should be used only for content that is itemized in a list-like fashion. But they can be extended to create multiple columns and navigation menus.

Customizing Unordered Lists

Plain bullets are dull and may not draw enough attention to the content they accompany. You can fix this with a simple yet effective technique: remove the default bullets and apply a background image to each list item.

Here is the CSS for custom bullets:

ul.product_checklist {
list-style: none; /*--Takes out the default bullets--*/
margin: 0;
padding: 0;
}
ul.product_checklist li {
padding: 5px 5px 5px 25px; /*--Adds padding around each item--*/
margin: 0;
background: url(icon_checklist.gif) no-repeat left center; /*--Adds a bullet icon as a background image--*/
}

Custom List Items

Resources for list items:

Using Unordered Lists for Navigation

Most CSS-based navigation menus are now built as lists. Here is a breakdown of how to turn an ordinary list into a horizontal navigation menu.

HTML: begin with a simple unordered list, with links for each list item.

<ul id="topnav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

CSS: we remove the default bullets (as we did when we made custom bullets) by specifying list-style: none. Then, we float each list item to the left so that the navigation menu appears horizontal, flowing from left to right.

ul#topnav {
list-style: none;
float: left;
width: 960px;
margin: 0; padding: 0;
background: #f0f0f0;
border: 1px solid #ddd;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #ddd;
}
ul#topnav li a {
float: left;
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
ul#topnav li a:hover {
background: #fff;
}

Additional resources:

5. Styling Headings

The heading HTML tag is important for SEO. But regular headings can look dull. Why not spice them up with CSS and enjoy the best of both worlds?

Once you have the main styling properties set for your headings, you can now nest inline elements to target specific text for extra styling.

Styling Headings

Your HTML would look like this:

<h1><span>CSS</span> Back to Basics <small>Tips, Tricks, &amp; Practical Uses of CSS</small></h1>

And your CSS would look like this:

h1 {
font: normal 5.2em Georgia, "Times New Roman", Times, serif;
margin: 0 0 20px;
padding: 10px 0;
font-weight: normal;
text-align: center;
text-shadow: 1px 1px 1px #ccc; /*--Not supported by IE--*/
}
h1 span {
color: #cc0000;
font-weight: bold;

}
h1 small {
font-size: 0.35em;
text-transform: uppercase;
color: #999;
font-family: Arial, Helvetica, sans-serif;
text-shadow: none;
display: block; /*--Keeps the small tag on its own line--*/
}

Additional typography-related resources:

6. Overflow

The overflow property can be used in various ways and is one of the most useful properties in the CSS arsenal.

What Is Overflow?

According to W3Schools.com, “the overflow property specifies what happens if content overflows an element’s box.”

Take a look at the following examples to see how this works.

Visually, overflow: auto looks like an iframe but is much more useful and SEO-friendly. It automatically adds a scroll bar (horizontal, vertical or both) when the content within an element exceeds the element’s box or boundary.

The overflow: scroll property works the same but forces a scroll bar to appear regardless of whether or not the content exceeds the element’s boundary.

And the overflow: hidden property masks or hides an element’s content if it exceeds the element’s boundary.

Quick tip: have you ever had a parent element that did not fully wrap around its child element? You can fix this by making the parent container a floated element.

In some cases, though, floating left or right is not a workable solution — for example, if you want to center-align the container or do not want to specify an exact width. In this case, use overflow: hidden on your parent container to completely wrap any floated child elements within it.

Additional resources:

7. Position

Positioning (relative, absolute and fixed) is one of the most powerful properties in CSS. It allows you to position an element using exact coordinates, giving you the freedom and creativity to design out of the box.

You have to do three basic things when using positioning:

Set the coordinates (i.e. define the positioning of the x and y coordinates).
Choose the right value for the situation: relative, absolute, fixed or static.
Set a value for the z-index property: to layer elements (optional).

With position: relative, an element is placed in its natural position. For example, if a relatively positioned element sits to the left of an image, setting the top and left coordinates to 10px would move the element just 10 pixels from the top and 10 pixels from the left of that exact spot.

Relative positioning is also commonly used to define the new point of origin (the x and y coordinates) of absolutely positioned nested elements. By default, the base position of every element is the top-left corner (0,0) of the browser’s view port. When you give an element relative positioning, then the base position of any child elements with absolute positioning will be positioned relative to their parent element — i.e. 0,0 is now the top-left corner of the parent element, not the browser’s view port.

Relative Position

An element with a value of position: absolute can be placed anywhere using x and y coordinates. By default, its base position (0,0) is the top-left corner of the browser’s view port. It ignores all natural flow rules and is not affected by surrounding elements.

The base position of an element with a position: fixed value is also the top-left corner of the browser’s view port. The difference with fixed positioning is that the element will be fixed to its location and remain in view even when the user scrolls up or down.

The z-index property specifies the stack order of an element. The higher the value, the higher the element will appear.

Think of z-index stacking as layering. Check out the image below for an example:

z-index

Additional resources:

Adding Flavor With CSS

Now that you understand the basics, step up your game by adding a bit of flavor to your CSS. Below are some common techniques for enhancing and polishing your layout and images. We’ll also challenge you to create your own website from scratch using pure CSS.

9. Background Images

Background images come in handy for many visual effects. Whether you add a repeating background image to cover a large area or add stylish icons to your navigation, the property makes your page come to life.

Note, though, that the default print setting excludes the background property. When creating printable pages, be mindful of which elements have background images and include image tags.

Using Large Backgrounds

With monitor sizes getting bigger and bigger, large background images for websites have become quite popular.

Check out this detailed tutorial by Nick La of WebDesigner Wall on how to achieve this effect:

Also be sure to read the article on Webdesigner Depot about the “Do’s and Don’ts of Large Website Backgrounds.”

Text Replacement

You may be aware that not all standard browsers yet support custom fonts embedded on a website. But you can replace text with an image in various ways. One rather simple technique is to use the text-indent property.

Most commonly seen with headings, this technique replaces structured HTML text with an image.

h1 {
background: url(home_h1.gif) no-repeat;
text-indent: -99999px;
}

You may sometimes need to specify a width and height (as well as display: block if the element is inline).

.replacethis {
background: url(home_h1.gif) no-repeat;
text-indent: -99999px;
width: 100%;
height: 60px;
display: block; /*--Needed only for inline elements--*/
}

Articles on text replacement:

CSS Sprites

CSS Sprites is a technique in which you use background positioning to show only a small area of a larger single background image (the larger image being actually multiple images laid out in a grid and merged into one file).

CSS Sprites are commonly used with icons and the hover and active states of images that have replaced links and navigation items.

Why use CSS Sprites? CSS Sprites save loading time and cut down on CSS and and HTTP requests. To learn more about CSS Sprites, check out the resources below!

Articles on CSS Sprites:

10. Image Enhancement

You can style images with CSS in various ways, and some designers have made a lot of effort to create very stylish image templates.

One simple trick is the double-border technique, which does not require any additional images and is pure CSS.

Double Border Technique

Your HTML would look like this:

<img class="double_border" src="sample.jpg" alt="" />

And your CSS would look like this:

img.double_border {
border: 1px solid #bbb;
padding: 5px; /*Inner border size*/
background: #ddd; /*Inner border color*/
}

Nick La of WebDesigner Wall has a great tutorial on clever tricks to enhance your images. Do check it out!

11. PSD to HTML

Now that you have learned the fundamentals of CSS, it’s time to test your skill and build your own website from scratch! Below are some hand-picked tutorials from the best of the Web.

Conclusion

Developing a strong foundation early on is critical to mastering CSS. Given how fast Web technology advances, there is no better time than now to get up to speed on the latest standards and trends.

Hopefully, the techniques we’ve covered here will give you a head start on becoming the ultimate CSS ninja. Good luck, stay hungry and keep learning!

(al)

Post tags: CSS

Walter

septiembre 17, 2009

300+ Resources to Help You Become a WordPress Expert

WordPress is one of the most popular blogging platforms available today. And for good reason.

It’s powerful enough to be a complete CMS, has every feature or function a blogger could dream of (either built in or available via plugins or custom functions), and it’s free and open source.

While WordPress is incredibly powerful and easy to use on its most basic levels, it can also get pretty complicated, pretty quickly.

Below are more than 300 resources to help you master WordPress no matter what your skill level is.

Everything from premium and free themes to plugins to WP hacks and everything in between is included. If it’s possible with WordPress, it’s likely you’ll find it below.

Theme Roundups, Theme Templates, and Theme Frameworks

WP can have an almost infinite variety of designs applied to it. Themes can be as simple or complicated as you want. Below are a wide variety of theme roundups, theme frameworks for building your own themes, and premium theme sites with customizable or out-of-the-box themes. Be sure to check out the tutorial section next for resources for building your own themes.

WordPress PSD Framework – A free PSD template that includes all the common elements in a WP design for you to build on.

WordPress Theme Generator – An online theme generator that doesn’t require any coding knowledge.

Easier Theme Development with Sample WordPress Content – A downloadable bundle of sample WP content that includes posts, tags, categories, and pages to make theme development easier.

Blank WordPress Themes Ready for 2.7 Up for Grabs – Offers up a couple of free, empty themes you can download.

Blank WordPress Themes – A collection of two- and three-column blank themes from Refueled.

Thematic – One of the most advanced theme frameworks available.

Carrington – A free WP CMS theme framework that includes two browser versions and a mobile version.

Free HTML 5 WordPress Theme – A free theme template that takes advantage of HTML 5 features and functions.

The Buffet Framework – A theme framework aimed to be easy-to-use for both developers and end users.

Thesis Theme for WordPress – Another basic theme framework.

OnePress Community – A WP and bb Press theme framework.

Whiteboard – A basic framework for WP theme development.

WP Framework – A blank theme framework with minimal formatting.

WordPress Theme Frameworks—A Comprehensive Overview – A great rundown of what theme frameworks are and why they’re useful.

WordPress Theme Development Frameworks – An in-depth review of some of the most popular WP theme frameworks.

WP Contact Manager – A theme that basically transforms your WP installation into a full-featured contact manager.

41 Great Looking Free WordPress Themes – A roundup of beautiful free themes.

16 Free Premium WordPress Themes That Don’t Suck – An awesome roundup of free premium-style themes.

11 Tips for Speeding Up WordPress Theme Development – A great list of ways to speed up your theme development process.

13 Helpful Cheat Sheets for Building WordPress Themes – A great roundup of cheat sheets helpful to WP theme designers.

140+ Brilliant Free WordPress Themes Around – A roundup of some excellent free WP themes.

10 of the Best WordPress 2.7 Compatible Themes – An overview of ten excellent WP themes compiled by Mashable.

10+ Best WordPress Themes for March 2009 – An awesome collection of newish themes from WP DesignBlog.

17 Free and Best WordPress Themes – A small roundup of excellent WP themes.

3-Column WordPress Theme Gallery – Includes a large number of excellent 3-column themes.

45+ Free Premium WordPress Themes with Magazine or Grid Layouts – An excellent roundup of free magazine-style and grid themes.

15 Fresh WordPress Themes to Get the Coolest Portfolio for You or Your Studio – A collection of portfolio-styled WP themes.

Best WordPress Themes Collection – A roundup of excellent paid WP themes.

10 Best Free WordPress Themes You Haven’t Seen – A great collection of seldom-seen WP themes.

30 Free Magazine/Grid Style WordPress Themes – A compilation of 30 excellent magazine and grid style WP themes.

100 Excellent Free WordPress Themes – An excellent roundup of high-quality themes from Smashing Magazine.

40 Stylish, Minimal and Clean Free WordPress Themes – A roundup of minimalist themes from Speckyboy Design Magazine.

WordPress.org – The official theme repository from WordPress, with nearly 1,000 free themes available.

WordPressThemesBase.com – A categorized theme directory that you can browse by category, design properties (columns, sidebars, etc.) or tag.

Top WP Themes – A directory of free themes, many with a corporate or professional look.

Themes2WP.com – A categorized directory with more than a thousand themes.

WPthemespot.com – A theme aggregator with beautiful themes featured from all over the web.

WooThemes – Offers paid themes in a club format, though you can also purchase individual themes.

Obox Theme Shop – A premium theme site with some really awesome themes available with single-site licenses or developer licenses.

StudioPress – Premium WP theme site that lets you download themes individually or as a package.

NattyWP – Another club-based premium themes site.

Blurbia – A premium themes site that also offers one free theme.

Elegant Themes – Another great premium themes site that allows unlimited access for less than $20.

WP Remix – A premium WP CMS theme with more than 50 page templates available.

10 Premium WordPress Themes Released in April 2009 – A roundup of recently released premium themes.

Gorilla Themes – A premium themes site with ten themes available.

Press75 – Another premium themes site that lets you buy themes individually or as a bundle.

Theme Layouts WordPress Themes – The WP category from ThemeLayouts has hundreds of themes available, free for members to download.

100 Amazing Free WordPress Themes for 2009 – An awesome roundup of beautiful themes compiled by Smashing Magazine.

Cream of the Crop: Six Cutting-Edge, Minimalist WordPress Themes – An article from Skelliewag of beautiful, minimal themes.

Graph Paper Press – A club-based WP themes gallery that also offers some free theme downloads.

10 Minimalist WordPress Themes You’ll Love – A collection of ten minimalist themes, some of which aren’t commonly seen.

25 Simple and Minimal WordPress Themes – A great roundup of minimalist themes from ReviewPk.

60 Great WordPress Themes – An excellent, recent roundup of gorgeous WP themes.

25 Best Free WordPress Themes – An absolutely amazing roundup compiled by EliteFreelancing.com of gorgeous WP themes.

14 Most Visually Appealing Free WordPress Themes – A small collection of beautiful and elegant themes.

15 Magazine WordPress Themes You Can Use for Free – Another roundup of excellent magazine themes.

83 Beautiful WordPress Themes You (Probably) Haven’t Seen Yet – While this post is a couple of years old and you probably have seen many of the themes on it, it’s still a great roundup of gorgeous designs.

21 Mindblowing Premium-Like Free WordPress Themes – A collection of unique themes that often defy the conventions of what we normally think of as a “blog design.”

20 More Free First-Class WordPress Themes – An excellent roundup of beautiful themes, many of which aren’t widely seen yet.

85 Best Beautiful Free WordPress Themes – An excellent roundup from [Re]Encoded.com of stunning WP themes.

23 of the Best Grunge-Style WordPress Themes – A collection of excellent grunge-style themes, many of which aren’t commonly seen.

13 Best Grunge WordPress Themes Online – A great roundup from CSSAddict of beautiful grunge themes.

20 Free 3 Column WP Themes – A great roundup of gorgeous 3-column themes.

45+ Must See WordPress Themes – A categorized roundup of themes compiled by Noupe.

15 Free Stunning and Unique WordPress Themes – A roundup of mostly clean and professional-looking themes.

WordPress Rainbow: 35 Colorful Free WordPress Themes – A great roundup of bright and colorful free themes.

22 Free and Unique WordPress Themes – A recent roundup of themes not seen very often.

Great Green WordPress Themes – A wonderful collection of WP themes with a green color scheme.

25 Free WordPress Themes (2009 Edition) – A roundup of some really beautiful and different themes.

25 Artistic Themes for WordPress – A great roundup of artsy WP themes.

21 Premium-Like Free Photoblog Themes for WordPress – Photoblogs have specific needs not often addressed in standard WP themes. Here are 21 themes specifically built for photoblogs.

15 Portfolio Themes for WordPress – A great roundup of themes perfect for portfolio sites.

65+ Free Exceptional WordPress Themes Worth Investigating – A great roundup of gorgeous themes compiled by Tripwire Magazine.

8 Fresh WordPress Themes – An older post that offers up some great theme designs.

50 Beautiful Free WordPress Themes – A roundup of stunning WP themes.

Tutorials and Tips

The tutorials featured below cover everything from basic WP installation and setup to more complicated topics like theme development, plugin development and advanced WP features and functions.

My WordPress Install Process – A guide from Blogging Pro for installing WP.

You’ve Installed WordPress, So What’s Next? – A great overview of steps you should take after you’ve installed WP.

The Ultimate Guide to Setting Up WordPress after an Install – A complete guide to what to do once you’ve installed WP, from Pro Blog Design.

Dissection of a WordPress Theme: Part 1 – A really in-depth overview of how WP themes are constructed.

How to Create a WordPress Theme: The Ultimate WordPress Theme Tutorial – An extremely in-depth tutorial for creating themes from ThemeShaper.

The WordPress Developer Toolkit – This tutorial and tool roundup from iThemes gives a great overview of what you need to have and learn to develop great WP sites.

How to Edit WordPress Themes Using Dreamweaver – A great guide to theme editing with Dreamweaver.

WordPress as a CMS – A 27-minute video tutorial for using WP as a content management system.

How to Create a WordPress Theme from Scratch – A great tutorial for building a WP theme from the ground up.

Create An Awesome WordPress Theme Options Page (Part 1) – A tutorial for creating a theme options panel in the backend of WP.

WordPress Loop: Get Posts Published Between Two Particular Dates – A great guide to retrieving and displaying posts published during a specific time frame.

Leopard: How to Install WordPress – A tutorial for creating a local installation of WP on Mac OS X Leopard.

Premium WordPress Theme Design Part 1—The Photoshop Mock Up – The first in a series of tutorials for creating a premium-style WP theme.

The Power of WordPress Custom Fields – A great overview for working with custom fields.

Customize Your WordPress Login – Learn how to customize the look of your WP login screen.

Things You Should Know When Using Post Excerpt – An overview of things to keep in mind when using the post excerpt function in WP.

WordPress Custom Fields; Laying Text Over Your Lead Graphic – A tutorial that shows you how to add a text overlay to your graphics.

5 Useful WordPress Functions You Didn’t Know Existed – A rundown of five great WP functions most people have never heard of.

Power Tips for WordPress Template Developers – An excellent resource from Smashing Magazine of advanced techniques useful to template and theme developers.

How to: Make a Control Panel for Your WordPress Theme – A tutorial for creating a customization menu in the backend. for your WP theme.

WordPress Ajax Commenting Revisited – A tutorial for creating your own ajax comment system.

WordPress Screencast Tutorial—Photo Captions – A video tutorial for adding captions to your photos.

How To: Adding an Author Page to Your WordPress Blog – A fantastic tutorial for creating an “about the author” page on your blog.

Turning a Web Template into a WordPress Theme: A Video Tutorial – A video tutorial for turning virtually any website template into a WP theme.

Styling Your WordPress Comments – Learn to style your comments to better complement your site’s design.

Displaying Author Meta Information in WordPress 2.8 – An excellent tutorial for displaying the meta information included about authors within the front-end of your WP site.

So You Want to Create WordPress Themes, Huh? – This is one of the most comprehensive and in-depth theme development tutorials out there, broken down into more than 16 parts.

The Ultimate Guide to the WordPress Loop – A must-have resource for anyone who wants to develop WP themes or just have a better understanding of how WP works.

Mastering Your WordPress Theme Hacks and Techniques – A great collection of hacks and customization from Noupe.

How to Use Thumbnails Generated by WordPress in Your Theme – A guide to working with WP-generated thumbnail images.

How to Write Your Own WordPress Theme – A complete tutorial for WP theme development.

Tutorial: Creating Custom Write Panels in WordPress – A tutorial for adding unique data to your posts using custom write fields in the backend.

Display Thumbnails for Related Posts in WordPress – A tutorial for displaying the WP-generated thumbnail images for your posts in a related posts list.

How to Set Up Pretty Permalinks in WordPress – A guide to creating pretty permalinks from ThemeLab.

Multiple WordPress Page Layouts in One Single Template – A tutorial that shows you how to create more than one page layout without having to resort to separate templates.

Build a Newspaper Theme with WP_Query and the 960 CSS Framework – A complete tutorial for building a news-style theme.

How-To: Create a WordPress Theme in 5 Minutes – A tutorial that shows how to set up a basic WP theme. It also includes all the code you’ll need.

The Ultimate WordPress 2.8 Optimization Guide – A complete guide for setting up and optimizing your WP 2.8 installation.

WordPress as a CMS: How to Think About Building a Website with WordPress – A great overview and tutorial for setting WP up as a CMS.

WordPress: How to Get Custom Fields Outside the Loop – A tutorial for creating custom fields that reside outside the WP Loop.

WordPress Tutorial: Blog Posts in Different Columns – A tutorial that shows how to make blog posts appear in more than one column on your site.

Multiple WordPress Loops Explained – A great tutorial to get you started with multiple loops.

DiggProof Your WordPress – A complete guide to making your site stand up to traffic spikes, like those caused by making the front page of Digg.

Displaying Code in WordPress Posts – A brief overview of the methods available for displaying code snippets within your posts.

WordPress Tutorial: Category Trick for WP 2.7 – A tutorial for applying different styles to specific categories.

How to Make a Random Post Button – A tutorial for creating a button to take visitors to a random post on your blog.

10 Things to Do After Installing WordPress – A list of 10 must-do steps to take after installing a fresh copy of WordPress.

10 Impressive Techniques to Spice Up Your WordPress Theme – A great roundup of style improvements you can add to your WP theme.

20+ Tutorials and Resources for Working with Custom Fields in WordPress – An excellent collection of tutorials for dealing with custom fields.

Top 50 WordPress Tutorials – A roundup of fifty great WP tutorials compiled by Nettuts+ and covering virtually every aspect of WP development.

135+ Ultimate Round-Up of WordPress Tutorials – A categorized roundup of tutorials compiled by instantShift.

30 Tutorials Combining Both WordPress and jQuery – A great roundup of jQuery/WP combo tutorials from Speckyboy Design Magazine.

40+ Awesome Tutorials and Techniques for WordPress Theme Developers – A tutorial list specifically aimed at theme development put together by tripwire magazine.

60+ Awesome WordPress Tutorials – A great collection of tutorials that will lead you right from installation through advanced WP development.

30 Excellent WordPress Video Tutorials – A collection of video tutorials for everything from theme development to creating plugins to administration tasks.

110+ Massive WordPress Video Tutorial Collection – A roundup of more than 110 video tutorials for everything from installing WP to using it to developing for it.

Top 10 Tutorials for Developing WordPress Themes – A compilation of ten of the best theme development tutorials out there.

23+ Excellent Tutorials for WordPress Theme Developers – A great roundup of theme development tutorials from Web Developer Plus.

63 Essential WordPress Hacks, Tutorials, Help Files and Cheats – A great roundup of WP resources.

Getting Past First Base…Using WordPress as a CMS – A recent guide from Foraker Design to using WP as a CMS.

How to Speed Up Your WordPress Blog – An excellent resource for making your WP site run faster.

HOW TO: Create a jQuery Carousel with WordPress Posts – An excellent tutorial for creating a carousel to display WP posts from a specific category.

Customize WordPress Theme to Match an Existing Website: A Step-by-Step Blog Integration Tutorial – Create a WP theme that matches an existing website design for seamless integration.

How to Only Show Posts With a Specific Custom Field – A quick tutorial for showing posts with content in a specific custom field.

Create a Plugin With Its Own Custom Database Table – A tutorial for coding plugins that need to have their own custom db table.

How to Add Sidebars to a Theme – A very basic tutorial for theme developers.

Post Image the Easy Peasy Way – A quick tutorial for creating a function that automatically displays images with your posts.

How to Add an Announcement Box to Your WordPress Theme – A complete tutorial for creating a news or announcement box that can be switched on and off from the dashboard.

Create Your Own Private Twitter Site Using WordPress – A quick tutorial for creating a private, Twitter-like network using WordPress.

How to Add Pagination Into a List of Records or WordPress Plugin – A very thorough tutorial for adding pagination to records generated by a WP plugin.

Creating Widgets in WordPress 2.8 with the Widget API – A great overview and tutorial for working with the new widget API included in WP 2.8.

Use WordPress as a PHP Framework for Your Static HTML Pages – A very interesting tutorial on how to use WP as a PHP framework.

Tutorial: Multiple single.php Templates in WordPress – A guide to using more than one single.php file in WP.

How to Create a Beautiful Dropdown Blogroll without JavaScript – A complete tutorial for creating dropdown menus using just plain HTML.

Custom Header Images for WordPress Pages – A tutorial for using custom header images on different pages using custom fields.

How to Display Recent Comments Without Using a Plugin or Widget – An excellent tutorial for adding recent comments to your theme using the functions.php file and some code right within your theme files.

Display a Random Post (with AJAX Refresh) – A complete tutorial for creating a random post display using jQuery.

Get More Traffic: An SEO Guide for WordPress – Thorough coverage of changes to make to improve your blog’s SEO.

How to Design and Style Your WordPress Plugin Admin Panel – A complete tutorial for styling the admin panel for your WP plugins.

Wicked WordPress Archives in One Easy Step! – A complete tutorial for creating stylish WP archives.

Make a Mobile Friendly Version of Your Blog with Google Reader – An awesome method of making a blog better-formatted for viewing on mobile devices by using Google Reader.

Designing for WordPress: Complete Series and Downloads – A complete video tutorial series from Chris Coyier for designing WP themes.

100+ WordPress Video Tutorials, from Basic to Advance – An awesome roundup of video tutorials for virtually every aspect of working with WP.

Complete WordPress Theme Guide – A three-part tutorial series from Web Designer Wall for creating WP themes.

Import and Export WordPress Data – A video tutorial that shows you how to import your data from other blogging platforms (including TypePad and Blogger) and how to export your data for installing on another version of WP.

Create a Tabbed Featured Posts Area in WordPress – A tutorial for creating a tabbed area for displaying multiple featured posts.

A Crash-Course in WordPress Plugin Development – A video tutorial for creating your first WP plugin.

List of WordPress Thesis Theme Tutorials – A collection of tutorials for working with the Thesis parent theme.

Tutorial: Add a Background to Your WordPress Theme – A very basic tutorial for adding a different background image to a standard WP theme.

26 Complete WordPress Blog Design Tutorials – A roundup of 26 tutorials for creating specific WP designs from scratch.

Installing WordPress on Tiger – A great tutorial for installing a local copy of WordPress on Mac OS X 10.4 Tiger.

Integrating BuddyPress, WordPress MU, and bbPress – A great guide if you want to build a complete social networking site.

12 Great Tutorials on Creating a New WordPress Theme – An awesome roundup of theme development tutorials compiled by [Re]Encoded.com.

5 Useful and Creative Ways to Use WordPress Widgets – A great guide to using WP widgets.

How to Easily Customize the WordPress Image Caption – A tutorial for customizing the appearance of the built-in WP image caption text.

10 Steps to a Client Friendly WordPress CMS – A guide to making WP more end-user-friendly as a CMS.

An Elegant Featured Content Slider for WordPress – A tutorial for creating a slider to display your recent posts.

WordPress Theme Guide – A complete guide to building WP themes from Urban Giraffe.

Mastering WordPress Shortcodes – A great guide for learning all about WP shortcodes.

Plugins

Plugins extend the functionality of a standard WP installation. There are thousands of plugins on the WordPress site but finding the best among them can be incredibly time-consuming. The plugins featured here have already been vetted by other bloggers, making it easier to find not only the plugins that do what you want, but those that do it well.

BuddyPress – A plugin that adds a social networking platform to WordPress MU.

bbPress – A forum system meant to integrate with WP, created by the makers of WP.

WordPress Plugins and Tutorials – A great roundup of categorized plugins, with a few articles and tutorials included at the end.

Top 10 Characteristics of a Great WordPress Plugin – An excellent guide that should be referred to by anyone developing, or even just using, WP plugins.

12 WordPress Plugins for Theme Development – A great list of plugins essential for theme developers.

Top 35 Plugins of WordPress to Share Your Blog Post – A great roundup of plugins that make it easier for your visitors to share your blog’s content.

3 WordPress Plugins to Manage 125×125 Ads – 125-pixel-square ads are a very popular size; here are three plugins to help you manage them.

55 Best WordPress Plugins – A roundup from About.com of the plugins every WP user should consider.

Top WordPress Plugins – A compilation from TheBlogJoint.com of the best WP plugins available.

10 Best WordPress Plugins—March 2009 – A recent post covering ten of the best WP plugins, including ThickBox and Lexi.

20 Best WordPress Plugins—April 2009 – Another great roundup from AjaxLine of recent WP plugins, including AnyFont and Twitter Widget Pro.

13 of the Best WordPress Plugins – A list compiled by David Airey of the best WP plugins, including All in One SEO Pack and cforms II.

6 Best Facebook WordPress Plugins – A collection of six plugins for integrating your WordPress blog and your Facebook profile or page.

20 of the Best SEO Plugins for WordPress – A collection of great plugins to improve your SEO, compiled by Mashable.

30+ Must Have WordPress Plugins – Another roundup of essential WP plugins.

Best WordPress Plugin for Related Posts? – A review of some of the available related posts plugins and the author’s verdict on which one is best.

50 Best WordPress Plugins for Power Blogging – A compilation of some of the best plugins available for WP power users.

5 of the Best WordPress Plugins – A fairly in-depth look at five great WP plugins.

Top WordPress Plugins – A roundup of great plugins, broken down by category and including Advanced Admin Menu and In Series.

11 Top WordPress Plugins Every Blog Should Have – A list from Yoast of what they consider to be the essential WP plugins.

Top 8 WordPress Plugins Used by SEO.com – A list of 8 of SEO.com’s preferred WP plugins.

70 Best WordPress Plugins to Supercharge Your Blog – A comprehensive list of awesome plugins, including Broken Link Checker and Comment Timeout.

The Best WordPress Plugins – A short review of some of the best WP plugins out there.

9 Best WordPress Plugins – A list of great plugins, including WP Smushit and WP Syntax.

Best WordPress Plugins—18 Most Downloaded WordPress Plugins Ever – A listing of the most popular WP plugins, including NextGEN Gallery and WP Super Cache.

5 Best WordPress Plugins to Shorten URLs – A collection of WP plugins for shortening your URLs.

Best WordPress Plugins – This post compiles the best WP plugins broken down by category.

WP Tutorial: Your First WP Plugin – A tutorial for creating your own WP plugins.

10 WordPress Plugins Guaranteed to Save You Time – This is a great collection of plugins compiled by Six Revisions to make you a more efficient blogger.

How to Write a Simple WordPress Plugin – A great tutorial to acquaint you with building WP plugins.

40 Exceptional “CMS Enabling” WordPress Plugins – Includes forty plugins to turn WP into a full-featured content management system.

Contact Form Plugins for WordPress – An overview of some of the contact form plugins available for WP.

The TTFTitles WordPress Plugin – A plugin to let you swap out your post titles with dynamically-created images.

TDO Mini Forms – This is one of the coolest plugins for WP out there. It allows non-registered users and/or subscribers to your site to submit their own content (which is kept in draft form until an administrator approves it). It even works with Akismet to help prevent spam posts.

30+ Plugins for WordPress Comments – A great roundup of comments-related plugins compiled by Mashable.

21 of the Best WordPress Plugins for New Blogs – A collection of plugins focused mostly on front-end features and basic end-user management.

Top 5 WordPress Plugins that Help Increase Comments – A small roundup of plugins designed to get more visitors to comment.

Top 30 WordPress Plugins That Are Actually Useful! – An awesome roundup from Speckyboy Design Magazine of incredibly useful plugins, including FireStats and WASABI Related Post.

19 Top WordPress Plugins – A great roundup of popular and useful WP plugins, including DISQUS Comment System and Popularity Contest.

Top 10 WordPress Hidden Gems (Plugins) – An awesome roundup of often-overlooked plugins that do really amazing things, including Front-End Editor and Feed Styler.

10 of the Best WordPress Contact Form Plugins to Choose From – A roundup of some of the best contact plugins available.

Top 11 Comment Plugins to Make Your WordPress Blog More User Friendly – An awesome roundup of comments-related plugins, including the Top Commentators Widget and CommentLuv.

Top 10 WordPress Gallery Plugins – Ten great plugins for creating and managing image galleries.

10 Best Photo and Image WordPress Plugins – A roundup of excellent plugins for handling images, including Shutter Reloaded and SEO Friendly Images.

Plugins That Make WordPress Into a Company Intranet – Coverage of plugins that make it possible to use WP as a corporate intranet.

20 New, Useful and Promising WordPress Plugins – A roundup of twenty great WP plugins, including WP Greet-Box and Post Ideas.

10 Mistakes You Could Avoid in WordPress Plugin Development – A must-read article for anyone doing plugin development.

16 Excellent WordPress Security Plugins to Secure Your Blog – A great roundup of security-related plugins for WP.

31 Useful Twitter Plugins for WordPress to Choose From – An extensive list of plugins for integrating Twitter and WP.

6 WordPress Plugins That Help Your Blog’s Maintenance – A great roundup of maintenance-related plugins, including Broken Link Checker and WP Anti-Virus.

Tricks, Customizations, and Hacks

The resources featured below involve customizations and hacks you can apply to your WP installation and themes that extend the functionality of WP beyond what plugins and widgets are generally capable of.

13 Vital Tips and Hacks to Protect Your WordPress Admin Area – A compilation of security hacks for WP admin.

Hack Together a User Contributed Link Feed with WordPress Comments – Shows you how to set up a user-generated public link feed by utilizing post comments.

5 Great WordPress Hacks – A small roundup of hacks, including sending pages to Twitter and listing all of the authors on your blog.

Top 10 WordPress Hacks from June ‘09 – A roundup of recent hacks, including listing all hooked WP functions and detecting which browser a visitor is using.

9 WordPress Hacks to Encourage User Interactivity – A great collection of hacks for getting your visitors to interact more, including showing the most recent comments and reversing the order of your comments so the newest ones show up first.

9 Useful Snippets for Your WordPress Functions – A collection of handy snippets you can add to your functions.php file to add functionality to your blog.

WordPress Hack: Opening Links in New Windows – A great hack using JavaScript for forcing links to open in new windows.

10 Tips to Improve Your WordPress Theme – A great rundown of theme customizations that make your site more user-friendly.

10 Most Wanted Category Hacks and Plugins for WordPress – A great rundown of category hacks, including displaying the most recent posts within a specific category and excluding certain categories from being displayed in a loop.

10 Awesome .htaccess Hacks for WordPress – A great collection of .htaccess hacks, including removing/category/ from your WP URLs and how to redirect visitors to a maintenance page.

10 Killer WordPress Hacks – A roundup of great hacks from Smashing Magazine, including displaying AdSense ads only to search engine visitors and replacing the “next” and “previous” page links with pagination.

10 WordPress Tips and Tricks for Your Comment Page – A great roundup of comment tricks, including displaying the total number of comments on your blog and separating comments from trackbacks.

15 Killer Hacks for WordPress That Are Extremely Useful – An excellent roundup of useful hacks including displaying random header images on your blog and listing future “upcoming” posts.

9 Extremely Useful RSS Tricks and Snippets for WordPress – A great selection of tricks and customizations for RSS feeds, including creating RSS-only posts and excluding a category from your RSS feeds.

7 WordPress Customizations – A quick rundown of how to customize your WP installation in multiple ways.

Define Your Own WordPress Loop Using WP_Query – A great hack to creating your own customized WP loop.

10 Useful WordPress Loop Hacks – A roundup from Smashing Magazine of ten excellent WP loop hacks.

13 Tags to Delete From Your Theme – A list of tags that are generally unnecessary in a standard WP theme.

30+ New Useful WordPress Tricks & Hacks – This post from Hong Kiat shows more than thirty new hacks and tricks to customize your WP installation.

40+ Most Wanted WordPress Tricks and Hacks – A roundup of great hacks compiled by Hong Kiat.

WordPress Theme Hacks – A roundup of a number of simple hacks for making better WP themes.

30+ (More) Most Wanted WordPress Tips, Tricks and Hacks – Another roundup from Hong Kiat of great WP customizations.

22 Mixed Quality WordPress Hacks – Despite the title, this is actually a roundup of more than twenty high-quality hacks for customizing your WP blog and making it stand out from the crowd.

10 Easy Ways to Fix Common WordPress Headaches – A great overview of ways to improve the functionality of your WP installation.

Galleries and Inspiration

If you’re looking for inspiration for your next WP-powered site, look no further than the resources below. Included are design roundups, galleries, and instances of uncommon WP usages.

160 Unique WordPress Themes – An awesome roundup of 160 unique WP designs.

11 Non-Traditional Uses of WordPress – A great roundup of some unique WP implementations and the tools used to create them.

WPLuxe – A great WP gallery that also includes a blog with WP news and resources.

45 Beautiful and Creative (WordPress) Designs – A roundup of beautiful WP designs compiled by Six Revisions.

15 Creative WordPress Header Designs – A small roundup of beautiful WP headers.

15 Impressive and Beautiful Uses of WordPress – A collection of 15 sites using WordPress in elegant and innovative ways.

Best WordPress Sites – A gallery of excellent WP-powered sites compiled by N.Design Studio.

60+ Unusual WP Blog Designs – A great roundup post from Noupe of unique WP designs.

30 Untypical WordPress Sites – A great roundup of 30 unique WP sites.

WordPress Showcase – The official WP showcase blog/gallery.

WP Inspiration – An amazing gallery showcasing only WP-powered sites.

CSSBloom – This gallery includes a WP tag with a great collection of unique designs.

CSS Glance – Another gallery with a WP tag that includes hundreds of WP designs.

We Love WP – A great gallery dedicated to beautiful WP designs.

Sites—WP Candy – A WP gallery from the WP Candy blog.

LoopPress – A WP gallery that lets you rate and comment on designs.

WPCube – Another dedicated WP gallery.

Unmatched Style – The WP category on Unmatched Style includes a few dozen WP designs.

Best CSS Gallery – Their WordPress tag includes more than a dozen WP designs.

Gallerific – Another general-purpose gallery that has a WP tag and features some great designs.

Blogs, Articles and Other Resources

This is where you’ll find everything else WP-related that didn’t quite fit into the categories above. There are articles about WP-specific topics, blogs by and for WordPress designers and developers, and cheat sheets and other resources to make your WP development easier and more efficient.

Adii Rockstar – The blog of “WP Rockstar” and theme developer Adii, covering blogging, development, and themes, among other topics.

Brian Gardner – The personal blog of WP theme designer Brian Gardener.

WordPress Tavern – A blog that covers WP news, plugins, themes, and even BuddyPress.

instantShift – InstantShift’s WordPress category has tons of great tutorials, tips, and other information on WP.

StylizedWeb – StylizedWeb has a great WP category with tutorials, reviews, plugins, theme roundups, free themes, and more.

Weblog Tools Collection – A WP blog that covers mostly plugin news and releases.

WordPress Blog – The official WP blog.

WordPress.com Just Another WordPress Weblog – The official WordPress.com blog.

WPCandy – A blog that covers themes, plugins, tutorials, and more.

WordPress Publisher Blog – A blog from Automattic aimed at publishers using WordPress.

Hong Kiat – Hong Kiat’s WordPress category has pages of great content, including hacks, tutorials, giveaways, and roundups (some of which are mentioned above).

155 WordPress Resources, Tutorials, Plugins, Themes, AJAX, Podcasting…WP Monster List – A huge roundup of resources from Speckyboy Design Magazine.

The Advanced WordPress Help Sheet – A PDF WP cheat sheet.

WordPress.tv – View videos about all things WP.

Nathan Rice – Nathan Rice writes about WP theme design and blogging.

WpRecipes.com – A blog covering WP tutorials and tips.

Wpazo – A blog covering the best WP news, resources, and updates every day.

WP Engineer – A blog for WP developers.

ThemeShaper – The blog from the developers of the Thematic framework.

WordPress Weekly – A weekly podcast dedicated to WP from TalkShoe.

Darren Hoyt – Darren Hoyt’s WP archive category has tons of great resources and new articles are added most months.

WordPress Theme Development Check List—PDF Version – A PDF checklist for WP theme development.

Justin Tadlock – Blogs about WP plugins, tutorials, and news.

Plugins – A podcast dedicated to WP plugins.

WordCast – A WordPress podcast with more than 60 episodes already published.

50+ Cheat Sheets for Building WordPress Themes and Plugins – A huge roundup of cheat sheets and references for theme and plugin developers.

WP Topics – An aggregation of the content of some of the most popular blogs about WP out there.

Pro Blog Design – Pro Blog Design’s WordPress tag has tons of articles and resources related to WP design and customization.

Top WordPress 2.7 Tips, Hacks, Plugins and Resources – While this roundup is specific to WP 2.7, much of the resources and information it includes also applies to 2.8.

100+ Killer WordPress Resources – A huge collection of varied WP resources compiled by Steffan Antonas.

WordPress Daddy – A great blog with regular posts on plugins, customizations and hacks.

WPDesigner.com – A great blog with a huge archive of WP-related content.

wpGuy – A blog dedicated to WP that also features themes and plugins.

Lorelle on WordPress – An exceptional WP blog that covers tons or WP news, tips and advice, as well as general blogging info.

15 Resources for Setting Up an E-Commerce Site with WordPress – A great roundup of plugins, themes, and tutorials for creating an e-commerce site with WP.

The Autopsy of WordPress as CMS with 25 Great WP Plugins and Designs – A great article on using WP as a CMS, along with plugins that make it possible.

WordPress God: 300+ Tools for Running Your WordPress Blog – A slightly older post from Mashable, but it still has some great plugins and other resources listed.

Compiled exclusively for WDD by Cameron Chapman.

Which are the resources and plugins you can’t live without? Did we miss your favorite one? Please add it below…

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

Walter

septiembre 14, 2009

How to Display Your Content on a Blog’s Front Page

The front page of a blog is obviously of great importance to the overall design.

Up until a few years ago, most blogs simply showed posts in order of publication, the most recent at the top.

Then excerpts became popular, and later magazine-style front pages.

The purpose of the front page will, of course, vary a bit from one type to another; for example, a personal blog will be different from a professional multi-author blog.

In this post, we will take a look at the options that bloggers and designers have for showing content on the front page, and some reasons for choosing each.

Before getting into the details, let’s consider the purpose of the front page, so that you can make a more informed decision about the type to use for your own blog.

The front page is important because it has a substantial impact on the first impression of visitors.

New visitors expect to be able to get a good idea of what the blog offers from the front page alone. Visitors also want to be able to find content they are looking for through it.

Easy navigation and usability are important because the front page will likely be the most frequently viewed page on the website.

The front page is important, finally, because it will promote the most important or recent content.

Options for Displaying Content on a Front Page

You have basically three options for displaying blog content on the front page: full posts, post excerpts and magazine-style. We’ll look at the benefits of each, which will hopefully assist you in understanding your situation and making an informed decision.

1. Full Posts

With the full posts option, blog posts are displayed in full, not truncated, in reverse chronological order. This method is not nearly as popular as it was a few years ago. Here are the benefits of showing full posts on the front page:

Visitors Can Read Entire Posts Without Leaving Page
Not many blogs show full posts on their front page anymore because other options provide more benefits. But one benefit of showing full posts is that visitors can read several recent posts in full without leaving the page. The only thing they probably couldn’t do is comment on a particular post.
Works Well With Short Posts
If your blog posts are relatively short (say, 500 words or less), showing them in full on the front page may be easier. Excerpts can look funny if they already contain half the post, and visitors can get annoyed if they click through to the full post and find only two more paragraphs to read.
Doesn’t Break Reader’s Flow
Having to click through to an individual post after having read the excerpt can break the reader’s flow and perhaps cause them to lose interest and leave the website altogether.

2. Post Excerpts

Another option is to show only excerpts of posts, with links to the full content for those who are interested.

You could show teasers to, say, 10 articles on the front page and let visitors choose what to read. WordPress generates excerpts automatically, or you could create a custom excerpt taken directly from the post or show any other text you like.

Showing excerpts on the front page is a popular option now. Here are the benefits:

Scanning Is Easier
Most visitors prefer to scan content on the front page to see what is available and what kind of posts are published. Full posts make scanning difficult. Showing excerpts makes it quick and easy for visitors to see what has been recently published and to choose what they like.
Control of Design
Theme designers and bloggers can be a bit more creative with excerpts than with full posts. You can control the length of excerpts, which allows you to more precisely position and line up content, without worrying about long posts breaking the layout. As you will see in the showcase at the end, some theme designers are quite creative with excerpts. Excerpts simply give the designer more control over how the front page looks.
Shorter Front Page
If your posts are relatively long and you display several of them in full on the front page, the page will quickly become unmanageable. Excerpts keep the page shorter, making it easier for visitors to navigate. Of course, the number of excerpts you display affects manageability as well, so adjust that accordingly.
More Page Views
Some bloggers use excerpts to increase page views: if a visitor reads an excerpt and wants to see the full content, they will have to leave the front page, giving the blog another page view. More page views can lead to more income for certain types of advertising. However, inflating page views for more revenue can irritate visitors. In general, if this is your only reason for showing excerpts on the front page, don’t do it.
Duplicate Content Is Avoided
Search engines don’t like duplicate content and might penalize you if they suspect your blog has it. A front page that shows full posts essentially duplicates the content of individual blog pages. Showing excerpts instead can help prevent this problem.

3. Magazine-Style

The third option is a magazine-style page. It is similar to excerpts, but posts are not necessarily shown in chronological order. Instead, they are usually categorized, with their dates shown.

This is typical of news websites, on which headlines and teasers are arranged in columns by subject, such as sports, world news and so on.

This magazine style brings all of the benefits of excerpts and a few others. Here are the benefits:

Better Organization of Content
The most significant benefit is that the magazine style allows for better organization of content. Rather than simply displaying the five or ten most recent posts, you can display posts by category or even reserve a feature area for posts you want to give the most exposure to. You control what content visitors see first. And visitors may be able to better understand what your blog offers by seeing the content arranged by category.
Control of Design
This benefit is even greater with magazine-style front pages than with excerpts. The blogger chooses exactly where to display each piece of content, based on category. And plenty of layout styles are possible with this option.
Looks Like Typical News Website
Organizing and classifying content by subject tends to make the front page look like a news website. If your blog has a lot of content and is news-oriented, this could be the deciding factor. This style tends to create the impression of a larger website because it shows off so much content and variety of topics.

Tutorials for Designing and Laying Out Blog Front Pages with WordPress

Here are several tutorials on creating front pages in WordPress and the types of layouts we have discussed.

Build a Basic Newspaper Layout with WordPress and jQuery
This tutorial from NETTUTS takes you through the process of designing a newspaper-inspired front page.
Build a Featured Posts Section for WordPress
Many blogs have a featured posts section at the top of the front page. This tutorial shows you how to do one.
How to Make a Featured Post Carousel for WordPress
This is another post on NETTUTS that covers the topic of creating a featured post section.
Add Thumbnails to WordPress with Custom Fields
Using thumbnails with post excerpts on the front page is a popular option. This tutorial shows you how to do it.
How to: Get the First Image from a Post and Display it
This post shows an alternative to using custom fields to display images on the front page.
6 Tricks and Tips to Create a Magazine WordPress Theme
Cats Who Code provides some helpful information for those who want to create a magazine-style front page.
Display Post Only Excerpts in WordPress
This article shows the simple change you need to make to your theme’s code to show excerpts instead of full posts.
In Praise of WordPress Template Tags, Part II: The Magazine Layout
Darren Hoyt discusses subjects related to creating magazine layouts on WordPress.
WordPress: Magazine-Style Horizontal Drop-Down Menu
This post shows how to make a magazine-style navigation menu.
Template Tags/Query Posts | Template Tags/Get Posts
(from the WordPress Codex)

Blog Front Page Showcase

Now we’ll feature a number of blog front pages that demonstrate various approaches to displaying content.

Excerpts

Vectips
This style of excerpts, with thumbnails to the left, is rather popular.

Lokalisten Sprechblase
A brief excerpt of each post, with accompanying image. The front page shows only the three most recent posts.

Blogfullbliss
The images on this front page are to the right of the excerpts.

Francesca Battistelli
Just text excerpts, no images.

Creative Tempest
Very brief excerpts, with a thumbnail of the lead image from each post.

Blog Me Tender
Excerpts of the three most recent posts, each with an image.

The Art of Nonconformity
This unique layout is split down the middle. Five post excerpts are shown on the left.

Bluedots Design
The images on this front page appear above, rather than beside, the excerpts.

Design Reviver
Here is an example of the flexibility that excerpts can bring to the front page. The layout of these two columns would not have been possible with full posts.

Excerpts Plus Featured Content

Tutorial9
Includes a slider featuring five recent posts, with post excerpts shown below.

Colorburned
A similar slider and excerpt combination is used here.

L’effet Crea
This front page also has a featured content area above excerpts of recent posts.

Magazine Style

Pop Culture Tees
Four headlines are displayed horizontally (with their categories) above excerpts of recent posts. “Latest Tees” are shown to the left of the excerpts.

The 9513
Excerpts of “Editor’s Picks” are shown in the main column, with headlines of the latest blog entries to the right.

Kineda
One post is featured “In the spotlight,” with four other popular posts from the week displayed horizontally. Excerpts of other recent posts are shown below.

ANidea
Includes an area for one featured headline and excerpt. Four other excerpts from various categories appear below.

Ecoki
A featured article is at the top, with four recent posts listed horizontally, and then another row of four “Must reads.”

Full Posts:

Freshivore

Owltastic

Unusual Front Pages

Story Pixel
Headlines of three recent posts, but no excerpts or full posts.

Michela Chiucini
One post excerpt, with headlines of other recent posts listed below.

Dirt Du Jour
One post shown in full.

This post was written exclusively for Webdesigner Depot by Steven Snell, a web designer and blogger. Steven runs Blog Design Heroes, which showcases well-designed blogs.

Which system works best for you and why? Please share your feedback with us.

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

Walter

septiembre 8, 2009

35 Inspirational Fashion Website Designs

Appearance is crucial for obvious reasons in the fashion industry. With that in mind, many fashion e-commerce sites can be an excellent source of design inspiration.

Attractive design and photography can make the products more appealing to visitors and increase sales.

There are a lot of different design styles and approaches that are used by online fashion shops, but generally photography and product/model images play a large role.

Sometimes the design and layout is minimal, allowing for more empasis on the products. Others feature huge photos as the primary focal point of the page.

In this post we’ll feature 35 inspirational fashion website designs that represent a variety of styles that are sure to inspire you.

1. Closed

2. Martin + Osa

3. Abercrombie & Fitch

4. Myla

5. Burberry

6. Coast

7. Roxy

8. Armani Exchange

9. Nine West

10. Anna Scholz

11. J.Crew

12. Barrie Pace

13. Free People

14. Jungstil

15. Urban Originals

16. New York & Company

17. Lane Bryant

18. Tooby Doo

19. BCBG MAXAZRIA

20. Acne

21. Miss Selfridge

22. Ralph Lauren

23. Ralph Lauren Rugby

24. Shoe Guru

25. Bluefly

26. Tommy Hilfiger

27. ASOS

28. White + Warren

29. Bridge55

30. Nordstrom

31. DSW

32. Lord & Taylor

33. The Vestry

34. Wallis

35. My Wardrobe

This article was written by Steven Snell exclusively for WDD. Steven showcases the best e-commerce sites at CartFrenzy, a gallery that is updated daily.

What do you think of these fashion website designs? Which ones were the most inspiring for you?

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