Brunello has been working closely with Men’s Health on the redesign of their website. The new homepage launched today.

Brunello provided art direction and front-end design, as well as the implementation of custom jQuery and CSS to drive the main article slider at the top of the page. Cufon was used as a font-replacement technology allowing the site to feature dynamic text rendered in a custom typeface. The site’s backend is powered by Drupal.

Article and channel level pages are in the process of being redesigned and will roll out over the next several weeks.

Take a look at the before and after, and check out the live version here: http://www.menshealth.com

Leave a comment and let us know what you think!

View Larger (570k)

If you own or run a website you should be utilizing the power of web analytics. Web analytics programs help you collect information on how users are finding and navigating your website. This data can then be used to drive the improvement success of your website.

Web Analytics tracks a website visitor’s steps and collect metrics such as:

• Page views
• Time on page
• Clicks
• Bounce rate
• New/returning visitors
• Purchases
• Live visits

Google Analytics

Google Analytics provides FREE detailed, accurate reporting across more metrics than any of the other Analytics service. It also offers tight integration with PPC campaigns and other online marketing efforts.

How Brunello uses Google Analytics:

We use Google Analytics on most of our client websites. This keeps track of traffic numbers, e-commerce data, and other helpful information. We take this information into consideration when suggesting design changes to websites. Sometimes simple re-alignments – not drastic redesigns – can help improve conversion and sales figures. We also integrate Google Analytics with Google Adwords to report ROI statistics on keyword campaigns for PPC accounts that we administer.

Quantcast

Quantcast goes beyond your normal statistics of analytics and digs deeper. Quantcast breaks down your user base by: education level, income, gender, age, size of household, and other sites visited.

How Brunello uses Quantcast:

We use Quantcast to get a complete picture of a site’s typical visitor. Quantcast provides in-depth audience data and helps us tailor our design decisions based on specific audience data. Information gathered from Quantcast can influence design, navigation, language, PPC marketing and more.

Crazy Egg

Crazy Egg is a heat mapping service that tracks where on a page users are clicking. They also have helpful display options that will show metrics such as: referring websites, clicks by page element, click percentage, time to click and others.

How Brunello uses Crazy Egg:

We recently used Crazy Egg on a site to determine if visitors were utilizing a newly added feature. This heat mapping service allowed us to provide metrics to the client that show how the new feature was being utilized by users.

Woopra

Woopra allows you to view live, real-time web analytics. You can watch users visiting your site live and interact with them in the process.

How Brunello uses Woopra:

We use Woopra to track live visitors on a site. We’re especially interesting in identifying areas of issue, troubleshooting and analyzing visitor behavior. Woopra enables us to watch visitors make purchases on an e-commerce site and monitor any hang-ups in the shopping cart process. This information allows us to respond to known issues quickly and confidently.

Click Heat

ClickHeat is a visual heatmap of clicks on a HTML page, showing hot and cold click zones. ClickHeat is an OpenSource software, released under GPL licence, and free of charge.

How Brunello uses ClickHeat:

We recently installed ClickHeat on our own site to track where YOU (our visitors) are clicking. This data will be used for future optimizations of our website. So click around!

What analytics services do you use?

Leave a comment and let us know what you think.

Coding email newsletters can be a trip down memory lane: nested tables, font tags and plenty of inline styling. This is all fun and games until you run into varying levels of CSS support from different email clients. Luckily Campaign Monitor has an extensive chart detailing CSS support in almost every email client known to man. View the chart online or download a .PDF for handy reference.

The design community seems to be having mixed reactions to this announcement. What do you think? Feel free to share your thoughts in the comments.

Brunello Creative designed and implemented the new website for author Elizabeth Hawes. A biography-memoir, Camus, a Romance reveals the man behind the famous name: the French-Algerian of humble birth and Mediterranean passions; the TB-stricken exile who edited the World War II resistance newspaper Combat; the pied noir in anguish over the Algerian War; the Don Juan who loved a multitude of women; the writer in search of a truer voice.

The Camus, a Romance website is powered by our easy to use content management system–Bruno CMS.

View the website at http://CamusaRomance.com

The Children’s Health website is powered by our easy to use content management system–Bruno CMS.
View the website at http://www.childrenshealthmag.com

