Archive for the ‘Website Design’ Category

29 Guides to Beautiful and Effective Website Design

Tuesday, May 20th, 2014

Long gone are the days when websites were essentially static online brochures. Today’s websites are expected to convey a positive and compelling brand image, differentiate a firm’s products or services, educate visitors on how to solve problems, provide the latest industry news and thought leadership, serve as pre-sales engineers, entertain, personalize, interact, and display content in a wide variety of formats, from text and photos to infographics and video.

Gravity Movie Website - HTML5And to accomplish enough of all that in 15-20 seconds to keep the visitor on the site. While delivering a great user experience on any device from a smartphone to a 60″ HD LED screen. Yeah.

How can designers produce websites that offer both stunning visual design and fast page load speed? How can content creators make better use of the ubiquitous “About Us” page? How can sites be best designed to optimize search visibility? Effectively convert visitors to sales prospects and buyers? Offer an optimal mobile experience?

Find the answers to those questions and many more here in more than two dozen guides to beautiful and effective website design from the past year.

Website Design Guides

5 beautifully immersive HTML5 websites by iMedia Connection

Devanshi Garg showcases five websites that use HTML5 to “create graphical and feature-rich web experiences that blur the line between entertainment and digital marketing,” including the marketing site for the movie Gravity, on which visitors can “initiate a 3D spacewalk experience through their browser using HTML5 and WebGL.”

Why “Simple” Websites Are Scientifically Better by ConversionXL

Visitors to this post will unfortunately be assaulted with an obnoxious, screen-filling pop-up, but once past that, will learn from Tommy Walker “that ‘visually complex’ websites are consistently rated as less beautiful than their simpler counterparts. Moreover, (sites)…with simple visual design were rated as the most beautiful across the board.” Walker goes on to explain what a “prototypical” website is, why the brain finds simple design more appealing, and offers seven tips for designing a simpler site.

Skinny Ties website - before and after

The secret to a compelling B2B website by iMedia Connection

Making the point that “While your business may be B2B, your website could be dramatically more effective if it looked, acted, and worked more like a consumer website. That’s because no enterprise will ever be visiting your website. It will always be an individual — one living, breathing person at a time. A human who needs to be enticed, persuaded, convinced, and welcomed,” Paul Dunay offers practical guidance on how to make b2b websites more compelling and effective by taking “a few pages from the playbooks of consumer marketers.”

Unusual Navigation - Form Follows FunctionCreative Websites with Unusual Navigation by Designer Ledger

The English is a bit rough, but the examples of noteworthy and distinctive navigation approaches from sites like Ralph Van Rentergem, Yodabaz, and Form Follows Function (right) are well worth exploring for inspiration.

6 ‘About Us’ Pages That Are Probably Better Than Yours by HubSpot

Sonja Jacob spotlights half a dozen examples of noteworthy “About Us” pages, along with tips for creating compelling copy and graphics for one of “the most important pages on your website — which also happens to be one of the most commonly overlooked pages.” Among her examples are Yellow Leaf Hammocks: “Good stories humanize your brand and provide context and meaning for your product. What’s more, good stories are sticky.”

Yellow Leaf Hammocks - About Us page

Maximum Quality: 44 Free Fonts for Creative Designers by Noupe

Dirk Metzmacher presents a collection of more than three dozen “high-quality fontsets from all over the world,” as well as specifying the format(s) and license type for each typeface.

40 Of The Most Beautifully Designed Corporate Websites by Simply Zesty

Claire Brown highlights 40 “beautiful inspiring designs” that communicate the “company’s goals in the most attractive manner as well as make the user want to explore more,” among them Mooseheads, These Are Things, Art of Flight, and White Rabbit Beer.

White Rabbit Bear - Creative Website

Thinking of a Site Redesign? STOP and Take a Look at These Blogs by Craig McBreen

Craig McBreen presents a post that is “all about stopping, looking and paying attention to the elements of (great) redesigns.” He then delves into four noteworthy site redesigns, including Adam Toporek’s Customers That Stick, which incorporates “Minimal color adorned with a very cool logo (is that Don Draper leaning on the ‘C’?) and an uncluttered top navigation bar with only four links.”

Guides to Parallax Design and Infinite Scroll

7 cool web design trends to watch by iMedia Connection

According to Lisa Wehr, for websites today, “Plain-Jane HTML just isn’t going to cut it. And it shouldn’t.” She takes a closer look at how design trends like parallax design, infinite scrolling, alternative navigation, and responsive design work and what they help accomplish, along with examples of each.

G'Nosh Website

Long Homepage Design Part 1: Debunking “The Fold” by Market 8

Lynn Sharafeddine uses statistics and logic to dispel the myth that CTAs must be “above the fold” (a term borrowed from the newspaper industry) because website visitors supposedly won’t scroll down the page (they will). She then offers four tips for getting visitors to scroll, like presenting information at the right time: “When people are scrolling, you get to control when they see certain information. This is why sometimes a CTA placed at the very bottom of the page might convert better.”

