jQuery makes our lives easier. So much so that it's tempting to use it all the time, inadvertently slowing our page load times (cue YSlow and Hammerhead). Combining, compressing, and delivering scripts at the end of your page helps in the HTTP request department. On the file size front, below are jQuery plugins that give solid bang for your performance buck.

Note: Files were minified using YUI Compressor. Size derived from ls -lh.

idTabs

Size: 2.1K

What it does: Simple and flexible tabbed interfaces

jCarousel Lite

Size: 2.1K

What it does: Offers a multi-option carousel (slider)

Lazy Loader

Size: 530B

What it does: On-demand plugin loading

Single Drop-Down Menu

Size: 584B

What it does: Basic drop-down navigation menus

jQModal

Size: 2.8K

What it does: Modal windows AKA "lightboxes"

AutoTab

Size: 1.6K

What it does: Filters form input and tabs to next field

CSS Globe Tooltip

Size: 479B

What it does: Dead simple hover hints

jGrowl

Size: 4.1K

What it does: Notifications a la Growl for OS X

Cycle Lite

Size: 3.5K

What it does: Rotates banners/images

ToggleVal

Size: 1.1K

What it does: Erases hint values from form elements on-click

Pop!

Size: 872B

What it does: Easy and accessible drop-downs

filed under: Web design & development,   tags: jquery, jquery slideshow, jquery tooltip, jquery tabs, jquery lightbox, jquery plugins, jquery performance,

]]> tag:trif3cta.com,2009:blog/23.170 2009-03-03T03:13:44Z 2009-05-18T01:48:45Z trif3cta

The ultimate link:

• is useful to the reader
• is comprised of text
• is featured on a highly-trafficked and trusted site
• comes early in the page markup
• uses descriptive anchor text
• is surrounded by relevant copy
• is on a page that ranks well in the search results
• is on a page that has a high number of inbound links
• is on a page with a healthy Google PageRank
• is on a page with a relatively low number of outbound links, each of which are of good quality
• is not redirected through a script
• does not have the nofollow attribute
• is on a domain that has a reputable history of at least 2-3 years

filed under: Search engine marketing,   tags: link quality, link-building,

]]> tag:trif3cta.com,2009:blog/23.166 2009-03-02T02:59:25Z 2009-05-18T01:47:26Z trif3cta Until recently, grid systems have been the domain of print designers. Now they're all the rage in web design, with new CSS frameworks popping up left and right. Nathan Smith's 960 Grid System caught on quickly and deservedly so, it's a great prototyping tool; clean enough to pull off for production if you wish.

From the 960 Grid System website:

“All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.”

Since I'm not keen on math and prefer to just write my IDs/classes on the fly, I made a simple graphic of a 960 pixel grid broken down into smaller units. I've found it useful on a number of recent projects and thought I'd share.

Preview (click on the image for the full view):

filed under: Web design & development,   tags: 960 pixel grid, css layout, 960 grid system,

]]> tag:trif3cta.com,2009:blog/23.156 2009-02-14T17:12:59Z 2009-05-18T01:47:01Z trif3cta

Technique 1: The Label Sandwich

Wrap your inputs, selects, and textareas in the label element, and set them all as block-level. Set radio buttons and checkboxes to display inline so they'll appear on the same line. If you'd like your label and radio buttons/checkboxes on separate lines, you can either choose not to wrap it in the label, or use a hard line-break. One of each is shown below.

While this may seem a little funky, the W3C actually shows this in their "implicit" label example.

Key benefit: simplicity