Brunello just received our Typekit invite yesterday and I thought I would share with you how easy it was to get Typekit up and running on a demo page.

Check out the simple demo we created using the typeface “Skolar” from Type Together.

Fist Impressions of Typekit

After logging in and tinkering with the free account for a while, I was initially frustrated with the lack of decent fonts. Of course Typekit offers you a much better selection of typefaces for the paid accounts - So I bit the bullet and upgraded to a paid account.

Now when I log-in I’m greeted with hundreds of lovely typefaces ready for use on our website.

Once you select a typeface the Typekit editor pops open in a new window you can then add a class name that will specify the use of the Typekit typeface.

If you click on advanced options you can see how Typekit specifys the font-family in CSS. In order to prevent sneaky type thief’s Typekit splits the type-family into two files and then combines them in the CSS font stack.

Another feature to note is the size of your ‘kit’ in the lower left of the editor. I’ve opted to only use one typeface in order to reduce the size of my kit. Adding several fonts and weights of fonts can easily increase the kit size to 300k.

Implementing Typekit

We have spent quite a bit of time implementing SIFR on client websites in the past - So we were amazed at how easy it was to implement Typekit.

The first step involves throwing a few lines of javascript into the head of your page:

If you want to assign the typeface selectively you can just add the class you specified in your editor:

You can also add the typeface via the font-family css-selector:

Pros and Cons of using Typekit

Pros

1. Typekit web interface is easy to use
2. Easy to implement without a steep learning curve (like SIFR)
3. Makes web designers and typefoundries happy at the same time

We’ve been working on a lot of HTML E-Newsletters lately and thought we would share some of the helpful resources we have found over the past few weeks. Leave a comment and let us know if we missed anything!

1 Beautiful Email Newsletters Gallery

http://www.beautiful-email-newsletters.com/

BEN is a gallery site decidicated solely to email newsletters. Great source for inspiration if you are looking to break outside the normal ‘mold’ of newsletter designs.

2 Mailchimp Email Templates

http://www.mailchimp.com/resources/html_email_templates/

I’ve been using these basic templates from MailChimp for a while. They take the guesswork (and time) out of creating a basic layout for your newsletter. Great way to get a head start on your e-news project.

3 Litmus

http://Litmusapp.com

The most difficult aspect of coding e-newsletter is making it look nice in each email client. This is far more dificult than wrestling with IE6. Most of us dont even have access to all the email clients that exist. This is where Litmus steps in. Litmus will render your email in:

4 Email Standards

http://www.email-standards.org/

Want to know why Gmail is eating your lovely background images? Or why is apple mail 3 not supporting inline css? Check out The Email Standards Project and find out about all those lovely quirks of almost every email client (desktop and web) under the sun.

What resources do you recommend?

Leave a comment and let us know if we missed anything or if you have a favorite resource for E-newsletter design and coding.

MONITOR

Why guess? Use Google Analytics and Woopra to track visits to your site, see where people are coming from, what they’re looking at, and identify areas of opportunity on your site.

OPTIMIZE

Continuously make updates to your website content, make your site easy to find. Search engine optimization (SEO), is an ongoing process of updates and adjustments to maximize the effectiveness of your content.

STAY-TUNED

Know when and why your site goes down, respond immediately and minimize any negative impact.

TEST

How effective are your call to action pages? Find out by using A/B testing with Google Website Optimizer.

PROMOTE

Get the word out about your new site: Try a Direct mail campaign to customers, Pay-per-click advertising, Use social media - Facebook, Twitter, blogs, send out a Press Release.

How does your website score?

Learn more about how Brunello Creative can help you track and improve your website by taking our site analytics quiz.

Mat Marquis and Niki Brown have both recently received Google certification in Google Analytics.

Google Analytics is the enterprise-class web analytics solution that gives you rich insights into your website traffic and marketing effectiveness. Powerful, flexible and easy-to-use features now let you see and analyze your traffic data in an entirely new way. With Google Analytics, you’re more prepared to write better-targeted ads, strengthen your marketing initiatives and create higher converting websites.

Learn more about how Brunello Creative can help you track and improve your website by taking our site analytics quiz.