Often to publish content on the Web the best solution is the use of a Content Management System Platform. If you use a WordPress platform, or any other CMS, you may think that you have not to worry about SEO issues, because many content management systems are SEO-friendly. At any rate, in order to be sure that you are not loosing something on the route, you may make simple controls to plan the optimization of your CMS platform.

A good content needs a wide diffusion to become a quality content. So a strong linking campaing is almost necessary to spread the word, especially now with social revolution and realtime stuff.
A link is a suggestion, an advice, who somebody makes for providing good information to his “neighborhood,” or to his friends. Making good suggestions could mean the building of a strong reputation for those who promote the link and for the suggested resource. But don’t forget that, in order to be influential, the key always is in the actual value of the content and in the “authority” of who shares the link. For this reason, for example, paid links could be a bad choice to create trust on the Web (penalty principle of paid links).

To maintain and control the factors, which influence SEO methods and techniques, you need some useful tools… and now it’s the moment for shuting up my awful mouth and go to the point!

10 Useful And Effective SEO Tools

Backlink builder

It is an useful tools if you are searching for backlinks, it returns a list of quality potential links using as variable your keyword (theme).
As you know, we cannot get all the links of the web but only the best, so you’ll decide which of them are right for you.

Domain Dossier

It gives you an overview of your domain stats. This is very important and useful in order to discover where you can optimize your webhost or getting information about domain Whois record, DNS records, traceroute and so on. This service is good for monitoring, but don’t forget that a website is hosted on a server and you have to take care of it if you want to rank better.

SEOchat Keyword density

Considering that keyword density is not the key of success, you should not forget that keywords are important for webpage and the topic they talk about. So this is a great tool by SEOChat that let you analyze very well your keyword density and check the keyword/code ratio, very useful for page speed and relevancy of terms.

Rankquest Keyword Density

Another tool for keyword density, but it shows you how many times your keyword is repeated in the document, and how much it is relevant. It seems to be a very simple tool but really useful to have a wide consideration of your onpage factors.

Multiple Datacenter keyword position

SEOChat strikes again, with this tool you can discover some ambiguity among multiple data centers. Each of these may respond with different results for the same search query. If you see results that vary from data center to data center, it means that Google is in the middle of updating its search index. This information can be helpful for SEOs who want to observe various individual active servers for search engine optimization purposes, for the geolocalization of results and, above all, to understand how your website can attract more crawler visits for a better indexing.

Duplicate content

One of the SEO mistakes and nightmares is the duplicate content. I’m not talking about spreading a news on the web through social bookmarking services, but if you think to be copied by other folks, and they don’t link you, it’s time to make something. Duplicate content could erase all your SEO efforts!

Bad links

Bad neighbors on the web are dangerous, like in real life. They must be took away, always. The bad neighborhood is detected looking into other links domain and checking their statuse. If you are linking a spammy site, or you are linking a site with too many unbalanced content, this tools can help you to find bad neighbors and to organize your links in a better way!

Keywords

KeyMap is a complex keyword refining tool, aiming to help you discover new keywords. It is very useful to help you in finding something if you know the right keywords.

TweetVolume

As you remember in my last post, about real time search, it is very important to take a look to the TweetSphere, and what’s happening there.
This tools will help you to find the hottest topics. TweetVolume allows users to submit up to three words or phrases to search how often they appear on Twitter. The information can be used to measure popular words and phrases, which in turn, can help identify popular brands, issues and themes.

Link diagnosys

This is a very hot tool to understand what’s happening to your link building strategy. I just used this tool to analyze a SEO penalty and it helped me very much. Why? Consider you are posting a large number of good quality contents, but your ranking is not good. Probably you have to concentrate on a link building strategy to solve the because:

• you have to find more relevant links
• you have some bad quality inbound links
• you want a full link analysis report

LinkDiagnosis gives you this information, and you can use it with proficiency with other link building tools I have mentioned before.

Conclusion

This is just a strict list, I have not included some widespread ad known resources, because I focused on factors which can help you to boost your linking campaign focused on content. I suggest you to check all this factors just one time per week, or more often if you have an high posting-rate, because you should always have a Google-Ready website!

Download The Complete Social Media Icon Set

We want to provide useful freebies to our readers and for this reason, apart to explain how to create your own social media icon, you can download the complete set for free.

Create A Grungy Social Media Icon

This is a tutorial for beginners, in fact it explains some basic techniques in order to realize a nice social media icon. We hope that you can find useful this post.
First of all, you need the following material to complete the tutorial: Grunge Paper Texture from omnigenus.

Step 0

Let’s start, create new file with a size of 512×512 px, 72 dpi, RGB. Activate Ellipse shape tool. shift+click to create a circle.

Step 1

Add layer stye: Drop Shadow and Stroke (Layer > Layer Style > Drop Shadow and Layer > Layer Style > Stroke). Use settings shown below.

Step 2

In Layers panel, right click on the small “fx” icon at the end of circle layer and choose Create Layers. With this trick you can create the layers for the style, separating them from their layer.

Step 3