The code:

  
label, input, select, textarea {display: block;}
label {margin-bottom: 10px;}
input[type="radio"], input[type="checkbox"] {display: inline;}

  <form action="" method="">
    <fieldset>
      <legend>Contact Form</legend>
      
      <label for="name">
        Name
        <input name="name" id="name" size="20" />
      </label>
      
      <label for="email">
        Email
        <input name="email" id="email" size="20" />
      </label>
      
      <label for=" Choices"> Choices (radio) &amp;mdash; <em>wrapped label</em>
        <input type="radio" name=" Choice" /> Choice 1
        <input type="radio" name=" Choice" /> Choice 2
        <input type="radio" name=" Choice" /> Choice 3
      </label> 
      
    <label for=" Choices2" style="margin-bottom: 0;"> Choices (checkbox) &amp;mdash; <em>non-wrapped label, margin reset</em></label>
      <input type="checkbox" name=" Choice2" /> Choice 1
      <input type="checkbox" name=" Choice2" /> Choice 2
      <input type="checkbox" name=" Choice2" /> Choice 3
    
    <div style="height: 10px;"><!-- just to split the demo up --></div>
    
    <label for=" Choices3"> Choices (checkbox) &amp;mdash <em>wrapped, hard line-break</em><br />
      <input type="checkbox" name=" Choice3" /> Choice 1
      <input type="checkbox" name=" Choice3" /> Choice 2
      <input type="checkbox" name=" Choice3" /> Choice 3
    </label>      
    <label for="dropdown">
      Question
      <select id="dropdown">
        <optgroup label="Group of Options">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </optgroup>
      </select>
    </label>
      
    <label for="message">
      Message
      <textarea name="message"rows="12" cols="36"></textarea>
    </label>
      
     <input type="submit" value="send it" />
      
    </fieldset>
  </form>

The Output:

Contact Form

Name Email Choices (radio) — wrapped label Choice 1 Choice 2 Choice 3 Choices (checkbox) — non-wrapped label, margin reset Choice 1 Choice 2 Choice 3

Choices (checkbox) &mdash wrapped, hard line-break
Choice 1 Choice 2 Choice 3 Question Option 1 Option 2 Option 3 Message

Technique 2: The Lazy-Ass

Purists will cringe at this one, but many developers go for the quick and easy by peppering their markup with breaks. It works, but it hamstrings your styling ability. You don't need any CSS to pull it off.

Key benefit: speed

The code:

  <form action="" method="">
    <fieldset>
      <legend>Contact Form</legend>
      
      <label for="name">Name</label>
        <input name="name" id="name" size="20" />
      
      <br /><br />
      
      <label for="email">Email</label>
        <input name="email" id="email" size="20" />
     
     <br /><br />
      
      <label for=" Choices"> Choices (radio)</label>
      <br /> 
        <input type="radio" name=" Choice" /> Choice 1
        <input type="radio" name=" Choice" /> Choice 2
        <input type="radio" name=" Choice" /> Choice 3
    
    <br /><br />
          
    <label for=" Choices3"> Choices (checkbox)</label> 
    <br />
      <input type="checkbox" name=" Choice3" /> Choice 1
      <input type="checkbox" name=" Choice3" /> Choice 2
      <input type="checkbox" name=" Choice3" /> Choice 3
         
    <br /><br />
         
    <label for="dropdown">Question</label>
     
     <br />
      
      <select id="dropdown">
        <optgroup label="Group of Options">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </optgroup>
      </select>
    
     <br /><br />
      
    <label for="message">Message</label>
    <br />
    
      <textarea name="message"rows="12" cols="36"></textarea>
    <br />
    
     <input type="submit" value="send it" />
      
    </fieldset>
  </form>

The output:

Contact Form

Name

Email

Choices (radio)
Choice 1 Choice 2 Choice 3

Choices (checkbox)
Choice 1 Choice 2 Choice 3

Question
Option 1 Option 2 Option 3

Message

Technique 3: Mr. Semantic

One of the tenets of web standards is to think about the type of data you're working with and code accordingly. Since a form is a list of sequential questions, the ordered list element makes for a snug fit.

Key benefit: structure

The code:

