Archive for August, 2010

The Advantages of Using CSS Sprites Along With a Few Tips

There are many techniques in CSS to achieve certain results in different ways, CSS sprites being one of them. CSS sprites is a technique used where you can have a large single image containing a set of images that can be broken down using CSS to separate the image into multiple.

To better understand this concept, let us look at the following example image:

Example

As you see in the example image, there are three top bars of different colors all separated by some whitespace between them. Instead of having each of these bars as individual images, you can join them into one as shown above, and with CSS, you can separate them so they seem as separate images.

Moreover, let us say you just wanted the left and right corners of the blue bar instead of the entire thing for an aspect of your website, using the CSS sprites method, you can do exactly that without the need of creating separate images.

Who Uses CSS Sprites?

Many people have the understanding that most major companies do not like to use certain techniques and would rather use generic methods. However, this is not necessarily true, and in fact, major companies such as Ask.com and Facebook use the sprite technique as it is the smarter to move.

Now that you understand the concept of CSS sprites and how they work, we dive right into four advantages of using CSS sprites along with a few tips on usage.

Cut Back On HTTP Requests

One of the main advantages of using CSS sprites is that it cuts back on HTTP Requests. When a user visits your website, the browser requests the data from the server, by having fewer images you cut back on those requests, which in essence, cuts back on load time as well. Remember, the fewer HTTP Requests, the better, and using this technique is one-step forward.

Saves Time

By merging relative images all into one larger image, you are saving yourself time from creating individual images. Additionally, it also makes it easier for you to locate the images you may want to edit as it may be grouped with others, instead of the need to flip through a basket of files to find what you may have been looking for.

Flexibility

By utilizing CSS sprites, you are giving yourself more flexibility over your website’s design and or layout. For example, if you are not using CSS sprites and you have some gradient bars that you use across your website, grabbing a corner of that bar would mean creating a separate image for the corner and to deal with its hassles.

Instead, by using CSS sprites, you can easily slice the corner you want from the image without modifying the image or creating a new image, giving the flexibility you need while saving time.

Tips

Now that you know the benefits of using CSS sprites, we discuss three tips on improving your CSS “spriting” experience.

Plenty of Space

While it may sound jolly to cram in many images into one to benefit from CSS sprites, it is generally not a good idea to leave small gaps between each image. The reason for this is that sometimes content expands quite a bit which sometimes causes other images to appear within the image you selected from the main image or sprite image, this is caused by having your images close to each other initially in the sprite image. Instead, leave some good spacing between each image to eliminate this issue, even if the images may be icons.

Left to Right, Right to Left

No, we are not talking about languages, but rather image placement in your sprite. If images in your sprite are to be used to the right of an element, place the image to the left of the sprite and vice versa. This helps prevent other images appearing in the background of the image you selected from your sprite, which is usually caused by moving the background image by CSS.

To better understand this concept, let us have a look at the sprite below:

Example Sprite

Let us say we wanted to use the green book from the sprite, because we intentionally placed it on the right, we will be using it to the left of an element like so:

Book Sprite

Using this concept, if we wanted to use the warning symbol on the left, we would have placed it on the right as well instead of on the left within the sprite.

Repeating Images Should Consume Less Pixels

Many people stick some images intended for repeating across the screen in a sprite. When doing so, there is no reason this repeating image should take much space unless designed in a certain way. With that said, your repeating images should be only a few pixels wide as they will be, well, repeating. This not only saves space within the sprite itself, it also saves bandwidth and indeed, time.

To conclude, using CSS sprites may or may not be the way to go for you as it really depends on the type of application it will be used for. If you are considering using the technique for one of your mainstream websites or services and or for your portfolio site, it will definitely be a great advantage for you to use it accordingly.

One of the key things you need to look at before choosing this technique is what browsers the majority of your users use to visit your website. The reason this question sometimes arises is that it sometimes may be very difficult to make your CSS sprites compatible with many of these browsers depending on the techniques you use.

However, if major companies as mentioned earlier use the CSS sprite technique, it sometimes is a good idea to review how they implemented the idea as they may have found a workaround to have it work across many browsers and platforms. I am not saying you should take their code and implement it on your site, but rather get ideas for your implementation by overlooking what they have done or achieved.


Best Standards and Guidelines for Graphic Designers

The basis for this weeks Answers reader discussion is essentially a chance to share what you feel are the best graphic design standards for an inhouse design agency.

What do you think? Is there set standards and guidelines for graphic designers in inhouse agencies? You can leave your comment below, or you can leave your answer on the original question on here: What are the best standards and guidelines for graphic designers who work for inhouse design agencies?

What are the standards and guidelines for graphic designers who work for inhouse design agencies?

what are the best standards and guidelines for graphic designers who work for inhouse design agencies?
This question was originally asked by an Unregistered User, and you will find the best answer below:

