What to put on your home page

Best home page content recommendations

Your home page is probably the most reliably viewed page of your site.  It may not be the first viewed.   But your home page gets a large share of visits, especially if people want to find out what you do.

It’s important to make a great impression with your home page.  You’re trying to earn more time with your visitor’s attention, and lead them to take the next action you want them to take.  Feeling a lot of pressure to get this right?  Help is here.

What Should Be On Your Home Page?

Jacob Nielsen’s guidelines for home pages were written in 2001, but they are just as relevant for today.   He spells out 131 do’s and don’ts for communicating your identity, purpose and choosing content on the home page of your website.

All of the 131 guidelines are important.  Here are some of the most helpful when you’re starting your home page or redesigning a new one:

Your logo, identity and tag line:  Your tag line is where you sum up what your company does or what you offer.  It is also a good place to state your main difference from your competitors.

Quick access to important content within:  Include direct links to high priority tasks so people don’t have to dig through explanations to sign in, find your news, buy or register.

Show samples of content from other pages:  Show snippets, teasers, or headlines of content you offer on other pages.  Let them see real content with excerpts or examples. It’s more effective and meaningful than describing what you have.

Use Customer-focused language:  Choose categories, labels, and content for their value to the customer.  Choose your customer’s words, not your internal phrases.

For example, what would you call a page of information for new members?  “Member information” is how you think of it.  But that’s confusing to new people – is this a page about current members; is it for members only, or to inform potential new members?  Find out what phrase your visitors use when they want help as new members: “For New Members” may better match what they’re looking for.

Avoid clever or cute phrases: Yes, you want personality but no, you don’t want people guessing what you mean.  It’s doubly important that your navigation is straightforward, not creative.

Provide graphics for meaning, not decoration: Prefer real photos of what your company does over stock photos.  Use graphics to convey information, rather than because they look nice or add animation.

Cut out the welcome: When launching a first site, it’s tempting to celebrate this milestone with a welcome announcement.  It’s better to show visitors where to find what they need for the purpose of their visit.

Ask for data but say why: It’s very important to gather customer information.  Getting email addresses so you can send visitors an e-book or newsletter is one of the best ways to nurture future clients.  But you need to explain the facts and benefits of signing up, however briefly.  Prospects don’t just sign up because you ask them to.  Specify, the value of the information, when to expect it and your privacy promise.

What should your Home Page Do?

If you know what your visitors need, choose content that provides what they are looking for.  The way you present that content brands your business and sets you apart.

Michael Dunlop’s Income Diary spells out these suggestions for your blog home page:

Cue your site’s personality:  Set the tone for your site, such as down-to-business, warm, elegant or fun.

Give “Next Step” directions: Lead people to what you what you want them to do next.  This could be to sign up, visit a particular page, get a cost estimate, buy or another action you want.

Give social proof you’re active:  With testimonials, client logos, Facebook Likes or twitter status updates

Derek Powazek gives practical advice on what your home page should do, in his classic Home Page Goals article on A List Apart.

The top priority: answer, “What is this place?”  In other words, tell people briefly what your business does and what value they get. Visitors need to know they’re in the right place.  Easy to scan text, like a headline or featured phrase helps the right visitors feel a good fit.

Keep Your Home Page in Perspective

Once you’ve succeeded in sparking interest, your home page is often the visitor’s next choice to learn more about you.

It’s important to get right, but high anxiety over using this small space correctly makes some too frozen to do anythin

Derek Powazek reminds us that your home page isn’t the one with the strongest pull to bring in new visitors:

“This is the atomic element—for a news site, it’s the story page; for a search engine, it’s the search result; for a store, it’s a product page. This page accounts for 60 to 75 percent of all page views on the site. The rest belong to the home page.”

 

Ultimately, it’s the value of your content within your site that drives up new visits and your value to visitors.  So relax, take a deep breath, and let your home page provide a quick overview of why your visitors and customers choose you.

 

Easy Drop shadows with CSS3 Generator

css3 generator tool by Randy Jensen

Online CSS3 generator tool by Randy Jensen


One of the most exciting developments in web design is the new rendering power of modern browsers. Web designers can add new instructions to style sheets that produce drop shadows, rounded corners, smooth transitions and other effects — all without the coding burden required before. The latest stylesheet standard — CSS3 — gives you more elegance and visual appeal without the extra code and images used to get these results before.

Get Fast-loading, rich visual effects with CSS3

To use the new design features, all you have to do is know how to write the rules correctly in your stylesheet.

This can be a steep learning curve. So, people like Randy Jensen have jumped in to help us with free tools to test and write the code snippets we need.

Check out the CSS3 Generator at css3generator.com

Jensen gives us a way to select the visual effect we’re looking for, and a form to try out different settings. Using the simple preview area, you can check for the results you want, and then copy and paste the code snippet for your stylesheet.

What a great tool. Whether you’re a professional or a dabbler, this code generator will help you quickly add more elegance and visual appeal to your web design without the bloat of images and bulky instructions.

Other helpful resource for CSS3

Even with the CSS3 generator, you’ll need to check different browsers to make sure the results are ok. Also, you may want to look at the markup from the experts. Chris Coyier is one, at CSS-Tricks.com. His shadow markup includes a rule that isn’t created by the CSS3 Generator. You can find out more here:
CSS-Tricks: a wealth of tutorials and blogs to help you master techniques and use them wisely.

Kill the white flash and improve your site speed with a simple minify plugin

This webpage is making a lot of javascript calls

Too many javascript calls? Combine them into one.

When a website doesn’t load very quickly, you have a serious problem.