Create another circle, same size and layer style as previous one (or duplicate it). Move it to top right corner.

Step 4

Click Layer > Create Clipping Mask. This step will cut the second circle and put it inside first circle.

Step 5

Download paper grunge texture from deviantart. Place it above all layers and change its blend mode to Overlay.

Step 6

Click Layer > Create Clipping Mask. The texture will be inside the circle.

Step 7

Create a new layer (ctrl+shift+N) and with the Gradient Tool draw a white to black gradient. Change layer’s blend mode to Multiply.

Step 8

Again, click Layer > Create Clipping Mask.

Step 9

Hold down ctrl key and click all layers to select them. Hit ctrl+G to place all layers inside a group.

Step 10

Using Polygonal Lasso Tool to select a section of the circle as shown below in the image.

Step 11

Press ctrl+shift+I to reverse the selection.

Step 12

Click Add Layer Mask icon. This operation will add a layer mask to the group and it will hide unselected areas.

Step 13: Add Twitter’s Logo

So, we’ve just created a base for our icon. The next step is adding the logo of the web application. Go to Twitter and save its logo image.

In Photoshop, drag logo image to our icon file.

Step 14

For Twitter, we just need to add the “t”. So, erase “witter” text and press ctrl+T to resize the “t” of the logo.

Step 15

Activate Pen Tool. Choose shape icon from option bar and change foreground color to #4cd9ff. Carefully trace the “t” shape to redraw manually the logo.

Step 16

Add layer style Stroke to the logo. Use the settings shown below.

Here’s what we have so far.

Step 17: Save as Transparent PNG Icon

Now we need to remove empty areas around the icon. Click Image > Trim and click OK.

Click eye icon in front of “Background” layer to hide it. Now, we have a transparent icon.

Step 18

Click File > Save For Web & Device, choose Preset PNG-24 with Transparency. Click save to create a transparent PNG icon.

Conclusion

Our icon is flexible, we can use it for adding many logo: Facebook, Twitter, MySpace, LinkedIn, anything. All you have to do just add a character or the logo inside it. If you have other nice idea on creating icon, please share it in comment form below. Don’t forget: we love our reader, along this tutorial we will give you a free set of icon and its raw PSD file. Click here to download.

The theme has a two-columns layout with an unique soft grunge design and a nice featured news section, it includes many mordern qualities to create a nice sports blog/magazine. Sports News PVM is free to use in private and commercial projects because we love our readers.

Download Sports News PVM Theme for free

The theme is released under GNU General Public License. You can use it for all your web projects for free, without any restrictions and you may modify the theme as you wish. So if you like this resource for WordPress lovers, spread the word with a link to this article. Below you can download the theme + PSD source (.zip, 1.6 Mb – the font for the logo is available on Dafont: Hollywood Hills). You can also see the live preview of the our first free WordPress theme.

More Screenshots

Below you’ll find more screenshots of the theme. We hope you like the final result of our work.

Header Particular

Featured News Box

Post Container

More Information

The theme is packed full of nice features to encourage the readers to explore new posts an sections. Read below to know additional information on this freebie.

Features

• 1. Modern and beautiful web design
• 2. Tableless design and 100% CSS-based layout
• 3. Two columns of fixed width
• 4. Support post thumbnail images for 2.9
• 5. Widget Ready
• 6. XHTML 1.1 Transitional valid
• 7. The package also include the PSD-source files (logo included)
• 8. Commented CSS and theme PHP files for customization
• 9. Multi-browser compatibility. Tested under modern w3c compliant browsers Firefox 3, Safari 4, IE8, IE7 and Google Chrome 3

Installation

• STEP 1. Extract the files it contains. You need to preserve the directory structure in the archive when extracting these files
• STEP 2. Upload the theme to your /wp-content/themes/ directory
• STEP 3. Now go to Appearance >> Themes and activate the “Sports News PVM” theme
• STEP 4. Go to Appearance >> Sports News PVM Options and customize the theme

Sports News PVM Theme Options

• 1. Enable/Disable Featured news box in home page and choose the tag for featured posts
• 2. Show/Hide Ads section in the sidebar and customize all necessary URLs (images and links) and the title
• 3. Add your Feedburner link and your profiles on Social networks (Facebook, Twitter, Delicious, etc…)

Post Thumbnails

• Normal post thumbnail – As said the theme supports the new post thumbnail image system of Wordpress 2.9 and to use this feature, you must be within the post editing screen of your WordPress admin. Here, you can see a new meta box labeled “Post Thumbnail”. There is a link to “Set thumbnail,” which allow you to use the media uploader to load a new image. Once uploaded the image you can click on “Use as thumbnail” to add your thumbnail.
• Featured post thumbnails – For featured posts you can upload the images (big and small) to your site using the image upload feature on the post edit screen (in your WordPress admin panel).
  Once uploaded your images, scroll to the bottom of the post edit page and look for the “Custom Field” panel. Click on “Enter new” and type the word “feat_img” (big image) into the “Name” input field in your dialog box. Paste the URL to your image in the “Value” textarea input field of your custom fields dialog box and click the “Add custom field” button. Then repeat the operation: type the word “feat_img_sm” (small image) into the “Name” input field in your dialog box and paste the URL to your image in the “Value” textarea input field.

