'Net Features : wm-designdev

Passing Go with Optimized Landing Pages for Gamers

Administrator — Fri, 17 May 2013 18:30:00 GMT

:: Maximilian Beer, Senior Online Marketing Manager at TrafficCaptain ::

Spurred by the increasing popularity of online games, the computer and video games market has in recent years seen rapid growth and today constitutes an important element in performance marketing. All major performance networks have added online games to their portfolios.

More and more gamers are drawn to online games, using their browsers as a quick and convenient way to play against hundreds of thousands of real adversaries without having to install anything. Apart from online games, there is a plethora of forums, blogs and communities where gamers can communicate and connect in various ways. This traffic is monetized by advertising and affiliate networks targeting specific groups of users. Around the world, the profitable online games market is highly contested. Observing cost-per-click (CPC) development over a five-year period shows that advertisers today have to pay prices that are several times higher than they were in 2008.

The great number of new start-ups in the games sector increases competition even further. As players have become more discriminating, sophisticated graphics and an interactive gaming experience are absolutely essential. If a game is not on the cutting edge in these areas, the initial media hype is inevitably followed by declining conversion rates (users on site in relation to registrations effected) and at the same time, the acquisition costs for new users rise.

The increase in development and advertising expenses makes an optimized landing page an integral component of the marketing strategy: Because the landing page is the point of first contact a new player has with the game, every click that does not result in conversion makes an offer less attractive in the competitive global environment and thus costs companies real money.

Therefore, the most important factors for a successful gaming landing page are presented here:

1. A landing page should always have a clear message and target orientation

The objective is to prompt the user to sign up for the game. This should be the central and immediately recognizable message. Anything that distracts from it should be avoided and relegated to the background. Typical examples are forum registration links, or generally, links leading away from the page.

2. Request only the most relevant information

Unless absolutely necessary, detailed queries regarding interests, age, password and repeated entry thereof (this can be requested at the user’s first game log-in) or the like should be avoided. Unnecessary inquiries increase the risk of the registration being aborted, and at the same time, the validity of additional answer boxes can be called into question given that many users will enter fictitious responses simply to speed up the process.

3. Design for Efficiency

An uncluttered, straightforward design is often the most efficient: Users are not distracted, but led to registration swiftly and effectively. Background graphics are perfectly fine, yet should not contain complex animations which would divert the user’s attention away from the actual registration process.

Examples of well-designed landing pages:

Bumrise.com

Starforcedelta.com

Golden Age

4. Key messages & prompts

Clear, understandable messages asking the player to take action. In our case, the objective generally is registration or purchase of a game. “Sign up for free now” or “Free registration” are examples of a clear statement inviting the user to become active. Overly lengthy explanations, introductions or product descriptions lower the conversion rate measurably. The average user looks at a page for two to five seconds before deciding to subscribe to the service or not.

5. Improve existing landing pages

A landing page is never perfect and should be constantly optimized. This calls for bold new ideas and a conscious strategy to address different target audiences. This route has the advantage of increasing the chances of providing an offer that caters to the individual player’s taste.

6. Think about user flow

The objective of an easy, valid registration often stands in stark contrast to low conversion rates. Single sign-on services such as those offered by Google or Facebook may present a way out of this dilemma. These do not require a full new user registration on a landing page but instead link the user’s existing Google or Facebook account with the game. The advantages are: swift and simple registration and high-quality user e-mail addresses.

7. Consider rebates and special items