ol {
  list-style: none; 
  padding-left: 0;
  }
  
  <form action="" method="">
    <fieldset>
      <legend>Contact Form</legend>
      
      <ol>
        <li>
          <label for="name">Name</label>
          <input name="name" id="name" size="20" />
       </li> 
        
       <li>
        <label for="email">Email</label>
        <input name="email" id="email" size="20" />
       </li>
        
      <li>
        <label for=" Choices"> Choices (radio)</label>
          <input type="radio" name=" Choice" /> Choice 1
          <input type="radio" name=" Choice" /> Choice 2
          <input type="radio" name=" Choice" /> Choice 3
      </li>
       
      <li>    
      <label for=" Choices3"> Choices (checkbox)</label> 
        <input type="checkbox" name=" Choice3" /> Choice 1
        <input type="checkbox" name=" Choice3" /> Choice 2
        <input type="checkbox" name=" Choice3" /> Choice 3
     </li>       
           
     <li>
      <label for="dropdown">Question</label>
        
        <select id="dropdown">
          <optgroup label="Group of Options">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
          </optgroup>
        </select>
      </li>
      
      <li>  
      <label for="message">Message</label><br />
        <textarea name="message"rows="12" cols="36"></textarea>
      </li>
      
      <li><input type="submit" value="send it" /></li>
       
      </ol>
  
    </fieldset>
  </form>

The output:

Contact Form

1. Name
2. Email
3. Choices (radio) Choice 1 Choice 2 Choice 3
4. Choices (checkbox) Choice 1 Choice 2 Choice 3
5. Question Option 1 Option 2 Option 3
6. Message
   

Technique 4: DIVide and conquer

What if you need your form to be horizontally-oriented? There are situations (and clients) that call for a form to use horizontal space. Here we can rely on our old pal the div, since we're dividing the form into columns. This is easily acheived using the Label Sandwich method.

Key benefit: use of space

The code:

label, input, select, textarea {display: block;}
label {margin-bottom: 10px;}
input[type="radio"], input[type="checkbox"] {display: inline;}
.form-column {
  width: 150px;
  height: 250px;
  padding-left: 20px;
  border-left: 1px solid #ccc;
  float: left;
  }

  <form action="" method="">
    <fieldset>
      <legend>Contact Form</legend>


<div class="form-column">
  
      <label for="name">
        Name
        <input name="name" id="name" size="20" />
      </label>
      
      <label for="email">
        Email
        <input name="email" id="email" size="20" />
      </label>
      
      <label for=" Choices"> Choices (radio)<br />
        <input type="radio" name=" Choice" /> Choice 1
        <input type="radio" name=" Choice" /> Choice 2
        <input type="radio" name=" Choice" /> Choice 3
      </label> 
</div><!-- /form-column -->    

<div class="form-column">
    
    <label for=" Choices3"> Choices (radio)<br />
      <input type="radio" name=" Choice2" /> Choice 1
      <input type="radio" name=" Choice2" /> Choice 2
      <input type="radio" name=" Choice2" /> Choice 3
    </label>     
    
    <label for=" Choices3"> Choices (checkbox)<br />
      <input type="checkbox" name=" Choice2" /> Choice 1
      <input type="checkbox" name=" Choice2" /> Choice 2
      <input type="checkbox" name=" Choice2" /> Choice 3
    </label>  
    
    <label for="dropdown">
      Question
      <select id="dropdown">
        <optgroup label="Group of Options">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </optgroup>
      </select>
    </label>

     <input type="submit" value="send it" />

</div><!-- /form-column -->    
  
    
    </fieldset>
  </form>

The output:

Contact Form

Name Email Choices (radio)
Choice 1 Choice 2 Choice 3

Choices (radio)
Choice 1 Choice 2 Choice 3 Choices (checkbox)
Choice 1 Choice 2 Choice 3 Question Option 1 Option 2 Option 3

Technique 5: The Old School Lazy-Ass

If you'd rather not bother with CSS, are in a huge hurry, and don't plan on browser-testing – you should find a new career. Just kidding, this one's for you.

Key benefit: intuitive

The code:

  <form action="" method="">
    <fieldset>
      <legend>Contact Form</legend>