The Best Answer came from aPablo G:

what are the best standards and guidelines for graphic designers who work for inhouse design agencies?

Thanks to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.


No longdesc attribute in HTML5

According to an HTML Working Group Decision, the longdesc attribute will not be included in the HTML5 specification. Not everybody is happy with that decision, so whether longdesc is still out when HTML5 is finished remains to be seen.

In case you aren’t familiar with the longdesc attribute, here is how it is described in the HTML 4.01 specification:

This attribute specifies a link to a long description of the image. This description should supplement the short description provided using the alt attribute.

This provides a way of describing images to non-sighted users in detail, with more text than what is suitable for the alt attribute (which is really more of a text alternative to an image than a description of it). The longdesc attribute explicitly associates this description with the image.

Read full post

Posted in , .



The Perfect Brainstorm: A How To

Advertisement in The Perfect Brainstorm: A How To
 in The Perfect Brainstorm: A How To  in The Perfect Brainstorm: A How To  in The Perfect Brainstorm: A How To

By Robert Bowen

Given our fields of interest and chosen professions, most of us have at least once in our lives had to brainstorm for one reason or another. But for those of us who apply this mental tool in our creative pursuits much more regularly, learning to do so effectively is crucial.

Brainstorming could prove an invaluable addition to your creative arsenal, but only if you take the time and put forth enough effort to follow through on the process. This is an unfortunate truth for many, who believe that this “storm� is short-lived. But there is more to it than that.


Brainstorming is more than about just having ideas: it is about having ideas and the means to implement them. You can come up with ideas all day long that sound great on paper and even out loud when you share them with others, but if you have no means to follow through on them, then they will simply fall flat. Just because you have a spark, doesn’t mean you have enough fuel to keep the fire burning brightly. An idea isn’t so much a storm as a drizzle.

Storm in The Perfect Brainstorm: A How To

If you look up the word brainstorm, it is generally defined as a “discussion to produce ideas and ways of solving problems.� The key part here is the discussion. When a lot of us are ’storming, we do so on our own or with few participants, and we end up just sharing our idea rather than discussing it. There is no weighing of pros and cons, no comparison with competing or existing models, no contemplation of the concept’s audience. We must take extra steps to ensure that when we brainstorm, we do so as though we were having this discussion, covering all of these bases and fully examining the idea, not just marvelling at our conception of it.

Consider some of our previous articles:

The Calm Before The Storm

Staying on the storm analogy, we come to the first step: getting your brain ready for the oncoming storm, or getting all of your ideas out and ready for cross-examination. Because brainstorming is about solutions, you have to find ways to make your ideas reach those solutions by the end of the process. So, once you have identified your concept, the next step is to lay out all possible paths to achieving the concept. This step and the resulting brain dump of ideas sets the stage for what will unfold in subsequent steps, which we will discuss further below.

Knowing the direction you intend to head with your concept is essential before taking off, so get your wheels turning by identifying the purpose of your idea. When those wheels start turning and the ideas start filling your brain, spill them all out onto the page or screen. No matter how ridiculous or bizarre the idea sounds, get it out and weigh its relevance and practicality later. This initial phase is all about the free flow of ideas; stopping and starting to sort through them is not necessary at this point. In fact, that can be counter-productive because it interrupts your flow. In the beginning, do not judge the ideas; just let them come.

Calmjudge in The Perfect Brainstorm: A How To

This flow starts everything. Without its uninterrupted fluidity, the rest of the process could become blocked and not reach its potential. So, try to get in the right mindset to get the ball rolling. Only you know how to achieve this. Each of us is different. We each take a different route to get to the same mental state. Some use inspiration, some use perspiration. Some use a short vacation, some use mild medication. But we each have a means of unplugging the filters and letting the creative faucets run.

Gathering Clouds

As the clouds start to gather, we formulate our criteria for sorting the ideas. We take all of the ideas we have generated and look at them critically to separate the probable from the inane, and we move towards more solid ground on which to build our concept. In this step, we begin to seriously consider how to realize our concept, and which of our ideas are viable enough to carry into the more rigorous parts of the brainstorming process. This is the part of the process when we start gathering comparative information to determine the viability of our concept.

Clouds in The Perfect Brainstorm: A How To

We can sort our ideas by comparing them to existing models that are in the same vein. By seeing how those other models succeeded, we get a feel for how our concept might fare under similar conditions and in similar markets, and we see whether our ideas for building and launching the concept are workable. You have to consider a lot as you construct the path towards your end game. This weighing of elements can be time-consuming, but it is the surest way to reach a thoughtful and sound conclusion.

Consider the Market

