Archive for the ‘Website Design’ Category
Nine B2B Marketing Lessons from College Visits
Tuesday, July 31st, 2012I’ve spent several weekends this summer experiencing the excitement and trepidation of visiting colleges with my eldest offspring.
The 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.
Can Adobe Muse Work for Your Web Design Needs?
Saturday, July 7th, 2012Guest 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?
The 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.
B2B Mobile Websites: Prepare, but Don’t Panic
Wednesday, June 13th, 2012You’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.
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.
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.
Best Website, UX and Mobile Design Guides and Tips of 2011
Wednesday, March 28th, 2012Inspired web designers continue to push the envelope on what’s possible in online presentation, utilizing HTML5 and design elements and techniques like parallax scrolling effects, imaginative icons and unusual typography to stand out from the ordinary and grab visitors’ attention. Any website element can be creatively designed and optimized, from navigation menus and forms to landing pages and 404 error pages.
Web design isn’t only about creating a visually striking site of course; designers also need to keep in mind factors like site load speed, user experience and search optimization. And with the rapid increase in use of mobile device browsing, sites have to be readily adaptable to different screen sizes.
So how does a web designer create a site that’s visually stunning and fast and user-friendly and effective at driving conversions and search-optimized and mobile-friendly? It’s a lot to keep with, but these 33 remarkable web design guides should help.
Creative and Inspiring Graphic Design
35 Inspiring Examples of Websites Using HTML5 by Web Design Ledger
Gisele Muller presents “35 new examples of websites that are also using some new tricks from HTML5,” including Wantlist, Vision18, Visua Design and Andrew Shanley.
40 Beautiful and Inspiring Examples of Slideshows in Web Design by Tripwire Magazine
Noting that “There are many reasons to use a slideshow or image slider in your web designs as the key to smart strategic Web design is finding a smartest and interactive way to display your information to your visitors,” Dustin Betonio showcases a collection of “highly creative, beautiful and inspirational slideshows for your inspiration,” like winestore, Crush + Lovely and Fox Classics.
35 must see examples of websites using HTML5 by Web and Designers
A collection of nearly three dozen examples of remarkable website design using HTML5, including sites like Chico web design, Dribbble, John Kavanagh and Griottes.
8 ground-breaking websites by iMedia Connection
Jennifer Marlo shares eight critiques of brand websites from industry thought-leaders who share what they find unusual or effective about each site as well as what they’d change. For example, Thomas Mueller of Siegel+Gale writes of the Nike Better World site, “Beautiful fades and elegant transitions transform what could have otherwise been a straightforward linear experience into a layered visual exploration that links to Nike’s comprehensive digital footprint.”
30 Awesome Social Icon Packs by Webdesignersblog
A big collection of creative icon packs, from teacups, cupcakes and peeling stickers to clover, cartoons and cans. Icons don’t have to be boring!
Your Website is Killing Me by Social Media Explorer
In this wonderfully revealing rant, Heather Rast explicates why many business websites fail, and what they could do to improve, e.g., “Your web team consists of the super sophisticated, MacBook-toting college-age kid of one of the vice presidents. (as if a Dreamweaver course covered usability standards)…Your site uses internal language and writes from internal hot buttons to communicate with external audiences. Think mission statements, vision statements, core values…Awards and certifications abound. From 2008.”
Hot Web Design Trends: Parallax Scrolling Effects in 100 Examples by Splashnology
What’s this post about? “Parallax scrolling in web design is the technique that features layered images that move around the website in different speeds/perspectives creating a nice and interesting 3D illusion. Initially it was used for creating an illusion of depth in a 2D video games and adding to the immersion, but now, with the help of well defined imagery, JQuery and CSS3, it can be useful in making your site look more vivid and creative. To your attention we’ve complied a great collection of 100 example of parallax scrolling effect.” These are cool.
20 Mind-Boggling Parallax Website Design And How To Make One by 1st Web Designer
Jamal Jackson defines parallax design as “the apparent displacement or the difference in apparent direction of an object as seen from two different points not on a straight line with the object. In web design use, parallax refers to the scrolling technique used to create the illusion of depth on websites,” then highlights examples of sites like Living Word, Dezignus and Art of Flight (which is truly extraordinary–take a look).
Navigation Menu Design
25 Beautiful & Inspiring Navigation Menus by Web Design Ledger
Gisele Muller (again) rounds up “25 examples of beautiful and inspiring navigation menus” featuring likes like Unfold, Shout, Sellected Studio and Don’t Throw Batteries.
28 Stylish Examples of Drop-Down Navigation Menus in Web Design by DesignModo
Elegant and creative drop-down menus incorporating transparency, icons, shading, highlighting, color, shapes and other effects to stand out from the ordinary.
20 Inspiring Navigation Menus by Web Design Ledger
20 more examples of creative navigation menu design, using typography, color, transparency, parallax scrolling and other effects, including sites like Timberland, Citroen and divups.
Typography in Web Design
Beyond Times and Arial – The New Web Safe Fonts by Google Webmaster Central Blog
David Wurtz explains how Google Web Fonts work, provides some examples, and notes that “The adoption of the web font technology has been rapid. Google Web Fonts now serves roughly 50 million daily requests[1], across roughly 800,000 unique websites[2], and is growing at about 30% each month.”
50 Excellent Free Handwritten Fonts by Designer Terminal
Taimur Asghar presents 50 (mostly) free handwriting-type fonts for designers. The “slide over” ads on this page get a tad annoying, but the fonts are beautiful and worth checking just for the lyrical names, like Niakania, CrimsonVermillion, Throw My Hands Up in the Air and Annie Use Your Telescope.
Imaginative 404 Error Pages
33 More Entertaining 404 Error Pages by Mashable
Erica Swallow features more creative, funny, odd and quirky 404 error pages from sites like Audiko, Blizzard Entertainment (blames the user–but very creatively) and iContact, which turns things upside down—literally.
35 Creative 404 Error Pages by Web Design Ledger
Gisele Muller (yet again) shares examples of unusual but nice 404 error pages that show consideration for users, including pages from Carol Rivello, duoh and Frye / Wiles.
Optimizing Error Pages: Creating Opportunities Out Of Mistakes by Smashing Magazine
Daniel Waisberg reviews “techniques that will help Web designers and UI professionals improve their error pages in order to engage visitors and improve the experience,” including smart things to include on a 404 error page (company name/logo, explanation of why this page is appearing, easy navigation back to popular pages on the site), how to monitor 404 page visits and navigation, and tips for minimizing 404 errors.
Landing Page Design
Why Your Form Buttons Should Never Say Submit by UX Movement
Excellent advice, concisely presented: “A ‘Submit’ button describes what the system does well, but it doesn’t describe what the user does at all…The action button should affirm what that task is, so that users know exactly what happens when they click that button (e.g., ‘Create Account,” “Subscribe Now’)…The more focused your form is, the more likely you’ll get users to complete your form.”
5 Ideas For Boosting Your Landing Page Conversion Rates by Business2Community
Kristina Allen offers a handful of helpful suggestions for improving landing page performance, such as trying a unique design format, building trust, and testing early and often.
25 Excellent Examples of Forms in Web Design by Web Design Ledger
Online forms don’t have to be boring, as shown in these remarkable examples from Foundation Six, Vincent Mazza and Justalab among others. A creatively designed form may increase your conversion rates—or at least get your form mentioned in a blog post on web design.
5 Common Landing Page Mistakes by HubSpot Blog
Andrew Pitre offers tips for improving landing page performance, such as #2, “Use Your Headline to Explain the Value of Your Offer – What’s in it for Me?…The best way to achieve this is to have a clear title. Specifically, you’ll want to make sure your title contains:
- • A clear action (e.g. “Download our Guide”)
- • A clear description of your offer (e.g. “Download our Guide to Effective Landing Pages”)
- • An explanation of the value of your offer (e.g. “Download our Guide to Effective Landing Pages and Learn How to Increase Conversions by over 10%”)”
22 Creative Landing Page Designs – A Showcase, Critique, and Optimization Discussion by Unbounce
In this richly-illustrated and incredibly detailed post, Oli Gardner examines almost two dozen landing pages from small to midsize businesses and critiques each one detailing what he likes about it (e.g., “Testimonials: Testimonials and association with famous people/shows are included for instant credibility”) and what he’d change or test.
50 Effective and Creative Call to Action Buttons by Noupe
Aquil Akhter showcases sites that go way beyond boring gray “submit” buttons to get visitors to click, utilizing unusual shapes, colors, size, placement, effects, arrows, icons and descriptive calls to action.
The 10 most common Landing Page Optimization mistakes by Web SEO Analytics
Vasilis Vryniotis details ten common landing page mistakes, from having an unclear call to action or too much text to requesting too much information and not testing different landing page variations.
6 Essential PPC Landing Page Optimizations by The Daily SEO Blog
A half-dozen tips for increasing landing page conversions, from pre-positioning the cursor in the first field to be filled out and using eye-tracking data to integrating testimonials and driving to a single call to action.
User Experience and Technical Design
30 Ways to Optimise Your Site for Speed by SEOptimise
Noting that, in addition to the fact that slow-loading websites are annoying for user, “in 2010 Google decided to take site speed into account as a direct ranking factor”—thus making it all that much more critical—Tad Chef offers 30 tips for speeding up your site, from using smaller images and external scripts to switching to a faster web hosting service and limiting the use of third-party widgets on your blog or website.
5 Little-Known Web Files That Can Enhance Your Website by Six Revisions
Alexander Dawson details five files that can improve your website UX, including Geo.kml (and Geo.rdf) for geolocation information, Humans.txt for attribution, and vCard.vcf, a digital business card (another effective option here is a portable Workface profile.
How To Fix The Top Tech Issues I Regularly See In SEO by MediaPost Search Insider
The prolific Janet Driscoll Miller offers tips on several common technical design issues that can impact SEO and how to correct them, for example: “avoid using Javascript on key areas of your website, such as the navigation. Links contained within Javascript are also not indexable, providing a roadblock of sorts for the bots to index your site. If you’re looking for impressive menus, instead focus on using cascading style sheets (CSS) to achieve a similar effect.” She also provides tips for speeding the load time of WordPress sites.
8 reasons why someone leave your website – An infographic by The Web Citizen
Ilias Chelidonis shares an infographic detailing the top reasons visitors bounce from, or at least don’t stick around long, on websites including bad navigation, obtrusive ads or video, boring content/design, and poor readability.
25 Must-Haves for a Remarkable Website by HubSpot Blog
Jessica Meher presents 25 “key elements for driving more traffic, leads, and sales,” like optimizing page content and title tags for search, using relevant imagery, writing copy that is clear rather than clever, and using calls-to-action that stand out.
Mobile Website Design
How to design and develop for mobile sites by iMedia Connection
Mark Simpson supplies five tips for effective mobile site design, such as asking questions to determine what site content you have that is really relevant in the mobile environment: “Sites like Foursquare and Mashable have done a good job of making their sites accessible in the mobile world. What patterns do you notice? What website components have smart marketers left off their mobile sites? What features make the apps and sites more user-friendly?”
How Does Your Website Look on Different Mobile Phones? by Digital Inspiration
***** 5 STARS
Acknowledging that it is much more challenging to test a website on every permutation of mobile device than on the far more limited number of popular desktop browsers, Amit Agarwal reviews Opera Mobile Emulator and Mobilizer, two tools that enable to designers to see how their sites will look on a wide range of mobile devices.
24 Excellent Examples of Responsive Web Design by Web Design Ledger
Two dozen examples of sites that use dynamic web design–web architecture that enables a single design to automatically adapt to a wide range of devices and screen sizes–such as Fork, Atlason and food sense.
What Elements Should You Eliminate When Building a Mobile Website? by The Daily Egg
Six design experts offer their advice on the difficult question of what website elements to eliminate in mobile design, such as this from Andrew Pautler: “I think the better question than ‘what should we cut’ to think about is ‘what should we keep.’ The answer to that question should almost always be the content. People come to your site for the content, so that’s what you should give them. The excessive navigation, oversized banner ads, 15 Facebook links on a single page, etc. are usually the things worth cutting when reducing your site to 320px..That said, mobile doesn’t and shouldn’t mean ‘watered down’…Creating a ‘mobile’ version of your site with limited content is not what the user wants. You can re-prioritize the content, but you shouldn’t hide or remove important content from the mobile version.”
The 4 Critical Elements of an Effective Business Website
Tuesday, October 25th, 2011The first step in optimizing your online presence is making sure you have a website worth optimizing. That means creating a site that your target visitors will be glad they found once they arrive, and will spend some time with because the site provides the information they need in an easy-to-find manner.
It’s like planning a large event or party in your home. If you had a noisy furnace, an unfinished bathroom, or paint peeling on your eaves, you’d want to take care of those issues before you send out invitations. Your website similarly has to be in great shape before you “invite” visitors to it through optimization.
Four key elements of designing an effective business website are:
- • Technology (Platform)
- • Graphic Design
- • Information Architecture
- • Content
Technology
The first decision is the technology, or platform, the site will be built on. The options are almost endless, from custom code, to a development environment such as Adobe DreamWeaver, to hosted content management systems (CMS) options, to free platforms like WordPress. Among the key considerations to keep in mind when selecting a platform are:
Capabilities—will the platform support the sophistication of your design? Do you need extra features, like a built-in CRM system, the ability to easily integrate with external systems, create secure areas of the site, or manage ecommerce transactions?
Usability—does the platform make it easy for non-technical users to add or update content? Is it easy to add new pages and even entire new sections to the site?
Search engine friendliness—does the platform or tool produce clean, W3C-vaild underlying code? Is it easy to add meta tags and customize page URLs? Most modern CMS systems are relatively search-friendly, but this is a critical component for optimization, so do some investigation to make sure the platform you select is strong in this area. One way to check is to run the URLs of some other sites built on the tool through a tool like Website Grader to see how well they score (though keep in mind that factors other than just code quality can affect these scores).
Scalability—will the platform chosen support the planned size and complexity of your website, as well as providing room for growth?
Mobility—though website visits from smart phones and tablets currently accounts for only seven percent of online traffic worldwide, that figure is expected to grow rapidly. Make sure your chosen platform can serve up an optimized experience on both desktop and mobile devices (and automatically detect the visitor’s device) without a separate mobile development effort.
Make this decision carefully as you will be essentially “stuck” with your chosen platform until you reach a point where you need to redesign your site—depending on your industry and growth rate, generally two to five years. Avoid obscure platforms that force you to rely on a single consultant or agency for support.
Graphic Design
Effects Like Transparency and Typography Can Enhance Website Design
Though design considerations are often subjective, two key questions to ask when developing the overall look and feel of your website (fonts, colors, images and other design elements) are:
- • Does the design reflect the “personality” of our brand (e.g. bold, conservative, leading-edge, safe, sophisticated, intelligent, friendly)?
- • Will the design appeal to our target audience?
Special effects such as texture, transparency, typography and motion can enhance a design and provide a distinctive look—but these should be used carefully to enhance the user experience, not simply to “dress up” the site in ways that don’t help the user, or worse, that make the site seem complex and confusing.
Information Architecture
Possibly the most critical element of website design, this is the “map” of your site: what information will be included, where, and how different areas of information be connected. And the single most important consideration in developing your information architecture is your audiences: your website shouldn’t be about what information you want to provide, but rather about what information your key audiences want and need in order to engage with you.
The primary audience for most business websites is sales prospects. To determine their needs, first identify them as precisely as possible by title, role, industry and other attributes. Then put yourself in their shoes: why are they looking for information? What are their burning issues? What information do they need when they come to your site—at different stages in their buying process? How can you help move them through that process, and convert them into identifiable leads?
Secondary audiences may include existing customers, prospective employment candidates, investors, analysts (industry or financial), partners, and the media. Most of these groups are likely to have some information needs in common with your sales prospects, as well as some unique needs. Make sure your site meets the information needs of these audiences without detracting from the prospective buyer experience.
The output of this stage of the design process is an information architecture map, which may look something like this:
This information architecture map also serves as a guide for scoping out the work required to create the new site; establishing priorities; collecting any required images or website assets; and assigning content to writers.
Content
Content should be developed using two primary guides: the information architecture map (what to write), and keyword research (how to write it). Keyword research helps to identify the specific phrases your prospects most commonly use when searching for your types of products and/or services, as well to determine which terms have the best potential for optimization.
Knowing the keywords and topics, writers should be able to develop content that answers the five key questions every business website needs to address:
- • Who are you?
- • What do you sell?
- • Who do you sell to?
- • Why are you the best?
- • How do I buy from you?
Once you’ve designed and developed a site that uses a search-friendly platform, is designed and written with your key audiences in mind, and answers the questions and potential concerns of your sales prospects , you have a site truly worth optimizing as the core of your web presence.