<table>

  <tr>
 <!-- column one -->   

    <td>
        <label for="name">Name</label>
        <input name="name" id="name" size="20" />
      
      <br /><br />
      
      <label for="email">Email</label>
        <input name="email" id="email" size="20" />
     
     <br /><br />
      
      <label for=" Choices"> Choices (radio)</label>
      <br /> 
        <input type="radio" name=" Choice" /> Choice 1
        <input type="radio" name=" Choice" /> Choice 2
        <input type="radio" name=" Choice" /> Choice 3
    </td>
 
 <!-- column two -->   
    <td>
    
    <label for=" Choices3"> Choices (checkbox)</label> 
    <br />
      <input type="checkbox" name=" Choice3" /> Choice 1
      <input type="checkbox" name=" Choice3" /> Choice 2
      <input type="checkbox" name=" Choice3" /> Choice 3
         
    <br /><br />
         
    <label for="dropdown">Question</label>
     
     <br />
      
      <select id="dropdown">
        <optgroup label="Group of Options">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </optgroup>
      </select>
</td>
 
 <!-- column three -->   
    <td>   
    <label for="message">Message</label>
    <br />
    
     <input type="submit" value="send it" /></td>
  </tr>
</table>      
            
    </fieldset>
  </form>

The output:

Contact Form

Name Email Choices (radio) Choice 1 Choice 2 Choice 3

Choices (checkbox) Choice 1 Choice 2 Choice 3 Question Option 1 Option 2 Option 3

filed under: Web design & development,   tags: web forms, form layout, css forms, html forms,

]]> tag:trif3cta.com,2008:blog/23.144 2008-10-15T22:04:17Z 2009-05-18T01:46:18Z trif3cta Avoid having example.com/blah and example.com/blah/ looking like separate (and thus duplicate) pages in search engine indexes by automatically adding a trailing slash using Apache's mod_rewrite.

Here's a quick fix to a common problem known as the "Apache trailing slash problem." Trailing slashes are the proper way to reference files in Apache, yet folks (naturally) tend to leave them off when typing or hyperlinking. Many times people attempt to remedy the situation by allowing both example.com/foo and example.com/foo/ to work. The problem is that Google and other search engines see these as two different pages, yet the content is the same. Duplicate content is a major SEO no-no and should be avoided.

The fix is to rewrite URL's lacking the trailing slash to automagically add them. That way people can type either, Apache has the explicit path it needs, and Google's happy. Sounds good to me. Here's the directive to add to your .htaccess file:

# trailing slash fix
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$
RewriteRule (.*)$ http://example.com/$1/ [R=301,L]

References

• Don't forget your trailing slash
• .htaccess Add Trailing Slash to URL
• .htaccess rewrite rule to add a trailing slash to requested urls
• Apache's URL Rewriting Guide

filed under: Search engine marketing,   tags: .htaccess, apache,

]]> tag:trif3cta.com,2008:blog/23.143 2008-10-15T17:02:38Z 2009-05-18T01:45:39Z trif3cta

Buy this book at Amazon.com

Building a strong business website requires patience, planning, and the collaboration of technical and non-technical team members. It's much easier said than done – websites can easily get off-track when the goals of different departments collide. In Web Design and Marketing Solutions for Business Websites, web veteran Kevin Potts offers a practical field-guide on how to get it done.

Gettin' Down to Business

The strength of this book it that the author keeps business objectives at the heart of each chapter, all while noting best practices on the technical side. He leads each subject with questions you should be asking yourself and what to shoot for, the implementation advice flows from there.

Early in the book the focus is on determining the role your website plays in your organization. Is it primarily to provide basic information about your company? To facilitate offline sales? Support current customers? Once you tease out and prioritize the primary aims of your site, you can move into the planning phase.

From Building to Promoting

From the broad-level questions, Web Design and Marketing Solutions for Business Websites then delves into important topics such as information architecture (how to organize the navigation for your site), what counts as well-written content, and making sure your site is accessible to the widest possible audience. There aren't many books that give you specific advice on writing an "About Us" section, or how to tackle "Frequently Asked Questions" – yet we all need them for our sites. Pott's clearly outlines point-by-point how to approach these and many other subjects.