Size For Thumbnails

• Normal post thumnail image: size 200×200 px
• Featured post big image: size 340×189 px
• Featured post small image: size 75×40 px

Agreements

• 1. You can use them on as many domain names as you wish
• 2. You may use them for your clients’ projects / websites. Number of projects is not limited
• 3. You may not claim intellectual and exclusive ownership to any of the themes
• 4. You may not sub-license the original themes and their individual files to and with anyone else, unless a specific license within the theme states otherwise
• 5. You may modify them. However, you may not modify and then resell, unless the modified versions are drastically different from the originals
• 6. We reserve the right to refuse, cancel, or suspend service at our sole discretion and the right to change or modify these terms with no prior notice

Credits
All the icons which are used in “Sports News PVM” is free for use and Designed by following references: Socialize Icon Set, version 1.0 – Functions

What Is a Drop-Down Menu

Drop-down menu is a design element that allows the user to choose a value from a list of possible options.
It seems, at a first glance, a simple navigation menu, but when your mouse arrow points an item of the menu a magical two-dimensional panel appears through a drop-down effect. The panel provides more navigation options for the users and, often, these options are organized in groups to emphasize connections among items.

Its aim is to provide a tool for digging into the sections of the website in a clever and tidy way. In order to simplify navigation, the drop-down menu has to show the list of items, contained in the panel, at once without the need of scrolling.

Drop-Down Menus in Recent Web Design

This kind of navigation menu has the great asset of displaying at once more navigation options. So it could be a great solution when the designer has to organize several categories, products, sections or to reduce the number of steps to do an action (e.g. sign-in or login forms).
It has the big task of helping users to navigate the website in a correct way, it should provide a complete view of the contents and sections of the web application… and it would seem perfect for many web applications and, in fact, it is widespread. Below we can see some examples in wich a drop-down menu might be useful.

Organize Topics for a Web Magazine or a Website for Breaking News

Websites with a large amount of information and articles, like mirror.co.uk and sportsillustrated.cnn.com, require an easy-to-use navigation menu. A well-done mega drop-down menu might be a working solution in this case.

Arrange and Organize Categories and Tags in a Articulate Blog

A brilliant blog with good posts and a fresh design needs an effective navigation menu and, when there are several topics, a fresh drop-down effect for displaying subcategories is the best solution to create an impressive menu.

Show Several Products in an E-Commerce Website

In e-commerce website design is essential a clear presentation of products and services, and a limpid organization for the categories of articles. The drop-down menu is always a working feature for the on-line stores.

Display Login and Sign-Up Forms

The registration on a website is an operation that often annoys the user. A drop-down can be a good solution to build a quick sign-up form for saving space on your layout and for creating an user-friendly, one-step, module for the registration.

When there is the need of saving space on our home-page, a drop-down box is useful also for a login form. The famous microblogging service, Twitter, adopts a drop-down effect for the sign-in button in the home page.

Multi-Level Menu

Many usability experts recommend to avoid the use of drop-down multi-level menus because they aren’t user-friendly. In my honest opinion, the key isn’t to understand if a multi-level drop-down menu is usable or not, but if it’s possible to make it usable.
Porsche.com use a well-done multi-level menu and, friends, can you say that it isn’t usable? No!

Issue Behind Drop-Down Menu

It would seem that the drop-down menus are the resolution for many navigation problems. Caution: if something shines, it doesn’t mean that is gold.

Low Visibility for the Links

A drop-down menus is very useful to save space on your layout, they take up just the area of the title (or main category) in the layout, but is this a real advantage?

It’s evident that the “secondary” links (in the panel) don’t have a great visibility, they practically are hidden and only an interaction with the mouse pointer can activate the panel. A common mistake is that of not indicating the presence of a drop-down panel, thing that can be done through a little arrow or a similar symbol.
A hasty choice, in planning your navigation menu, may be counterproductive for the usability of your website.

Difficult Organization of the Navigation Options

An hard thing to do when we plan a mega menu is to organize the options within a relatively small space. A working approach is to separate links into groups of navigation; a general rules is of not offer huge groups with numerous options that are hard to scan.
We see, often, huge panel with many options that confuse the users. You should consider other design elements, and not a drop-down navigation menu, when you have to show a lot of information for a single item (e.g. a section for showing events).

If the menu panel have a huge list it can be very high and wide and, so, there is the possibility that low-resolution screens show only a portion of the mega drop-down.

Designer vs Response Time

Building a mega drop-down navigation menu we have to deal with the mouse movement, why?
There is two ways for displaying the panel: first, hover to activate; second, click to activate.

