1. The Inspiration




The first Pinterest user we’ve seen to “hack” his boards, digital development manager Nick McGlynn inspired us to have a go too. But what inspired him?

“My colleague and I were brainstorming ways to use Pinterest for brands at Rodale Inc and I noticed that the nine squares that make up the Pinterest boards make a perfect square that would fit Instagram photos brilliantly.

“I grabbed some Instagram photos from a recent Facebook Timeline ‘hack’ I did
and decided to see how it would look if I cut them up into nine squares and made a Pinterest board.”

We think they look great! Continue through the gallery for instructions on how to hack your boards.

Click here to view this gallery.

Do you remember those awesome Facebook and Google+ profile hacks?

Well, Nick McGlynn, a creative Pinterest user, has done something similar on the new social service, “hacking” a Pinterest board to display one image sliced into nine sections.

Inspired by McGlynn, we have put together a super-simple, Photoshop-free how-to that demonstrates how you can “hack” your Pinterest boards. Have a read through our easy-peasy walkthrough. Link us in the comments to your Pinterest hacks and we’ll feature the best submissions in a forthcoming Mashable gallery.

Cat image courtesy of Simon Doggett

More About: features, How-To, photography, pinterest, trending

For more Dev & Design coverage:





Much to the annoyance of many of its users, Facebook is always changing. The recent Timeline revamp is the last in a series of tweaks to the social networking service, some good, some bad, and some just plain ugly.

Do you like the news “ticker?” How about the revamped chat? Does the highlighted news style bother you when you miss out on gossip?

We have identified five older Facebook features and functions that we used to enjoy, and found extensions for Google’s Chrome and Mozilla’s Firefox browsers that get them back.

We know we can’t stop progress in the long term (and we wouldn’t want to), but for the sake of some short-term peace of mind, we’re going retro with some tweaks to suit our preferences.

Let us know in the comments about any Facebook features that drive you nuts, and we’ll see if we can find a few options to “fix” them.

1. Hide the News Ticker and Restore Your News Feed with Facebook Classic by
Michael Donohoe

To compensate for the fact that it rearranges the order of your News Feed, Facebook now displays a constantly updated news “ticker” above the chat bar if you have it open, or the top right of your home page if you don’t.

This continually updating stream is a source of annoyance to many, while the edited news feed itself makes many Facebook users apoplectic with rage.

Facebook Classic will solve both these problems. In addition to nixing the ticker, it reverts your News Feed to chronological order. As a bonus, you can easily toggle it on and off.

Click here to view this gallery.

More About: add-ons, extensions, Facebook, features, gallery, google chrome, How-To, mozilla firefox, tips and tricks, trending

For more Dev & Design coverage:





After we published a primer for using Google Analytics, readers said they were hungry for more.

Google Analytics has since revamped its design, giving it not only a cleaner look but also updated data sets. You can now find everything from real-time stats to details about which mobile device your site visitors come from.

Though the data possibilities seem endless, Google Analytics product manager Phil Mui says the design reflects three core metrics: acquisition, engagement and outcome. Let’s take a closer look at what these numbers mean and how you can track them with one of the most widely used web analytics platforms.


Acquisition


The lowest-hanging fruit of web analytics is counting metrics. This data encompasses the number of visitors that come to your site and can be filtered to show what sites they’re coming from and how many of them have or haven’t been to your site before. In Google Analytics, this is described as “Visits.”

SEE ALSO: 10 New Google Analytics Features You Need to Start Using

The tool has long provided information about where your visitors are coming from (geographically and on the web), what language they speak, how often they visit your site and what computers and browsers they use to get there. More recently, Google Analytics released mobile reporting. As people increasingly access the web from smartphones and tablets, this information is key to optimizing your site for those looking at it from a mobile device. This and most visitor-specific information can be found under the Audience tab. On report pages, the Visits metric can be found in the upper-left, while New Visits — the percentage of visitors coming to your site for the first time — is second in from the right.

Measuring how many people are coming to your site is the most cut and dried — but it’s only one piece of the metrics pie.


Engagement


These numbers consider the quality of your site traffic. Once visitors come to your site, they’ll do one of three things: read the page they came to, click to more pages beyond their entry page, or leave. Engagement metrics focus on these actions visitors are taking once they get to your site — and how good you are at keeping them there.

