Thursday, July 25, 2013

5-Point Website Redesign Checklist

Ready for a redesign? Maybe your website needs a complete overhaul, or perhaps you’re only going to perform a little spruce-up. Regardless, users have become far savvier than we were only a few short years ago, so it’s important to provide a top-notch experience. There are a few turn-offs that even sophisticated Web designers employ too frequently. Here are suggestions of things to keep in mind as you design or redesign your space.

1. Your site should be easy to read. In our fast-paced (and increasingly mobile) world, your content should be able to be skimmed. Many of your users are likely reading your site on a mobile device and they aren't slowing down to absorb every word you've written. In fact, studies have shown that we only read 28 percent of the copy on most webpages. Along those lines, keep your content easy to understand and pleasant to read.

  • Be concise! Get to the point and eliminate anything unnecessary.
  • Think like a journalist: Easy-to-understand language; short, common words and phrases; use the inverted pyramid (most newsworthy on top, followed by supporting details and then related information last).
  • Use bullets, numbered lists and appropriate text formatting.
  • Make your hyperlinks effective. Show the user what has already been viewed using the :visited CSS selector, and use the title attribute to provide additional context.
  • Test your site’s readability with the Readability Test Tool.
2. You do want to give the user a unique Web experience while visiting your site, but not at the risk of confusing the conventions with which he or she's accustomed. Research has shown that a user will respond most positively to blue links. Yes, it’s what’s expected, but for the sake of usability, tried-and-true is best. Your user wants to navigate the site as fast as possible to get the information or product he or she needs. If he’s forced to figure out your site conventions, it could waste time which might make him more likely to ditch out and find another site.

3. What about search boxes? Is there an ideal size for a search box? Why, yes, there is! Jakob Nielsen, an expert on webpage usability, conducted numerous studies on what makes a webpage usable. Among them, he evaluated the best size for a search box, which turns out to be 27 characters. The average is 18 characters wide, but a 27-character box would accommodate 90 percent of queries. Generally, a search box’s width is better to err on the side of too wide, rather than too narrow. If the search box is wide enough, the user can review, verify and submit a query with little extra effort.

4. Alert! Alert! Graphics abuse ahead! Have you ever felt this way? Like your eyeballs are being assaulted by flashing lights, too-bright colors or design elements and graphics that practically jump off the screen? We’ve all had a “whoa” moment when we’ve navigated to a website that has way too much going on – don’t be that website. Don’t design or redesign a website simply to decorate it: Use your design elements to enhance your content, but not to slap the user’s face with it.

From a usability perspective, less is more when it comes to graphics. This includes avoiding overuse of JavaScript and Flash. If you have more JavaScript and Flash than your site can comfortably handle, it’s going to slow down page loading, which in turn will repel site traffic, rather than attract it (not to mention being just plain annoying). Also, if the user doesn't have a Flash plugin, then he or she either can’t view that portion of the site or has to enable or install the plugin before he or she can proceed. Not only that, but Flash won’t work on iOS devices (and only sometimes on Android), so the chances of your user’s being able to get the full experience of your site become much slimmer. As well, you need to be mindful of the capabilities of your Web hosting provider; the amount of Java and Flash that you need to use may determine how you choose your host.

5. The reason why you have a website is because you want the user to navigate to whatever it is you’re selling or promoting, right? Then make it easy for him to do so by avoiding misleading UI controls. User Interface (UI) controls are webpage elements, components and widget that are there for the user’s interaction (like buttons or drop-menus). Avoid designing an element that looks like a button but isn’t – that will frustrate the user and likely encourage him or her to navigate away from your page more quickly.

If  users click on what they believes to be a link, but it isn’t (or if the link is broken), your site loses credibility. Your UI controls need to be consistent: When the user clicks, the action created should be what the user expected.

Do you remember what you learned about the Golden Rule? One should treat others as one would like others to treat oneself. Try applying this principle to your website: Think about how you, as a user, interact with Web space and make your site as appealing and user-friendly as the sites you like best. Avoid colors, fonts, spacing and layouts that would be too busy or detract from your content. Your users are visiting your site for a purpose; make it easy for them to find what they want without added distraction. If you can avoid these common website turn-offs, then you’re halfway to creating a great presence on the Web. The other half, of course, is creating fabulous content… that’s the hard part!

Ready to redesign your site? Contact Siteboxpro Web Design


About the Author
Amy Johnson is a long-time writer and community Coordinator for green hosting provider, A Small Orange. Their vision is simple: perfecting hosting while maintaining a homegrown feel with a focus on people - customers, employees, and the community. Amy enjoys reading and learning about online businesses as well as sharing her expertise and interests in green technology, all things website related, and running a successful online business.

Sunday, May 29, 2011

Thursday, September 23, 2010

Name, rank and serial number - How do you get people to fill out your online forms

I am sure you have seen some war movie in which the captured soldier is asked about the secret plans, and even under torturous conditions he will only provide his name, rank and serial number.

Your website visitors feel the same way when you hold information "hostage". They are going to clam up, and all you'll get out of them is limited info, or worse - nothing at all!
  • Keep it simple and necessary - Can you get away with only the name and phone number? If your visitor is serious, they will provide real information. Any additional information you require can be collected with a followup phone call or email.
  • Tell them what comes next - your visitors should know what is going to happen after they fill out the form. Will they have to check their email for a link, will something start to download or redirect them to the content they are requesting.
  • Send a confirmation message - While this has nothing to do with them filling out the form, it has everything to do with marketing. What if they stumbled onto your site and accidentally closed their browser? Now, they have an email confirmation page with a link back to your site! Smart move.