Already a standard element of e-commerce, promotion campaigns in online games still hold much untapped potential. The clear advantages here are higher conversion rates and the incentive for users to spend money on the game. Special offers which give the player exclusive benefits are an effective tool. An example is the Games.de campaign which served to attract new players to Starforce Delta (https://www.starforcedelta.com/), granting them in-game currency (Crystals) worth 15 EUR simply for signing up.

8. Test & analyze

Landing page tests should be conducted continuously and are never final. Mathematical models such as significance testing should be used to obtain reliable data. As a general rule it should be noted that a minimum number of 500 conversions is required to begin drawing any meaningful conclusions. Professional tools, e.g. Google’s Webmaster Tools (including HeatMap), can be helpful in taking the right decisions.

Ensuring further growth for online games will increasingly require game publishers to position themselves optimally against the rising tide of competitors. It is the author’s firm view that concepts from the more traditional fields of online marketing will find their way into the marketing strategies for online games.

The overwhelming success enjoyed by online games has caused many companies to overlook the need for landing page testing. This entails more than just changing themes and background designs. Rather, reorganizing input fields and password lengths, and integrating new registration options such as Google/Facebook single sign-on, should be considered in order to raise the conversion rate and ultimately, further increase the efficiency of marketing campaigns. The coming years will show which business models are most likely to succeed and which companies are able to achieve the transition from game developer to global marketing firm.

About TrafficCaptain GmbH

TrafficCaptain GmbH was established as a ‘Games Performance Network’ by iVentureCapital. iVentureCapital contributes its unmatched expertise in generating qualified traffic for online and mobile content to this online advertising network. TrafficCaptain offers performance-based campaigns for mobile, social, MMO, strategy and online games optimized for high eCPMs. TrafficCaptain campaigns are international, with a focus on Europe (Germany, France, Spain, Poland, etc.) and North America (USA and Canada). In addition, TrafficCaptain provides consulting services for media planning and the implementation of Google AdWords campaigns. TrafficCaptain’s Genre-Oriented AdManager targets specific user groups in different countries and automatically optimizes campaigns to achieve high conversion rates and maximum payout for publishers. Advertisers and publishers will find detailed information about TrafficCaptain on www.trafficcaptain.com.

Easy Web Overlays with Chardin

Pete Prestipino — Thu, 16 May 2013 19:15:00 GMT

One of the most popular posts in April 2013 here at Website Magazine was about the Intro.JS jQuery plugin which enables users to create guided virtual introductions on their website.

But Intro.js isn't the only available option; you might also want to consider Chardin - a jQuery plugin that creates an attractive and very intuitive overlay for users visiting a website that can be used to display instructions or guidance to users on any predefined, existing element on a web page.

Users of Chardin simply need to define the text to be shown with the instructions, and indicate the data position (where to place the text with respect to the element).

Chardin can be downloaded at Github.

Below are two images - one without Chardin activated and another when the overlay has been activated.

Tubular: Use YouTube Videos as Website Backgrounds

Pete Prestipino — Thu, 16 May 2013 18:42:00 GMT

Delete that tired old static website background - and get Tubular!

The jquery plugin lets designers/developers use a YouTube video as a Webpage background - how cool is that? Now, I don't have any idea at all how or when this should be used (or if it should be used at all), but you have to admit it's pretty creative and the possibilities are pretty endless if you can find the right situation to use it in. Check out the demo of Tubular, created by Sean McCambridge, here.

Users of Tubular have some control over the options including mute, repeat, play/pause, etc. To get Tubular working, just attach it your website pages wrapper element, set the options, and you're done! Do note that browsers which do not support fixed positioning will not support the plugin.

The plugin, released under the MIT License, can be downloaded at Google Code.

That's not a static image below, that's Tubular - a jquery plugin to add YouTube videos as a website background.

Barriers to Engaging Web Design

Michael Garrity — Thu, 16 May 2013 18:30:00 GMT

For all intents and purposes, design is the most important part of a website when it comes to getting users to convert, and what matters more than that, right?

Unfortunately, even on the most thoughtfully designed websites, there can be extraneous circumstances that make the whole site, or just specific pages, less engaging for users than they ought to be, which can ultimately hurt the site’s overall ability to convert. Certainly, the bleakest of realities for Web professionals is to realize that one or more pages on their websites just aren’t living up to the stringent expectations of consumers.

There are a handful of possible reasons why your website’s design may be ineffective and not as engaging as you’d like it to be. To ensure that you don’t fall victim to one of these critical barriers to engaging and effective Web design, you should make sure that you’re aware of what they are to begin with.

Read 5 Barriers to Engaging Web Design now

Simpler Checkout for Single Page Websites

Pete Prestipino — Thu, 16 May 2013 17:40:00 GMT

Single-page site design is a popular Web trend, but it's not typically a good fit for those actually selling products.

There are plenty of good examples where this style of design is used, but it's mainly for information publishers and digital brands looking to raise awareness, not neccessarily conversions. For the most part, the actual checkout process is left for another page and a far more robust (and often expensive to maintain) e-commerce platform. But does it need to be that way? Fortunately, no it doesn't.

A jQuery plugin by the name of SimpleCart could by just what you're looking for. The free and open-source javascript shopping cart integrates very easily into a website/web page without the need for a database, or any programming familiarity at all per say - just copy and paste some simple HTML and Javascript and you're good to go.

SimpleCart works with multiple payment gateways including Paypal Express, Google Checkout, and Amazon Payments (others including Authorize.net and an email checkout are expected soon).

Supersize Image-Based Websites

Michael Garrity — Thu, 09 May 2013 19:00:00 GMT

They say a picture is worth a thousand words, so imagine how much you could convey on your website with an attractive, full-screen background slideshow.

Well, you no longer just have to imagine it, thanks to the Supersized jQuery plugin that does just that.

This advanced full-screen background plugin allows designers to display a photo or set of photos as a slideshow that takes up the full width and height of a Web page. And although this may not be ideal for all websites, it can be incredibly beneficial for creative professionals that want to display their work, like photography sites, designer portfolios or event sites.

Supersized integrates with Flickr, so users can incorporate images from their Flickr accounts into their websites. Among the features available on default “Shutter” theme for Supersized are a progress bar, a slide in/out thumbnail tray, a fluid thumbnail bar based on Thumb Reel and an option for mouse-responsive thumbnail scrubs. It also supports multiple transition effects, including carousel, fade and slide right.

Sam Dunn of One Mighty Roar created Supersized as a Build Internet project.

Lettering.js Ensures Truly Fontastic Web Designs

Michael Garrity — Thu, 09 May 2013 18:45:00 GMT

A good font can make all of the difference between an attractive website that effectively communicates its message to visitors and one that, well, doesn’t do that.

Unfortunately, at present, CSS doesn’t offer a complete down-to-the-letter control option that allows designers to tweak individual aspects And that’s why a jQuery plugin like Lettering.js can go a long way in improving the look, feel and, most importantly, readability of your website.

Lettering.js works by splitting the textual content of a letter element into distinct individual spans (using ordinal .char# classes). This allows designers to style each letter individually, thus giving them considerably more control over the typography on their websites, and how visitors will view their messages.

The plugin was developed by the Paravel development team, and is currently employed by a number of notable websites, including Crayola. It is also available on GitHub.

Parallax Scrolling, Responsive Design Make Nice

Michael Garrity — Thu, 09 May 2013 18:40:00 GMT

Responsive design is top-of-mind these days for website owners and designers, alike. Plenty of developers are also talking about another hot new trend sweeping the Web known as parallax scrolling.

If you haven’t heard, parallax scrolling is where different layers of a Web page move across the screen at different speeds as the user scrolls up or down, allowing for a site contained entirely in a single page with sectional transitions taking place through the act of scrolling. And if you’re unfamiliar with responsive design, it’s a tactic that designers employ to ensure that a website or page renders in an optimal, user-friendly way on any device that someone may be visiting from.

However, while both of these topics are of interest to many Web developers, it can be difficult to make them work together, largely because of the technical complexities that can be involved in parallax scrolling. But one solution to this problem is the jQuery plugin known as Cool Kitten, a framework collection of HTML/CSS and JavaScript files that creates a beautiful, and responsive, parallax scrolling effect.

The plugin was created by Jalxob using Treehouse, Stellar.js, Normalize.css and other resources. It is currently available on the open source project hosting service GitHub.

Extend Image Value by Tagging with Rich Content

Michael Garrity — Thu, 09 May 2013 18:11:00 GMT

Image tagging is a popular new way to make pictures on a website more informative and engaging for users.

Now, website owners and designers can bring that engagement to their own images with the iPicture jQuery plugin that allows users to create interactive image walkthroughs that use the pictures already one their websites.

iPicture makes it incredibly easy to overlay little tooltips and hints on top of the image, which will appear to viewers as small circles with a + sign in the middle (see image below). When users scroll over these icons, they’ll see additional information that comes in the form of various types of rich content, such as HTML, photos or even videos.

The plugin is easy to integrate into a website and can be customized and extended using CSS. Even the individual tooltip icons, themselves, can be altered to match the look and feel of a site.

The Web's Most Gorgeously Designed Websites

Administrator — Thu, 09 May 2013 17:00:00 GMT

:: By DJ Miller ::

Stagnant websites simply can't keep up in the continually evolving online world. Those that update often and experiment bravely with an eye to gorgeous, yet functional design are sure to grab visitors' attention. These top sites feature striking design elements that help them stand out at the head of the pack.

BBC – Design Across Platforms

Image via BBC.com

BBC's most recent page design features a look that's strikingly similar to what you expect in a mobile app. Don't be surprised if you're tempted to swipe your finger across your computer screen, even though you don't have a touch-screen monitor. The Web page features eye-catching images that quickly grab your attention and pull you into the stories. The site uses this same design across all platforms including tablets and smart phones.

Elysium Burns – Bold Typography

Image via elysiumburns.com

A diverse choice of eye-catching sans serif fonts gives Elysium Burns a memorable look. Article titles and site headings sit against subtle CSS image backgrounds. The simple white on charcoal color scheme really allows the shape and flow of the typography to take center stage on this page.

Disney – Highly Responsive Video Design

Image via disney.com

Responsive design is essential for any site, but creating a page that's user-friendly on any platform is more difficult for some features than others. Disney's site prominently features high-quality videos, so the challenge of their redesign was maintaining video size and quality across platforms. The result is a simple streamlined design that showcases video beautifully on any device.

Web Design Ledger – Where Serif and Sans Serif Meet

Image via webdesignledger.com

The intriguing look of Web Design Ledger combines both serif and sans serif fonts. The striking difference in font styles throughout the site effectively draws your eye to certain features, such as reader comments. Though this is an unconventional choice of typography styles, it works well in this simple text-heavy layout.

Combadi – High-Impact Images

Image via combadi.com

A growing number of sites now use large, high-impact images on their home pages to draw customers in. Though typography has its place, designs like these allow the eyes to rest a bit and take in something refreshingly different. Combadi features both a large image at the top of the page and a series of smaller images for added eye candy further down.

The Verge – Story Collage Layout

Image via theverge.com

The Verge features a story collage that highlights top features in a clean and visually pleasing way. Each headline is given ample space in its own candy colored box so the titles don't crowd each other out. Though the site has lots of content, visitors don't feel overwhelmed thanks to this simple design choice.

USA Today – Customizable Experiences for Every User

Image via usatoday.com

USA Today's design is simple and clean, making it easy to browse massive amounts of information in a short amount of time. This rigid layout is perfect for a site where readers want to navigate to items of interest as quickly as possible. One of the highlights of USA Today's site design is the viewing option, which allows readers to choose from a list or grid format. This allows for fast and easy customization to suit the tastes of each visitor.

A List Apart – Extreme Readability

Image via alistapart.com

With so many flashy and colorful design options available, it's easy to get swept away in the visual aspects of site design and forget about the finer points of readability. This is where A List Apart truly excels. The headlines, subheadings, quotes, and article body all feature clean fonts chosen with reader comfort in mind. The content itself is well-organized and flawlessly edited as well so your eye travels easily from one short digestible paragraph to the next.

Mea Cuppa Sweets & Coffee – Striking yet Simple Color Choice

Image via meacuppa.be

The stunning color choice of Mea Cuppa immediately grabs the visitor's attention. With a clean palette of black, white, and yellow, the imagery doesn't take away from the content, but rather makes the viewer want to hang around and feast on the delicious visuals for a while longer. This design proves that less is more and simplicity isn't inherently boring.

Postable – Fast Functionality

Image via Postable.com

Postable's purpose is simple. Users sign up for the free service which sends links out to their friends and family asking for updated contact information. Fittingly, the site design for this service is simple and easy to use as well. Three points clearly lay out everything the service does and a short sign up form lets you start in seconds. There's no clutter, no confusion, and no excess in this functional design.

Oliver Russell – Sleek Graphics and Simple Color Choice

Image via OliverRussell.com

Oliver Russell's page highlights his marketing services in a sleek design that speaks to his professionalism and Web expertise. The palette features bold warm oranges and yellows with a bright touch of cyan. Finding what you want is easy so visitors never get lost on this well-designed page.

University of Notre Dame – Strong Graphics and Cutting-Edge Design

Image via nd.edu

The University of Notre Dame handily broke out of the college website mold with their new design. Bold images highlight the campus in a visually enticing way that can't help but draw visitors in. A simple static toolbar at the top makes navigation easy from anywhere on the page. The responsive design looks just as striking on mobile phones as it does on a standard desktop.

Starbucks – Meeting Mobile Needs

Image via Starbucks.com

Not surprisingly, Starbucks found that a growing number of visitors were accessing the site on mobile devices. In answer to the clear need for a better mobile site, they moved to a responsive design that's equally functional across platforms. The images are simple and deliciously enticing while the functionality is everything users need, allowing visitors to find a store or check gift card balances right on their phones.

Web design is a continuously evolving field and innovation is essential for any business to stay at the top. Browsing these beautiful sites will give you plenty of inspiration for enhancing your own page design.

Author Bio:

DJ Miller is a graduate student at the University of Tampa. He is an avid gadget geek who spends most his time writing on anything tech related. His specialty is Web design and optimizing sites for mobile devices and ultrabooks. You can follow him on twitter @MillerHeWrote.

Designing Websites for Multivariate Testing, Key Considerations

Administrator — Thu, 09 May 2013 16:45:00 GMT

:: By Kim Ann King, Chief Marketing Officer, SiteSpect ::

If you are like most digital marketers, you are doing everything you can to optimize your website. One of the best ways to optimize your site is through multivariate testing, which is a technique that enables your visitors to tell you what’s working on your site and what isn’t. In a multivariate test, variations of your site’s content are presented to visitors. As visitors navigate through the site, their behavior is tracked to determine how each content variation affects marketing goals such as conversion, registration, retention, average order value and so on.

While multivariate testing is an effective and proven technique for optimizing a site, some sites can be made easier to test than others. Technical factors such as the structure of the HTML come into play in determining how much preparation you will need to create a new multivariate test. But since testing is so valuable in terms of giving you insight into your visitors' preferences and behaviors, it’s well worth considering how to make your site more readily testable. Doing so will yield a competitive advantage that makes it possible to out-test,out-learn, and out-optimize competitors.

There are a few times in your website’s lifecycle that are ideal for considering how to make your site more testable. For example, building a brand-new site or redesigning your current one gives you the perfect opportunity to apply some best practices and make your site’s elements easier to test. Another good time to prepare your site for multivariate testing is when you are adding major new content or functionality, where those new elements can be carefully introduced on the site so as to maximize their effectiveness without hindering existing site goals.

An interesting observation in the business of website design is the age-old struggle to balance a great-looking website versus a great-working website. Ideally, you want both, but the primary requirement should be a highly functional site that achieves your online marketing goals,instead of just a pretty website.

Here are four key considerations in preparing your site for multivariate testing success, which represent the fundamentals of making content testable:

1) Think About Your Mobile Visitors First

Mobile Web traffic is on the rise, and it’s far easier to create a simple mobile site that works with all devices than to build a complex, rich desktop website that needs to be scaled down for mobile users. You can use mobile targeting to understand which devices are accessing your site and test which content variations work for them.

For example, VEGAS.com ran a mobile A/B test that was able to quantify how mobile-optimized content influenced user behavior. In its tests, VEGAS.com decided to focus on key content that users were already accessing via mobile, namely the Homepage, top-level category pages such as hotels and shows, and the hotel room search tool. It turns out that VEGAS.com's mobile content outperformed regular non-mobile content across a number of key metrics. Some of the notable improvements that they achieved were:

• 22 percent reduction in bounce rate

• 16 percent increase in page views

• 14 percent increase in hotel searches

• Double-digit lift in conversion rate

2) Use Cascading Style Sheets (CSS)