The first consideration that will heavily sway your concept is the market for your concept. What makes your concept unique? If it is a retail concept, what is the profile of competing retailers? How do you plan to establish your concept quickly in an already active market? These and other questions need to be on your radar so that you know which areas to focus on as you proceed.

Consider the Audience

Another major consideration is the audience you hope to reach. How will you make this connection? How will you going sustain this interaction? What barriers stand between your audience and your concept? All of these questions need to be examined because if some of your ideas don’t establish this connection with the audience, then you should move on to other ideas on your list that might.

Consider the Future

Naturally, as you build the foundation for your concept, you will want to consider the future. What emerging or changing technologies will likely affect your concept? How will your concept hold up as the market evolves? Can your concept evolve along with the market? This won’t happen overnight, so as you make your concept a reality, think ahead to how the landscape will change before and after your concept hits the scene.

The Thunder Rolls

Back to the storm analogy. As we move to the next stage, thunder begins to roll across the sky and our ideas become more fleshed out. The storm is officially underway, and we carve our ideas into more refined tools, all feeding our overall concept, advancing it towards reality. With our idea pool dwindled by process of elimination, we take an even more in-depth look at the remaining ones and expand on them. We make the most of our concept, going the extra mile in these early stages of development, to guarantee that it starts on the most advantageous footing.

Thunderfooting-e1277686003760 in The Perfect Brainstorm: A How To

Here is where mind-mapping and other brainstorming tools come in handy, allowing us to build on the initial idea and grow it into a more defined concept. You might also consider combining some of your ideas as elements of your overall concept. Not only does this allow you to salvage any ideas that you thought impractical, but it also keeps the concept dynamic and fluid.

This is the stage when, hopefully, the storm clears, the dots start to connect and the path to our goal becomes clear. And we fashion each idea into a more solid building block, our concept returns to that fluid state we saw when we began, when our ideas flowed unimpeded. Now other ideas might present themselves, springing up out of the path we have carved towards our goal.

Cluster Diagrams or Mind-Mapping

One of the best tools for connecting the dots and getting the most out of each idea is a cluster diagram, commonly known as a mind map. You simply take the central idea and expanding it in as many different directions as you can using thought bubbles, which are all connected by lines, showing the relationships between all the avenues you have explored. This is a proven technique for laying out all of the information related to your concept and bringing it all together and growing it.

Turn to Your Circle of Friends

Another resource that can be invaluable for refining your ideas is the community around you and your circle of friends, either the ones around you or on social networks. After all, brainstorming is meant to be an open discussion on determining the viability of ideas; why not open the dialogue to a few select folks whose input you trust. The more you discuss your concept and ideas for implementation with others, the more likely you will find ways to make the concept a success. More perspectives always benefit the brainstorming process.

A Final Thought

Whatever you do, keep thinking outside of the box during each step of the brainstorming process. It is a storm after all: a box will only get soggy. Stay out of the box, and your ideas will, too.

Further Resources

Below are a few posts and resources for brainstorming that we felt you should definitely look at to get the most out of your ’storm sessions. We hope they prove useful.

(al)


100 Free High Quality WordPress Themes: 2010 Edition

Smashing-magazine-advertisement in 100 Free High Quality WordPress Themes: 2010 EditionSpacer in 100 Free High Quality WordPress Themes: 2010 Edition
 in 100 Free High Quality WordPress Themes: 2010 Edition  in 100 Free High Quality WordPress Themes: 2010 Edition  in 100 Free High Quality WordPress Themes: 2010 Edition

It’s hard to believe that a year has passed since our last WordPress theme collection, but there you have it — the time has come again. Once a year we feature the most useful and interesting WordPress-themes that we are collecting over months and present them in a nice quick overview. The collections from 2007, 2008 and last year are still useful, but some of the themes are outdated or updated now.

Looking back over these previous theme articles, you can clearly see how and why WordPress has rapidly matured into the CMS powerhouse it is today. With all of the features that have been added and improvements made with every new WordPress version and with its ever-increasing popularity among the design and development community, the quality of free themes is evident. Developers are continually pushing WordPress’ boundaries, giving us today’s outstanding free theme collection.

Today, we present a fresh collection of useful WordPress themes. Please notice that some themes are a bit older, but they are included because we haven’t featured them last time. This round-up picks up where we left off last year: most themes below were released between June 2009 and August 2010. We’ve also split this collection into the following categories: gallery and portfolio themes, themes for bloggers, e-Commerce WordPress themes, clean themes, magazine-style themes, minimal themes, mobile themes; pre-launch themes; and finally “Themes That Take WordPress Beyond.â€�

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Gallery And Portfolio Themes

Cumulus (Free version) (demo)
Cumulus is a very clean and calm portfolio theme. It contains a large block for featured projects and images and a nifty blog posts navigation in the sidebar.