The three key engagement metrics in Google Analytics are:

  • Pages per Visit: This is the average number of pages a visitor views when coming to your website. The more engaging your site is, the more inclined visitors will be to continue clicking beyond the entry page.
  • Average Time on Site: This refers to the typical amount of time visitors spend on your site, despite whether they continue to stay on the page they came in on or navigate elsewhere within your domain.
  • Bounce Rate: This represents the percentage of single-page visits to your site. It gives you a sense of how many visitors left your site from the entrance page rather than clicking further into your site as compared to total visitors. Like Pages per Visit, Bounce Rate can help you determine the performance of your entry pages based on the actions visitors take (or don’t take) after they’ve arrived on your site.

Engagement metrics are especially important for reports created in the Traffic Sources and Content tabs. On report pages, Pages per Visit and Average Time on site are located at the top middle of report pages, while Bounce Rate is at the far right.

So, how do you know if your site is “engaging?” Ask yourself: Is your site user-friendly? How simple is it for a visitor to click to the next page? Is there interactive content in which your readers can participate? Does landing page content match the keywords in its title? Considering these questions when designing your site is a surefire way to improve the quality of your web traffic.


Outcome


The Goals area is where your data tracking can really help you make a difference. These outcome-oriented metrics help you dive deeper into your site performance and learn whether you’re achieving what you want with your website.

The first step is defining your business objectives: Are you driving visitors to make online purchases? Getting them to view a specific piece of content? Aiming for more newsletter signups? Once you’ve pinned down your site goals, make sure your site administrator enables Goals in Google Analytics in the Account Settings page. Then you can choose one of four Goal types to track:

  • URL destination: This metric is best if your goal is to get visits to a key page of your site, such as your homepage or a post-purchase message page.
  • Time on Site: If you’re looking to measure engagement, this will track visitors spending a defined amount of time on your site.
  • Pages per Visit: Also important for engagement, Pages per Visit will keep tabs on a defined number of pages visitors view in a session on your site.
  • Events: Released in the most recent version of Google Analytics, Event Goals allow you to track specific actions visitors are taking on a page. This includes anything from downloading a PDF to watching a video.

Goals reports can be found under the Conversions tab, which will provide information about goal completions and conversion rates. You can opt to track goal value and abandonment rates (the percentage of visitors who fail to convert on the goal) as well.

If you’re an online retailer, it may make more sense for you to set up Ecommerce in Google Analytics, which allows you to track transactions and order values. It’s a more complicated setup process, but will provide more actionable metrics for visitors’ purchasing behavior on your site. For Google Adwords users, linking your account to Google Analytics goals can help you keep a closer eye on your marketing campaigns.


Other Noteworthy Features


One problem with the analytics industry, Mui says, is that tools give users so much information — but they’re not as good at telling users what they need to know. That’s why Google Analytics improved its Intelligence product in the most-recent update. It searches your site traffic for anything out of the ordinary and then alerts you to the anomaly. You can see all your alerts in a simple graph, where you can drill into and annotate specific events.

If you’re running a dynamic website that frequently publishes new content, Google Analytics Real-Time helps you understand what content is working best and what sites are sending you the most traffic at any given moment. It’s less useful for providing more long-term actionable insights.

For more useful v5 products, check out our top 10 features of the new Google Analytics.


Conclusion


While your level of interest in these key numbers and features may differ depending on your role and organization, these data points have become the standard for web analytics today. Whether you’re strategizing for a massive corporation or bolstering your personal web presence, understanding acquisition, engagement and outcome metrics is a must. “If content is king, then context is queen,” Mui says.

Which of these metrics and features are most important to your business? Has tracking them helped you improve your site? Tell us in the comments below.

More About: features, Google, google analytics, How-To, web

For more Dev & Design coverage:





Daniel Alves is the design director for the small business web design division at the digital marketing and web design company 352 Media Group.

The navigation bar is the most important design element on a website. Not only does it guide your users to pages beyond the homepage, but it’s also the singular tool to give users a sense of orientation. With this in mind, it’s important to adhere to time-tested design and usability conventions. Doing so will give your users a comfortable and easy reference point to fully engage with your content.

Despite the necessity of an accessible navigation bar, usability studies on navigation across the web aren’t positive. One study by User Interface Engineering shows that people cannot find the information they seek on a website about 60% of the time. While this failure rate might be acceptable for your average blog, a business website simply cannot afford these stats. Even worse, many users often find navigation usability extremely frustrating, citing annoying hover errors and inconsistencies. Another study by Forrester found that 40% of users do not return to a site when their first visit is negative.

So how do you ensure that your users are able to quickly and easily find the information they need?


The Basics


Employ these basic concepts to help users move more efficiently through your website.

Start with content. Believe it or not, most websites start backward, meaning a designer will suggest navigation items before determining all the content possibilities. This isn’t entirely unusual — often the content isn’t ready before the design process begins. Jeffrey Zeldman, a usability guru, suggests, “Content precedes design. Design in the absence of content is not design, it’s decoration.”