A good portion of the book is dedicated to site-building, but equal attention is given to site-promoting. Nearly all of us need to actively promote our sites once they're up, and the author discusses the various ways we might handle this. The fundamentals of SEO, email marketing (props to Austin web design company TradeMark Media, whose newsletter is featured as a good example on pages 328 & 332), and online advertising are covered in this book. Specific platforms and software are suggested throughout the book, so you aren't left in a lurch when you finish reading.

Overall

Web Design and Marketing Solutions for Business Websites is a strong effort, as Kevin Potts is a talented writer. He has a knack for tying the different facets of web design together in a way that non-geeks can appreciate. This book would be a valuable addition to your web team's bookshelf.

Buy this book at Amazon.com

Book Details & Notes:

http://kevinpottsdesign.com/ - If you're interested in working with Kevin, contact him here. He's based out of St. Louis, Missouri.

http://www.graphicpush.com - His popular weblog on design, code, and the Textpattern content management system (note: he's a co-author of Textpattern Solutions, the book to get for learning the platform).

Title: Web Design and Marketing Solutions for Business Websites

Author: Kevin Potts

Publisher: friends of ED

ISBN: 1590598393

Length: 400 pages

Suggested Price: $39.99

• Chapter 1: Overview
• Chapter 2: Content
• Chapter 3: Accessibility
• Chapter 4: Architecture and Navigation
• Chapter 5: The Homepage
• Chapter 6: The About Section
• Chapter 7: Products and Services
• Chapter 8: Independent Validation
• Chapter 9: The Corporate Blog
• Chapter 10: Customer Support
• Chapter 11: Contingency Planning
• Chapter 12: Legalese
• Chapter 13: Search Engine Optimization
• Chapter 14: Outbound Marketing
• Chapter 15: Online Advertising
• Appendix: Resources

filed under: Book reviews,   tags: copywriting, information architecture, business websites,

]]> tag:trif3cta.com,2008:blog/23.142 2008-10-12T03:46:20Z 2009-05-18T01:45:22Z trif3cta

Shortly after Mashable stopped by Austin a few months back, they posted their 13 Important Austin Technology Blogs. It's a solid list indeed, but I thought I'd add a few that I routinely check for that weren't on their list.

In alphabetical order:

Adomatica

News and gossip about the Austin advertising scene

Apogee Search Blog

Search Engine Marketing news and events

Angel Investing in Austin

The Central Texas Angel Network Blog

Austinpreneur

Joshua Baer, an entrepreneur in Austin, TX

Bootstrap Austin

The blog of an org dedicated to lean-and-mean entrepreneurship

Bramblog

Eric Bramlett on Technology, Web Design, SEO, SEM, SMM, Rep Mgt

BuzzStream

Ideas, Startups, Social Media, PR, SEO, Austin

The Conversion Scientist

Conversion Marketing for Businesses by Brian Massey

Longhorn Kate

Kate Morris - Search Engine Marketing Lover

Silver Spider

The Web site of Alex S. Jones, community catalyst, user advocate, Web technologist, barbecue acolyte & information junkie

Tracksuit CEO

Master the Blogosphere in the comfort of your own Tracksuit - by Daniel Hope

Who is Jon Ray?

Jon Ray on creating compelling marketing, PR, social media and video content.

filed under: Austin news & notes,   tags: austin tech blogs,

]]> tag:trif3cta.com,2008:blog/23.141 2008-10-06T23:46:13Z 2009-05-18T01:44:14Z trif3cta Wow, has it been that long since the last post? Clients have kept me crazy busy, but I did manage to find a few links that caught my interest.

• Dinstinguish sense from nonsense – simple advice on How to Work Better [via Tate.org]
• Want to know how people use your site? Check out Navigation Analysis with Google Analytics [via Conversation Marketing]
• An oldie-but-goodie, Destroy the Web 2.0 Look [via Elliot Jay Stocks]
• 10 Checks to the Perfect WordPress Theme [via Yoast]
• 30 Beautifully Blue Web Designs [via Six Revisions]

filed under: News & notes,   tags: productivity, wordpress, google analytics,

]]> tag:trif3cta.com,2008:blog/23.140 2008-09-09T04:15:48Z 2009-05-18T01:43:50Z trif3cta How to Create a WordPress Theme From Scratch [via Nettuts]