Remember that web interface elements should render within 0.1 seconds to provide users a complete sensation of control.
In the first case the panel appears when the pointer is over the item on the navbar, and to keep it active, the mouse arrow has to be over the menu to scan all options.
Now consider the normal activity of a user on a web page: the mouse pointer is in movement and at any passage over the drop-down menu it will cause the opening of the panel (0.1 seconds), your interface will become absolutely unusable for the simultaneous scrolling of several panels. So we can’t make the response time too fast to avoid the screen flicker. A good choice could be to add a delay of 0.3 – 0.5 seconds, so the pointer has to remain stationary for 0.4 – 0.6 seconds before of displaying the complete panel (a sort of fade-in).
Besides if the user lose the focus on the menu, or the user temporarily takes the pointer outside the active area, the panel disappear. To avoid that accidental movements of the mouse out of the active area can hide the panel (diagonal problem), we should plan the same delay also to hide the box.

In the second case the users have to click twice to open and close the panel, in this case there isn’t the problem for the movement of the pointer.

Designer vs User Behavior

It is well-known that the user don’t read, they scan a web page, so the designer have to emphasize the elements that might attract the user. A well-designed navigation menu is essential to stimulate the user at visiting more sections of the website.
A drop-down menu couldn’t be direct and intuitive for the visitors. They always choose the easy way and not the best way to obtain a gratification (an interesting content) and a big (and hard-to-scan) panel might not represent the easy way for our user.

Enjoy It Responsibly!

Modern web design is influenced by some misused and abused trends. Often the designer’s choices, in building a working web interface, aren’t completely focused on the purposes of the website and on usability; but they are driven by the frenzy of using new trends and techniques and, in most cases, a simple design element works better than a complicated and new solution.

We have just seen as a drop-down menu might be really useful, but it must be perfect to work well. So the designer has to find the right balance for his navigation menu and he has to understand which is the right choice between a standard navbar and a complete mega drop-down menu.

Below we can see some simple solutions that simplify navigation without the use of drop-downs.

Smashing Magazine – A simple navigation menu with main categories and sub-categories for the most famous web design magazine.

Ugmonk – A nice and clear solution for a navigation menu.

A last thing. It has been proved that a well-designed and sexy drop-down menu has a great appeal on the clients, it is sexy and make dynamic the website, but you must describe strengths and weaknesses to your client to allow an aware choice.

Showcase of Interesting Drop-Down Menus

In this presentation, you’ll find a variety of interesting drop-down menu designs.

Guitar Hero

Second Life

Intuitive Designs

BMI

Audi

Fuel Brand Network

Fuel Your Creativity

Giraffe Restaurants

Little Kids Bedrooms

Aviary

mtvU

The White House

MTV

Food Network

EA Video Games

GoMediaZine

Porsche

Media Temple

Mac.AppStorm

Sony USA

Incase

Republic

Owl

Philadelphia

Boxee

BuySellAds.com

Tuts+ Network

Psdtuts+

Mirror.co.uk

The Ad Feed

Designmess

Minimalist Design Magazine

Consorzio Creativo

Useful Tutorials to Learn How to Build Drop-Down Menus

Below some useful resources that may help you in making stunning drop-down navigation menus for your projects.

Mega Drop Down Menu w/ CSS & jQuery

Sexy Drop Down Menu w/ jQuery & CSS

Perfect signin dropdown box likes Twitter with jQuery

Incredible Drop Down Menu Solution With CSS Only

Sliding Jquery Menu

Take your time to read these fantastic articles written by helpful people and discover as the design community has said “Welcome!” at 2010.

That’s all guys… I hope you’ll find useful these bookmarks.

Amazing Tutorials and Tips for Web and Graphic Designers

Create a Gnarly Snowboarding Themed Web Design

How to Create a Cool Anaglyphic Text Effect with CSS

Design a Surreal Desert Scene in Photoshop

How to Make a Vibrant Portfolio Web Design in Photoshop – Design Instruct

How to Make a CSS Sprite Powered Menu

The New Hotness: Using CSS3 Visual Effects

Halftone Navigation Menu With jQuery and CSS3

How to Design the Apple iPad in Photoshop

Design a Colorful Retro Futuristic Poster in Photoshop

Reader Tutorial: Easy Digital Painting Illustration in Photoshop

Create a Grungy, Translucent Web Portfolio Design

Articles and Interviews

An Interview with Designer & Blogger Jon Phillips

Curating Comments Threads

Principles of Great Design: Craftsmanship | Design Informer

The Risk of Being Unique – The Logic of Design Styles

15 Invoicing Tips for Designers and Freelancers | Vandelay Design Blog

Design Trends (Predictions) in 2010

Interview with Little Box of Ideas Design Blog

Freebies and Resources

20 Must Have WordPress CMS Plugins

25 New High Quality Free Fonts

20 Sets of Photoshop Brushes for Vintage Style Design

25 Fresh, Clean and Unique Wordpress Themes – Speckyboy Design Magazine

29 Resources for Freelance Designers Operating on a Tight Budget

12 Awesome, Fresh And Free Web Social Icons Sets

Showcases and Inspiration

11 Most Popular Blog Design Styles (With Examples) | Web 2.0

70 Gourmet Logos Of Food Restaurants Bars And Grills

40+ Examples of Horizontal Scrolling Websites | Naldz Graphics