It’s important to properly analyze and organize all your content into a logical and highly usable structure before even considering design choices. Once you accomplish this, only add complexity if absolutely necessary for your users.

Don’t overwhelm. The main role of a navigation bar is to provide your user with a choice. Overwhelming a site visitor with too many options impedes his ability to quickly make a choice. A navigation bar with five to seven channel items is sufficient organization for most websites. Plus, it fits nicely in the width of most website designs. Once you reach eight navigation options, you severely limit readability and usability due to width constraints.

Keep it simple. Use precise and recognizable words in the navigation bar. Refrain from long phrases that consume screen real estate by limiting each navigation item to 12 characters or less. Also, don’t use words that an average user wouldn’t completely understand. People are used to conventions; therefore, err on the side of familiarity. For example, use “Contact Us,” not “Get in Touch” or “Let’s Talk.” Finally, leave out unnecessary words that don’t add anything to the navigation item. Instead of “In the News,” consider simply “News.”

Actions on the right. Because people read from left to right, they naturally expect action links on the right-hand side of the navigation bar because moving right suggests moving forward. Use the left side for more informational links. The exception is the “Home” link, which as a backward action, should be furthest left.

Avoid Flash, for the most part. While Flash is generally frowned upon by usability experts, it presents aesthetic possibility. Flash’s biggest problem is that it typically is not implemented in a way accessible to screen readers and mobile devices. And while you don’t want to implement the actual navigation with Flash, you can get away with embellishing an HTML/CSS Navigation Bar with Flash to add visual interest and retain usability. One great example of this is the Atlanta Botanical Garden website (above).


One-Level Navigation Bars


Now that you know a few basic principles about creating a highly effective navigation, let’s learn from already existing navigation bars, including one-level bars, drop-down multi-level bars and mega drop-down bars. While you’ll ultimately decide which type of navigation works best for your website, we can show you what to do and what not to do depending on the type of navigation bar you eventually choose.

Apple vs. CNN

Experts have often heralded Apple as the gold standard in web design. The company has managed to distill everything it does into seven links, not including the logo and a search bar. It’s the epitome of simplicity and straightforwardness — from one of the largest companies in the world.

To its credit, CNN has to cover an entire planet of news, which makes it somewhat understandable that its site features a whopping 16 navigation bar links. While this navigation structure might work for CNN, it’s highly unreasonable for your average personal or business website. Cramming this many links in the full width of the website hinders readability by forcing a small font size and very little negative space on either side of a link. On a practical level, it’s a huge chore to read through every single link to decide where you need to go.


Drop-Down Multi-Level Navigation Bars


Drop-down menus became very popular at the end of the ‘90s during the dot-com boom because they allowed a user to get to any page on a website with one click. While that may seem like a huge advantage at first, the option presents several usability problems if done incorrectly. Many users find these types of navigation bars frustrating because they require precise cursor movements in order to successfully move through deeper levels. With this in mind, it’s best to reserve ample vertical and horizontal space for each link so that users can navigate without clicking on the wrong page.

Denny’s vs. Sony

Earlier this year, Denny’s new website design that was met with mixed reviews. On one hand, the website featured an innovative and technically complex browsing experience, but for many critics, it was overdone. The navigation bar features gimmicky JavaScript “enhancements” that actually slow the user down. For example, when you hover over a link with the cursor, it takes a fraction of a second for the animation to fully reveal its contents. Even that fraction of a second is slower than our mind’s ability to move forward.

Sony, sticking true to its understated style, provides a no-nonsense drop-down menu that gets the job done efficiently. Sony’s helper icons next to links specify parent and action links. Overall, Sony’s navigation bar responds instantly and manages to stay out of the user’s way with its subtle yet effective design.


Mega Drop-Down Navigation Bars


Mega menus are the newest design craze for large sites with a lot of depth and categories, such as Zappos and The White House. These menus are usually only two levels deep, but the second level features a large panel complete with images or multiple columns of links. The benefit to these menus is that a site not only provides more links for the user, but also includes context and hierarchy within those links.

Target vs. Lowe’s

A mega menu’s blessing can also be its curse. Sure, these navigation bars give you more room to include links, but without proper hierarchy and context, mega menus can quickly turn into a sea of unnavigable options. Perhaps the best example of this is Target.com. It doesn’t take long to see that the company has crammed way too many links in its mega menu, without the proper hierarchy or context.

While it might seem convenient that a user can get to Target’s “Spice Storage” department directly from the second level of its menu, is that really necessary? Including links like this creates too much noise and doesn’t let the user focus on the important higher-level category items. Another big no-no is the sheer size of Target’s menu. Some of the mega menu panels exceed the height of a standard 13-inch laptop screen size. The last thing you want is to force someone to scroll down to use your navigation menu.