Wordpress-130 in 100 Free High Quality WordPress Themes: 2010 Edition

Imbalance (demo)
Free wordpress theme in modern-minimalist style. Imbalance is a very user friendly, jQuery powered theme which looks really well under any browser and OS. Perfectly fits for your blog, online magazine or portfolio websites. It is optimized for high-loads, contains WordPress 3.0 menu support, Twitter widget, jQuery-based gallery and WP Post Thumbnails support.

Imbalance2 in 100 Free High Quality WordPress Themes: 2010 Edition

Shaken and Stirred Theme (demo)
This theme is perfect for you if you’re in need of a gallery/portfolio website or if you just want a website with a unique grid layout that not many websites have taken full advantage of yet. “Shaken Grid� uses the jQuery Masonry plugin which “arranges elements vertically then horizontally according to a grid.� The result is a gap-less layout even if you have varying post heights.

Wordpress-104 in 100 Free High Quality WordPress Themes: 2010 Edition

AutoFocus+ (demo)
The theme is designed on an 800px, 8 column grid layout that truly allows your images to shine. The theme boasts a sharp typographic approach with a 22px baseline grid, and a Garamond/Helvetica (Times/Arial for you PC users) font stack that’s much easier to read.

Wordpress-121 in 100 Free High Quality WordPress Themes: 2010 Edition

Fotofolio Landscape (demo)
A nice dark WordPress theme with sidebar navigation and jQuery-powered lightbox for images. A good choice for photographers who want to feature their works in an online portfolio.

Sm Wordpress Theme C in 100 Free High Quality WordPress Themes: 2010 Edition

FolioGrid (demo)
This theme contains a fluid grid-based layout, jQuery-based transitions and automatically resizing thumbnails. Also, you can choose between various page tamplates, and the theme has a widget-enabled area, too.

Sm Wordpress Theme 59 in 100 Free High Quality WordPress Themes: 2010 Edition

Mansion (demo)
Mansion is a free photoblogger’s theme for WordPress. It features a flexible-width thumbnail grid for both images and photo journal entries. Mansion is perfect for those who want to primarily showcase their photographs and occasionally write blog posts.

Sm Wordpress Theme 60 in 100 Free High Quality WordPress Themes: 2010 Edition

PhotoView (the link is currently unavailable due to server problems of the theme’s author) (demo)
PhotoView was designed for displaying photos and videos in a simple and clean manner. The theme has an integrated lightbox. Also, a PSD file is included for easy customization.

Sm Wordpress Theme 61 in 100 Free High Quality WordPress Themes: 2010 Edition

SimpleFolio (demo)
SimpleFolio is a portfolio theme that includes a blog and a very extensive option page that allows you to exclude all your portfolio items from the blog page. It also includes a front page slider. It has 2 different widget areas and threaded comments, and also supports paged comments and has 2 different page templates for advanced usage. The control of images is done from the post page.

Wordpress-133 in 100 Free High Quality WordPress Themes: 2010 Edition

Smashing Multimedia (demo)
This theme was designed especially for podcasters, photographers and users who can now easily embed videos and images, rate them and showcase them in their own WordPress-based blog. It has a parent theme and an easily customizable child theme. This WordPress Theme comes with layered PSD source files, a visual help guide and is fully localized ready for you to translate it into your target language.

Sm Wordpress Theme 64 in 100 Free High Quality WordPress Themes: 2010 Edition

Fullscreen Photo and Multimedia (demo)
Fullscreen is a free one-column photography and multimedia theme for WordPress that can be used for portfolios, photoblogs, videoblogs, and virtually anything else where you want your content to be front and center. It provides visual artists a unique way of presenting their latest work online using a minimalist side-scrolling homepage.

Sm Wordpress Theme 66 in 100 Free High Quality WordPress Themes: 2010 Edition

Brave Zeenat (demo)
A clean Portfolio Theme ideal for photographers, artists and designers to showcase their portfolios.

Sm Wordpress Theme 67 in 100 Free High Quality WordPress Themes: 2010 Edition

Monokrome (demo)
This grid-based theme is widget ready and has a Twitter stream and Flickr integration. The column width adapts to the width of the images and the width of the browser viewport.

Sm Wordpress Theme 57 in 100 Free High Quality WordPress Themes: 2010 Edition

Portfolio WPESP Theme (live demo)
Portfolio – WPESP Theme is a “minimalist� Theme based on the idea of portfolio created by DAILYWP. The Theme is a starting point in the creation of portfolios, using WordPress as CMS.

Wordpress-106 in 100 Free High Quality WordPress Themes: 2010 Edition

Selecta (demo, WordPress 3.0+ compatible)
Selecta’s rounded edges and bold, modern color palettes make for a fresh theme that’s best suited to blogs where video will be the main focus. The wider-than-usual frames around thumbnails and videos bring to mind the retro-cool of Polaroid photographs and old home movies.