CSS is a popular choice for Web design consistency and standardization, and that’s great news for multivariate testing. Among other things, CSS centralizes site-wide styles such as text and headline specifications (font, style, color, size), page layout, and positioning of elements. So, when you make a CSS change , you change it in one place and the style is updated everywhere on the site. This makes it much easier to test multiple variations of site elements since you don’t have to wrestle with changes in multiple places, which you would have to if you weren’t using cascading style sheets. CSS is a key element in Responsive Web Design.

For example, a recent test for a B2B site revealed that by increasing the size of body text by 0.2 “em,” the time-per-visit increased by 21 percent and pageviews-per-visit increased by 18 percent. This test was highly fruitful, and because only one line of CSS was changed, it was very easy to design and deploy.

3) Employ Text-Oriented Navigation

In the past, Web designers often relied on images or Flash for navigation text elements, particularly for sites that were built before 2004-2005, since browser technology was such that CSS couldn’t be relied on for precise positioning or stylization of text and labels. Unfortunately, using images or Flash for navigation has the side effect of making it difficult to test alternate text labels—for example, to test “My Preferences” vs. “My Profile” vs. “My Settings.”

Since browsers have become much better at supporting CSS, there’s little reason to rely on images or Flash for navigation. Text links are much easier to modify and control, and thus are much easier to test and optimize.