Target could learn a few things from Lowe’s website. Lowe’s has managed to provide a wealth of links with plenty of hierarchy and context. For every panel of links, the company has made the most popular and timely links stand out by elevating them to large blocks of thumbnail images.

By distinguishing the most popular items, Lowe’s makes it easy for users to access the links they’re most likely to click anyway. The thumbnail images also contribute greatly to context. By providing recognizable images for their most popular categories, the user doesn’t even have to read to understand which part of the menu he’s in. It’s akin to walking by Lowe’s brick and mortar store, and scanning the contents of each aisle to zero-in on your desired product.


Conclusion


When choosing a navigation bar type, start simple. Evaluate your content thoroughly and ask yourself what your users need to access quickly. More often than not, a complex navigation system is an indicator you need better content planning and organization. If you absolutely need to give your users so many options directly inside the navigation bar menu, follow the principles mentioned above to create an efficient and enjoyable experience for your users.

Image courtesy of iStockphoto, mkurtbas

More About: contributor, design, features, How-To, web design, Web Development

For more Dev & Design coverage:





Using Google+? Add Mashable to your circles. You’ll get the latest about new Google+ features and tips and tricks for using the platform as well as top social media and technology news.


You might have heard Google is in the process of changing the design of its controversial black Google Bar across the top of most of its products. The company announced in a blog post on Wednesday that its infamous Bar would be replaced with a pop-up that appears when you move your cursor over the Google logo.

Now, we found a quick hack that will give you a first look at the redesign, and it’s as easy as downloading an extension, loading it into a Google Chrome browser, changing a small bit of code and then enjoying that luxuriant new Google look that banishes the bar forever.

Want to say goodbye to that ugly black bar across the top of Google products? Follow our easy step-by-step tutorial below, and you’ll get to see the brand-new Google user interface before anyone else. Special thanks to Maximilian Majewski for this quick and easy hack.

UPDATE: Some readers are reporting the update is now present on their browsers and Google accounts. To save you some time, check to see if the update is on your account before going through this process.

Either way, you can now access and use this new user interface. What do you think? Is it an improvement over the old black bar? What would you like to see instead? Should Google give you a way to revert to the old black bar?

1. Get this Extension, then click Add to Chrome

Get the “Edit This Cookie” extension: http://goo.gl/CeKtT

Click here to view this gallery.

Update 2:

If you’d rather just follow a list, here it is, courtesy of Maxilian Majewski:

1. Go get this extension to change cookies. http://goo.gl/CeKtT
2. Load Google.com and right-click to edit the cookies.
3. Change “PREF” to this (try triple-clicking it):
ID=03fd476a699d6487:U=88e8716486ff1e5d:FF=0:LD=en:CR=2:TM=1322688084:LM=1322688085:S=McEsyvcXKMiVfGds
4. Don’t forget to save your changes at the bottom.
5. Reload and you have the new Google bar.

More About: Google Bar, hack, How-To, secret

For more Dev & Design coverage:





Word on the street is that YouTube has a slick new design. It’s a revamped homepage with some pretty tight Google+ social integration and content discovery features.

But if you’ve fired up your trusty Internet machine and the new YouTube hasn’t yet appeared for you, don’t fret. Our friends at The Verge have figured out an easy way (via Google+ user Mortiz Tolxdorff) to turn on the new features right the heck now.

At present, the trick only seems to work in Firefox and Chrome. Open up your browser’s development tools:

In Firefox: Ctrl + Shift + K (Win) | Cmd + Shift + K (Mac)

In Chrome: Ctrl + Shift + J (Win) | or Cmd + Alt + J (Mac)

Then add this string of delicious and nutritious code to the console:

document.cookie="VISITOR_INFO1_LIVE=ST1Ti53r4fU";

Close your development tools, then reload The YouTubes. Voila! A fresh homepage for videos. Here’s what’s new:

1. Welcome

Once you get the new design, a message will pop up, prompting you to take a tour.

Click here to view this gallery.

Via The Verge.

More About: design, features, How-To, Social Media, trending, Video, YouTube

For more Dev & Design coverage:





Brett Miller is the president of Custom Software by Preston (CSP). For more than 10 years, CSP has impressed clients with highly effective software solutions and teams of multi-talented software engineers.

Remember the old 80/20 rule? The same applies to software development inquiries, as in 20% of sales inquiries result in 80% of new sales volume. The challenge is being able to identify which inquiries will be fruitful, and which will only cost you time and effort.