One of the best explanations I've seen, just the facts ma'am. Everything you need to get going, nothing you don't.

6 WordPress Tips & Tricks [via Hack WordPress]

Keeping with the WordPress topic, a few great security tips and how to add a sideblog. It's all about functions.php nowadays.

Making Illustrator and Fireworks Fit [via RW Illustrator]

Fireworks wins over a naysayer. Opening .AI's in CS4? Oh hell yes.

Buzz vs. Sustainable Word-of-Mouth [via Brand Autopsy]

Kathy Sierra is brilliant, props to John Moore (who has a great blog and is here in Austin) for catching this great tweet.

Building Backlinks With Reports [via BuzzStream]

It's all about getting those links, I'll gladly do my part by linking to another interesting post by Jeremy. I'm excited to see what BuzzStream has up its sleeve.

Parallels Between Architecture and Interface Design [via Juice Analytics]

"... translate vague but strongly-held desires of the client into a practical reality." Amen.

JavaScript and Ruby Frameworks [via Wynn from Squeejee @ The Lonestar Ruby Conference]

jQuery, Prototype, EXTjs, YUI, Mootools - the libaries we know and love. Did you know about SproutCore? Can you make them play nice with your Ruby app?

jQuery Developer Guide [via Effectize]

I'm a sucker for a great jQuery plugin list. Hook, line, and sinker.

filed under: News & notes,   tags: wordpress, jquery, backlinks, branding, javascript,

]]> tag:trif3cta.com,2008:blog/23.138 2008-09-02T03:35:05Z 2009-05-18T01:43:06Z trif3cta

Where Do You Click and What Does it Mean? [via ABC's 20/20]

75 Powerful Adobe Fireworks Extensions [via SpeckyBoy]

10 Adobe Air Apps for Web Designers [via Six Revisions]

Branding from Email to Customer Service [via Get Elastic]

Any WordPress Theme Can Be a Blank Framework [via ThemeShaper]

Four Essential Skills for Information Architects [via User Interface Engineering]

CSS Sprites: It's JavaScript Time [via A List Apart]

Automatic Awesompersands [via Patrick Haney]

A Simple User Interface for .htaccess Redirects [via Sidepath]

Tracking External Links and "In-Network" Links with Google Analytics and jQuery [via Ted Serbinski]

filed under: News & notes,   tags: wordpress, jquery, branding, ampersands, adobe air, css sprites,

]]> tag:trif3cta.com,2008:blog/23.137 2008-08-31T00:39:33Z 2009-05-18T01:42:34Z trif3cta Website copyright notices are ubiquitous; you can find them in the footer of almost any site. It's also easy to spot copyright notices that haven't been updated in years, which could potentially send the signal that nobody is behind the wheel. A simple solution is to have the year update dynamically.

Here's several ways to "set it and forget it":

JavaScript

&copy; <script type="text/javascript"> //<![CDATA[ var d = new Date(); document.write(d.getFullYear()); //]]> </script>

PHP

&copy; <?php echo date("Y"); ?>

Ruby/ERB

&copy; <%= Time.now.year %>

Django/Python

© {% now "Y" %}

ASP

&copy; <% Response.Write Year(now) %>

JSP

&copy; <jsp:useBean id="now" class="java.util.Date"/> <fmt:formatDate value="${now}" type="DATE" pattern="yyyy"/>

ActionScript/Flash

trace("© " + new Date().getFullYear();

filed under: Web design & development,   tags: timestamp, copyright notice,

]]> tag:trif3cta.com,2008:blog/23.136 2008-08-26T03:25:24Z 2009-05-18T01:41:25Z trif3cta

The 3 Best Social Media Ideas for Improving Your Sales You'll Ever Read [via Real Estate Growth]

107 Add to Cart Buttons of the Top Online Retailers [via Get Elastic]

What Are You Converting? By Tim Ash [via Search Engine Watch]

Web Application Hierarchy presentation slides from An Event Apart Boston [via LukeW]