Single Page Website Designs: 70+ Latest Examples

Beautiful Helvetica Inspired Artworks (Fanart, Posters, Wallpapers & Icons)

Progress Trackers in Web Design: Examples and Best Practices

55 Trendy Web Design Interfaces From Deviantart

WebSite of The Month – IndoFolio.com

IndoFolio – The Portfolio of Gopal Raju

Must-Follow on Twitter

Fabio Marasco (marbio) on Twitter

Dainis Graveris (1stwebdesigner) on Twitter

ThinkDesign (ThinkDesign) on Twitter

Must-Read, Blogs/Magazines of The Month

Tutorialzine – PHP MySQL jQuery CSS Tutorials, Resources and Freebies

PelFusion.com

PSD Vault – Extra Unique Adobe Photoshop Tutorial

The World Wide Web is a privileged channel for spreading good ideas and, in this time of crisis, it could be very useful to improve a business. Internet provides many possibilities to enhance, in different ways, our activities and one of this surely is the electronic commerce.

Here the first words on Wikipedia to describe the electronic commerce:

“Electronic commerce consists of the buying and selling of products or services over electronic systems such as the Internet and other computer networks. The amount of trade conducted electronically has grown extraordinarily with widespread Internet usage. The use of commerce is conducted in this way, spurring and drawing on innovations in electronic funds transfer, supply chain management, Internet marketing, online transaction processing, electronic data interchange (EDI), inventory management systems, and automated data collection systems.”

Issues Behind An E-Commerce Website

The main goals for an e-commerce website are to sell and promote products and services. This kind of website, much more than the others, should be optimized to create a perfect user experience.

Image three visitors in a real store: the first, a pretty girl in a fashion store who are looking for new and nice clothes; the second, a crazy nerd who wants the last electronic devilry; the third, a normal guy interested in deals and discounts.
It’s evident that these potential customers need different things, and for this reason the expert dealer make use of various approaches to sell his products.

On-line the situation changes. There isn’t the direct contact between the expert merchant and the client and the front-end web developer has to create a working selling machine foreseeing the users’ reactions. As web designers, we should build a web interface that shows the right products, in the right place and in the right way to drive the customers to the “Checkout.”

There is another aspect. Our three potential buyers are looking for different products and probably they will seek in specific stores to find them. A pretty girl rarely buy her nice clothes in a generic (and nonexclusive) store, rather she trusts in a “famous” fashion store with well-designed showcase and an accomodatived salesman; our geek knows what he wants and an electronic megastore (direct and fast) could be the right choice for our friend. Who are looking for discounts need a different kind of “trust”, they want to buy good (and notorious) stuff at a low price.
On the web one of the most difficult thing to do is just to create “trust”, and through an e-store we want to sell something; clearly if the visitors don’t trust us, our mission will fail. There is an hard work for us in making a good interface for an e-store website, this work consists in understanding the target and what kind of customer we should engage.

It’s also important to evaluate if the on-line business can work, for example it’s arduous to presume that a worldly girl can buy expensive clothes on-line without to dress them at least one time (or without a good knowledge of the product), but she could buy accessories, bags and t-shirts; on the contrary it’s probably that the our young geek looks for his electronic gadget on-line. So, don’t try to sell “impossible” things on your e-store, things that the consumers with difficulty buy on-line. If you are in a business with difficult customers, be informative and provide more details and images on your on-line store.

A built-to-sell website should also provide information and announcements about products. Remember that the goal is to improve the sales, but not only on-line. In fact, creating interest on your articles through well-done descriptions and useful notes about new ways to use products (or explaining features that might not be commonly known) you can also improve the trust of the visitors in your e-store attracting clients for the future.

So, planning and designing a web interface for an on-line business you should follow three main guidelines: define your aims; design a layout for the specific target; build your website to create a perfect user experience; be informative, be serious and and your clients will have trust in you.
The main objective? You have to convert your visitors into real customers!

Note: the following tips are just some crucial points, on which, in my opinion, it is dutiful making a reflection to plan a good interface for an e-commerce website.

Focalize The Target And Choose The Right Style

Often we have seen unattractive or poorly designed e-commerce websites, but a professional looking and an opportune style is necessary for building a good presence on-line.

The Perfect Style

Define your target and what kind of consumer could buy from your shop, then you must design for them.
For example if you are selling retro football shirts it could be a good idea to create a vintage design using photos of glorious moments of the past in the history of football.
A perfect style for your target means to use an opportune color palette, a good typography and some nice design elements. An attractive website, that communicates emotions, is a good way of saying “Welcome!” to your visitors (and potential buyers).

Dog Funk – A soft grunge style for a website that sells snowboarding clothing and gear.

Toys Rus – Bright colors and a fresh looking to sell toys.

Organic SuperMarket – Grass texture and a stunning animation to promote an irish supermarket.

High-Quality Photography

Maybe the most evident trend in e-commerce website design is the use of large and high-quality images. Many designers use photos with awesome models (or simply with the products) in a clean and fresh layout to generate interest and promote the best articles. This solution might be perfect in many cases from the fashion website to the on-line store where to buy books and DVDs.