Sm Wordpress Theme 62 in 100 Free High Quality WordPress Themes: 2010 Edition

Work-a-holic (demo)
Work-a-holic is a free two and three column WordPress theme that focuses mainly on showcasing portfolios for artists, web designers, photographers and illustrators.

Wordpress-135 in 100 Free High Quality WordPress Themes: 2010 Edition

BlueBubble WordPress Theme (demo)
The theme is clean and simple, contains a theme options page, uses post image thumbnail plugin, has 2 widget ready sidebars and uses jQuery/PHP-based contact form with easy customization. Requires WordPress 2.9+.

Wordpress-112 in 100 Free High Quality WordPress Themes: 2010 Edition

WordPress Themes For Bloggers

Lap of Luxury (demo)
This theme uses gold in the logo, and white and black are used as the main colors. The 2-col theme contains a sidebar on the right that allows for a large square ad up top, and splitting into 2 columns below that. Comes fully widgetized. A special feature of this theme is the logo changer.

Sm Wordpress Theme 13 in 100 Free High Quality WordPress Themes: 2010 Edition

Katana (demo)
This theme has a simple layout based on anime or game niche. Theme will be suitable for blogs of such niches. Theme has features like featured post section, post thumbnails, banner ads, adsense, twitter widgets etc. Theme uses custom fonts for various titles. It has an intuitive theme option page which lets you configure the theme.

Wordpress-125 in 100 Free High Quality WordPress Themes: 2010 Edition

Koi Theme (demo)
Koi is a simplified version of N.Design Studio’s theme (2009 redesign). Key features: multi-level dropdown menus, social media buttons, threaded & paged comments, and sidebar widget plus three footer widgets. This theme includes an option page to manage dropdown menus, favicon, footer tracking code, and social media buttons. Requires WordPress 2.9+.

Wordpress-127 in 100 Free High Quality WordPress Themes: 2010 Edition

Bueno
Bueno is a clean, minimalistic design which sophistication in both its typography and structure. It uses a grid-based design, has integrated banner ad management, widgetized sidebar and 7 different color schemes. Also, the theme is packaged wth a .po file for easy theme integration.

Wordpress-109 in 100 Free High Quality WordPress Themes: 2010 Edition

Notepad Theme (demo)
The theme is inspired by the iPhone’s Notes.app. This new theme is widget compatible with threaded comments, social media buttons, and multi-level dropdown menus. It has been tested on WordPress 2.9 with Firefox, Chrome, Safari, and IE7+. It also includes some nice CSS3 enhancement such as rounded corners and drop shadow.

Wordpress-124 in 100 Free High Quality WordPress Themes: 2010 Edition

Strukture (demo)

Sm Wordpress Theme 06 in 100 Free High Quality WordPress Themes: 2010 Edition

Peacekeeper (demo)

Sm Wordpress Theme E in 100 Free High Quality WordPress Themes: 2010 Edition

The Seven Five (demo)
A minimalist blogger/social theme including several customization and layout options.

Wordpress-114 in 100 Free High Quality WordPress Themes: 2010 Edition

Simplo (demo)

Sm Wordpress Theme Bb in 100 Free High Quality WordPress Themes: 2010 Edition

Galaxy (demo)
The Galaxy WordPress theme is a two column theme that supports banner ads and the WP-PageNavi plugin. Perfect theme for personal blogs.

Wordpress-123 in 100 Free High Quality WordPress Themes: 2010 Edition

Aparatus (demo)

Sm Wordpress Theme 03 in 100 Free High Quality WordPress Themes: 2010 Edition

Zexee (demo)

Sm Wordpress Theme 09 in 100 Free High Quality WordPress Themes: 2010 Edition

Cyangant Elegant (demo)

Sm Wordpress Theme 10 in 100 Free High Quality WordPress Themes: 2010 Edition

Obscure (demo)
A dark magazine wordpress theme suitable for any site nitche and best fit for community-based sites.

Wordpress-143 in 100 Free High Quality WordPress Themes: 2010 Edition

Designpile (demo)

Sm Wordpress Theme 14 in 100 Free High Quality WordPress Themes: 2010 Edition

Obscorp (demo)

Sm Wordpress Theme 07 in 100 Free High Quality WordPress Themes: 2010 Edition

The Side Blog Theme (demo)
A free blogging theme with all sorts of customization and content management options.

Wordpress-115 in 100 Free High Quality WordPress Themes: 2010 Edition

E-Commerce WordPress Themes

e-Commerce Theme: Kelontong (demo)
The theme has a simple layout, clean, professional look, is integrated with WP e-commerce and features a slideshow for products.

Wordpress-126 in 100 Free High Quality WordPress Themes: 2010 Edition