First of all, you lose traffic.  Few people have the patience to wait more than a few seconds.  Second, slow load time can hurt your search rank.  Google measures how long it takes for your site to send a page to a visitor.  If it’s too long, you get a lower place on the results list.

Third, a slowdown can cause a white flash between page loads each time users navigate your pages.  This can annoy visitors and undermine the beauty of your design.

If your site goes noticeably blank between page loads, you have a problem

A white flash on page load when navigating a site is a distressing symptom.  It is a sign that something is slowing down the images going to your browser.  Many WordPress developers have noticed it and the WordPress.org forum offers many well-debated threads.  WordPress updates, themes, plugins, jquery versions and css files have all received their share of blame.

The best insight I’ve found so far comes not from WordPress, but from Stackoverflow.

Avoid loading background images and scripts one by one

Designer Jackson Gariety noticed that most websites have background images.  And the time needed to load them can add up.  Meanwhile javascript is loading – even if it’s placed in the footer. The delay while the javascript loads ahead of the background image can cause the white flash.  You can read his question in this post, “How to prevent the white ‘flash’ on page load created by background image loading delay?”

So — how about we minify the javascript so it loads as fast as possible?

Javascript provides so many useful website enhancements, it’s tempting to use several scripts at a time. Web design instructor David Ramos recently discussed a demo website with a header full of javascript links, and told us: “Don’t do this”.  Meaning, don’t set up a website to make several calls to the server for javascript files.

Minify them, he said.  In other words, make them all one file.

So, I just tried this advice.

Minifying makes a big difference

There’s a wonderful plugin called Better WordPress Minify, by Khang Minh. It puts all your javascript calls AND css calls into one big file, each.

This step alone was enough to banish the white flash on my customer’s website.

Are you going to try this? Not so fast!  Like this post before you go!

 

New Facebook Timeline Begins TODAY: Get your cover photo inspiration

As of March 30 all Facebook users will have a new format for the personal profile page.

Facebook announced it is converting all pages to a new “timeline” format.  While March 30 was the original date announced for the changeover, Facebook as of this writing (March 29, 2012) shows the transition date to be March 31.

Say goodbye to your”wall” or a page-wide column of updates.

Instead, you’ll see a timeline with 2 equal width columns.

Facebook Pages, such as those for businesses, will also see the new timeline format.  Automatic

AND an exciting new design opportunity:  a generous “cover photo” area, 850px wide by 315px tall, where you can place just about any graphic design you wish.

I’ll admit — I am at the “looking for inspiration” stage.

Here’s a great post from Inspirationfeed to give you some lively and exciting ideas: 40 Creative Examples of Facebook Timeline Designs

Share your Facebook profile link in the comments so we all can have a look!  Really!

Facebook profle timeline As of March 30, 2012

 

Approve a Comment or Spam It? How to Moderate Your WordPress Blog

spamIf you publish a blog using WordPress, most likely you’re looking for comments on your posts.

One nice thing about using WordPress is automatic comment notification. When set up correctly, you get an email with an actionable alert when a new comment is submitted.

If your site is set up professionally, your blog likely holds your comments for moderation. This means you must review and approve them before they appear publicly. (There are other ways to handle comments, but that’s for another post.)

How to Tell When You Have a Comment to Review

Any time someone comments on a post for a blog you moderate, you get an email message like this:

[Your blog name in brackets] Please Moderate: “Your Post Title”

The body of the message identifies:

  • the name or nickname the author gives
  • The author’s email address
  • The url the author gives (if any)
  • a link to a Whois record so you can look up who has registered the IP address if you wish
  • The comment body

Finally, you get three options to process the comment:

  • approve
  • trash
  • mark the comment as spam

These options are live links in your email notification, and clicking them will take you to the moderation page you need to  carry out your task (once you log in).

Now, the question often comes up: How to tell if a comment is spam?

How To Tell If a Comment Is Spam

Spam comments are made by people mainly looking for backlinks, without adding to your discussion. A backlink is a URL a visitor places when leaving a comment, leading back to the to the visitor’s own site. Backlinks are valuable to the comment author, so you want to approve them for legitimate comments only.

You are right to suspect spam if any of these trip your radar:

  • The comment is a such a general complement, it could apply to any of your posts – or anyone else’s
  • The person, email address, organization, or the person’s industry are completely unfamiliar to you – seemingly out of left field
  • The organization listed for that IP address is on a blacklist
  • You visit the URL captured in the notification and it is a very low-quality site (tons of ads – badly written or compiled by a robot or article spinner)

Why Should You Spam A Comment?

It is important to flag as spam any comment you determine is spam. This teaches the  spam blocker program (Akismet, which should be installed and activated) what the latest spam contains — it must learn about all the time because spammers are so mobile and constantly adopting new tactics.

If you are not sure, just put the comment in the trash (click the trash option).

One things spam sites try to do is gain ‘quality’ or credit with search engines by linking to high-quality sites.

Unfortunately, links from trashy sites hurt your quality score with search engines like Google. This can lower your own rank in search results.  So, if you’ve heard that you should not respond to spam comments or harbor them in your blog, you heard good advice.

Celebrate Getting Comments You Approve

Got a comment that’s obviously from someone who’s read your article? Congratulations. This is a big plus from many angles.  Search engines favor sites that appear active. You take advantage of this if you  blog and allow comments. Congratulations for opening the door to interacting with your readers.

Genuine comments are a good sign you are providing information people value.

Any questions you get are a good way to plan future posts and products – because you can see the real need in your market.

Real comments are a treasure to get, and a pleasure to approve.  I’m wishing you many sincere comments on your blog.