But why bother testing navigation? Because they’re the milestones by which visitors step through your site to accomplish their tasks and reach your marketing goals. The best product, price, or promotion is no good if the visitor can’t grasp which link to click on to find the information they need, or to get to the next step in your site’s conversion process.

4) Use Responsive Web Design

Websites built from a Responsive Web Design perspective utilize an adaptable, fluid layout, media queries and flexible image sizes. That means a site’s elements can be added, removed or rearranged without interrupting or breaking the presentation of the surrounding content. Besides being a good design principle that makes the site more accessible across varying screen sizes, Responsive Web Design also makes multivariate testing much easier because you can determine which layout is most effective.

For example, an online jewelry retailer wanted to determine how cross-sell items should be displayed relative to customer product reviews. Because the site had a responsive design, a multivariate test was easily constructed that optimized the arrangement of elements within the page, leading to a 16 percent increase in average order value. And remember that sometimes “less is more,” meaning that visitors may prefer less cluttered pages as they browse your site. Responsive Web Design makes it possible to remove elements on your pages in order to determine the optimal amount of information that should be shown.

Another factor to consider about layout is that different types of visitors scan content in different ways. For example, older visitors who grew up without computers may view a page’s sections in a different order than younger visitors who have been “wired” since birth. Similarly, behavioral differences exist based on gender, education level, and language spoken.