Dangdoot (e-commerce theme: free version) (demo)
Dangdoot is a free e-commerce theme for WordPress and requires the e-Commerce plug-in.

Sm Wordpress Theme 81 in 100 Free High Quality WordPress Themes: 2010 Edition

AppCloud (e-commerce theme: free version) (demo)
AppCloud is another free e-commerce theme for WordPress. (It too requires the e-Commerce plug-in).

Sm Wordpress Theme 82 in 100 Free High Quality WordPress Themes: 2010 Edition

Clean WordPress Themes

Blissful Blog (demo)

Sm Wordpress Theme Ii in 100 Free High Quality WordPress Themes: 2010 Edition

The Ideal Website
The Ideal Website is designed to fit Fibonacci’s Golden Section – otherwise known as the divine proportions. These measurements are said to be the most pleasing to the eye, and have been widely used for everything from judging beauty of a face, to the design of bank notes.

Wordpress-117 in 100 Free High Quality WordPress Themes: 2010 Edition

Un.complicated Theme (demo)
The layout is minimalist, clean, and organized into three 320px columns. This theme, are built on Starkers and implements the The Golden Grid. here is a wigetized sidebar, which looks like a regular three column row. I have also integrated twitter within the theme, using javascript. All the user has to do is find this line in the index.php page.

Wordpress-110 in 100 Free High Quality WordPress Themes: 2010 Edition

Voidy (demo)
Voidy is the perfect theme for your great blog. It is clean, clear and beautiful. It is minimalistic two-cloumn theme with the widgets all arranged in the right sidebar. Voidy was designed to make your content stand out and make everything else get out of the way.

Wordpress-103 in 100 Free High Quality WordPress Themes: 2010 Edition

Clear (demo)
Clear is the perfect theme for great authors. It is clean, clear and beautiful. It is minimalistic one-cloumn theme with the widgets all arranged at the bottom. Clear was designed to make your content stand out and make everything else get out of the way.

Wordpress-111 in 100 Free High Quality WordPress Themes: 2010 Edition

Delicate (demo)

Sm Wordpress Theme B in 100 Free High Quality WordPress Themes: 2010 Edition

Boldy (demo)
A free theme that includes support for WordPress 3.0 Menu Management, has in-built slideshows, jQuery-based forms and live form validation as well as a widget for Twitter.

Wordpress-101 in 100 Free High Quality WordPress Themes: 2010 Edition

Smooth (demo)

Sm Wordpress Theme 32 in 100 Free High Quality WordPress Themes: 2010 Edition

Inuit Types (starter edition) (demo)

Sm Wordpress Theme 34 in 100 Free High Quality WordPress Themes: 2010 Edition

Modernist (demo)
The theme is based on the design ideas of Jan Tschichold, Josef Müller-Brockmann, Dieter Rams, and other modernists. Beautifully built yet transparent, it was designed with a focus on optimal typography in order to better showcase your content: text, images and video.

Release in 100 Free High Quality WordPress Themes: 2010 Edition

Titan Theme (free edition) (demo)

Wordpress-147 in 100 Free High Quality WordPress Themes: 2010 Edition

YouAre Theme (demo)

Sm Wordpress Theme 38 in 100 Free High Quality WordPress Themes: 2010 Edition

Simple Organization (demo)

Wordpress-148 in 100 Free High Quality WordPress Themes: 2010 Edition

Neutra (demo)
Neutra is a simple and elegant theme for WordPress. Grid-based with focus on simplicity and typography.

Wordpress-149 in 100 Free High Quality WordPress Themes: 2010 Edition

The Erudite (demo)
A theme for writers who want readers, not visitors, traffic, click-throughs, CPMs or what-have-you. Carefully crafted typography and generous use of whitespace lets your writing shine. Version 2 includes a dark theme option.

Wordpress-105 in 100 Free High Quality WordPress Themes: 2010 Edition

Magazine-Style Themes

The Columnist
The Columnist WordPress theme is inspired by traditional newspaper layouts and the grid structures and typography techniques they employ. It has WordPress thumbnail support, widget support, CSS3 column structure, jQuery animations, custom fields for images and featured latest post area.

Wordpress-120 in 100 Free High Quality WordPress Themes: 2010 Edition

The Structure Theme (the link was removed because the pricing was changed after the article was published, demo)
The Structure Theme is a free WordPress theme with a modern minimalist design. There are 4 themes included with the Structure Theme download; a white theme, black theme, two column blog and a single column blog design. The theme was created with a simple and clean aesthetic meant to easily adopt the style of the content added to the site. The Structure Theme is also designed with customization in mind. Meaning, with a little work, the theme can be completely personalized to suit your brand.

Wordpress-118 in 100 Free High Quality WordPress Themes: 2010 Edition