Rapha – Black and white photography in a clean layout.

Dune – Large high-quality photo for a minimal fashion website.

Republic – Stunning background photo to highlight the “New Arrivals” section.

Make your Website Usable And Boost The User Experience

An on-line store must be easy-to-use to generate regular sales, but to make a perfect selling machine an usable website is not enough. You should generate curiosity and interest in your users, you should drive the visitor in a pleasant virtual tour on your e-store.
The front-end web developer can use more tools to enhance usability and to make comfortable the navigation for the user and here we analize some solutions that might make user-friendly an e-commerce website.

Highlight Your Best Products

Make sure you’re highlighting your best products (best sellers, new arrivals, special categories of products etc…), many well-done websites use featured sections where to show their most attractive articles. A good slideshow effect helps to display more contents and for this reason the home page of many sites make use of javascript (or flash) techniques to create short galleries.

Surfride – This site use a nice slideshow gallery with large images to promote some products and discounts.

Chrome Bags Store – This is another example of a good use of slideshow in a very nice layout.

Use Call To Action Buttons

Entice your user to visit more products, or interesting stuff, using nice call to action buttons and good “hover effect” for clickable images.

Nau – Here a nice hover effect for clickable images that makes fresh and “dynamic” the website.

Cellar Thief – Some strategic call to action buttons in this layout.

Chocri / The Autumn Film – Other examples of call to action buttons.

Simplify The Navigation and Organize Your Products

Categorize and organize your contents and provide useful tools to your users to allow them an easy navigation. This is a very important point, if the shoppers don’t find their favourite products they don’t buy and our mission fails.
A good and working navigation menu is strictly necessary to boost our interface, but to manage huge lists of categories could be complicated. To solve this problem we can use a clever mega drop-down menu (some sites use also simple drop-down lists – GUI widget – but, in order to enhance usability, this isn’t a good choice).

Republic – Great example of mega drop-down menu implementation.

Zumiez – Another example of a well-done drop-down menu.

Provide An Effective Search Function

A good navigation menu isn’t sufficient. The site search function must be unexceptionable and you should also consider the possibility of adding advanced options to obtain precise results, like search by category or brand and other filters to refine your search.

Borders – Nice search box in the header.

Liga Retro – Search form with some additional options.

The Perfume Shop – Search results with an useful filter system.

Use Breadcrumb Trail

Another important feature to add to our website could be a breadcrumb trail, a navigation aid that gives users a way to keep track of their location on the site. It provides useful links to reduces clicks for returning to higher-level pages.

Master Of Malt – Example of breadcrumb in e-commerce web design.

Big Brown Box – Simple horizontal and text-based breadcrumb trail navigation.

Apple Store – The solution of Apple Store to reveal the user’s location.

Create An Exhaustive Product Page

Some statistics says that more of the user’s time is spent to know more about products. The lack of detailed article information is a common mistake that you can avoid creating an accurate product detail page in which to provide useful data (and accurate technical specifications).

You can also include related products on your product description pages to promote more articles of the same category.

Rapha – A complete product detail page.

Master Of Malt – A deatiled product page.

Bridge 55 – Deatiled images on this website.

Shopping Cart

The shopping cart is a crucial part of your e-commerce website. It must allow users to add (and remove) multiple products and to edit the quantities of items. A well-done shopping cart allows users of adding a product to their cart without leaving the page they’re on (or to provide a return-button to the last page they were on).

An effective use of icons and symbols could be necessary, in shopping cart as in other sections (like lists of features for the products), for helping the user to assimilate information more efficiently.

Crate And Barrel – Clever solution. A fixed toolbar on the bottom of the page (using Flash).

Dog Collars – Shopping cart using a modal window.

FireBox – Nice basket on the sidebar.

Checkout Process

The checkout process must be transparent and it must provide all details to complete correctly the payment. It should have as few steps as possible and they must be clear and easy-to-read.
A nice progress tracker could be a good solution to boost your checkout progress page(s) and keep it tidy and sequential.

Make sure your users know that your website is secure and that their privacy will never be compromised. Be transperent including accurate shipping rates details and precise information about the taxes; you should also provide several options for the payment (PayPal, Credit Cards, Google Checkout etc…).

It’s a good idea provide some quick checkout FAQs to simplify the communication with your users.

FireBox – Progress tracker for a checkout page.

Cafe Press – Another example of progress tracker.

Dog Collars – Example of checkout page.

Take your users (customers). Be serious, Be informative

We have understood as to create a strong trust in our users is very important to maintain a business on-line. Sure, a well-done user interface is a good presentation for your activities on the web, but consumers need safety to buy something on internet. With some tricks you can improve your reputation.

Provide Details About You and Your Company

A customer wants to know the real company (or the man) behind the e-commerce website, they are leaving their personal information (and their credit card data). They want to be sure that if there is a problem they will directly contact a real person to solve the complication. Put your contact information in a strategic position on every page of the site, provide all necessary details: email address, phone number, mailing address etc…