And remember, the optimal layout is dependent on device. Analyses of consumer behavior have shown that mobile users have different needs and expectations than desktop users — environment, task-at-hand, and physical device constraints all differ, often dramatically. By making it easy to adjust page layout through the use of Responsive Web Design, you’ll be able to test and optimize for the audience and device that is unique to your site.

Summary

Overall, you’ll want your website to be modular, flexible, and easily testable. These are the qualities that make a site usable for your visitors and will support thorough optimization toward reaching your marketing goals. Multivariate testing is an advanced technique that enables you to increase revenue, turn browsers into buyers, and enhance your key performance indicators, whether that’s conversion rate or average order value.

About the Author

Kim Ann King is an award-winning marketing executive and has been a B2B software marketer for more than two decades. She currently serves as the Chief Marketing Officer of Web and mobile optimization firm SiteSpect.

6 Super Calls-to-Action (Plus Tips)

Amberly Dressler — Thu, 02 May 2013 18:20:00 GMT

Whether it’s completing a project or taking an action, people will take as long as you give them to do it. This is why in business, deadlines (enforceable ones) work and why, on the Web, calls-to-action (good ones) are integral to a website’s success.

IaaS and Web hosting provider SingleHop recently released an infographic (click here) that details five tips for a more successful call-to-action (CTA). In it, the company details that, unsurprisingly, the click-through rates (CTRs) of above-the-fold CTAs are substantially higher (72 percent) than below-the-fold CTAs (47 percent). While that may be best practice number one, SingleHop provides interesting data on the fact that buttons, as opposed to text, provide upward of a 200 percent higher CTR. With SingleHop’s tips in mind, Website Magazine has compiled six super CTAs.

H.BLOOM

Super CTA: Nothing creates urgency (and a sense of value) more than mom does. By providing the date for Mother's Day, the copy leading into the CTA enhances the urgency and the words "Shop Now" are direct. Additionally, this floral subscription service's CTA uses high contrast to grab attention.

SKYPE

Super CTA: In SingleHop's infographic, it's suggested to play with shape, which Skype uses in a purposeful manner. It's clear to the user that the CTA is part of the product description and the best course of action is to "Join."

NETFLIX

Super CTA: After offering a one-month free trial and then conveying value (e.g. you can watch your programs wherever you want), Netflix directs users to "Start Your Free Month." Notice that Netflix uses its above-the-fold real estate to confirm and then reconfirm that a one-month free trial is available.

MailChimp

Super CTA: This beautiful, sleek homepage uses a calming color palate, but hits users with a sense of urgency with its "Sign Up Free" CTA.

Volusion

Super CTA: Volusion wants users to try their product for free. If you couldn't tell, the e-commerce software provider uses the same CTA in the center of the page (larger) and in the upper right-hand corner (smaller) to reinforce where they want users to go and what they'll do when they get there.

PagePart

Super CTA: While PagePart's CTA differs from the rest on this list, it's appropriate for this mobile and social Web platform, because business owners want to create a mobile website, which is why they ventured to PagePart in the first place. The words "instantly" and then "Go" provide even more urgency.

Bonus: There are myriad factors to keep in mind when designing a website, but there are many seen repeatedly (like a missing call-to-action). Make sure your site isn't making these mistakes by checking out this article by Rafi Sweary, the co-founder of WalkMe.com.

Award-Winning Websites That Inspire Us

Allison Howen — Thu, 25 Apr 2013 18:20:00 GMT

There are millions of websites on the ’Net, so how do you get yours to stand out from the competition?

While the answer to this question depends a great deal on the type of site you run, implementing a combination of design best practices and popular trends will typically put your site on the right track. That said, sometimes we need a little inspiration.

One way to get inspired is to research the sites of some of your business’s biggest competitors, as this will provide you with some elements, features and functionality to consider incorporating on your site. However, another way to get inspired is to take a gander at some award-winning sites.

For example, Website Magazine’s redesigned website was recently honored with a 2013 “Best Magazine Website” IAC (Internet Advertising Competition) Award, yet it was far from the only site to be recognized by the IAC. Get inspired by looking at the examples below to learn about other companies who won a Best Website award from the IAC in 2013:

Site: Cincinnatiusa.org

Award: Best Government Website

Takeaways: This website’s navigation rocks. Not only does it have an easy to navigate drop down menu bar, but it also features parallax scrolling, which is currently a hot and unique design trend.

Site: Theupsstorelocal.com/3358/

Award: Best Small Business Website

Takeaways: It is nearly impossible to overlook the location or contact information for this business, because The UPS Store prominently highlights all of its important information on its landing page, including directions, phone and fax numbers, email address, hours of operation and UPS Air pickup times.

Site: Noonedeservestodie.org

Award: Best Advocacy Website

Takeaways: The use of images and text on this site may be jarring, however, this strategy gets to the point and demands attention. Moreover, the Lung Cancer Alliance’s site offers social login to its visitors, as well as features parallax scrolling.

Site: Assetmanagement.fidelitycareers.com

Award: Best Employment Website

Takeaways: Fidelity puts an emphasis on unique images on its career site. Not only does the main image on this site include interactive tags, but its large drop down menu also includes a variety of images that makes the company more relatable and desirable to work for.

Site: Coorslight.com/projectcold

Award: Best Beverage Websites

Takeaways: As an alcoholic beverage company, it is very important for Coors Light to have a secure website in order to keep minors out, which is why the company implements an age-based security block upon arrival. That said, the company also features a big background image that includes movement, as well as a simple menu for visitors to navigate the site with.

Site: Adventuresbydisney.com

Award: Best Travel Website

Takeaways: Disney uses a combination of high-resolution images and interactive maps to grab its visitors’ attention. Additionally, the company makes it simple for visitors to let their friends know about their dream vacation by featuring a share menu directly on its rotating images of travel destinations.

Site: Jeep.com/en/

Award: Best Automobile Websites

Takeaways: Not only does the large, high-quality image on the Jeep website demand attention, but the image is also interactive, which allows visitors to gain insights about each vehicle by simply moving their curser around the image. Furthermore, this site features very clean and easy to read menus on the top and bottom of its landing page, which includes a local feature to help visitors find nearby promotions.

Site: Garrettpopcorn.com

Award: Best Retail Website

Takeaways: Garrett’s site is simple but fun, as it features an interactive photo, prominent call-to-actions and most of the business’s other important information above the fold. In fact, without scrolling, site visitors can click on a variety of icons to take actions such as create their own tin, register to the site, browse gifts, find a nearby shop, join the company’s mailing list, read Garrett’s blog and leave a message to the company.

Site: Sixflagsjobs.com

Award: Best Employment Websites

Takeaways: The Six Flags’ employment website is colorful with a bright menu bar. That said, the real star of this site is its use of videos, which are prominently featured for each of the career categories.

Site: Chefboyardee.com/cooking-with-kids

Award: Best Consumer Goods Website

Takeaways: This site not only features delicious recipes, but also high-quality images and large call-to-actions. Moreover, the site uses parallax scrolling, which enables visitors to learn recipes step-by-step as they scroll. It is also important to note that as visitors scroll through the site, they are exposed to additional interactive content, including videos, social sharing features, as well as recipe ratings and reviews.

Just LayoutIt: Really Easy Bootstrap Interface Builder

Pete Prestipino — Thu, 25 Apr 2013 16:07:00 GMT

As designers - from novice to ninja-like - increasingly turn to frameworks such as Bootstrap and others (see here and here) as the ‘structure’ of their websites, opportunities are emerging which help those new to design (as well as those in creative non-designer group) capitalize on the trend and build digital interfaces for those frameworks.

A good example of this comes in LayoutIt, a Web-based solution that helps anyone create the frontend code for Bootstrap using a drag and drop interface builder. LayoutIt presents elements and components of Bootstrap (grids, buttons, tables, navigation, labels, headers, progress bars, etc.) and makes the coding much, much easier (without needing any training in Javascript, HTML5 or CSS3).

One of the best aspects of LayoutIt is that the designs can be downloaded – as .zip or .html – so you can start coding the design into it right away; or better yet, send it off to the designer.

As evidenced by the recent popularity of the “Creative Design Tools for Non-Designers” article at Website Magazine from earlier in the month, there’s clearly high demand for solutions, tools and resources just like LayoutIt which make the design of websites and applications easier. Do you know of another that demands the attention of the Website Magazine community? If so, share with us by sending a comment below!

One-Directional Scrolling with Navigation that’s Sly (and Fly)

Pete Prestipino — Thu, 25 Apr 2013 14:33:00 GMT

Navigation is a key element in any effective web design but often it plays only a secondary role. Sure, parallax websites completely weave navigation into the design experience but some might argue it’s, well, let’s just say a little over the top for your average website – unless you’re a designer working on their portfolio.

Fortunately, there are plenty of innovative approaches to navigation that are ideal for the broader spectrum of Internet websites – e-commerce retailers, digital service providers, information publishers. And yes, there are even some specific resources available to make it look good and, with any luck, work even better.

Sly, for example, is an interesting Javascript Library from Tomas Sardyha for one directional scrolling (with item-based navigation support) ideal for those seeking a unique and interesting approach to website navigation. Sly can be used as a scrollbar replacement, as a navigation tool (during review the concept of product showcases kept coming up), and even as an interface for parallax websites.