Potential clients expect accurate estimates — clearly a reasonable request. For any developer, accurate estimates are a time consuming and challenging task because custom software development and technology are constantly changing, and it’s not the same as buying an off-the-shelf item.

Even worse, many prospects decide not to move forward with their project at all (with any vendor). It’s not because the bidders did anything wrong, but because the client did not realize the full extent of the commitment required (usually defined by cost).

I have spent 15 years of my career in software development, both as a freelance developer and as a business owner. That practical experience has taught me to quickly recognize which potential projects are going to move forward and which are just not worth pursuing. There are Seven Axioms I use to help identify the solid opportunities.


1. Documented Requirements


If the client took the time to write down what they want, it is a strong indicator that they are serious. Otherwise, you will need to do this for them. Then time and documentation flows back and forth until a project’s parameters are finalized.

Rule: Lean toward clients who have taken the initiative in identifying and drafting their own software project requirements.


2. Urgent Need


This goes right to the heart of the matter. Is software development a logical next step in their growth or does it seem more whimsical/experimental in nature? For example, does the software project tie in to the launch of a new product without which, they might falter?

Rule: Lean toward projects that have an immediate nature, where the client absolutely needs it done.


3. Deal With the Decision Makers


Many times decision makers send underlings to gather the initial project information and specifications. In my experience, information gathering usually results in little else. Decision makers are involved when projects are deemed critical.

Rule: Lean toward projects where you work directly with the decision makers — the ones who steer the project and identify priorities.


4. Budgeted Project


Could anything be more critical than having realistic expectations about the cost of development? Many prospects may have misconceptions about cost, which is further exacerbated by vendors who shy away from early discussion on the subject. Sales professionals consider rough estimates to be an important applied mechanism of the trial close, potentially saving many hours of time and effort.

Rule: Use rough estimates to measure a client’s continuing interest. You could say something like, “Based on these preliminary estimates, does it make sense for us to take the next step?”


5. Process and Timeframe


Questions about the bidding process and timeframe should be addressed up front to uncover internal processes (like board reviews) or external influences (like venture capital availability). If the process seems extensive or the time frame is not well-defined, there is good reason to question if the project will ever happen.

Rule: Realize that the quality of your work and the accuracy of your estimate will not win the project if their timeframes or processes are inhibited by roadblocks. Lean toward projects that have appropriate funding, immediate need and the attention of decision makers.


6. How do I Earn the Business?


Asking about the client’s selection criteria make sense. If they haven’t already done so, they need to think about these things now and you need to know the rules of the game. Their processes and criteria may even play into the overall desirability of the project.

Rule: Understanding what is required to get the job reveals a lot about what it might be like to have the job. Do you even want to work within the structure and environment the client creates?


7. Show Me Some Money!


Your time and expertise has value. It is not that unusual for a potential client to be looking for a free consultation, which may only be used internally (if at all). If possible, ask the client for a small amount to put together the initial requirements and specifications for the project. If they are willing to spend real hard cash on developing the specifications, they are really serious about the project (and you as a potential vendor).

Rule: Initial project analysis, documentation drafting and identifying deliverables take considerable time and effort. Describe the process to the client and don’t be afraid to ask for payment for these services.


Sophistication, Process and Specifics


Legitimately qualified software development opportunities can be summarized in three words: sophistication, process and specifics. You need all three in your approach to the sales cycle and should expect all three in return.

Sophistication is about the approach to the project, indicating that available information and outcomes have been given thorough consideration upfront. Process relates to both parties understanding the steps and effort it will take to achieve success. Specifics have to do with identifying and sharing the salient properties of all project parameters — before, during, and after the project.

Approach every potential project with these factors in mind and you will know which ones are worthy of your attention, leading you down the path to a sale.

Image courtesy of iStockphoto, peepo

More About: Business, contributor, developers, features, How-To, List, software development

For more Dev & Design coverage:





This post originally appeared on the American Express OPEN Forum, where Mashable regularly contributes articles about leveraging social media and technology in small business.

It is important for online marketers to create fully optimized landing pages so that users clicking on advertisements are directed to compelling, relevant information that encourages them to interact with the brand.

Mashable interviewed Zach Morrison, vice president of strategy at Elite SEM on best practices for creating landing pages that convert.

Take a look at his thoughts below, and let us know in the comments if you have any questions on improving landing pages.


1. Optimize the Layout & Design for Web Reading


“Eyetracking research studies have shown that there’s an actual science and method to users’ online behavior and how their brains and eyes digest what they’re seeing on the page,” says Morrison. “What this means is that a web user is first drawn to look at the top left of the page and then their eyes follow a diagonal line across the center to the bottom right of the page.”