Aurelius (demo)

Sm Wordpress Theme Ee in 100 Free High Quality WordPress Themes: 2010 Edition

Tanzaku (demo)

Sm Wordpress Theme 30 in 100 Free High Quality WordPress Themes: 2010 Edition

The WhatsUp (demo)

Sm Wordpress Theme 18 in 100 Free High Quality WordPress Themes: 2010 Edition

WPCount (demo)

Sm Wordpress Theme 24 in 100 Free High Quality WordPress Themes: 2010 Edition

Maimpok (demo)

Sm Wordpress Theme 26 in 100 Free High Quality WordPress Themes: 2010 Edition

Malleable (demo)

Sm Wordpress Theme 29 in 100 Free High Quality WordPress Themes: 2010 Edition

Furvious (demo)
A nice theme coming with 5 color styles, powerful admin framework and featured posts area.

Wordpress-108 in 100 Free High Quality WordPress Themes: 2010 Edition

Newspress (demo)

Sm Wordpress Theme 17 in 100 Free High Quality WordPress Themes: 2010 Edition

Minimal WordPress Themes

Modernist
Sm Wordpress Theme Dd in 100 Free High Quality WordPress Themes: 2010 Edition

Reptile

Wordpress-150 in 100 Free High Quality WordPress Themes: 2010 Edition

WP-Notes (demo)

Wordpress-151 in 100 Free High Quality WordPress Themes: 2010 Edition

Satoshi (demo)

Wordpress-152 in 100 Free High Quality WordPress Themes: 2010 Edition

Ulap Theme (demo)

Wordpress-153 in 100 Free High Quality WordPress Themes: 2010 Edition

Manifest
The goal with Manifest was to create a clean and streamlined theme that focused on the content and not the distractions. It utilizes a single column, 500 pixel wide layout. No sidebars. No widgets.

Wordpress-113 in 100 Free High Quality WordPress Themes: 2010 Edition

Miniml Press Theme (demo)

Sm Wordpress Theme 49 in 100 Free High Quality WordPress Themes: 2010 Edition

Functionalism (demo)

Wordpress-155 in 100 Free High Quality WordPress Themes: 2010 Edition

LifeStreaming White (demo)

Wordpress-156 in 100 Free High Quality WordPress Themes: 2010 Edition

Vostok (demo)
Vostok is for those who don’t want attention to be distracted from content. Colors and typography have been carefully chosen to achieve maximum legibility with minimum eye fatigue. Also, code has been written with extreme care for web standards and accessibility.

Sm Wordpress Theme 54 in 100 Free High Quality WordPress Themes: 2010 Edition

Mini (demo)

Sm Wordpress Theme 56 in 100 Free High Quality WordPress Themes: 2010 Edition

Mobile Themes For WordPress

iPhonsta WordPress theme (demo)
iPhonsta Theme is made for iPhone but it also looks nice on other mobile phones and gadgets. iPhonsta wordpress theme is an easy way to expand your visitor’s loyality by providing them with a mobile version of your website.

Sm Wordpress Theme Hh in 100 Free High Quality WordPress Themes: 2010 Edition

WordPress Mobile Pack
The WordPress Mobile Pack includes the following: a mobile switcher to select themes based on the type of user visiting your website; a selection of mobile themes; extra widgets; device adaptation; and a mobile administration panel to allow users to edit the website or write posts while out and about.

Sm Wordpress Theme 68 in 100 Free High Quality WordPress Themes: 2010 Edition

WordPress Mobile Theme
This is a minimalist theme that can be used to target mobile users. The theme works with any mobile phone of any resolution. And with its light weight, it also drastically reduces loading times.

Sm Wordpress Theme 69 in 100 Free High Quality WordPress Themes: 2010 Edition

Möbius
Möbius is compatible with iPhone (and iPod Touch), Android, BlackBerry, Windows, Palm Pre and Symbian touchscreen mobile phones.

Sm Wordpress Theme 70 in 100 Free High Quality WordPress Themes: 2010 Edition

News Press Mobile
The News Press theme is a simple and elegant solution for creating an iPhone-friendly news, blog or other text-centric WordPress website. It comes complete with all the standard WordPress blog features: search, log-in, categories, tags, archives, photos and more.

Sm Wordpress Theme 71 in 100 Free High Quality WordPress Themes: 2010 Edition

Carrington Mobile
Carrington Mobile is an elegant mobile theme that supports advanced touchscreen browsers (iPhone, Android, BlackBerry, Pre) and that is also backwards-compatible with older mobile devices.

Sm Wordpress Theme 72 in 100 Free High Quality WordPress Themes: 2010 Edition

Pre-Launch WordPress Themes

BEBACKWP (demo)

