Running an e-commerce website is a never-ending task, from trying to squeeze that extra bit of conversion rate out of the check-out page to figuring out which referrers give you the best traffic. There’s also a plethora of tools out there to help you achieve your goals. But which ones do what, and why should you use some of them? This article introduces some of these tools and offers a tip or two on how to use them.

If you own or operate an e-commerce webs, you’ll find one or two things that you haven’t tried before. If you’re new to e-commerce, this article should give you insight into some of the possibilities available to you as you enter the market. A plethora of merchants out there could benefit from lower-cost e-commerce help and advice. Covered in this article are analytics tips, visualisation tools, product page tips, checkout tips,li>4 testing tools to try right now and a final tip.

This article is only the tip of the iceberg. If you have any tips on usability, the check-out process, product pages, analytics or testing, please add them to the comments, so that this article becomes even more useful to readers.

[Offtopic: by the way, have you already visited Smashing Magazine's Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]

Analytics

Analytics are the key to knowing what’s going on with your website. This section gives five tips for using Google Analytics to get the most out of your stats. If you have a high-traffic e-commerce website or wish to get even more in-depth with analytics, it might also be worth considering some higher-level analytics packages such as Coremetrics, Omniture or Webtrends.

We’ll focus here on more advanced analytics with the Google tool and assume that you know the basics of metrics.

Analytics Tip 1: Advanced Segments

Advanced segments allow you to do everything you…

Although much valuable information for all sorts of web and print professionals can be found online, it is often difficult to weed through all the noise and find good quality content. I believe it’s vital that professionals in different creative fields supplement their online learning and research through well-edited and high-quality print publications.

Print magazines, more often than not, are well-researched and are headed by top-notch editorial staff, usually containing information and resources on the cutting edge of their respective industries’ trends and happenings.

To that end, to help you fulfill part of your offline research needs, I’ve compiled a list of print magazines that are of interest to professionals in three different categories: Web Designers, Digital Artists, and Photographers. And be sure to comment so you can tell us your personal favourite print magazine, if you don’t see it listed here.

You may be interested in the following related posts:

• 45 Incredibly Useful Web Design Checklists and Questionnaires
• Professional Web Design Forums
• Useful Podcasts For Designers And Developers
• Useful Web Design E-Mail Newsletters

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

Magazines for Web Designers

.net Magazine / Practical Web Design

.net is the world’s best-selling magazine for web designers and developers, featuring tutorials from leading agencies, interviews with the web’s biggest names, and agenda-setting features on the hottest issues affecting the internet today. If you’re serious about web design, then .net is the magazine for you. This is easily the best and most important magazine for web professionals, and it should be noted that .net is sold as Practical Web Design overseas.

Visit the .Net Magazine / Practical Web Design official website

Web Designer

Web Designer will help you design and develop stunning websites, providing exclusive interviews, professional advice, behind-the-scenes features with top developers…

The idea of working from home every day sounds awesome, doesn't it? No commute. No office politics. No chance of someone taking your stapler. That was my life for the past four years, and it definitely had a lot of perks. I walked to work (upstairs), the dress code was always casual because I said so, and I often had office visits from my kids. But it wasn't long before I started to feel a little off my game. Ideas weren't flowing, I seemed to have designer-block more often, and my level of frustration was growing.

I soon realized that my lack of collaborating with other people was hindering my ability to generate good, innovative ideas. I don't care if you're a designer, developer, UX designer or in a completely different field, collaboration is important. The all-knowing Wikipedia says it like this:

"Collaboration is a recursive process where two or more people or organizations work together in an intersection of common goals - for example, an intellectual endeavor that is creative in nature-by sharing knowledge, learning and building consensus." (Wikipedia)

In less formal terms, put a group of kindred spirits together, give them the freedom to learn from each other and create ideas together, and the result will be something that is far greater than what each individual could produce alone. Simple, yet amazing.

I was first captivated by the importance of collaboration to the design process after watching an episode of ABC's Nightline from 1999. During this particular episode they profiled the product development company IDEO. The challenge: redesign the standard shopping cart in just five days. Nightline followed the team at IDEO each step of the way through the process that they use on almost every product they create. The end result wasn't perfect, but it was a stunning picture of what a team of people could do by putting their heads together and feeding off of the collaborative ideas of each individual.

Maybe you're working alone like I was, or you might be in an office environment where collaboration only happens around the water cooler or in the kitchen. Here are a few ideas that will help you, or your team, on the path to greener collaborative pastures.

Crazy Ideas Wanted

You'll be shocked at the ideas that a few people, a common goal, and a whiteboard…

Every few weeks, the web design community stirs itself into a tizzy rehashing the same old debates. We were just getting past the "design in the browser" brouhaha when the "designers must code" tweets (and follow-up blog posts like this one) started cropping up again.

If you haven't seen it yet, you're probably holed up in some #snowpocalypse ice hut. The controversial tweet came from Elliot Jay Stocks, a talented designer with over 9,000 followers.

It was exactly the kind of off-the-cuff remark that incites riots and comment wars. It inspired lots of back-and-forth between players large and small. It's hard to articulate any complex ideas within 140 characters, so it's not surprising that most of the responses were shortsighted knee-jerk reactions.

I'm not going to throw around metaphors comparing web designers to architects, TV producers, photographers or musicians. I'm not going to rehash the rehashing of an already played-out debate. Instead, I want to focus on the nature of our arguing. Why is it that designers, who should be open-minded and creative in our thinking, can't seem to see beyond black and white? And why is web design as polarizing as politics these days?

It's another false dilemma, and watching everyone pick sides and lob dodge balls across the fence is getting incredibly boring. Everyone wants to argue about these issues as if there are only two answers. Design everything in the browser (die, Photoshop, die!), or design every last detail in Photoshop. Designers must excel at markup because it's essential to know your medium's limitations or Designers shouldn't learn code because it will tether their creativity.

These choices are not mutually exclusive, and we all know it. Very little of what we do can be labeled as right or wrong. Unless you're a template churner every project, client, and technology requires a slightly different solution. It's part of what makes web design so much fun. So, aside from the traffic generated by rehashing controversial subjects, why are we all arguing about the same thing every few months?

Dichotomous thinking is our brain's way of simplifying an argument down to its basic elements, choosing a side, and moving on. We need to fit everything in…

The hip trend these days is to use in-field labels on form fields. What are in-field labels you ask? I'm sure you've seen something like this recently:

Subscribe

This is a pretty nice effect, and it can really help to save space on forms. There are a billion different ways to implement this, and I don't suggest you use the example from above because that was just a quick way to show the effect. So let's walk through a couple of different implementation approaches and figure out the best way to implement this feature.

Title Attribute

This is the approach that I used to take. I would add a title attribute to the input element and copy that value into the value attribute.

Example

<input type="text" name="example-1" title="Email Address" />

Without JavaScript, this field just looks like an empty form field:

So let's add a bit of jQuery that copies the title attribute to the value attribute. When the field is focused, if the value of the form equals the title attribute, we will clear the value. When focus is removed from the field, if the value of the form equals nothing, we will add the title attribute back in.

Here is the JavaScript necessary to complete something like that:

$(':input[title]').each(function() {
  var $this = $(this);
  if($this.val() === '') {
    $this.val($this.attr('title'));
  }
  $this.focus(function() {
    if($this.val() === $this.attr('title')) {
      $this.val('');
    }
  });
  $this.blur(function() {
    if($this.val() === '') {
      $this.val($this.attr('title'));
    }
  });
});

So that gives us the desired functionality, but then we need to think about what happens when you submit the form. If a user doesn't fill in any form fields, it is going to save all of those title attributes as values to the form. You could go back and check to make sure that the value does not equal the title attribute before allowing the form to submit, but that adds additional work.

I do like adding the title attribute to form fields, because I think it is useful to show the label for the field when you are hovering over it. But clearly, this approach is not ideal.

Placeholder Attribute

With HTML5 becoming more and more prevalent, we get the placeholder attribute. It's sole purpose is to do exactly what we want:

The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data…

Even with the EE 2.0 release in December, I think the best ExpressionEngine event in 2009 was the rise of Travis Schmeisser's Structure. While 2.0 lays the groundwork for a bright future, in the short run it's more of a step backwards because so few of EE's amazing community-built addons have been ported so far - even with new functionality, a 2.0 upgrade takes away far more than it gives at the moment.

In contrast, the Structure module immediately makes major improvements to your site's UI, construction, and template codebase, and it also plays nice with other addons, creating a faster, smarter EE experience. No software I installed last year saved me as much time and effort as Structure did, and Travis deserves all the credit for that (and he got quite a bit, including Devot:ee's Module Of The Year award)