10 Adobe AIR Apps for Web Designers [via Six Revisions]

Diagnose SEO Issues [Live Search Webmaster Center Blog]

12 Content Ideas for Your Email Marketing [via BeRelevant]

filed under: News & notes,   tags: social media, adobe air, conversions, add-to-cart buttons,

]]> tag:trif3cta.com,2008:blog/23.135 2008-08-20T04:24:51Z 2009-05-18T01:40:52Z trif3cta

Buy this book at Amazon.com

“The best way to get visitors to act is to appeal to their fundamental emotional motivations.” Chapter 1, p.17

If a good portion of your income depends on the performance of a website, then chances are that you've spent some serious time and effort trying to figure out what works. Good news for you, Tim Ash has written a manual on how to objectively test and improve your website with Landing Page Optimization, The Definitive Guide to Testing and Tuning for Conversions.

What is this book about?

Landing pages (where visitors initially arrive on your site) are crucial to the success of your site. Regardless if your user arrived from a search, by clicking an ad, or from a site linking to yours — you have a limited amount of time to make your case. Landing Page Optimization is a comprehensive look at how you can systematically improve your conversion rate.

Landing Page Optimization is broken into three sections, Background, What & How to Tune, and Getting It Done. The book is written clearly and professionally, although the sheer density of information included makes it best suited for reading at intervals. For those wondering, yes, there are plenty of pictures and sidebars.

Who wrote it?

Tim Ash, President of SiteTuners.com, a frequent speaker on Internet marketing who comes from a scholarly background in Computer Engineering and Cognitive Science and it shows (in a good way).

Who should read Landing Page Optimization?

• search engine marketers
• direct response copywriters
• web designers & developers
• affiliate marketers
• if you're reading this site, probably you

What are some of the key concepts or takeaways?

A few especially salient ideas to me were:

• your visitors should design your site (gather feedback in multiple ways, including offline)
• never underestimate the importance of trust (display trust indicators and reduce anxiety wherever possible)
• quickly discard non-performing assets (don't get too attached, be clinical)
• simplicity can be powerful (avoid info overload – see graphic)

There is a wealth of compelling material in the book, including a short chapter at the end of the book dedicated to understanding and using Google Website Optimizer, Google's free testing tool (part of the Google Trifecta).

What were your favorite parts of the book?

As a student of marketing, I appreciated Chapters 3 & 4 which are titled Understanding Your Audience and Understanding the Decision Process. This sets a great foundation as Tim transitions into more advanced concepts and statistical analysis (there is ample math in this book for you data wonks out there). He also dedicates the latter part of the book (Section III) on how you might actually get this done in a work environment, which demonstrates that Mr. Ash is in touch with the needs of his readers. How refreshing!

What could be better?

There were patches where the math befuddled me and I imagine it might lose some others as well (apologies to my quantitative statistics professor). If he omitted some of the formulas, Tim would likely hear it from the math pros out there, so it's understandable. He did a great job covering a litany of topics, not unlike Aarron Walter in Building Findable Websites.

Would you recommend it?

Absolutely. In addition to the web design and usability advice, there are thoughtful quotes from philosophers, non-cheesy marketing strategies, scientific explanations of the mind and human behavior, specific use cases (one small change resulted in a $48M increase in one instance), and the book is packed to the gills with statistics (anybody for full factorial parametric multivariate testing?). If you're interested in purchasing a copy, consider buying it through the author's official site:

Buy this book at Amazon.com

Landing Page Optimization Book (Official Site)

Other Reviews

• Mike Moran – Search Engine Guide
• James Thompson – Clix Marketing
• Cindy King

Book info/chapter listing:

Landing Page Optimization
The Definitive Guide to Testing and Tuning for Conversions
Tim Ash

Paperback: 384 pages
Publisher: Wiley Press - Sybex (January 29, 2008)
ISBN-10: 0470174625
ISBN-13: 978-0470174623

• Part I - Background
• Chapter 1 - Setting The Stage
• Chapter 2 - Understanding Your Landing Page
• Chapter 3 - Understanding Your Audience
• Chapter 4 - Understanding The Decision Process
• Part II - What & How To Tune
• Chapter 5 - Why Your Site Is Not Perfect
• Chapter 6 - Selecting Elements to Tune
• Chapter 7 - The Math of Tuning
• Chapter 8 - Tuning Methods
• Part III - Getting It Done
• Chapter 9 - Getting Buy-in & Assembling Your Team
• Chapter 10 - Developing Your Action Plan
• Chapter 11 - Avoiding The Pitfalls
• Appendix A - A Closer Look At The Google Website Optimizer

filed under: Book reviews,   tags: conversion, landing page,

]]> tag:trif3cta.com,2008:blog/23.134 2008-08-18T19:14:21Z 2009-05-18T01:40:22Z trif3cta