Morrison suggests placing the company’s logo and the key messages in prime locations so that readers are digesting information in the best order possible.

Morrison also points toward three design tips for creating user-friendly landing pages:

  • “Always match the colors of your landing pages with the overall look and theme of your website. If users move between your landing pages and your site’s home page, it should feel like a natural progression and be synergistic with your brand’s values.”
  • “When creating a landing page for mobile devices, make sure to consolidate all of the content, images and copy that’s usually designated to the left and right sides of a page [on a computer] and migrate them to the center of your mobile page. For example, place your company logo at the top, followed by phone number, call to action and submit button. … Create a mobile landing page that asks the user to do less than they would if they were on a computer.”
  • “Social is also great to include on landing pages. If integrated as a social widget, the user can get real-time feedback from other customers. The “thank you” page is a great opportunity to ask for additional engagements from your customers and then track and see what they are interested in.”

2. Write Copy With Search in Mind


“From an SEM perspective, good copy is important for quality score purposes,” says Morrison. “The more copy you use related to keywords and ad copy you’re showing on your ads, the less you’ll have to pay for paid search ads. Good copy is also important to give the user a positive user experience, and it’s also a key factor that Google uses in its search algorithm to rank and list companies in search results.”

Morrison adds, “Web users essentially want to be told what to do and where to go. By nature, users look at websites and tend to ask, ‘What’s in it for me?’ If your copy takes the guesswork out of the equation, your customers will be happier and click on ‘buy’ or ‘purchase’ or ‘get a free inspection’ much faster.”

Lastly, it’s important to maintain a consistent message from your display or search ads to your landing pages. “From the perspective of search marketers and brands, try to match the paid search advertisement to the landing page as much as possible,” advises Morrison. “If you state ’100% satisfaction guaranteed’ in your advertisement, that exact copy should be used on the landing page, too.”


3. Be Strategic With Images & Video


“Images and video are important to a certain degree, because they can increase user engagement and create a personal connection with users,” says Morrison. “But you shouldn’t use images and videos on your landing pages just for the sake of it, or clutter your landing pages with excess images and videos. It should be part of your landing page strategy, not the whole focus.”

When it comes to product photos, there’s no shame in going traditional. Morrison says:

“Use white backgrounds for product photos. Don’t show corners in your images so that it looks like the walls curve and you don’t see anything in the background of the image. Diapers.com and Soap.com are examples of websites that use high-quality production standards in their images.

“Having a wide variety of product images is just as important as showing multiple angles and 360-degree views of those products. How-to videos can also be helpful to users and reinforce user engagement with a brand or product. Americanmuscle.com is a great example of this — the site allows customers to upload their own images of products as user-generated content. Customers tend to trust and value comments and feedback from like-minded buyers.

“If you don’t have a production lab or can’t afford to hire a professional photographer or studio every time you want to promote a product, you can use stock photography sites like istockphoto.com, gettyimages.com or shutterbox.com. With sites like these, there’s always the chance of running into the same images. So if possible, pull images from exclusive corporate libraries. Try to match your photography subject to your audience’s demographics and needs/wants, and even better, create multiple pages that match different market segments.”


4. Highlight the Call to Action


“A call to action is a header image, offer or slogan that is asking for some form of action from customers,” Morrison explains. “The call to action tells the customer what they need to know, what they need to do and where they need to go.

Morrison names a few calls to action that seem to catch users’ attention: “free shipping, guaranteed 100% satisfaction, free returns, free inspections, no obligation, X% off, X dollars off.”

A call to action should be initiated within an ad unit, and it should be reiterated on the corresponding landing page. Morrison says, “Users should be taken to a specific page that will follow through on the already promised CTA [call to action]. If a user was given a call to action about a ‘free trial,’ they should be taken to the page where they can sign up for it. Follow through on the promise!”

Furthermore, a landing page should be transparent about pricing to prevent users from exiting or bouncing off the page, says Morrison.

Morrison advises to keep your goals in mind and form a call to action that revolves around your key goal:

“If your goal is to capture a person’s contact info so that you can follow up with him about his satisfaction with a product or send him future promotions and discounts, you should include a form on your landing page. It’s important for ecommerce sites to allow people to enter their contact info so they can be contacted at a later time.”

And finally, a call to action is often accompanies by a button that users click to begin the process. Morrison explains, “CTA buttons need to describe the action you want the user to take. Some examples include: ‘Schedule Inspection Now,’ ‘Join,’ ‘Submit’ and ‘Request a Call Back.’ The color of the button should be the bolder of your color palette to create some hierarchy. Red and green are typically good choices that can be easily seen by users. CTA button size and placement should also be tested to maximize your conversion opportunity.”