Write accurate pages with FAQs, privacy policy, terms of use, detailed information about shipping options, payments and… your return and exchange policy. This last point is really important: “If you are not satisfied with the merchandise you received, we are more than happy to accept returns or exchanges within 90 days of the original order” are words that sound good for the consumers and they will have a real trust in you if they read something like this on your website.

Create An Effective Communication On The Web

Well, to sell effectively you need to offer solutions and useful services to your customers through a well-designed website, but you also need several channels of communication through wich to spread spontaneous (and positive) words on your products. In order to improve your presence on-line you have to plan a clever action on social networking and bookmarking websites: creating and managing your accounts on this kind of web service, providing sharing-buttons to your users, engaging your “audience” and encouraging happy clients to share your contents through the social networks.
“Contents” doesn’t mean only the product details, but a complete description of the product with reviews and comments from users.

An on-line business can often benefit from having a direct communication with potential customers. To seriously boost your presence on the web you should consider to start a blog; to have a direct line with your customer, to facilitate the spread of your links (and products) and to receive feedbacks.

Another brilliant idea? Use video demonstrations to present your products (or services) and in a few minutes you can show more features of your high-quality stuff.

Finally, remember to make your e-commerce platform SEO-friendly.

A Showcase Of 65+ Well-Designed E-Commerce Websites

Below a massive collection of beautiful and working e-stores. They might be a good source of inspiration for your next works. Enjoy it!

Surf Ride

Me and Mommy-to-be

Big Brown Box

Itself

Lallevopuesta

Tillymoss

Fugitive Toys

One Horse Shy

Chrome Bags Store

Clothing at Tesco

Green Label Organic

Cellar Thie

Shirt Fight T-Shirts

Dog Funk

Dog Collars

20×200

Duchy of Cornwall Nursery

Piccadilly

Toys Rus

Master of Malt

Nature & Découvertes

Schokolade Von Chocri

Japnó Shop

Wood And Beyond

Ukecosas

Torn Robes

Yellow Bird Project

La Patate

Shirt City

Page CXVI

Opera Magé

The Autumn Film

Cosmicsoda

Borders

Liga Retrò

FarFetch

Weta’s Online Shop

Ride Four Ever

Hello, Bird!

Red Velvetart

I’m Walking

Feel Unique

Organic Food Ireland

Republic

Online Grocery Store

Tiger Leisure

Fat Face

Organic Vegetable Seeds

Shoes And Handbags

Shop Rush

Dune Shoes

Nau

Pixie Market

Hmv

Fire Box

Design Collectors

Cafe Press

Zumiez

Pure And Little

Apple Store

Rapha

Bridge 55

Crate and Barrel

Nineteen 47

Tommy Hilfiger

Trolley Cards

Plus De Bulles

Teesey

The Perfume Shop

9 Solutions To Build Your E-Commerce Platform

Here a list of 9 different solutions to build your own e-commerce website. Read the features and technical specifications of each of the following options to choose the opportune platform for your project.

Open Freeway

Freeway is an Open Source e-commerce platform. It doesn’t just sell products but extends to sell in some very fancy new ways and is very configurable.

Magento

Magento is a robust e-commerce software application designed to be simple and highly-customizable.
Magento’s modular architecture puts the control back in the hands of the online merchant and places no constraints on business processes and flow.

Open Cart

OpenCart is an open source PHP-based on-line shopping cart application. A robust e-commerce solution for internet merchants.

osCommerce

osCommerce is an online shop e-commerce solution. It offers a wide range of out-of-the-box features that allows on-line stores to be setup fairly quickly with ease, and is available for free as an Open Source based software.

PrestaShop

The PrestaShop e-Commerce Solution, despite its technical sophistication and advanced functionality, is very light (around 2 MB not including translation files), so it’s easy to download, install, and update.

Zen Cart

Zen Cart truly is the art of e-commerce; free, user-friendly, open source shopping cart software. The ecommerce web site design program is being developed by a group of like-minded shop owners, programmers, designers, and consultants that think ecommerce web design could be and should be done differently.

Drupal and UberCart

Ubercart is an open source e-commerce solution fully integrated with the leading open source content management system, Drupal. This is a killer combination for anyone looking to build a community around a product, sell access to premium content, offer paid file downloads, and much more, all while maintaining a seamless connection to your users.

Drupal E-Commerce

Drupal e-Commerce is a package of modules to let you create your own online store. It is totally free, open source, rich featured and flexible.

WordPress and Ecommerce Plugin

The WordPress e-Commerce plugin is a state-of-the-art e-Commerce platform with a focus on aesthetics, web standards and usability. It is both free and priceless at the same time.

The main objective of this new version is to make usable and immediate the website. I have worked hard to improve look and feel, holding some peculiar elements, to simplify the layout and to enhance the browsing and the reading.
So what’s new in this version?

New Logo

The PV.M Garage has not had a real logo. Sure, since its launch the website has always used a face with the glasses as part of its image, but it wasn’t a “working logo”.
So the final concept for the new logo mark was the combination of the old icon and a freah typography.