Top 60 Parallax Examples by Intechnic

Danielle Kogan lists 60 (!) examples of parallax design, which she defines “a popular design technique used on websites in order to create an illusion of movement on the screen…This cool 3D-like design concept allows users to scroll up and down a page at different speeds, while images on various layers move at different rates to give the page more visual depth and dimension to give the user a more seamless experience,” including Tinké, The Winkler Organization, and Saucony Kinvara 3.

Tinke - Website Design Example

Guides to Website Design for SEO

Infinite scroll: its impact on SEO and how to fix it by Econsultancy

While web designers aren’t necessarily (and shouldn’t have to be) SEO experts, the design of a site should never hinder optimization efforts. Andreas Pouros explains two different techniques for implementing the infinite scroll effect in a search engine-friendly manner, along with the pros and cons of each approach.

8 SEO Best Practices For Website Architecture by Snaptech Marketing

Noting that “website architecture is a pivotal process that can make-or-break your site’s SEO success,” Darcy McGilvery advises using these eight best practices for SEO-friendly website design, among them making site architecture reflect page priorities (i.e., your most important pages should be highest in your site architecture, utilizing breadcrumbs, and keeping all pages within three clicks of the home page.

Simple Website Information Architecture Example

How to Create a Parallax Scrolling Website with SEO by SEO Buzz

Conceding that “Many believe that a parallax scrolling website and SEO are incompatible,” Wanda Anglin presents a case study on how this arresting visual technique can in fact be combined with solid SEO practices. Vitally, she notes that, from the outset, “The site must have a site architecture for SEO. Parallax scrolling is a style of effects that can be applied to each URL but you first have to start with SEO-friendly web architecture.”

Getting The Website Information Architecture Right: How to Structure Your Site for Optimal User Experiences by ConversionXL

Ignore the obnoxious pop-up here (again) and you’ll find an outstanding post from Peep Laja that outlines five steps for creating an information architecture (such as: metadata, scenarios, pages…Once you have an understanding of the users – their intent, the why behind it and how they’d like to achieve their goal – you can begin to figure out how to present your content in a way that will make sense to your users”), techniques for optimizing menu structure, navigation design, tools, and more.

Conversion Rate Optimization Guides

How To Collect Email Subscribers With Landing Pages That Convert At 50% by Marketing Land

Chris Hexton shares “examples and provides guidance on how you can use dedicated landing pages to increase your subscriber conversions rates” from email marketing, richly illustrated with both consumer and b2b marketing examples. He also offers three tips for maximizing conversions, such as using social proof (“People hate missing out!”).

Converstion Rate Optimization - Unbounce Page Example

5 Ways to Utilize Thank You Pages for Better Conversions by Visual Website Optimizer

Oli Gardner points out that “Thank you pages are usually an after-thought, a quickie, a clumsily put up half-hearted meal,” because efforts are focused on designing a high-converting landing page. Once the conversion is complete, the conversation generally ends, which leaves “an awful lot of money on the table.” He follow up with five ways to use thank-you pages to get more value out of the conversion.

Testing and Optimization: Radical website redesign program improves lead gen 89% by MarketingSherpa

David Kirkpatrick presents a case study on how One Call Now radically redesigned its home page, testing multiple elements to optimize conversions. He writes that “Through optimization, the sign-up process was shortened, and free trial sign-ups increased 55.3%, and the overall redesign of the entire website garnered a 89% lift in lead generation.”

Videos for Landing Pages 101 by Business2Community

Noting that “52% of consumers say that watching a product video makes them more confident in online purchase decisions,” Juan Pablo Castro explains how to decide what type of video to use, the importance of audio quality and scripting, how to create the right video content, and how to use video most effectively to increase conversions on consumer or b2b landing pages.

Path - Video Landing Page Example

10 excellent video-embedded landing pages by Econsultancy

Supporting the post above, Christopher Ratcliff here highlights noteworthy examples of landing page video content. While most of the pages are from the consumer marketing world, the General Electric example (“GE took off all the text-heavy mission statements from its website and replaced them with videos of examples of the company’s work instead”) shows how B2B marketers can use video for lead gen effectively as well.

GE Video Landing Page Example

Creating Search Optimized Landing Pages That Convert by Volusion

This guest post explains why it’s important to optimize landing pages for organic search; the distinction between organic and PPC landing pages; and how to build an SEO landing page that converts (e.g., “the first thing you need to do is analyze your reader’s intent. Ask yourself what type of readers and/or buyers you’ll be attracting. It’s not only what you want them to get out of your website, but what you feel they want to get out of your website”).

How To Optimize Contact Forms For Conversions [Infographic] by unbounce

To maximize conversions, Oli Gardner (again) advises keeping contact forms short, skipping the phone number field (unless absolutely necessary), and continually testing–as well as using left-aligned fields for readabilty, and using a button label other than “Submit” (“Forms using Submit have an almost 3% decrease in conversion rate”).

21 Inspiring Examples of Contact Pages and Forms by Web Design Ledger

Gisele Muller showcases 21 inspiring examples of exceptionally well designed contact pages and forms, noting that “A website should have a clear an obvious way for visitors to get in touch with the site’s owner..it is even nicer if your audience can find a contact page/form that shows your personality – something that shows that you care about your viewers and that you want them to contact you.”

Milk & Pixels - Contact Page Example

Mobile Website Design Guides

Smartphone Users Want to Buy: Get Out of Their Way by V3 Integrated Marketing

Social is Mobile - statsShelly Kramer writes that “Smartphone users are looking for what it is you do and sell because they want it—now,” cites statistics to back this up (for example, “70% of mobile users have used click-to-call to connect directly from the search engine results page…61% (say) it’s the purchase phase of the shopping process when click-to-call is most important,” and provides tips on how to make it easy for mobile visitors to find what they need and take action on your site.

3 reasons you’re not ready for responsive design by iMedia Connection

While the case for using responsive design is compelling, Scott Kiekbusch warns that organizations need to take a look at their current web presence and take three key considerations into account before attempting a transformation, such as starting with content inventory and strategy: “Most of [your current website content] is probably outdated or even downright worthless (you don’t still have content appearing in Flash, do you?). And it almost certainly isn’t optimized for viewing on a screen the size of a deck of playing cards.”

A group debate discussing the best way to make your site work on all devices? by Smart Insights

James Cannings reports on the results of an interactive session with web designers exploring the relative merits of four different design options: responsive web design, adaptive web design, separate mobile site, or “do nothing.” The post delves into technical aspects and distinctions between the approaches, and includes a helpful comparison of the pros and cons of each approach (with the final “con” of the do-nothing approach being “slow death”).

Responsive design for dummies by iMedia Connection

Evan Gerber explains what responsive design is, how it works, and how to best capitalize on the advantages of this technique while reducing risks, such as thinking across form factors (designers should create “interfaces that can work for both mice and fingers by doing things such as using big targets for tapping or clicking”), working collaboratively, considering bandwidth differences, and combining a mix of responsive and selective design.

The Next Web - Responsive Design Example

How to do a Mobile SEO Audit: Identifying and Maximizing your Website Mobile Potential by State of Digital

While, as noted above, web designers aren’t necessarily SEO experts, website design does of course play a role in optimization, and this is particularly true and important in mobile site design. Aleyda Solis walks through three different approaches to mobile site design, and explores the SEO impacts of each alternative.

Responsive Website Design TipsWarning: Your Hasty Move to Responsive Design Could Backfire by iMedia Connection

Devanshi Garg (again) contends that while there’s no question optimizing the online experience across the different devices visitors will use to access your site is critical, responsive design isn’t always the best choice–it depends on the nature of your site, as well as other design and analytics considerations.

Post to Twitter

31 Spectacular Web Design Guides, Techniques and Resources

Monday, June 17th, 2013

Paradoxically, in the early days of websites, when there were few standards to adhere to, most business websites were laid out with pretty much the same template: grid layout, logo in the upper left, content in the middle or left frame, “highlights” in the right sidebar. And being edgy meant using a slightly different shade of blue as the dominant color. A few adventurous souls did some creative things with Flash, but even then, few people saw these sites because they were invisible to search engines.

Today, most sites use CSS rather than tables, avoid the use of deprecated tags, and adhere to W3C standards, and yet—the variety and creativity of website design is greater than ever.

How can you design a website that stands out visually from the crowd yet meets users’ needs? Maximizes social engagement? Optimizes trust and conversions? Looks as good on a smartphone as on a monster monitor? Find out here in more than 30 of the best articles and blog posts on website design of the past year.

General Website Design Guides

13 Website Social Optimization Oversights That Make You Look Foolish by Search Engine Watch

Angie SchottmillerThe positively awesome Angie Schottmuller identifies a baker’s dozen barriers to social media engagement on your website, such as requiring account creation or sign-in in order to comment (“Ease up on the form lock down. Allow users to rate and comment without creating an account…Forgotten passwords are a huge barrier to on-going engagement, so leverage OpenID and social sign-on tools to simplify the comment interaction process”).

Why “Infographic Thinking” Is The Future, Not A Fad by Fast Company

John PavlusJohn Pavlus reports that Francesco Franchi is bullish on the potential of infographics—but only if done well. In this video, the art director at one of Italy’s top financial news outlets says that content needs to come first, that infographics shouldn’t be like PowerPoint presentations, and that they don’t need to be one-dimensional.

10 ways to make your website more social by iMedia Connection

Jeff RagovinJeff Ragovin offers tips for creating a more social-friendly website, from first determining your social objectives and choosing your social networks wisely to keeping “your theme and aesthetic similar across digital presences” (i.e., branding) and incentivizing your readers to share your content.

10 Useful Findings About How People View Websites by ConversionXL

Peep LajaPeep Laja shares practical applications of 10 findings from eye-tracking studies, such as that the top left-corner of a site gets initial attention; that people read in F-patterns; that the most effective images are large, high-quality photos of people facing forward; and, most frighteningly, that “When viewing a website, it takes users less than two-tenths of a second to form a first impression.”

List Building: The four questions every email capture page must answer by MarketingSherpa

David Kilpatrick outlines four questions visitors will naturally have when hitting your landing page, such as “Why should I sign up?…What you want to avoid is simply saying, ‘Sign up for our FREE newsletter.’ Write from the subscriber’s point of view and explain how the opt-in for your email program will help the new subscriber solve challenges and eliminate pain points.”

6 Tips to Boost Your Web Presence by Inc.

Though this post largely centers around Lance Armstrong’s website—since somewhat discredited by Lance’s honesty issues—it still contains some great nuggets of wisdom, such as that one should “Keep it simple. The goal of most websites is to get visitors to the content they seek as quickly as possible. A simple, intuitive design is the best way to accomplish that.”

Put Customer Convenience Front And Center When Designing Websites – Part II by MediaPost

Jim Gilmartin details 10 “dos and don’ts” of website design, specifically “to help increase the satisfaction quotient and reduce the frustration quotient of most site visitors especially Baby Boomers and senior visitors,” though the advice applies much more broadly than that. For example, do include a blog and place a (simple) newsletter sign-up box on your site (presuming you offer a newsletter); don’t use auto-play videos, Flash or poorly-crafted titles.

12 Design Best Practices for Drop-Down Menus by Get Elastic

Linda BustosLinda Bustos offers a dozen tips for maximizing the usability of drop-down menus, among them: keep menus as short as possible; use multiple columns for unavoidably long menus; set the menu off clearly with a border or shadow; and get the timing right (“the menu should wait for half a second before appearing, as this prevents the menu popping up every time a user passes their mouse pointer over the top”).

Free Design Fonts

10 Extremely Good Free Fonts for Your Designs by Web Design Ledger

Henry JonesHenry Jones showcases 10 free design fonts, including Bemio, a fun, rounded “ultrabold sans with an extensive character set (which) bridges the gap between old signage and craftsmanship with modern forms and simplicity,” designed by Joe Prince.

28 New Free Fonts For Web Designers by Splashnology

This post highlights more than two dozen free fonts for web designers, such as Adamas Regular by Octavian Belintan, PLSTK by Aesthetic Therapie and Bispo by Jackson Alves. “a script typeface made inspiring on italic chancery calligraphy, with a flat nib pen and a module of 10 pen widths.”

8 Beautiful New Free Fonts by Web Design Ledger

Henry Jones (again) shares eight more free design fonts, including FatFrank, Acorn Typeface and the art deco-ish 47.

10 Excellent New Free Fonts by Web Design Ledger

One more set of free font downloads from Henry Jones, this set featuring typefaces like Nexa, Bouwen and NeoDeco.

Free Social Media Icon Sets

115 Creative and Unique Social Media Icon Sets by EntheosWeb Blog

There’s nothing unusual about including social media icons on blogs, but there are certainly some unusual and distinctive icon sets here. If you want the social icons on your site to stand out from the standard circles or rounded squares, you’ll find plenty of alternatives here, from colorful splashes and jeans pockets to coffee cups, bottle caps and T-shirts.

Best Free Social Media Icon Sets for 2012 by DandyWP

Hand-drawn social media icon setWhile there is inevitably some overlap between this post and the one above, here you will also find interesting icon sets along the themes of trucks, blueprints, monochrome and hand-drawn themes.

20 Free Social Icon Packs That Will Make Your Design Stand Up by Top Design Magazine

Still more social icon sets, from hearts and “Windows 8 style” to squares and sprockets.

Free Social Media Icons (34 Sets) by Graphic Design Junction

Muhammad Faisal presents nearly three dozen creative social icon sets, with themes ranging from 3D social icons and icons with a hand-sketched look to blue, neon, street signs, faded, retro, flaming, dark, frozen. letterpress, Easter egg, and speech bubble.

Parallax Scrolling Design Guides

Parallax Hovering And Its Engaging Quality For Web Design by Usabilla

Sabina IdlerSabina Idler explains what parallax effects are in scrolling and hovering, how they work, how they attract visitor attention, and a bit about how to implement them, then illustrates all of this with 10 richly visual examples of parallax website design, from Grab&Go  to Batman 3D.

Hot Web Design Trends: Parallax Scrolling Effects in 100 Examples by Splashnology

For more about parallax scrolling (which is a “technique that features layered images that move around the website in different speeds/perspectives creating a nice and interesting 3D illusion”), check out 100 more examples of the approach here including 8vodesigns, Head2heart.us and Electrochuck.com

Website Trust and Credibility

The Psychology of Why Sexy Websites Suck at Sales by KISSmetrics

D Bnonn TennantD Bnonn Tennant explains why consumers naturally trust “attractive” websites, but that in this case, attractive does not mean sexy or flashy—it means following some conventional design standards that won’t make a site exciting, but may very well help it to convert more successfully.

Give Your Website Soul With Emotionally Intelligent Interactions by Smashing Magazine

Chuck LonganeckerChuck Longanecker writes that when he researched sites and apps with high loyalty, he found “the websites and apps we truly love have one thing in common: soul. They’re humanized. They have emotional intelligence designed into the user experience. And this emotional intelligence is crafted through thoughtful interaction design and feedback mechanisms built into the website.” He then showcases a number of sites that meet this criteria, demonstrating how each is infused with creativity and emotional intelligence.

9 User Experience Pitfalls That Repel Website Visitors by KISSmetrics

Zach BulygoBecause no one wants to lose website visitors due to factors within their control, Zach Bulygo here reveals the unpleasant truths about factors that can drive visitors away, including the use of stock photography (that smiling young woman with the headset representing “customer service” is used on far too many sites), having a slow-loading site, using auto-play videos, and—ugh, my pet peeve!—pop-ups. As Zach puts it, “It’s 2012, why does your website still have annoying pop-up advertisements?…Save pop-ups for the spam sites.”

39 Factors: Website Credibility Checklist by ConversionXL

Writing that “web credibility is about making your website in such a way that it comes across as trustworthy and knowledgeable. Your website is often the first point of contact for the customers…Companies that design for credibility have a strategic advantage over competition,” Peep Laja (again) identifies four types of website credibility, then presents a detailed website credibility checklist–factors to examine (and if necessary, change) on your site such as using case studies and testimonials, while avoiding excessive ads, unsupported superlatives and cheesy stock photos.

Landing Page and CTA Design Tips

8 Reasons Users Don’t Fill Out Sign Up Forms by UX Movement

Noting that “Most users today are more wary than ever about who handles their personal information. In a cyber world full of hackers and spammers, who can blame them?,” this post outlines reasons visitors may not be signing up on your site (for a download, a webinar, a newsletter, whatever)—and by extension, how you can make it more likely that they will sign up—such as fear of being spammed, concern you’re asking for too much information or information you don’t need, or simply not seeing a compelling call to action.

5 Highly Effective Landing Page Tips by Search Engine Land

Mona ElesseilyMona Elesseily details five elements that can increase landing page engagement, including credibility indicators like customer quotes, removing unnecessary page elements, and experimenting with different wording on action buttons (after all, who really wants to “submit”?).

14 Real-Life Examples of CTA Copy YOU Should Copy by HubSpot

Pamela VaughanNoting that “while CTA design is critical to initially drawing the attention of your visitors, it’s the copy of your calls-to-action that has to be compelling enough to get them clicking,” frequent best-of honoree Pamela Vaughan shares 14 examples of outstanding call-to-action copywriting from both well-known sites (Amazon.com) and more obscure ones (OH! Media).

Mobile Website Design Tips, Tools and Resources

Ultimate Guide to Responsive Web Design: 55 Stunning Tools, Tutorials, and Examples by 1stWebDesigner

Noting that “It is estimated that within two years mobile internet users will overtake the desktop internet users,” Daniels Mekšs steps through more than 50 resources for responsive design, from tools like Less Framework 4 and Gridless to sources of “Inspiration” like Quazarwebdesign and Apgdesign.

The 5 worst mobile websites by iMedia Connection

Eric AndersonOf course these aren’t literally the very worst mobile sites in existence, but as Eric Anderson explains, “rather than trying to simply expose five bad mobile sites, I looked for sites that were archetypal of certain common mobile usability problems,” and he found, among others, “The bad first date: Hardee’s” which asks for your zipcode (while you are likely on the road far from home) and the “irony of the year award: Nokia” which—at the time of the writing of this article—did not actually have a mobile website.

10 best practices for your mobile website by Socialmedia.biz

Deltina HayDeltina Hay presents 10 “best practices that should be applied to all mobile websites,” among them taking advantage of mobile features (“Like the click-to-call button, there are features specific to mobile devices that can be used to improve your site’s user experience”) and using a conventional URL structure (“It is becoming standard to find a website’s mobile version at a URL like m.example.com”).

Why Google loves responsive design (and you should too) by Econsultancy

Mike EssexMike Essex outlines half a dozen reasons to use responsive design, such as that “Responsive sites attract more links to key pages” (because there aren’t multiple URLs with the same copy), responsive sites work on multiple devices, and responsive sites (usually) look better, then points readers to resources for getting started with responsive design.

Mobile Websites vs Responsive Design: What’s the right solution for your business? by Google Mobile Ads Blog
***** 5 STARS

Jessica SapickAlthough responsive design is now generally regarded as the best approach to accommodating the needs of both desktop and mobile web users, Jessica Sapick points out that it’s not the best approach in every situation—and provides a vital guide to determining which approach is best based specific business needs.

Best practices for mobile email design by Econsultancy

Observing that about a third of email use is now on mobile devices, Erik Boman offers more than a dozen practical tips for mobile-friendly email design, from going easy on images and including social links (but keeping them out of the way of important calls to action) to using a one-column layout and not crowding links.

Post to Twitter

Nine B2B Marketing Lessons from College Visits

Tuesday, July 31st, 2012

I’ve spent several weekends this summer experiencing the excitement and trepidation of visiting colleges with my eldest offspring.

The Campanile at Iowa State UniversityThe adventures have been eye-opening (college life has changed a lot since the 90s) and, sitting late last week in another university presentation, it occurred to me that there are lessons to be learned for social media marketers from the way colleges handle this process: (at least) nine of them.

One advantage that university marketers have over their most of their b2b counterparts in optimizing their programs is scale; colleges can learn from and fine-tune their messages and marketing processes based on thousands of interactions each year. Only the largest b2b enterprises approach that level of sales activity. So, here are several lessons b2b marketers can take from that high-volume learning.

1. Provide prospects with a “guided tour.” On college tours, representatives of the university show you around different buildings and classrooms, explaining key features along the way, and always end the walk by telling you where/how you can find more information.

B2b buyers probably won’t come to your office in droves, but you can provide them with a similar experience online. Design your website to guide prospects through your different product and service offerings. Content should focus on compelling high-level messages, but always provide the opportunity to “learn more” by drilling into detailed functional specifications for those who really want that level of detail.

2. Focus on your differentiators. Every university offers certain services (flexible meal plans, for example) so these features tend to be touched on lightly. The focus is always on what sets the campus apart, for example the innovative use of technology in the classroom at Purdue or the one-of-a-kind tornado simulator at Iowa State University.

For b2b marketers, it’s crucial to communicate those messages about your products and/or services that include words like “only,” “first,” “largest,” “fastest,” “most,” etc.. Just be sure to back up these statements with facts, examples and demonstrations.

3. Anticipate questions. Fielding questions from thousands of prospective students each year enables college marketers to integrate answers to most common questions into their web content, brochures and presentations.

This can be more challenging for smaller b2b companies, and particularly for startups. Marketers need to take advantage of every customer and prospect interaction as well as tapping the experiences of sales and customer service personnel to develop content and materials that address the most common questions in their markets.

4. Make it easy for prospects to ask additional questions. College presenters and tour guides encourage questions at almost any time.

B2b vendors should do the same on their websites through features like site search, FAQs, prominent and easy-to-find phone numbers and email addresses, social media links, and interactive capabilities beyond online chat. Like a college tour guide, a b2b website should encourage dialog and make it easy to engage.

5. Address price straightforwardly—but find ways to avoid “sticker shock.”  College is expensive, very expensive, yet most universities do provide easy-to-find cost data broken out by the main categories of tuition, books, and room & board. But they often preface this information with a page covering topics like financial aid, scholarships and student employment.

B2b marketers can’t entice buyers with promises of government financial aid, of course, but there several other tactics that can be employed to minimize price objections, such as:

  • • Offer your product in a modular fashion, so it can be purchased and implemented one affordable piece at a time.
  • • Lead with proof of compelling ROI, or an ROI calculator to enable prospects to do their own calculations
  • • Provide products and services in a mix-and-match, a la carte fashion, enabling buyers to purchase only what they really need.
  • • Offer different levels of product/service bundles, e.g., Basic, Premium and Enterprise.
  • • Offer discounts based on organization type (e.g., for educational institutions and non-profits), based on volume, or based on pre-payment.
  • • If your pricing model is necessarily complex, simplify presentation for the web by providing a wide range with a narrower “most cost” range, similar to the way Mack Collier explains the cost of social media.
  • • Provide terms such as buy vs. rent offerings, a monthly fee or payment plan, or financing offers (car companies do a great job with this, advertising their vehicles as costing $x per month rather than showing the sticker price).

6. Address cultural as well as functional issues. Recognizing that university life is about the experience as well the education, college tour guides spend as much time talking about campus life as they do about academics, covering topics like housing, food, amenities (green spaces, gym access), local shops and restaurants, clubs and activities, and sports (intramural and spectator).

Similarly, many b2b purchases aren’t one-off transactions but rather the start of a (hopefully long-term) relationship. So tell prospective not just about product features but also about what it’s like to be your customer. For example, do you offer an online support and discussion community just for customers? How do you keep your customers informed of product updates, patches and new features? What kind of environmental and sustainability initiatives do you have in place? In other words, communicate not only about what you sell but also about what kind of company you are, and why prospective buyers should want to do business with you.

7. Use multimedia. College tour guides excel at mixing demonstrations, graphics, photos and video into their presentations.

Though rich media is nothing new, many b2b websites are still predominantly text. Make your site stand out and communicate more effectively by incorporating diagrams, infographics, animation, photos, video and other media types.

8. Appeal to both the “buyer” and the “check writer.” College representatives make sure to address the concerns of both their “functional buyers” (students) and the “economic buyers” (usually parents) by pointing out topics like financial aid (see above), placement rates and on-campus job fairs.

B2b marketers similarly need to address multiple audiences, often including management (cost reductions, improvements in operations, new capabilities), users (ease of use, built-in help, simplified workflow), the IT department (ease of integration, minimal implementation requirements) and finance / executive management (increased efficiency, lower costs, higher revenue).

9. Let your customers speak for you. Most of the tour guides and many of the presenters are students; who better to “sell” the university to potential incoming freshmen than next year’s upperclassmen? Students naturally understand the concerns and interests of their peers, and are seen as highly credible and knowledgeable sources of information.

Developing case studies and collecting testimonials can sometimes be challenging in the b2b world due to corporate policies about endorsing vendors, but even in situations where your customers can’t sing your praises directly, there are ways to let them “speak” to prospective buyers on your behalf.

If you find yourself stuck in rut with your b2b marketing, recycling the same-old same-old tactics, take a look outside your industry inspiration. After all, as many of us remember from our college experiences: some of the most important learning happens outside the classroom.

Post to Twitter

Can Adobe Muse Work for Your Web Design Needs?

Saturday, July 7th, 2012

Guest post by Anita Brady.

Are you wasting money paying for web development and design services? Ever wondered if you could do it all yourself and save a pile of money?

Adobe MuseThe newest software release from Adobe, a web design platform called Muse may allow you to do just that. Although this new release has had its share of industry criticism and controversy, this revolutionary new CMS software allows graphic designers with minimal web experience to make professional looking sites and export HTML in minutes. Although Apple’s iWeb preceded Muse in the “DIY web-design for dummies” category, the integration of Muse with Adobe’s other programs like Photoshop promises to open up professional site creation to a new level of non-coding designers.

Featuring an interface similar to Adobe InDesign, new users will feel right at home with the familiar toolbars and design layout. Using the simplistic front-end, you can create a professional website that could serve a variety of purposes: blog, e-commerce, business site, search marketing, or portfolio. Someone with very little website design experience is now able to create a stylish and professional looking site in just a few steps. With a little bit of work, you can add full functionality to an otherwise boring Muse site that would cost hundreds in professional design fees. Here are a few extra things you should know if you are considering giving Muse a try.

Mobile Ready

Adobe has been working to optimize the HTML output for Muse to be mobile-friendly. This is important considering that 20 percent of all web traffic in the U.S. and Canada now comes from mobile devices. In the meantime, there are a few design considerations that you should make to ensure your site will load properly.

Text Columns. In your main page design, be sure to break up text fields into two or three columns. Not only is it easier for viewers to read, but also having multiple text columns will allow mobile devices to load your entire text box on one screen.

Image Size. Good images are important, but make sure they are not too large! Except for your main page header, be sure that your pictures are less than 300 pixels wide and are optimized for mobile websites. Muse has some image optimization built in, but that doesn’t mean that you should embed a five-megabyte image just because you can. Resized images end up looking un-sharp and may be slow to load. Keeping your images at proper size and dimensions will ensure they load quickly and properly on mobile devices.

SEO. Good search engine optimization tags are also critical to making your new Muse site mobile-ready. Be sure to include pertinent keywords in the description of each page (under page options), including a couple of relevant sentences about your site, as well as your business zip code. This description pops up directly under search results, and including your zip code helps ensure that you are featured in local business results on sites like Google.

Ecommerce

Don’t be scared of incorporating a shopping cart or online store element to your site. There are many great third-party sites like Wazala that feature a simple back end that allows you to create a full store-front and then embed it into your Muse page. You can literally create a professional online store in minutes and have it up and running without ever writing any HTML.

Embeddable Apps

Adding functionality to a basic Muse site is relatively easy. There are loads of third-party sites that allow you to include a variety of add-on apps. There is a work-around for just about every limitation within Muse. Sites like Nabble can create embeddable forms, mailing list sign-ups, and even discussion forums that will integrate perfectly with Muse. By taking advantage of these powerful third-party apps, you are using all the resources available to you as an amateur web developer, and hopefully creating a unique site that will stick out from other Muse designers.

Serve Ads

If you are looking to create a site with original content or a discussion section, consider displaying ads on your site to help offset hosting expenses or boost revenue. With hosts like Google AdChoices, you can generate HTML that will embed smart-ads seamlessly into you existing Muse site. These ads are usually displayed in between posts or on a dedicated side bar. Even though you are just learning web design, take advantage of professional advertising options and add legitimacy and revenue to your online business.

+++

As you can see there is huge potential for creating something great, even with minimal experience. So why not take advantage? Consider adding a few of these little “extras” into your new design to make up for any design features that Muse lacks in order to make the most of this revolutionary new opportunity for yourself and your business!

Senior executive Anita Brady is the President of 123Print.com, a leading provider of a high variety of quality items like business cards, fancy letterhead and other materials for small businesses and solo practitioners.

FTC Disclosure: This information is presented as an independent product review of Adobe Muse. Webbiquity has no financial relationship with either Adobe or 123Print.com.

Post to Twitter

B2B Mobile Websites: Prepare, but Don’t Panic

Wednesday, June 13th, 2012

You’ve seen the statistics: mobile browsing (e.g., browsing the web using a smart phone or other mobile device) will eclipse desktop web browsing sometime in 2013. Yikes! More than half of my website traffic coming from mobile phones? I’m not ready!

Relax (unless you’re in the relatively small group of businesses that shouldn’t). Mobile browsing is unquestionably having an impact on website strategy, but the impact varies widely among different sectors based on a variety of factors.

Type of business: if you run a bar, restaurant or specialty retail shop that is dependent on local traffic, then by all means you had better have a sophisticated local and mobile web strategy. As recently as five years ago, many of your patrons were likely finding you through the (print) yellow pages. Most households don’t even want those tree-killing doorstops anymore, much less do they use them.

Local service businesses have a bit more breathing room, but only a bit. If you offer home repair, plumbing, electrical, landscaping or other types of services, your clients may use the “big screen” of a desktop or laptop PC to find your company, read about your offerings. and research reviews. But even this simple research is becoming increasingly mobile.

For B2B companies with complex offerings, however, the pressure is far less urgent. For considered purchases, where the research is generally conducted within the workplace environment, desktop browsing still reigns. Based on analysis of traffic patterns of b2b technology websites I’ve worked with (more than 40 are displayed in my Google Analytics home screen view currently), mobile browsing is a growing but still fairly small part of the picture. This is not a comprehensive study but is likely to be generally representative of B2B websites.

B2B IT Website Mobile Visitor Statistics 2012

 

Note that, on the one hand, the share of total website traffic nearly doubled from the first quarter of 2011 to the first three months of 2012—a clear indication of increasing use of mobile browsers to access b2b websites. But note also that the mobile proportion is still only 1 of every 16 visitors on average, and as few as 1 of 50 at the low end of the range. Hence: prepare, but don’t panic.

That observation doesn’t tell the complete story, however, as a portion of those visitors are using tablets, with screens almost as large as small laptops. What’s really crucial to consider is how many visitors are coming to your site from a smart phone with a small format screen.

B2B Technology Website Visitors - Smartphone Statistics 2012

 

When tablets (such as the iPad) are excluded, the share of mobile visitors is considerably smaller; roughly 2/3 of all mobile visitors. These are the potential visitors for whom you really need an optimized mobile website experience. But though they have increased by nearly 50% in the past year, they still account for just 1 out of every 24 visitors to the typical B2B tech company website, on average.

Type of information sought: whereas desktop computers are used for a wide range of tasks including in-depth research, mobile devices (in a b2b context) are most frequently used for three purposes:

  • • Fact-checking: is the software both Windows- and Mac-compatible, or better yet, completely cloud-based? What are the dimensions of a device, or specific properties of a material?
  • • Location-based information: where is your closest sales office? Where can I take the item for service?
  • • Communication: not surprisingly, as communications were the initial purpose of mobile devices, your customers and prospects will often visit your mobile site seeking to contact your company. Make it easy with click-to-call buttons, email links, and links to your Facebook, Twitter and other social media accounts.

Demographics: while one has to be careful here to avoid stereotypes (and it is true that 82% of CEOs own smartphones), there’s no question that digital natives (those born in 1990 or later) are simply more immersed in mobile technology (having literally grown up with it) and are therefore likely to be, all other things being equal, heavier users of the mobile web than are typical b2b decision makers (generally in their 40s, 50s or 60s).

Again, a sophisticated mobile presence is essential now for bars, clubs, gyms, universities, restaurants, theaters, and any other business catering to 20-somethings. Digital natives are the b2b decision makers of tomorrow, so again, when it comes to b2b mobile web presence, companies need to prepare but not panic.

Specifically, here are three steps b2b marketers should take today if they don’t already have a mobile strategy in place:

1. Check you website analytics to see what percentage of your visitors are coming from mobile devices. If it’s more than 5%, you need to develop a mobile plan for website design. If it’s more than 10%, you need to develop a mobile website—quickly.

2. Check to see how your current website looks on a variety of mobile devices, or use mobile device emulators. If it isn’t the experience you’d want your customers and prospects to have, you need to develop a mobile plan.

3. When developing your mobile site plan, be sure to incorporate best practices in mobile website design.

When it comes to mobile and b2b, don’t freak out over the hype, but do take action.

Post to Twitter