5. Test & Track Landing Pages


“Multi-variate testing is the process of testing many variations against one another in order to find the best combination for higher results,” says Morrison. “When it comes to landing pages, you need to see what works and what doesn’t work if you want to improve conversion rates.”

Morrison recommends free tools, such as Live Ball, Website Optimizer and Google Analytics, for testing landing pages.

“For a business, you’re always looking to increase your conversion rates and testing can easily mean the difference between a 10% conversion rate and 20% conversion rate,” Morrison says.

What tools and best practices does your business use for optimizing its landing pages? Let us know in the comments below.


More Small Business Resources From OPEN Forum:


15 Keyboard Shortcuts To Enhance Your PC Productivity
5 Services For Building Websites On A Budget
10 Accessories To Boost Office Morale
Top 5 Foursquare Mistakes Committed By Small Businesses
How To Use Social Media For Recruiting

Photos courtesy of iStockphoto, fotosipsak & Flickr, killyourcar, Leo Reynolds

More About: features, How-To, mashable, web design, website

For more Dev & Design coverage:





Lew Cirne is founder and CEO of New Relic, the leading SaaS-based web application performance management company supporting 10,000 customers including companies from Comcast to Zynga.

Twitter generates about eight terabytes of data a day. That’s a hell of a lot of data for one application. Some SaaS companies might look at that number and think that they’ll never need to handle that much data, or if they did, it would take far more infrastructure and server hardware than they could afford to maintain.

In both cases, they might be wrong.

Any SaaS business can handle as much data as Twitter and many can do it on only a handful of servers. It’s all a matter of understanding your data and planning your technology investments to be as scalable as possible. Sounds easy enough. So where do you begin?


1. Plan to Scale, Even in the Beginning


It may sound like premature optimization, but planning to scale is really just basic business strategy. Ask a few of these questions: How many people will realistically use the application in the next 6 to 12 months? What kind of data do you plan on creating or storing on their behalf? How long can all your customers “fit” on one server? What can you do when you have more customers or more data than that?

Take into account past growth patterns and expected growth rate and begin to determine the potential technological limits you’ll encounter. It’s also important to have mechanisms in place for unexpected growth. Think of it like an accounting process: When will infrastructure expenses outweigh the income? Planning to scale isn’t just about building the technology to accommodate growth. It’s also about informing business decisions.

Having a rough strategy for future growth will help you design your application and the infrastructure to operate it. You don’t need to build out all scaling capability at the start, but also don’t assume that the cloud will just scale by itself. You should keep some practicable ideas in the back of your mind for when the times comes.


2. Understand Your Data


Many fast growing SaaS companies feel like they’re just moments away from being buried under a mountain of data streaming in from their customers. There are so many ways to provide access to data, but you’re not quite sure how to weed through it all.

The key is to pay close attention to how users are actually accessing the data. For the majority of popular use cases, there is probably a much smaller set of data to care about. Understanding the most likely use cases for your application makes it easier to create and optimize a data handling strategy that will allow you scale.


3. Keep it Simple


Technology fads come and go. Every few months you hear about some new type of database or application framework that promises to magically shorten your development time or increase your scalability. The best technology, however, is the one you already know.

While many of these new tools offer great speed and functionality, they often lack experience with some of the more “boring” aspects of data handling such as redundancy, replication or failover, for instance. By keeping things simple and using technologies that you know, it becomes easier to respond to changes in the business and new demands on the application.


At the heart of planning for scale is understanding where you are in the arc of your business. Business growth goes hand-in-hand with technology growth. The more tuned in you are to demands on your business, the easier it will be to adjust and scale your application.

Image courtesy of iStockphoto, kemie

More About: dev & design, how to, SaaS, scalability

For more Dev & Design coverage:

Whether you built a personal site from the ground up or oversee digital strategy for a huge corporation, many of us are managing a web presence these days.

There are millions of websites out there, and tracking how people are getting to your site and what’s performing well is a must for being competitive in the online market.

Google Analytics makes it easy for anyone managing a site to track and analyze this data. It’s a powerful, free tool that can answer a variety of questions for a wide range of users. Wondering which keywords resonate with visitors? Need insight on what design elements might be turning people away?

Here’s how you can start answering the website questions that have been keeping you awake at night.


Adding the Code


Once you set up your Google Analytics account, you’ll need to implement the code on your website.

Set up a profile for the site you’d like to track and the step-by-step process will generate a unique script that you can add. If you’re using a content management system or blogging platform like WordPress, Blogger or Tumblr, you only need to add the code once to your template or theme. The theme will propagate the code in every post and page you create.