Your site visitors came to your site to make a purchase or engage your services, don't make it hard for them to get the process started online. Online forms are a vital part of your website (or at least it should be), make the most of them.

Wednesday, May 19, 2010

Must have iPhone apps for web designers

If you are like me you know that the iPhone is more than just a cool toy, it can be a valuable tool and resource. And, if like me, you are a web designer who not only creates websites, but is involved with maintaining, tracking, enhancing and almost anything a clients asks to have done - you know how important it is to be "connected" at all times.

Now with all that said, here are my most used apps - these aren't just apps i saw on some other list page, but rather apps i used weekly, if not daily (and i will keep it brief by just giving the app name, the usage and why you need it.)

Analytics - This app is by AnalyticsApp.com and it is a complete Google Analytics application. You can get your Google stats instantly and you can track a huge number of sites.

FTPOnTheGo - Wow, this has come in very handy. This FTP client allows you to download files, like HTML, JSP, PHP or really anything and edit them in a text editor and send them back to the server.

GoDaddy - I have purchased tons of domains for clients on my iPhone.

CC Terminal - I can get paid anywhere anytime. this credit card app is easy to use and connects to your authorize.net account.

SEO Ranking - Add your domain, enter your keywords and find out where your site ranks. this app also keeps a graphical history so you can track your SEO successes (or slips).

That's it. I have a couple others dedicated to just web stuff, but I don't use them as much. Oh, the names that used above are how they appear on the phone, so if you search the App Store they should come up. They aren't all free either, but Analytics and FTPOnTheGo are worth the price.

Tuesday, February 9, 2010

Click here, click here!

I was recently involved in a discussion regarding website usability with a few fellow web designers. It was during this conversation that I thought about the word "designer" in our titles. Most would say a web designers job is to make a website look good, and the siteboxpro team and myself would not argue with that - but there is more to it.

My REAL job is to ensure that our clients get a great website AND their clients get a great web experience. A great web experience is one in which the user is able to find information, navigate the site, and get what they expect. Plain and simple, the site should be easy to use. I've put together a very short list of things that help make any (your) website more user-friendly:

  • Click here! - if this phrase or hyperlink appears on your site, remove it. Instead, let the description be the hyperlink - example: "Click here to register" or better put "Register".
  • Going Home - your logo (which should appear at the top of your page) should be clickable and return the user to the homepage of your site.
  • PDFs and hyperlinks - open PDFs in a new window. All other hyperlinks should be in the same (parent) window - unless you are sending the user to a different website entirely.
  • No underlining - underlined text should be reserved for hyperlinks - use other typographical elements such as bold or italics to emphasise.
  • What's the status? - hyperlinks should have 3 states - not visited, visited and active - make sure you are using colors and decoration to let your visitors know where they have been and even more importantly where they haven't!

Simple things go a long way. It is the part of every web design to ensure a website is functional, easy to use and - of course - looks good.

Tuesday, October 13, 2009

Empty Anchor Tag is Not Clickable

From time to time, not often, but it happens - we here at SiteBoxPro get stumped with browser quirks. Something will work great in one browser, but totally fail in another. We don't necessarily promote one browser over another (Firefox rocks), but we do have to implement websites that work across the most common ones.

With that said, we had a situation that required the use of an empty anchor tag. In FireFox everything worked great, but in Internet Explorer (7.x) it was not clickable. We added a non-breaking space - still no go. After some Google searching we found the solution: add a transparent 1px gif as a background image. Odd right? But it worked like a champ. Here is the info we found:

"Say you have an anchor element that you've given display:block and some dimensions with no content or background image, in order to make a clickable area, but in Internet Explorer it's not clickable. In order to keep the anchor invisible you can add a transparent 1px background-image. Suddenly, Internet Explorer understands that this is a clickable element. "

Thanks to the folks at iBloomStudios! Great post guys - and we wanted to spread the word.

Here is our code:

.polBox {
display: block;
height: 60px;
width: 140px;
position: absolute;
left: 360px;
top: 176px;
background-image:url(/images/transPic.gif)
}

Here is our HTML

href="http://www.siteboxpro.com" target="_blank" class="polBox"

Saturday, October 3, 2009

Does my business even need a website?

Yes.

Ok, maybe I should elaborate since a one-word, one-sentance post doesn't cover all the "why"s you might have. But, truly the answer is yes. Without question, your business should have a website. Why not take advantage of a very practical, useful and more importantly - affordable medium, such as the internet.

Now, with that said, does your business website need to be come monster web, with hundreds os pages, links and graphics? Does it need to cost $4000? No. It can be 1 page. That's right, ONE SINGLE PAGE. That page needs to cover the who, what, where, when, why and how or your business. Anything more than that, for the sake of this article, is gravy!

The simple fact is, wait for it....people use the internet! Shocker, right? They use it before they make a purchase, they use it to find businesses and as part of their research. We aren't even going to talk about sites where a consumer can actually make an online purchase.

Another good reason to have a site, even if it is a one-page online-business card site, is to feed other sites. You know why they call it "the web", because it is a woven network of shared\sharable data. Your one-page can be used to feed other pages, such as online yellow pages, listing sites and professional directories, and you, for the most part don't even need to do anything but sit back in reap the rewards.

We hope you would select SiteBoxPro to get your site up and running, but no matter who designs and hosts your website we hope that you would explore the web as a place to promote your business.