So what is Structure, and what about it makes EE so much better?

Structure is a module that overrides EE's URL/template setup and creates its own hierarchy of pages and "Listing" pages, along with a new interface that's meant to handle most user needs. Why is this such a big deal?

1. A page is the basic unit of most websites, but in EE, there's no great way to handle them. EE developers spend a lot of time trying to simulate a page structure using templates, categories, and weblogs - which tends to make bulky, finicky sites that can be hard to extend and update. Structure brings the page concept into EE beautifully, and adds breadcrumbs, navs, and a host of other traditionally hard-to-develop features.
2. Entries are now linked to templates, and not vice versa. This might not seem like such a big deal unless you've made a big EE site without it - large EE sites rely on a large number of repetitive templates, which are especially difficult to handle. With Structure, you can run a big site with hundreds of top-level pages off a handful of templates - a huge time-saver.

We had a few false starts with Structure - mostly because we were trying to bring it into existing EE sites (recommendation: don't) or use to do the wrong things, but we eventually got the hang of it. A few pointers:

Make Great Structure Sites

Use Gypsy.
Gypsy allows for standardized field names/types across all your weblogs, which is the…

Alright. You've got me. These Valentine's day ideas aren't just for designers. They can be for anyone with a divine sense of taste and style just like you and me. Here's a few ideas that came to mind as I was shopping for my better half, an English major, for Valentine's day.

Bacon-Flavored Lip Balm

Let's start with the edibles and get those out of the way. Everyone loves bacon, right? Ok, well at least things that taste like bacon. By giving your special someone bacon-flavored lip balm it's like giving yourself a gift. Just be careful not to bite down at pucker-up time.

Source: Source: BaconSalt.com

Tweet Me Candy

There's a newcomer added to the classic Sweethearts lineup this year. The New England Confectionary Company better known as NECCO has added a "Tweet Me" heart for all the Twitternauts out there.

Source: NECCO.com

Typophile Membership

Maybe that person loves Bodoni or Helvetica nearly as much as they love you. There's always a membership to Typofile for the type-obsessed type.

Source: Typofile.com

Red Valentype

Other options for type lovers include these limited edition blocks of maple by the fine folks at House Industries. You can buy initials for both of you, connected by a loving heart. Or, if things don't work out, they'll make for good fuel to keep you warm during the cold month of February.

Source: HouseInd.com

CaseCrown Wood iPhone Case

For the iPhone lover there's also this sleek wood case to protect your most precious asset. Though, take heed if you feel compelled to light it on fire. Apple afficianados are a viscious crowd.

Source: CaseCrown.com

TwelveSouth BookBook

For those that love literature as much as they do their Mac, there's the BookBook. It's a leather-bound case with a classic book look and feel to protect a MacBook or MacBook Pro. It doubles as a great way to hide or disguise a laptop…

The Web has grown into a real jungle, and finding cool new sites nowadays isn't always the easiest thing in the world. If you have a Website yourself, you're dealing with the other end of this issue. How do you get noticed online, and is there anything you can do to increase your popularity?

There certainly is! Here are the top five ways you can strengthen your site and increase your online visibility.

1. Strong Hosting

This first point is mostly important for those who don’t have their own Website yet but eagerly want to create one. After you have selected your domain name, the next step is to choose a hosting plan. There are many good, affordable alternatives, but what professionals usually recommend is specialized blog hosting. This form of Web hosting allows you to set up a professional-looking Website in no time at all. Why is this important to mention when it comes to making your site more popular? Well, without strong hosting, you won’t be able to handle a traffic to your new Website, which means you’ll have no chance at all of becoming well liked.

Of course, finding strong hosting is often easier said than done. The hosting industry has grown very popular in recent years, and this has lead to large numbers of companies offering various hosting services. But don’t be fooled by their tricky ways of making it sound as if they are the best in the industry. We would recommend you partner up with a company that has a strong reputation and experience in the business. You might start at Web Hosting Search for reviews and other information to help you find the right fit.

When it comes to hosting, you should compare the different features included with the plan. Make sure you are guaranteed at least 99.9% uptime and that customer support is easy to get hold of. You never know when you could need them. Likewise, it is also good to know exactly what kind of numbers in terms of disc space and bandwidth will you be allowed to use and manage. Some providers also forbid their clients to upload music or video files to their servers even if it is for personal use. It's important to ask customer support to resolve such issues before purchasing a plan. Some other things you might consider asking are whether your domain name…

If you're looking to collect information from your users, there isn't a much easier or more straightforward method than a Web form. If designed well, Web forms provide valuable information; if not, they may scare users away. With this in mind, here are a few key tenets of Web form design that every designer should know.

All the examples in this article were created with CoffeeCup Web Form Builder.

1. Build Conservatively and Design With a Purpose

Let's face it: No one likes spending a long time filling out a form. Keep it short and simple and eliminate elements that aren't absolutely necessary or that don't offer a tangible benefit. Make sure every part of your form is pulling its weight, and your users will thank you.

The structure of your form should serve just as much of a functional purpose as its elements. When laying out your form, keep in mind that, at least in the Western world, people read from top to bottom and left to right. They also often use the Tab key to move around the form. Your design should reflect this through intuitive labeling and natural placement of elements. And, of course, your form should never look scattered or haphazard — make sure everything is evenly spaced and neatly arranged.

Here are a few standard form layouts that you should use as a starting point for more creative designs:

Left-Aligned Labels With Vertically Stacked Fields

This form features left-aligned labels with neatly ordered fields stacked on top of one another. This gives the eye an easy-to-follow path down the form, which is especially helpful if you're asking questions users may not be familiar with. Because they're able to read down the list of questions without the visual interruption of an input field, they'll be able to concentrate more on what you're asking. This layout does tend to make for longer form completion times because of the amount of time it takes for the eye to move from the label to the input field.

Right-Aligned Labels With Vertically Stacked Fields

Right-aligning your labels can help make them easier to distinguish and quicker to read, and also eliminates awkward spaces between labels and input fields. However, this can…

It's easy to resent punctuation. Its purpose is to clarify sentences, so why are the rules governing it so complicated? There are so many exceptions, so many exceptions to exceptions — it's enough to make you want forego punctuation altogether.

Well, back when it was alive and kicking, the Latin language did just that — and it didn't stop there. Written Latin also omitted spaces between words or lowercase letters.

It sounds kinda nice, doesn't it? No more worrying about whether that comma is in the right place, and on the flip side, no more embarrassing urge to whip out a red pen and correct restaurant menus. What's not to love?

A lot, it turns out. The result of all this grammatical simplification looked a little something like this:

GALLIAESTOMNISDIVISAINPARTESTRESQUARUMUNAMINCOLUNTBELGAEALIAMAQUITANITERTIAMQUIIPSORUM
LINGUACELTAENOSTRAGALLIAPPELLANTUR

You don't need to be discipulae lingua Latina to understand how nightmarish that sentence is. Now let's see how it looks when we apply our modern grammatical conventions:

Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur.

Behold the power of punctuation! Interword spacing, commas, and a period have helpfully transformed a terrifying sentence-monster into five easy-to-digest compartments.

Like it or not, punctuation is necessary. So what to do about all those hard-to-remember rules? Well, the trick is to make the same allowances for punctuation that we do for people. We all blatantly contradict ourselves in one way or another. It's these little exceptions to the rules we set for ourselves that make us that much more interesting and unique. Punctuation is no different. Rather than getting frustrated by all the exceptions to the rules, try embracing "punctuationality" — the personality of punctuation.

Naturally, a comprehensive guide to all the available punctuation in the English language is a bit beyond the scope of a single article, so instead I'll concentrate on the stylistic uses of a few commonly used marks over the course of two articles.

Ellipsis

I like to think of ellipses as industrious workers who don't particularly enjoy what they do for a living, but take pride in doing a good job. But when they get home, they like to unwind Michael Phelps style — and I'm not talking about swimming laps.

Most ellipses find work in the scripts for cheesy daytime soap…

"Simplify, simplify, simplify."

It's one of Thoreau's most enduring witticisms, and with good reason. When faced with the ever-increasing barrage of information that is modern life, many people find solace in minimalism. This trend has taken an especially strong hold on the Web.

Minimalism and simplification draw attention to important page elements. Using lots and lots of empty space makes content stand out. The overall effect is calming and sophisticated, a welcome break from the typical gauntlet of advertisements and traffic and television and whatever else screams incessantly for your attention.

For your inspiration, here are 25 beautiful minimalist designs. Some are charming, some powerful, some stunning, but they’re all linked by the same idea: simplicity, simplicity, simplicity.

Miguel Ripoll

26000 Vodka

Weather Flash

FRKT

Cascading Style S--t

The Big Word Project

WordPress AntiVirus

For a Beautiful Web

Have You Flossed Today?

Tajloro

jeromeM

min-style

Delicious Design Studio

Punctuationality (Part 2) 31 Dec 1969 | 6:00 pm

Part two of last week's examination of the personality of punctuation. Click here to read Part 1.

Em Dash and Hyphen

Em dashes and hyphens are sisters, and whenever they go out together, they get stopped by strangers.

"Are you twins? You all look so much alike!"

At this, they roll their eyes. Sure, they look similar, but it's obvious — to them, at least — that they're each completely unique.

The em dash is the eldest. She’s taller than her sister, more graceful, and a bit more aloof. She needs her space — specifically, one space on either side. Some people misinterpret her attitude as snobby because of her near-encyclopedic knowledge of famous quotes. However, since em dashes are used to indicate attribution, ("The mass of men lead lives of quiet desperation." — Henry David Thoreau) she’ll demurely credit her knowledge to her job.

No, the real reason she's distant at times is that she's insecure about her place in punctuation society. She has two main jobs, one as a sort of watered down parenthesis (see the third paragraph in this section), and one as a sort of watered down semicolon (see the fourth paragraph in this section), and sometimes she wonders if she's even necessary at all.

The hyphen doesn't have this problem. She's the baby, and like most younger siblings, she's a total ham — and a total copycat. Whereas em dashes link a phrase to the rest of a sentence, hyphens link words to other words. Far more social than her aloof older sister, the hyphen doesn't mind being right next to the words she links, and sometimes within the word itself.

One of her favorite games is jumping around a phrase and seeing how she can change the meaning. Take "three month old puppies," for instance. The hyphen might jump between "month" and "old" — three month-old puppies — and then squeal over the idea of three puppies, each of them a month old. Then she might jump between "three" and "month" — three-month-old puppies — and squeal again over the idea of a number of puppies, all three months old.

Whenever the hyphen plays this game, the em dash just smiles and pats her head.

Commas

We're not done with the sibling metaphor yet. I want you to think back to middle…