In a second moment it has been adapted for the new PV.M Garage design using a textured background and some “grunge effects”.

Header and Menu

I love large and working header and in my opinion it should contain useful features that allow a quick navigation. For this reason on the header there are serch form, quick menu to know more about the site, navigation menu and links to stay connected with the garage (Twitter and RSS Feed).

Search

Menu

Navigation Menu

Twitter and RSS Feed

Main Container e Sidebar

This sections was created with a basic scheme: two columns, the main container for the posts and the sidebar to show further information.
This part of the site is quite similar to the old version, but metadata for each post are displayed in different way.

The sidebar contains sponsors, community news, the archive and some useful links. It is classic, simple and well-proportioned.

Footer

The footer is completely up-to-date. Yes, It is huge… maybe this is a challenge, but I’m sure that it works!
The last trends in modern web design show a frequent use of this kind of footers, but the user’s reaction is unpredictable. My goal is to present other important contents and information in a clean and fresh layout… my hope is that you like it.

That’s all folks guys! Now a special gift for you…

Special Giveaway: 3 free copies of the Smashing Book

The Smashing Book is a printed book about best practices in modern Web design. The book shares technical tips and best practices on coding, usability and optimization and explores how to create successful user interfaces and apply marketing principles to increase conversion rates. It also shows how to get the most out of typography, color and branding so that you end up with intuitive and effective Web designs.

Here at PV.M Garage we will give away a total of 3 copies of this great book. This is only a simple way of saying thanks to the readers for being part of the our community. Leave a comment about the PV.M Garage Redesign and you could win a free copy of the Smashing Book.

Do you know Concept Feedback?
It is a free design review community for websites, logos and more and for the three lucky winners there is also a free premium concept on this great service.

ConceptFeedback.com, the four Steps

The idea for Concept Feedback popped in to my head last January. At my day job, I’m a marketing director for a small company just west of Chicago. Whenever I would finish a design-related concept at work (a new website or advertising campaign), my boss and I would end up emailing it out to friends, relatives and co-workers for feedback. This process would repeat itself each time we had something new, and the feedback turned out to be rather limited and ineffective. We had just finished a new ad campaign and I started to think “hey, wouldn’t it be cool if there were a place where I could exchange feedback with other marketers and designers?”. Over the next 3 months, Concept Feedback evolved from a simple idea in to a robust, active feedback community. Here are the 4 steps I took make it happen; steps I believe are universal for anyone starting anything:

1. Research and “test the waters”

As soon as I had a concrete idea in my mind, I started to do some basic research on the internet. Were there other feedback sites out there? Was there interest in getting feedback on designs? I spent a few days examining websites and further solidifying my vision for the site, how it would work and who the target market was going to be. I developed a short presentation using Google Docs and presented it to DevBridge, a web development firm in the area. Once we came to an agreement, we posted a simple “promo” page with a signup form online and started inviting potential users to check it out. For minimal investment, we were able to quickly determine if Concept Feedback was a valid business idea, or just a pipe dream. It turned out people really were interested, which led us to the next step.

2. Develop and launch quickly

Once we were relatively confident that Concept Feedback would succeed, we started developing the site full steam ahead. We wrote a detailed spec, including all of the features that would be available on the site. Once the spec was complete, our designer created a mock-up. Several revisions later, we a had a final concept and the coding began. A month or so after starting the development process, Concept Feedback was live. Despite a number of remaining questions we had about the site and how it was going to work, we decided to launch as soon as possible and let our users determine the rest. Once it was out there, we began to get a much better picture of our “customer” and what they want. For those nerds out there who are interested, Concept Feedback runs on Microsoft .NET framework with heavy focus on AJAX using jQuery framework. We are using a custom data access layer and implement object relational mapping technique. Data is stored in a Microsoft SQL Server 2008.

3. Adapt

By launching quickly and observing user interactions, we were able to embrace a rapid development mantra (for more on rapid development, check out this blog post), making the additions and improvements that our users dictated, not the features we initially thought were important. This is a key distinction, and something I feel has made us successful in the early stages. We have already added and improved a number of features, replaced the entire framework and updated our marketing approach, all based on the feedback and activity on the site. The beginnings are a delicate and critical time for any website or startup, that’s why it is so important to be able to adapt to your users. Those who don’t adapt, die.

4. Generate growth

Unfortunately, the popular, and oft misquoted phrase from Field of Dreams, “build it, and they will come”, doesn’t hold true online. Developing a large and active community takes a lot of time and effort – I’ve spent countless hours promoting the site to achieve a critical mass of users. Success doesn’t come overnight, and despite larger than life examples like Facebook and Twitter, everyone starts at zero. However, the good news is, with some hard work and determination, growth will come, along with the rewarding feelings that comes with it.

For all of you out there looking to start something new or revive something old, I hope these tips help. If you have development tips or stories of your own, I’d love to hear them!

To learn more Concept Feedback, or to register free online, visit www.ConceptFeedback.com. For questions and comments, please contact Andrew Follett at andrew[at]conceptfeedback[dot]com.