Google Insights for Search (BETA) [thanks SEOptimise]

Entreprenuer Self Test: Do I need a PR Agency? [via BuzzStream]

Thrown to the Ad-Wolves... or, Learn from My AdWords Mistakes [via Juice Analytics]

5 Steps for 5 Stars: Reputation Management for Small Businesses [via David Mihm]

Bootstrapping a Business in the Freemium Model [via Austin Startup]

Smooth Reviews Like Service Magic [via Convert Offline]

KISS SEO [via Graywolf]

Use the Best Available Ampersand [via SimpleBits]

filed under: News & notes,   tags: pr, ampersands, google adwords, local seo,

]]> tag:trif3cta.com,2008:blog/23.133 2008-08-18T01:22:28Z 2009-05-18T01:39:29Z trif3cta The August meeting for Refresh Austin (an org for designers, developers and other web professionals) showcased why I enjoy the group – it can seamlessly cover a lot of ground without stretching.

First off, a tip of the hat to Blue Fish Development Group for hosting the meeting at their beautiful downtown office, complete with beer and snacks.

A Surface Warfare Officer Turned Writer

Sheila Scarborough (SheilaScarborough.com) is a writer with a fascinating story. After 23 years in the Navy, she decided to become a writer. Not any type of writer mind you, but one who specializes in family travel — and drag racing!

In her entertaining (and sans-projector, nicely done) presentation she shared a number of practical writing tips such as:

• don't bury the lead
• know your area of expertise
• be conversational, not sloppy
• view yourself as a writer
• write shitty first drafts
• watch out for your own cliches
• details distinguish the great from the good
• keep an editorial calendar
• have a "linkbait" list on tap for slow times

She also recommended:

• Stephen King on Writing
• Bird by Bird by Ann Lamott
• Copyblogger
• Skelliwag
• Dooce

As Sheila fielded questions, she summed up her advice on writing in five words – "show up and don't suck."

Django: A web framework named after a Gypsy Guitar Legend

Jon Loyens from thinktiv was up next with his presentation on Django, which is billed as "the Web framework for perfectionists with deadlines." It's named after Jazz guitarist Django Reinhardt, and all of its plugins carry musician names as well, which is kind of fun. For you non-geeks out there, Django helps programmers build complex websites much faster and with less headaches. Jon worked through his sharp looking slides as he built an article-posting application lickety-split.

I was quite eager to learn more about the Python-based Django as it looks like I'll be working on a Django-based site for a client. A few things struck me about the framework:

• urls.py is a config file that allows you to easily map URLs however you'd like which is great for usability and SEO
• a GUI admin enables end-users to enter data using a clean admin interface while you simultaneously build-out the app
• auto-reload your development server when you refresh, no need to restart all the time
• deliberately simple templates caters to front-end designers and keeps us out of trouble
• lots of deployment options available since Python is supported nearly everywhere

Many thanks to Jon for showing us the ropes, I'll definitely take Django for a spin one of these days.

For more about Refresh or to see pics and presentation slides, check out the official Refresh Austin site. I'll see you all again next month.

Update: Sheila & Jon's presentation notes and slides are now posted on the Refresh Austin site. Go check them out!

filed under: Austin news & notes,   tags: refresh austin, writing, networking, django,

]]>