If your site is custom-built, you’ll either need to implement the code on each page manually, or speak to your web developer about how the site generates content.

Copy the JavaScript code from Analytics and paste it just above the </head> tag in your page or template. Adding this code will not affect the look of your site.


What You Can Measure


After you connect your site to Google Analytics, hit “View Report” on the initial screen. This will bring you to the main dashboard. In the left column, you’ll see the various types of data Google Analytics provides:

  • Visitors: This shows many things about the people coming to your site, including where they’re located geographically, what language they speak, how often they visit your site and what computers and browsers they use to get there.
  • Traffic Sources: Here you’ll find how people got to your site. You can track which sites link to your page or keywords people search to find you.
  • Content: This tab gives you insight into specific pages on your site. It can help answer questions about how people enter and exit your pages, as well as which ones are most popular.
  • Goals: If you’re aiming for established objectives, reports in the Goals tab will be helpful to you. Here you’ll find data about desired actions from users, including downloads, registrations and purchases.
  • Ecommerce: You’ll only need this tab if you’re selling items on your site as it houses all merchandise, transaction and revenue activity information.

These tabs contain subreports that provide insights about specific aspects of your site, including top content and visitor loyalty.

The information you choose to track depends on what curiosities you want to quell. Being in touch with keyword searches can help a site with text-heavy content to boost search rankings, while knowing which products convert best can inspire ecommerce sites to increase visibility of these items.

With Google Analytics, figuring out what you measure is the tough part. It’s how you measure that’s simple.


Setting Up the Dashboard


On the main dashboard, you’ll see a summary of your site’s data. You can customize the dashboard to show whichever reports you decide you want to see upfront. Just click on the type of report you want to see from the left column and hit “Add to Dashboard.” You can then position reports on the dashboard by dragging and dropping, or deleting ones you don’t want.

You can delve deeper into a data set by clicking “View Report” underneath the report graphic on your dashboard. This brings you to the full report on that topic.


Adjusting the Time Range


Be sure to adjust the date range in the upper right-hand corner before analyzing information from your reports. It defaults to a month-long range, ending the day prior to the day you’re viewing the report. (For example, on May 18, you’d see reports spanning April 17 to May 17.) Click on the date range box and a calendar will pop up. You can adjust it to track information quarterly, weekly, daily, or whatever timeframe works best for you.

If you want to compare date ranges, hit “Comparison” underneath the “Date Range” field. This will bring up a second calendar for you to adjust based on what time periods you want to consider, such as weekend to weekend or the first Tuesday of the month vs. the last Tuesday of the month.


Data Tables and Visualizations


Many of the reports in Google Analytics, such as pageviews and conversion rates, contain linear graphs that present data for the topic and date range you’ve selected. When mousing over the dots on the line, you’ll see measurements for that day, week or hour.

You can change the metric you want to visualize by clicking the tab above the graph on the left. Here you’ll also have the option to compare two metrics against each other. When you’re not com
paring date ranges, you can compare against the site average. This is particularly helpful if you’ve laid out goals, as you can compare site activity to conversion goals. When comparing, a second line (gray) will appear for the variable over the graph with the original metric line (blue), making it easy to see how you’re stacking up.

Beneath the graph, you’ll see more data laid out with summaries and scorecards prominently displaying important overall metrics, such as pages per visit and time on site. Most reports have three different tabs in the top left above the scorecards: Site Usage, Goal Conversion and Ecommerce.

More granular measurements of these data sets can be found in a table below. You can visualize the table in a pie chart or a bar graph by clicking the icons just above and to the right of the scorecards. Table information can be sorted in ascending or descending order by clicking on the column heading you want to reorganize. To increase or decrease the number of results displayed, click the “Show Rows” drop down menu at the bottom right of the report. The default is 10 and you can show up to 500 results per page.

You can also refine data with the “Find Source” box at the bottom left of the report. Enter keywords relevant to your search such as “source” or “keyword” and select “containing” or “excluding” to reveal more specific information.

If you’re unsure of what a specific measurement means, click the question mark next to it and an explanation bubble will pop up.


Sharing Reports


You’ll find an email button at the top of all reports, just beneath the title. You can send the email immediately, schedule a recurring report email or add the report to an existing pre-scheduled email. If you’re presenting the report, you can export it as a PDF (recommended), XML, CSV or TSV file.


Going for It


Now that we’ve broken down the basics, it’s your turn to go for it. Will you try your hand at Google Analytics? Which business questions might it help you answer? Let us know in the comments.


More About: business, data, google analytics, metrics, trending, Web Development

For more Dev & Design coverage: