blogdelwebmaster.net

Advertise here with BSA

Having knowledge on how to create an effective landing page can increase the number of site visitors that take the desired action of the web page. Lets discuss factors and considerations that can lead to a better landing page design.

What is a Landing Page?

Before we begin our discussion, it’s worth quickly defining what a landing page is.

• From a web development/technical standpoint: A landing page consists of the same basic elements as any other web page (HTML, CSS, content copy, images, videos, etc.)
• From a business standpoint: It’s a web page that asks users to perform a specific task such as purchasing something or subscribing to an email mailing list.
• From a user standpoint: It’s a page they see after clicking on a hyperlink on another site (Google searches, a URL contained in a tweet, banner ad, etc).

Three popular reasons for creating a landing page are:

• Get people to sign up (whether it’s for an account, a newsletter, etc.)
• Sell a specific product in a specific situation (like a sale or a promotion)
• Get people to download and install software

Guidelines to an Effective Landing Page Design

Let’s talk about important components and factors of a good landing page design.

Call to Action

A call to action clearly asks and compels the user to take a specific, desired action. An example of a call to action is "Subscribe to our mailing list". Oftentimes the call to action requires the user to click on a web page element (such as a hyperlink or a button) or to fill out a web form.

Tips:

• Be clear. Be direct by succinctly stating what action the user should take and what the result of the action will be.
• Limit the number of call to actions. By only having a few call to actions, you can focus on getting the user to take the preferred action you want as quickly as possible.
• Use buttons for actions requiring a click. Buttons are conventional UI controls that users will know is clickable. Additionally, when designed well, it can draw attention to your call to action.
• Have supporting information ready and close by. Users need to be compelled to take action, make sure you have things on the landing page that encourage them to perform your desired action.

The landing page of Square is a perfect example of a good call to action. (The call to action is to sign up for a Square account.) They clearly state that they would like you to sign up and, as a reward, they will give you a free Square Card Reader.

Headline

An effective landing page has to have a power headline. The headline sends the main message of what to expect in the landing page and it lets the visitor know that they’re in the right place.

Headlines have only one task: to entice the site visitor to stay on the landing page. That’s the main goal to have in mind.

When crafting your headline, ask yourself: Is this headline interesting enough and does it make the visitor want to keep reading?

Tips:

• Keep your headline short and direct. Don’t waste the user’s time, give the user an idea of what they can achieve on the landing page as quickly as possible.
• Design to grab the viewer’s attention. Use a large font and place your headline prominently on the page. The headline should be at the top of the web page, where Internet users expect it to be.
• Consider using relevant keywords. Use keywords and phrases that a search engine user might use to find your page. Use an HTML heading element (such as <h1> or <h2>) to help search engines index the content of the page better.

The Shopify landing page displays a good headline. The copy is short and gives the reader a quick overview of what the service is. It’s designed using a big font and is placed in a prominent location so that it quickly grabs the user’s attention. The use of the key phrase "online store" in the headline may help in Shopify’s SEO efforts.

Simplicity

Landing pages should be simple. If the landing page is too complex, the site visitor might be discouraged to remain on the page. The more complex landing pages are, the smaller the chance users will go through with the desired action. The message needs to be clear and only the essential stuff should be included.

Tips:

• Every element on the page should encourage the user to take your desired action. Use the concept of Reductionism to help you eliminate needless items and copy.
• Have only one primary call to action. Keep your landing page’s objective simple. Pick a task you would like the user to take, such as downloading your software or signing up for your mailing list, and limit it to just that. Any additional call to action should reinforce your primary call to action.
• Use ample amounts of whitespace. If things are too cramped together, it might visually intimidate the site visitor.

The Dropbox landing page is very simple. It has a logo, a video and a call to action button. The primary call to action is to download the software. The secondary call to action, "Watch a video", supports the primary call to action by showing you some information on why you would want to download and use Dropbox.

Eye Flow

To make sure that the visitor encounters all the landing page elements that will help them make a decision to take your desired call to action, the eye flow should be well-thought-out.

Good eye flow makes the consumption of the information being shared in the page quicker for the site visitor and ensures that they end up seeing your desired call-to-action.

Tips:

• Arrange web page components in a logical visual hierarchy. Determine the order in which you want the viewer to look, and design your web page to support that order. To learn more about visual hierarchy, read the following guides: "Working with Visual Weight in Your Designs", "Creating Focal Points in Your Web Design" and "Using Power Structure and Gestalt for Visual Hierarchy".
• Use graphical elements to your advantage. Arrows, icons and attractive images can help direct the eyes of users towards an area of a web page.
• Use high-contrast foreground colors on certain web page components. If an element has a bright color relative to its background and surrounding elements, it’s likely to garner attention.

The Let’s Do This! website, which asks site visitors to donate to the Susan G. Komen for the Cure organization, presents a good example of how to direct users towards your call to action. The web page is laid out logically so that you can see the primary call to action right away. Using arrows points your eyes to the call to the "Donate" button. The button and the surrounding arrows have high-contrast colors compared to the dark gray background, making sure it stands out.

Relevance

Every visitor comes to your landing page from a specific source. The landing page has to be relevant to that source. For example, if your ad says that by clicking on it, the user can buy iPads for half the price, then your landing page better be selling iPads for half the price. Relevance is key.

Tips:

• Consider creating landing pages for each marketing campaign. For example, if you have a Facebook marketing campaign, create a landing page that caters to Facebook users.
• Customize the landing page depending on the source. Add special content, discount codes and call to actions depending on what site the user is coming from.

Reduce the Risk for Taking Action

Internet users don’t like taking risk, that’s obvious. We are often concerned about security, privacy and of being scammed.

Tips:

• Offer a compelling guarantee. For example, if you would like the user to buy a product, consider giving them a way to recover their money if they are unsatisfied with their purchase.
• Anticipate any concerns that the user may have and address them. Before taking an action, users may want to know more about the result of that action. These concerns are often related to cost, time and security.
• Offer a free trial (if possible). For example, if the landing page’s goal is to ask users to subscribe to one of your paid plans, consider allowing users to try it before they need to provide credit card information.

Squarespace displays good examples of reducing the risk to signing up and using their web service. By clearly telling users that no credit card is required, that the signup process only takes 30 seconds, and that there isn’t any permanent commitment, they have successfully addressed concerns related to cost, time and security.

Scarcity

One way of designing landing pages that work is by creating a sense of scarcity. If the user feels that the product might run out of stock or that the discounted price might end soon, they may be compelled not to procrastinate and take action now.

Tips:

• Use convincing copy that conveys a sense of urgency. For example, clearly stating that the special discounted price will end soon might urge users to purchase your product now.
• Provide dynamic information that conveys scarcity. For instance, if you’re only selling 100 units, on your landing page, display how many units are left whenever someone purchases a unit.

On Mighty Deals, they display a countdown of how long until a deal expires. This may prompt site visitors to buy a deal immediately.

Trust Elements

There are many ways to provide users with reassurance that taking the action being solicited from your landing page is safe and secure.

One way is to provide social proof. Social proof can be in the form of displaying tweets about a product, testimonials from previous buyers, and positive reviews on third-party/non-affiliated sites such as review sites and blogs.

Other ways include displaying certificates and badges from third-party companies.

Tips:

• Provide social proof data from reputable and well-known web services. For example, displaying the number of Facebook Likes is a good way to show social proof.
• Locate trust elements close to the call to action. It’s important that the user is able to see these trust elements around your call to action.
• Be honest. It goes without saying: Don’t publish fake testimonials and bloated social media follower counts.

On the FreshBooks landing page, you can see three trust elements: (1) The number of people using their web service, (2) quotes from reputable and well-known sites such as the New York Times and (3) their privacy certification.

Conclusion

The design of landing pages is crucial in prompting users to take your desired action. By following the simple tips mentioned above, you’ll be well on your way to creating effective landing pages.

Related Content

• Getting Users to Sign Up: Factors in Design and Content
• Use the 80-20 Rule to Increase Your Website’s Effectiveness
• A Look into Registration Buttons in Web Design
• Related categories: Web Design and Web Development

About the Author

Karol K. (@carlosinho) is in his 20s and is a web 2.0 entrepreneur from Poland who shares his thoughts at newInternetOrder.com. Tune in to his site to get web design tips and content on online-business-related stuff.

Six Revisions

Advertise here with BSA

In January, we held a giveaway of two sets of 100 custom flyers (with free shipping anywhere in the continental U.S.) from our friends at Next Day Flyers, who offers flyer printing as one of their many available services. In this post, we announce the two lucky Six Revisions readers who have won.

The Winners

Here are the two winners of a set of 100 custom flyers from Next Day Flyers.

• Sharon
• S. Sharma

I would like to congratulate our two winners! They should have already received an email from Next Day Flyers containing information about their prize.

SQL query result that selected two winners randomly.

About Next Day Flyers

Next Day Flyers is an offset printing company offering an array of printed materials such as flyers, business cards, postcards, brochures, tickets and more. They’ve been in business for 13 years and have over 100,000 satisfied customers.

Follow them on Twitter, join them on Facebook and check out their company blog.

Related Content

• The Mythical Paperless World: Why Print Will Stick Around
• 40+ Useful Cheat Sheets for Designers
• Graphics in Photoshop: 6 Beginner Tips for Web Designers
• Related categories: Graphic Design and Photoshop

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Six Revisions

Advertise here with BSA

Last month, we posted a giveaway of 10 Premium Account subscriptions to Mindomo, a mind-mapping app for collaborative brainstorming. In this post, we announce the 10 lucky winners.

The Winners

Here are the 10 lucky Six Revisions readers who’ve won themselves a Premium Account subscription to Mindomo.

• Natalia
• Brad
• Lewis Sellers
• Kevin
• Patricio
• Tony Gines
• bead
• Karl Fitzgerald
• Brinton
• Paramaguru Manickavasagam

Congratulations to all the winners! The winners should have already received an email from the folks at Mindomo containing information about their prize.

SQL query displaying the 10 winners that were selected at random.

About Mindomo

Mindomo is a simple mind-mapping application that can be used individually or in groups for creative idea generation, gathering project requirements, building quick site-maps and simple project management.

Try Mindomo for free! Mindomo has a free account with a limited number of maps so you can evaluate their tool. Sign up now.

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Six Revisions

Advertise here with BSA

We’ve teamed up with the creators of SliderWall, a powerful premium jQuery image slider, to give 5 lucky Six Revisions readers licenses that allows them to use this wonderful tool commercially and on one domain. Continue reading this post to discover how you can win a SliderWall license.

About SliderWall

SliderWall is created using modern HTML5, CSS3 and JavaScript standards. It can be used to create all types of content sliders, from dynamic feeds to image sliders.

The jQuery slider features several templates that you can easily customize from a single CSS file. But customize is an understatement; with a bit of creativity and experience you can modify the original templates to make them truly unique.

Find some awesome demos of SliderWall in action on their Examples page.

Download SliderWall for Free!

SliderWall provides a non-commercial free download that you can use on sites that generate no income.

Go to the SliderWall Free Download page to start your free download.

How to Win

To win, simply answer the following question:

• How would you use SliderWall if you won?

Giveaway Details

This giveaway ends on Tuesday, March 20, 2012, after which the comments section on this post will be closed and you will no longer be able to leave a comment. Please leave a valid email address when filling out the comment form so that we can contact you if you’ve won. Please only comment once. The winners will be randomly selected using a similar method as previous Six Revisions giveaways. The winners will be announced on a separate post. You are advised to subscribe to our RSS feed so that you can be quickly notified when the winners announcement post has been published. Please note that comments are moderated and so your comment may not show up right away. Please note that comments that do not follow the instructions on how to win (described above) may not be published, or may be removed later on.

Related Content

• Getting Started with jQuery
• The Power of jQuery with Ajax
• 40 Exceptional jQuery Interface Techniques and Tutorials
• Related categories: JavaScript and Tools

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Six Revisions

Advertise here with BSA

A blog is a great way to express your thoughts, create a web presence for your company and provide content to Internet users.

If you’re planning to create a blog, but don’t wish to get into the hassles of hosting, developing and deploying it yourself, consider creating a blog at any of the free blogging platforms mentioned below. Such services offer a plethora of features and generally come with both free as well as paid plans.

Let’s look at the top 10 most popular online blog-publishing services.

1. WordPress.com

WordPress.com is perhaps the most feature-rich blogging service out there. It uses the popular open source web software WordPress, and offers many features in its free version — traffic stats, anti-spam filters, SEO, gorgeous themes and more.

If you choose to use WordPress.com, you’ll be in good company, as many popular blogs — including CNN’s Political Ticker, People Magazine’s Style Watch and Flickr — are on this platform.

If you need more than what the free version offers, you can opt for their premium features that include custom domains, upgraded web hosting resources and more.

Whether you’re an expert blogger or a beginner, this ultimate blogging platform is a safe bet.

2. Blog.com

Blog.com is another popular WordPress-powered blogging platform.

Just like other services, it has its own share of pros and cons. For a start, it offers many beautiful premium themes in its free accounts, as well as advanced plugins that one can expect only on a self-hosted blog. However, on the downside, the free service displays more ads as compared to WordPress.com. (But you can opt for paid upgrades to remove the advertisements.)

The free storage space offered on Blog.com is 2GB in the basic plan, which is less compared to 3GB that WordPress.com gives its users.

3. Blogger

Google Blogger is a well-known blogging service that offers many features to its users. For example, Blogger comes with a Template Designer user interface that lets you tweak your blog’s appearance as much as you want. (However, the templates provided are, in my opinion, no match compared to WordPress themes.)

When it comes to ease of use, most beginners prefer Blogger as it offers a no-nonsense interface for administering your blog and top-notch integration with their Google account. Another great thing about Blogger is that it offers certain great features for free that you normally need to pay for in other blog-publishing services,  most noteworthy being the ability to set up custom domains without paying a cent.

4. TypePad Micro

TypePad Micro is another free blog-publishing service. The interface is easy to use, and you can import/export content from many other blogging platforms.

However, in terms of add-ons and themes offered, TypePad Micro won’t satisfy even the most basic blogger. The cheapest paid plan begins at .95 per month and comes with additional themes, custom domain mapping, as well as technical support.

In an age where almost all blogging services are offering numerous features in their free versions, TypePad Micro seems to be lagging behind.

5. Jux

Jux is an innovative service that lets you easily share content online. Conventionally speaking, it’s not a blogging service like the ones previously mentioned, however, it has a lot of the same functionalities. Rather, Jux lets you create your own microblogging site for sharing your content.

By default, Jux templates don’t have the native sidebars and other widgets that are common to most blogs. Instead, Jux provides a clean (and beautiful) approach to blogging. Simply create an account, and then start sharing your content.

While Jux does seem amazing and has excellent support for mobile devices, it may not be everyone’s cup of tea. For instance, if you’re planning to create a more conventional blog, opting for WordPress might be a better option. On the other hand, if you’re leaning more towards visual content, such as photos and artwork, Jux may just amaze you with its features.

6. Tumblr

Tumblr is a popular and feature-packed microblogging platform. It comes with many outstanding and interesting features such as audio blogging (for sharing your music, for example), free custom domains, hundreds of amazing blogging themes and more.

Furthermore, you can sync your Tumblr account with Facebook and/or Twitter so that you can update your social media feeds in a single location. Yet another awesome feature is the ability to create community-powered group blogs. Tumblr also offers support for many third-party apps such as Google Analytics and Feedburner.

7. Posterous Spaces

Posterous Spaces is an excellent online blog-publishing service that is similar to Tumblr.

Posterous Spaces has excellent privacy and viewing features so that you can easily control who can see what on your Posterous Spaces site. It’s designed to allow its users to post content quickly and as hassle-free as possible, so it has loads of features included to facilitate this, such as free mobile apps for iOS and Android smartphones so you can update your blog on the go and a simple, well-designed user interface.

Using Posterous Spaces means you’ll be in good company; popular tech startups like MailChimp, TweetDeck and Airbnb leverage Posterous as their company blog.

8. Blogetery

Blogetery is a WordPress-powered online blogging service that offers a modest set of features. Free accounts get nearly 140 themes, custom domain mapping and roughly 40 plugins to choose from.

On Blogetery, ads are displayed on all free blogs, but if you wish to upgrade, you can opt for the paid plan that will cost you .50 per month and will give you additional themes, plugins, email support, 5GB of additional storage space, the ability to remove ads, etc.

9. Weebly

Weebly offers more than just blogging — it’s a fully featured website builder! Weebly’s blog manager features a drag-and-drop interface, support for image galleries, slideshows, video/audio, maps, etc. Additionally, you can opt for their Designer Platform that lets you build websites for your client, thereby effectively using Weebly as a content management system.

10. LiveJournal

LiveJournal (often abbreviated as LJ) offers blogging with a touch of social networking to it. You can participate in polls, create networks and interact with other LJ users alongside your blog.

With that said, the features, compared to other similar blogging services, are nothing to brag about. Their collection of template is decent, and plugins/extensions are pretty basic in nature.

Other Online Blogging Platforms

Here are other blogging platforms that didn’t make our top 10 list that you still may wish to check out:

• Blogsome, freeblogit and Blog Dive  are other WordPress-powered blogging platforms.
• Thoughts.com is a service similar to Tumblr and Posterous.
• Blog.co.uk seems to have a wonderful community, but appears to put a lot of ads on your blog.
• MyBlogSite looks interesting but seems to lack in features when compared to other options.
• Aeonity offers free blog hosting but it looks like a dated service.

Conclusion

There are numerous blogging services out there, and choosing a specific one is more of a matter of personal taste and needs.

For the security and success of your blog, I recommend sticking to online blogging services that are well known and reputable.

Related Content

• 10 Excellent and Free Blog Editors for the Desktop
• Components of High-Quality Blog Posts
• Important Features All Blogs Should Really Have
• Related categories: Tools and Resources

About the Author

Sufyan bin Uzayr is a 20-year old freelance writer, graphic artist, programmer and photographer based in India. He writes for several print magazines as well as technology blogs. He is also the editor of an e-journal named Brave New World. You can visit his website as well as friend him on Facebook and Google+.

Six Revisions

Advertise here with BSA

Stockfresh, a site where you can buy royalty-free stock photos and vectors, has teamed up with us to give away 3 stock photo accounts preloaded with 100 credits (worth .99 each). Read on to see how you can be one of the 3 lucky winners.

About Stockfresh

Stockfresh is a new stock photo agency by the original founders of the popular stock.xchng and Stockxpert sites.

Stockfresh has some of the best photographers on board, so you’ll definitely find awesome images and graphics to purchase there.

Stockfresh’s goal is to provide high-quality stock photos and graphics at affordable prices through a hassle-free, clean user interface.

They take pride in the fact that they pay contributors with commissions that are among the highest in the industry, so if you shop with them, your money goes to the right place: the hardworking artists, photographers and designers who deserve it.

Currently they have over 1,200,000 images online and the collection is growing rapidly.

See some of their offerings through the most popular images page or the newest images page.

Follow Stockfresh on Twitter and Facebook.

How to Win

To win a Stockfresh account preloaded with 100 credits, follow the steps outlined below.

Step 1

Browse the Stockfresh site’s collection of royalty-free images and vectors. Try looking at the popular categories page, most popular images page and/or new images page.

Step 2

In the comments below, answer the following question:

• Which resource would you download first if you won 100 credits? Provide the URL in your comment.

Giveaway Details

This giveaway ends on Tuesday, March 20, 2012, after which the comments section on this post will be closed and you will no longer be able to leave a comment. Please leave a valid email address when filling out the comment form so that we can contact you if you have won. Please only comment once. The winners will be randomly selected using a similar method as previous Six Revisions giveaways. The winners will be announced on a separate post. You are advised to subscribe to our RSS feed so that you can be quickly notified when the winners announcement post has been published. Please note that comments are moderated and so your comment may not show up right away. Please note that comments that do not follow the instructions on how to win (described above) may not be published, or may be removed later on.

Related Content

• 50 Excellent Photography-Related Tutorials
• 30 Stunning Urban HDR Photos with Creative Commons Licenses
• Beautiful Photographs of Winter
• Related categories: Graphic Design and Resources

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Six Revisions

A few days ago, I went ahead and installed the Consumer Preview of Windows 8. To say I’m impressed would be understating things a bit. As a Windows Phone 7 user for the last 16 or 17 months, I have become extremely familiar with the metro UI, and am overjoyed to see it coming to the desktop. The whole experience so far has actually inspired me to seriously consider buying a new touch-enabled PC (my current PC is over 5 years old at this point, so it’s probably time to update anyway).

What’s Right About Windows 8?

The new interface is inspired. It’s unique, and it’s easy to use. If you’re a long-time PC user, Windows 8 will require you to entirely rethink how you use your computer; but in a good way. No longer do you have a “Desktop” (well, you do, but it’s an app within Windows 8). Instead, you have a screen full of tiles that you click or tap to open applications. All of your applications (with the exception of apps that have to run inside of the Desktop app) open fullscreen with no chrome around them. Each native app has 3 different formats: Full screen; minimal snapped; and maximum snapped.

When an app is full screen, it takes up the entire screen (duh!). Nothing else appears on the screen at all. You can bring up context menus for various actions by right-clicking (I’m not sure what the multitouch gesture is). You can then “snap” an app to the left or right of your screen. When an app is first “snapped”, it appears in a minimal state. It only takes up about a quarter of your screen’s width, leaving the other three-quarters available for another app. Then, you can open a second app to show up in the larger portion of your screen.

Want to keep an eye on the weather while surfing the Web? Snap your weather app to the left or right, and open IE in the rest of your screen. Want to keep your email visible while you’re playing PinballFX? Snap the Mail app to your screen and open up the game you want to play. If you get an important email while you’re in the middle of your game, you can either handle the email message in it’s minimal state, or you can double click the divider bar to maximize the Mail app (snapping your other active app to the other side of your screen).

It’s a Drag

The Windows 8 interface may not be immediately usable to people that are entrenched in the classic concept of desktop management, but it is extremely simple to pick up once you play with it for a few minutes; and I imagine it is even more simple for people that have never used a computer before.

A few tips can help get you started, though:

1. Putting your mouse (or finger) in any corner of the screen will bring up some options for you.
   The bottom left corner of the screen reveals the first of two basic app switchers. Whenever you’re inside of an app, clicking the bottom left corner of the screen will take you back to the Start screen. If you’re on the Start screen, clicking the bottom left corner will bring you back to your most recent app.
   The top left corner of the screen will bring up the second of the basic app switchers. Clicking once will take you to the app you were using before your current app. If you don’t move your mouse away, each subsequent click will take you further back in the history of your apps.
   If you place your mouse in either left corner of the screen, then slide your pointer up or down, you’ll reveal the new iteration of the “taskbar”. Each app you currently have open will be represented by a thumbnail showing the current state of that app. Clicking on any of those apps in the taskbar will switch to that app. Right-clicking on any of those apps will bring up three options: Snap Left; Snap Right (both of which will set the app in the minimal snapped position on the appropriate side of the screen); or Close (to terminate the app).
   The top and bottom right corners of the screen bring up your main context menu. That main context menu contains five icons: Settings; Devices; Start; Share; and Search. When you hover over that bar, you’ll also get a floating bar that contains the current time and your WiFi status (I haven’t seen it display any other icons, but it’s entirely possible that it does). Settings will present you with a few settings you can adjust for the current app. Devices brings up a list of the related hardware items you have installed on your computer (mostly printers, as far as I can tell). Start will take you back to the Start screen (or, if you’re on the Start screen, it will take you back to the previous app you were using). Share brings up a list of apps that might allow you to share something in your current app. For instance, if you’re viewing a blog post, and you want to email it to a friend, you would click “Share”, then choose “Mail” and send it off to someone. I would imagine there will eventually be integration with various social networks, as well; but that’s not really there yet.
2. Dragging apps around can be useful.
   If you place your mouse at the top of an active app, the cursor will turn into a little hand. You can then drag the app to the left or right to “snap” that app in place.
   If you drag the app all the way to the bottom of the screen, that will terminate the app for you.
   If you’re on the start screen, you can drag your tiles around the screen to reposition them.
3. Right-clicking brings up lots of options.
   Each app has its own separate context menu that appears when you right-click somewhere inside. Even within the apps, if they’re snapped they’ll have different context menus than they will if you right-click while they’re maximized. Then, in most apps, right-clicking on a specific item within the app will bring up another context menu.
   For instance, in IE, if you right-click in a general area, you’ll see thumbnails of your open tabs at the top of the screen, with the option to open a new tab, open a new “In Private” tab or “Clean Up Tabs”. At the bottom of that same screen, you’ll see the address bar with a few extra options. You can click the “Back” or “Forward” button or you can reload the page. You also have an icon that looks like a thumbtack, which allows you to “pin” the current Web page to your Start screen (making it possible to open the Web page as though it’s an app), and you have a wrench icon that currently brings up the options to “Find in Page” or “View on the desktop” (which opens the Desktop version of IE10, allowing you to browse the page in a more traditional manner).
   When you’re in the Mail app while it’s “snapped”, you get a few options: Mark Read (if there are any unread messages selected), Mark Unread (if there are any read messages selected) and Sync (to actively re-sync the current account). If the app is maximized (or at full screen), you get a few more options. You then have the option to move selected messages, view your list of folders, switch to a different email account and more.
   If you right-click on an app tile in the Start screen, you also get a few options. Which options you see depends entirely on which app is selected. Some apps allow you to expand the tile to double-width (or contract it to standard width if it’s already double-width), some allow you to view where the app (or shortcut) is stored on your hard drive, some allow you to uninstall the app, etc. All apps allow you to “unpin” them, so they no longer show on the Start screen. If you right-click on the Start screen itself (without selecting an app), you’ll get the option to view all of your apps (which then lets you pin the apps).

Lock It Up

Windows 8 implements a really nice lock screen, very similar to the one Windows Phone. When your display turns itself off and the lock screen activates, you get to see whatever photo you’ve set as your lock screen, along with the current time and a bunch of icons for your notifications. If you have new email messages, you’ll see an indicator telling you how many. If you have upcoming appointments on your calendar, you’ll see those. Within Windows 8 (unlike the current version of Windows Phone), you can easily change which apps show indicator icons on your lock screen.

The lock screen can display notifications from up to 7 different apps. In addition, you can set one app to show “detailed” information on the lock screen (by default, this is your calendar app).

One other major improvement (at least, I’ve not noticed this feature in previous versions of Windows; it’s entirely possible it’s there) is the fact that you can switch between user accounts even when the computer is locked under another account. I have my computer set up now so that my account is tied into my Live account, which requires my Live password in order to unlock the computer. I also have a separate user account set up for my wife, which doesn’t require a password. If I’ve been using the computer and let it lock automatically, she simply has to slide the lock screen up, then click the “Back” button when it asks for my password. She then gets the option to sign into her account or to try signing into my account.

While the computer’s not locked, if you’re on the Start screen, your username appears in the top right corner. You can click on that to logout of your account, or to switch to another account on the computer.

X Marks the Spot

Windows 8 (much like Windows Phone) includes integrated Xbox Live support. There are a handful of Xbox Live games already available (so you can earn achievements in games you play on your desktop), the Xbox Companion app is available, and there is an Xbox app. The Xbox app lets you view your friends’ statuses, view available Xbox games and even purchase downloadable content for your Xbox (Games on Demand, Xbox Arcade, etc.).

The Kitchen Sync

Just about everything in Windows 8 ties into your Windows Live (Hotmail, Zune, Xbox, etc.) account. All of your native settings can be synced with your Live account, allowing you to sync various settings between computers. You can change how items are synced on your computer by moving your pointer to the top or bottom right corner of the screen, clicking “Settings”, then clicking “More PC Settings”. Then, click the “Sync Your Settings” tab and make the changes you want to make.

How Do I…?

I’ve seen a lot of people ask questions about how to perform seemingly simple tasks. Here are the answers to the questions I’ve seen:

1. How do I shut down or restart the computer?
   Place your cursor in the top or bottom right corner and click the “Settings” icon. One of the options in that Settings menu is “Power”. Clicking the “Power” option will let you put your computer to “Sleep”, Shut Down your computer or Restart your computer.
2. How do I close an app?
   While a lot of people will never find it necessary to close an app, sometimes you just want to clean things up (or, maybe, especially while it’s still in preview mode, you’ll get an app that misbehaves and you need to close it out and try to start it again). There are two ways to close an app. One option is to place your cursor in the top or bottom left corner of the screen and slide your pointer up or down the side of the screen. Right-click on the app you want to close and choose “Close” from the context menu. Your other option is to place your cursor at the top of the app while it’s active, then click and drag it all the way down to the bottom of your screen. When you push it off the bottom of your screen, that will close the app.
3. How do I get rid of the Start screen and go back to a classic Windows interface?
   Uninstall Windows 8 and install Windows 7 instead. Seriously, though, I’ve seen articles that claim there was a registry hack you could make to do this; but I have no idea why you would want to. If you want the classic Windows interface, stick with a classic version of Windows. If you want to use Windows 8, use Windows 8. In Windows 8, the classic Windows interface is simply an app inside of the operating system.

If It Works on Windows 7, It Works on Windows 8

The Desktop app within Windows 8 is basically Windows 7. All of the programs you have installed on Windows 7 should work just fine in Windows 8. As a test, I started by installing Office 2010 and Adobe CS4. Both suites installed just fine and work the same as they do on Windows 7.

What’s Missing From Windows 8?

As much as I would love to move to Windows 8 as my primary operating system right now, there are still a few apps and features missing that are keeping me from doing so. Some of these may be incidental to many people, but their absence is frustrating enough to me to stop me from switching.

1. No Twitter
   There’s no Twitter integration, yet. There is no Twitter app (official or unofficial). With the way the Windows 8 interface is designed, and with as much as I rely on Twitter, I will need a Twitter app that’s capable of popping up some sort of notifications (or at least one that can be snapped properly).
2. No Zune Support
   At the moment, the Music and Videos apps don’t support any DRM’d content, including content you purchased through the Zune marketplace. If this wasn’t bad enough, there is also no support built into Windows 8 to sync your Zune device or your Windows Phone. As far as I can tell, the only way to do this, so far, is to install the Zune client within the Desktop app.
3. My VPN Doesn’t Work
   I have no idea where the issue is with this, but the Cisco AnyConnect VPN client doesn’t work for me on Windows 8. It’s entirely possible that this is a result of incorrect settings on my computer, but with Windows 8 still being so new, it’s tough to find support for the issue. I can’t access my servers at work without being on VPN, so this one is absolutely necessary for me to get working.

Other Frustrations

There are a handful of other issues that bother me about Windows 8, but I’d most likely switch over even if these weren’t fixed right away.

1. The Mail app doesn’t support custom IMAP/POP configurations. You can only set up Google, Hotmail or Exchange accounts.
2. The Mail app doesn’t have a conversation view (this was a really nice feature that was added to the Mango version of the Mail app on Windows Phone).
3. Many apps require a Live ID. My wife has no need for a Live account, so she’s never gotten one. Unfortunately, that means she can’t use the native Mail app, the native Calendar app, the native People app, or a host of other apps.
4. Games could potentially start crowding the Start screen really easily. On Windows Phone 7, all games are housed within the Xbox Live app, keeping them from crowding your list of general apps. Unfortunately, on Windows 8, each game gets its own tile on your Start screen. Sure, I could unpin the games, but then I’d probably never play them. I’d like to see them all organized together like they are on Windows Phone.
5. The Music app is virtually unusable for people with large collections. Right now, there are three different views in the Music app: Albums (a list of all of the albums you have on your computer), Artists (a list of each artist you have in your music collection) and Songs (a list of all of the songs you have in your collection). Ideally, I would click on the Artists tab, then select an artist to see a list of that artist’s albums. However, the way the Music app works now, when you click on an artist, you simply see a list of the 10 most recent songs you’ve played by that artist. In order to view a list of that artist’s albums, you have to click on the artist’s name, then click “Artist Details”, then scroll to the right to see the albums in your collection. If you scroll too far to the right, you’ll see a list of the albums that are available in the Marketplace from that artist.
   The Music app also seems to be extremely slow; almost as though it’s downloading all of the information about my collection from the Internet, instead of loading it from some local location. Sometimes it can take minutes to load the list of the music in my collection.

Related posts:

1. Windows 7 Nearly Free For Students
2. ObjectDock – Add a Dock/Toolbar to Windows 7
3. Windows Vista – My Review

HTMLCenter Web Development Blog

It’s been quite a while since I’ve tried to use Brizzly, but I did enjoy the features they offered. For a long time, it was one of the few Web-based interfaces I could use to manage my social media accounts. The other day, when I was temporarily using a computer that didn’t have Chrome installed (so I couldn’t use ChromeDeck), I tried visiting Brizzly only to find that they were shuttering the service.

Today, the official notice went out to Brizzly users. Following is the message that was sent out:

Dear friend of Brizzly,

As you might know, the Brizzly team merged with AOL in September 2010, and we set to work improving AIM soon after our acquisition. After a long year of work, we launched the next generation of AIM at aim.com.

Some of the key features of the new AIM will look familiar, especially if you used the Brizzly Picnics group chat feature. We’ve incorporated group chats and inline media previews just like you saw in Picnics, plus cool new things like notifications for activity on social networks and messaging platforms such as Twitter and Facebook.

We also redesigned the app with a simple interface that has made our own instant messaging experiences all the more pleasurable. You can even take your chats on the go with great new AIM for iPhone and Android apps – again go to aim.com to download.

Before you go, please note these two important things:

1. You’ll need to find a new Twitter client soon if you were still relying on Brizzly (Twitter makes a nice client or three these days)
2. You’ll need to download any Brizzly Pics you want keep if you’ve uploaded these to Brizzly. You’ll have until the end of March to download but after that we’ll delete any photos that remain.

We do hope you check out AIM, but more importantly, we want to thank you again for being a fan and supporter of Brizzly over the years. Don’t be a stranger.

Sincerely,

Jason Shellen & the (former) Brizzly team

Related posts:

1. Brizzly Gets Some Updates
2. Brizzly Gets Facebook Integration
3. Important: Twitter Updating Authentication Methods

HTMLCenter Web Development Blog

Couple of group announcements. If you’re a freelancer looking to join a web freelancer support group, visit http://webdevradio.com/freelance. PHP 5.4 was released with some cool new features. I’m travelling some more, but will be back sooner than last time!

• Web freelancer support group :: Web freelancer support group
• Join my freelance job list :: Join my freelance job list and I'll fwd jobs that might fit you.
• PHP 5.4! :: PHP 5.4 released!
• Grails 2.0 :: Grails 2.0 released!

File Download (14:56 min / 10 MB)

WebDevRadio.com – web development podcast

Advertise here with BSA

Clean, simple web designs have become a popular trend. This article will cover the subject through a two-part discussion. First, we’ll talk about a few traits that clean designs tend to have in common. Secondly, I’ll share some tricks and techniques that can be helpful when trying to achieve a clean design.

Common Traits of a Clean Web Design

Let’s start by looking at some fundamental characteristics of clean web designs.

Solid Web Page Layout Structure

If you take a few minutes to browse sites that might fall into the "clean" category, I’d be willing to bet they all have one thing in common: a well-thought-out grid that the designer is really putting to work.

For anyone not familiar with designing with a grid, just imagine that each comp starts with an invisible structure of columns and rows, and that structure drives the scale and placement of the elements in the composition. This grid creates a sense of order by helping designers establish hierarchy, rhythm and consistency.

Pixel Dreams is designed in a grid using the popular 960 Grid System.

A solid grid layout structure provides order and unity. For instance, Creative Review has several page layouts for certain types of content, however, the browsing experience is continuous because they all share the same underlying framework.

When a site has a lot of content to display, such as an online magazine or a newspaper site, achieving a clean design aesthetic can be more difficult. But sites like The Guardian, a British newspaper, show that it’s possible with a well-thought-out layout grid.

If all their content were plopped onto the page without a solid structure, the front page would definitely be a mess. However, by using their grid as a starting point and relying on rules and white space to establish hierarchy, the robust content feels far from overwhelming. Every pixel of margin and every rule was tweaked until it was "just right," and all that effort resulted in a layout that feels effortless.

Here are two resources that will help you learn more about designing on a grid:

• A Brief Look at Grid-Based Layouts in Web Design
• The 960 Grid System Made Easy

Good Typography

It seems that good typography often centers around doing more with less, and when it comes to getting that "squeaky clean" feel in your designs, restraint is key.

When too many typefaces are used, they compete with one another, making a design appear disjointed and disorderly.

If you do a quick survey of well-designed sites, you’ll probably find they rely on one or two typefaces, and then vary size, case, color and weight to establish a clear typographic hierarchy.

This approach creates a sense of consistency and refinement that can be seen on sites such as The New York Times and The Mavenist.

The New York Times

The Mavenist

In both examples above, there are no more than two typefaces in the style sheets, yet the designers have established clear hierarchies by using those typefaces to their fullest.

Good typography is best displayed in the details. Leading, the spaces between lines of text, can help make content easy to read and pleasing to the eye. When there’s just enough space, the reader’s eye can easily return from the end of one line to the beginning of the next. In web design, leading can be adjusted through the line-height CSS property.

The optimal ratio of type size to leading often depends on the typeface, color and width of the text block.

Additionally, letter-spacing, the space between letters, can allow the letterforms to breathe a bit.

Here are some resources related to web typography:

• A Basic Look at Typography in Web Design
• CSS Typography: The Basics
• CSS Typography: Techniques and Best Practices
• CSS Typography: Examples and Tools

Limited Color Palette

In print design, color is often limited by necessity. A budget may allow for only a two-color poster, and so the designer is forced to work within those constraints.

That’s never the case with websites, though, since most modern computer monitors can display millions of colors.

However, cleanly-designed sites seem to trend toward limited color palettes. From what I’ve seen, these sites often use core grays and one color. The color is earmarked for the most important elements (like links and headers), a trick that not only enhances usability but also helps to visually unite elements throughout the site.

A1 rolls this direction, using a bluish green and gray color palette.

Meanwhile, the fine folks at Fuzzco take it all the way down to a single color: red.

Clean designs that successfully push beyond one- or two-color palettes often do so by using color sparingly and by using neutral colors to break things up. Solo is a great example of this.

Just like the connection between typeface and message, it’s not all about picking colors that look good. Stronger designs incorporate palettes that set a visual tone which echoes the site’s content.

For example, bright, complementary colors make sense for Notologist because of the nature of the site.

Consistent Imagery

Does it bother you when the style of imagery (photography, illustrations, charts, etc.) shifts from page to page throughout a site? Me too.

Making sure these visually prominent elements are stylistically in harmony is a pretty powerful trick when it comes to creating a site with a clean appearance.

For example, IBM’s Smarter Planet campaign touched on dozens of topics. Throughout the related print and interactive materials, illustrations and charts that share geometrical frameworks, bold strokes and saturated colors help tie the campaign’s materials and topics together.

And over on Protein, you’ll notice that even though the photography for the profiles comes out of different shoots, there is a carefully produced similarity across the images in terms of composition, depth of field and quality of light. Consistency across these often-prominent elements helps viewers look past individual pieces and see the sites as a whole.

Obviously, there are instances where it just isn’t practical to produce all the imagery in the same style. News sites and blogs can’t throw out a great image that enhances a story just because it doesn’t fit with others.

And sometimes clients don’t have budgets to produce new charts and illustrations, so the designer is forced to make existing assets work. I’ve noticed that in these cases the use of graphic elements around the imagery, such as borders, can help inconsistent imagery feel a bit more uniform.

Tips for Achieving Clean Designs

What follows are a few tips for producing clean web designs.

Start Complex, Then Simplify

Putting things on the page is part of the design process. In my experience, one of the traps designers can easily fall into when they set out to create something "simple" is becoming afraid to add anything to the page. The resulting designs are usually pretty bland because the process didn’t allow for exploration (and those "happy design accidents" we all love).

To avoid this problem, I find that it’s helpful to "start complex, then simplify."

In the early phases of the design, don’t limit what you put on the page. Explore different layers of content and try out different design elements. Then, once that design feels like it could be close to complete, start to simplify.

Ask yourself, "what doesn’t really need to be here?" If dropping a design element (like a rule or texture) seems to make the page fall apart, keep it around. But, if that’s not the case, ditch it.

We’ve all heard the adage that 20% ends up doing 80% of the work. We’re just applying that theory to design by identifying the elements that are doing the heavy lifting in our layouts. (Read more about this subject: Reductionism in Web Design.)

It may even be worth bringing in someone who’s more detached from the design for an outside opinion on what should stay and what should go. If you can’t give a more solid defense for why something should be on the page other than "it’s cool" or "they do it on this other site," then remove it.

Ultimately, you’ll be left with the ingredients that will give you the strongest design. Once you get there, a little bit of fine-tuning should leave you with a strong, uncluttered design.

Tweak, and Tweak Some More

I’ve been told that I tend to "beat my page designs into submission." Honestly, I take that as a compliment.

To me, a design is never really "finished" and can always be pushed further. Seriously, just ask any designer or student who has had the unfortunate luck of working with me. I’m guessing it’s not all that fun when I ask them to try another shade of green for the twelfth time.

As we explored earlier, that "clean" feel is the product of all the aspects of the design — composition, hierarchy, palette and typography — working harmoniously. If you’re like me, making that happen means a lot of time spent tweaking: adding a point of line-spacing here, removing 2px of margin there, trying #ddd instead of #eee for the dotted rules, etc. These may seem like inconsequential adjustments, but when it comes to getting all the elements in a composition to work together, a single pixel can make a big difference.

So, tweak, and then tweak some more. One tweak will lead to another, and sometimes what you uncover will lead you to fork your designs or backtrack.

Making something look clean and cohesive is a process that takes time and persistence (and, generally, a lot of coffee).

But, if you stick with it, all the details will eventually fall into place and the design will become cohesive.

Don’t Miss the Big Picture

In my previous life as a "mostly print designer," printing and pinning up your layouts was a daily ritual. The firm’s walls were saturated with everything from annual reports to logo explorations.

But something funny happened when I started to focus on web design — I stopped printing. It was almost like I decided that because the project would never see a press, it never needed to see paper.

After a long spell of blank walls (and subsequent blocks of frustration with how my projects were coming together), it hit me. The beauty of printing and pinning was seeing the big picture.

I was missing my chance to evaluate the system as a whole, shore up throughlines, and find opportunities to simplify.

Flipping through layers in Illustrator or Photoshop just doesn’t offer the same perspective as seeing all the comps side by side.

So, my suggestion is to print, pin and repeat. It’ll help you identify inconsistencies and find opportunities to synchronize your layouts, all of which will result in a cleaner design. (Sorry trees.)

Conclusion

Whether you’re well-versed in the creation of "clean" design or looking to move in that direction, respect for imagination followed by attention to detail will go a long way.

As I said early on, an organic but intentional process — not standards and rulebooks — will come in most handy. Of course, each designer has moments of magic throughout his or her individual process.

So, if you have any tips and tricks you tend to use to strengthen your layouts, or examples of "clean" design you love, please feel free to add them below so we can keep the discussion going.

Related Content

• Minimalist Web Design: How Minimal is Too Minimal?
• Gestalt Principles Applied in Design
• Reductionism in Web Design
• Related categories: Web Design and Usability

About the Author

Phil Zelnar loves designing and building websites. Phil’s a principal at Poccuo, a boutique design studio in Washington, D.C., that he founded in 2007. He also heads up Notologist and occasionally teaches a class or two. Find out what he’s up to at andphil.com or on Twitter at @alsophil.

Six Revisions