Sm Wordpress Theme D in 100 Free High Quality WordPress Themes: 2010 Edition

Ice Breaker (demo)

Sm Wordpress Theme 73 in 100 Free High Quality WordPress Themes: 2010 Edition

Ready2Launch! (demo)

Sm Wordpress Theme 74 in 100 Free High Quality WordPress Themes: 2010 Edition

WP Blueprint

Sm Wordpress Theme 75 in 100 Free High Quality WordPress Themes: 2010 Edition

Themes That Take WordPress Beyond

GuruQ (demo)
GuruQ is a basic theme designed to be used for Q&A websites. Visitors post questions to the guru, and the guru answers via the WordPress admin screen.

Sm Wordpress Theme 77 in 100 Free High Quality WordPress Themes: 2010 Edition

P2 (Like Twitter in a Box)
P2 is a theme for WordPress that transforms a mild-mannered blog into a super-blog, with features like inline comments on the home page, a posting form right on the home page, inline editing of posts and comments, real-time updates (to display new posts and comments without reloading) and much more.

Driftwood Contact Manager (demo)
Driftwood is a contact manager theme built for WordPress. This easy-to-use theme gives you an effortless way to track interaction with your clients and contacts.

Sm Wordpress Theme 78 in 100 Free High Quality WordPress Themes: 2010 Edition

Aggregator (demo)
Aggregator is a theme that aggregates feeds of any kind in one place and in an attractive format.

Sm Wordpress Theme 79 in 100 Free High Quality WordPress Themes: 2010 Edition

GTD (private theme for teams to collaborate)

Sm Wordpress Theme 80 in 100 Free High Quality WordPress Themes: 2010 Edition

MiniCard (demo)
The MiniCard theme supports hCard and vCard microformats, it supports a ton of social networks, it can accommodate some portfolio items (optional), and it does much more, all from the dedicated theme configuration page.

Sm Wordpress Theme A in 100 Free High Quality WordPress Themes: 2010 Edition

LiveTwit (demo)

Sm Wordpress Theme 83 in 100 Free High Quality WordPress Themes: 2010 Edition

WordPress Theme Tools

Elastic Theme Editor
The awesome Elastic is a visual theme editor and engine for WordPress. It takes a completely innovative approach to theme development. To get an idea of what it can do, check out this video:

Divine (Convert PSD to WordPress)
Divine is a Photoshop plug-in that allows you to assign WordPress roles to your main elements (e.g. #footer, #header, etc.). The plug-in then prepares all the files you need. Once you set up FTP access, the tool uploads the theme automatically to your server. Look at this video for insight into how Divine works:

WordPress Debug Theme
The WordPress Debug theme allows you to check early on for any possible issues you might have with your WordPress installation. It is quite simple for now, doing only a few things, but it does them very effectively.

Sm Wordpress Theme 84 in 100 Free High Quality WordPress Themes: 2010 Edition

Starter And Blank WordPress Themes

Starkers HTML5 WordPress Theme Kit
Starkers is a bare bones WordPress theme created to act as a starting point for the theme designer… Free of all style, presentational elements, and non-semantic markup, Starkers is the perfect ‘blank slate’ for your projects, as it’s a stripped-back version of the ‘Default’ theme that ships with WordPress

Wordpress-119 in 100 Free High Quality WordPress Themes: 2010 Edition

WP-Constructor
WordPress Constructor is a many-in-one theme. It contains 6 sidebar variations and three layouts (and you can create new is easy). You can configure colors and fonts. The theme also has post thumbnails (WordPress 2.9+) and navigation menu customization options (WordPress 3.0+).

Sm Wordpress Theme 89 in 100 Free High Quality WordPress Themes: 2010 Edition

Buddymatic Theme Framework
Buddymatic is a highly extensible theme framework for WordPress and WordPress MU blogs, including BuddyPress-enabled home and member blogs.

ET Starter Theme for WordPress
The ET starter theme lets you easily choose between a one-, two- and three-column layout. It supports the WP-PageNavi, Twitter Tools and Contact Form 7 plug-ins and also includes a built-in jQuery drop-down menu.

WordPress Skeleton Theme
The feature-rich WordPress Skeleton Theme has been developed to speed up and streamline your WordPress development. One of its outstanding out-of-the-box features is CSS support for the iPhone and iPad (both portrait and landscape); simply edit the iPhone.css and iPad.css files.

Paintbox CMS (demo)
Paintbox CMS is a grid-based CMS theme layered on my actual theme-canvas Paintbox. It comes with a smooth 960 grid layout plus some creative jQuery effects for content loading.

BLANK
Blank is a theme with all the functionality of a typical WordPress theme but almost none of the styling. The idea is that using this as your base theme is far easier than using one that is already styled.

(al)


© Paul Andrew for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: ,


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress