Category Archives: Site Design

The Golden Ratio–Is It Relevant?

The Golden Ratio

I remember first hearing about the golden ratio in high school geometry class, when I didn’t pay attention. So I had to learn it again. It turns out that there are certain proportions that are more attractive to the eye, perhaps because we see them in nature, perhaps because we see them in human creations. Knowing about these proportions can help us design an attractive Web site. The golden ratio is perhaps the most important of these rules of thumb.

This figure is used in Wikipedia’s definition of the golden ratio. In the figure, a and b are related in the golden ratio when the ratio of a to b is the same as the ratio of a + b to a.

This works out to a ratio of 1.618…. It’s an irrational number that has no exact decimal representation.

However, what all this means is that the shorter side is just under 2/3 as long as the longer side.

In Nature

There’s been a lot of research that the golden ratio occurs in many places in nature. Adolf Zeising found the golden ratio in the arrangement of leaves and branches along the stems of plants. He went on to discover the golden ratio in other areas such as the geometry of crystals. He went on to decide that the golden ratio was some sort of universal law that permeates all structures. We don’t have to accept Zeising’s law, though, to observe the golden ratio in nature.

In Design

The golden ratio is commonly used in the design of our buildings and everyday items. The shapes of postcards, playing cards, light switch plates and many other common objects have these proportions. Le Corbusier, the famous Swiss architect, centered his designs on harmony and proportion. For him, the golden ratio was a guiding principle. His Modulor system was based on the golden ratio. We also know that we see the golden ratio applied commonly in architecture that we see every day.

What This Means to Us

What does this mean for a Web site? It’s clear that rectangles with the short side about 2/3 as long as the long side are at least thought by many to be the most appealing form. The most evident way to apply this is for graphics on a site. For either vertical or horizontal layouts, make the shorter side about 2/3 as long as the longer site. This is a proportion that your readers will find comfortable, and they’ll be more comfortable with your message as a result.

It also applies to text on the Web. A good maximum vertical height for a paragraph is about 2/3 of the width of a line of text. If it’s longer than this, it’ll have a less pleasant appearance and it’ll be less likely to be read. In addition to providing a good appearance, this breaks your text into bite-sized pieces that are easier and more likely to be read.

The Bottom Line

Pay attention to the golden ratio for imagery, video display areas and text areas of your site.

Facebook

Twitter

Google

Say Yes to WordPress. Here’s Why.

WordPress is very popular, now hosting some 20% of all sites world-wide. And it’s free. But, by themselves, those aren’t strong enough reasons to choose WordPress for your site. In this post I review several key considerations that should be important in your choice of a hosting vehicle for your site.

WordPress now hosts more Web sites than any other platform on the Web, some 20% of all sites. Many benefits derive from the huge number of sites using it, which creates an attractive marketplace for people who design and build Web sites, for people who help you use Web sites to promote your business (like me!), for people who develop add-on software for WordPress, called plugins, and even for people who host Web sites. If you choose WordPress, you’ll always be able to find people to help with site design, maintenance or promotion, you’ll be able to buy great extensions for your site at low prices, and you’ll never be stuck when a company goes out of business.

There are six important reasons for you to consider WordPress:

It’s open source
There’s a large, valuable community of support
End users can edit their own content
It’s secure if managed properly
It’s scalable up to quite large
It’s future-proof

Open Source

For several years, I developed a number of sites with a great tool. It provided a lot of features, was easy to use, and was one of the most bug-free software products I’ve used. However, about a year ago, the company went away. When I moved to a new computer, my installation won’t work any more–I need a new install key. The company is gone, so there’s no way to get the key. I’m out of luck with all those sites and now have to redevelop them.

Because the code is open source, even if the company that leads the writing of WordPress goes away, the code is available to everyone, and there are lots of developers to help keep it going. And because it’s open source, you have none of the licensing issues that we all face and despise.

If you need a customization of WordPress, there’s may already be a plugin to meet your needs. And if not, it’s not hard to write a new one, and not expensive to hire someone to write one.

Another advantage of open source is that there’s a huge community of developers who are contributing free and inexpensive software to extend WordPress. Just think of what you want to do and search for a plugin–you’re likely to face a rich array of choices at little to no cost. Anyone who wants to make money from selling a WordPress plugin realizes that the plugin is competing with a price of zero for the platform itself.

Professional Ecosystem

In addition to developers, there is a huge community of people who use WordPress to build sites, and provide other services around WordPress. They compete with many other providers, so the competition drives down the price for site development.

Easy Editing

You don’t want to hire a Webmaster every time you want to add content to a site. You’d rather have your employees who write the content simply edit it on the Web site itself. WordPress provides a simple-to-use WYSIWYG editor that editors can use to write their content right on the site, and insert images and videos as well.

No advanced skills are needed to edit a page on WordPress; anyone who can edit a Word document can edit a page on a WordPress site.

Security

Unfortunately, the Internet is a rough neighborhood these days! We all have security concerns, all the time, with our Web sites. The WordPress core code has been remarkably secure since WordPress’s inception–however, the same large installed base that attracts service providers also attracts people with malevolent intent. So you need to protect yourself.

There have been and continue to be security weaknesses in plugins. It’s important to keep plugins updated to the current version, since fixes are often intended to close security holes. In addition, use strong passwords. It’s sound as well to use two-factor authentication for users.

But there’s good news here, too. The robust plugin market has produced a first-rate security package for WordPress, the security plugin WordFence. It’s so good that it’s included in Dave’s Super Hosting Service. I’ve seen a number of WordPress sites hacked, but have never seen a site protected by the premium version of WordPress.

Scalability

The New York Times, Microsoft and Facebook all run sites based on WordPress. If your site has hosting with appropriate capacity and scalability to the load you’ll experience, and you’re careful to test your complete site for performance, there’s no reason that the biggest companies can’t use WordPress. For small business, good design practices are all that you need to do to obtain the performance you need.

Future-Proof

WordPress has a commitment to backwards compatibility, so new releases of WordPress won’t ever break your site. You avoid the infuriating problem of a new release requiring, suddenly, tons of work.

Again, because of the huge number of WordPress sites, When Google announced that it was suddenly important for our sites to be mobile-friendly, WordPress was there–the standard WordPress themes are already mobile-friendly. When Google wanted sites to implement Advanced Mobile Pages, they developed an AMP plugin for WordPress, so you can have AMP on your site, with just the installation of a single, free plugin.

The large group of active developers as well as the backward compatibility commitment protect your investment in your site.

The Bottom Line

Use WordPress to build your site. Or when you rebuild your site. It’s the right choice for essentially everyone.

Facebook

Twitter

Google

The Box on Your Site That Costs You Money

The Coupon Box

If you have a coupon box on your site, it can be a great tool for promotions. Offer a special discount by getting out that coupon number to the people who can use the offer. But there’s also a cost of having that coupon box on the site–no, there aren’t any extra charges from your hosting company, the costs come from lost sales.

What Happens

When a customer is ready to buy and has put merchandize into the shopping cart, and then goes to the shopping cart to check out, what happens if they see a coupon box and don’t have a coupon? What message is sent? How do you feel when you get to the checkout page and don’t have a coupon?

The customer without a coupon can infer the message “You’re paying more than someone else who has a coupon!” That’s a nicer message than the other message that’s just underneath it: “Some other customer is more important to us than you because we gave that customer a discount that we’re not giving you.”

What To Do

What can you do? You’d like to be able to offer coupon discounts from time to time, or perhaps offer a coupon to some special customer all the time. Take a close look at the use of coupons. How many sales do you actually make with coupons? If that coupon box is on your site but you’re not giving coupons now, take it off. And put it back when you make an offer. Or, instead, when you offer a discount, offer it to everyone who comes to the site!

The Bottom Line

Don’t leave that coupon box on your checkout page unless you really need it.

Facebook

Twitter

Google

This Will Make You a WordPress Believer

WordPress: Its Time Has Come

I’ve written before that WordPress is the way to build your site, unless perhaps you are Amazon or IBM or Healthcare.gov and have a site that receives hundreds of thousands of visits. I’ve written about how the great variety of WordPress themes makes the development of a WordPress site much quicker and less expensive than development of a conventional html-css site.

Website Magazine Agrees

Website Magazine, where I find a number of good ideas, has just published a list of 33 WordPress Themes for Every Person. The article provides a list of 33 different WordPress themes, for every purpose from a dental office to a merchant to a crafter to a real estate specialist.

The Bottom Line

Consider WordPress as your site development platform the next time you have a lot of changes to make to your site. You’ll save a lot on site maintenance, and when you want to add new capabilities, instead of paying to program them and waiting for them to be built, often just selection of a plugin, often for free, will do the job and be up and running in minutes.

Facebook

Twitter

Google

Skeuomorphic or Flat Design?

Flat Design

The latest rage in Web site design is a style called “flat”, where the site does not have any three-dimensional effects (hence “flat”) and typically arranges information in flat panels. This is contrasted with what’s called skeuomorphic design, that uses design elements that look like something from the physical world. Examples of skeuomorphic elements would be the little trash can picture that we see for disposing of files, the paper envelope drawing that’s often used for email, or the old telephone drawing used to place a call. A great contrast between the two design styles is illustrated by the iPhone and Windows phone UIs, shown below.

Of course, even the Windows phone has a skeuomorphic element, since it uses a drawing of a paper envelope for email, and a drawing of a paper bag for the store. However, the contrast is clear; the iPhone icons each look like a three-dimensional button, and many of them contain images of items outside the computer to remind us of their functions.

I used the smartphones to demonstrate the difference in design styles because they do it so well, with one that’s full of skeuomorphism and another that’s almost purely flat. But these examples are not a good basis for discussing which is a more effective design, because what works on a smartphone screen might not be the best design for a Web site.

Web Sites

Here’s a flat Web site design for a leading law firm, that emphasizes their KSP (see last week’s Newsletter for more about the KSP). Someone who searches and comes upon this site has no doubt what the firm does. The short paragraph below drives the point home, that the firm has recovered a huge amount. If you’re looking for an expert on insurance recovery for your conference or news item, or if you’re looking for a law firm to represent you in an insurance recovery matter, you know that you’ve come to the right place.

Here’s a great example of a flat Web site design for a company that designs and builds applications. Here, too, the message is clear and compelling.

These are not complex designs, and they didn’t require extensive development of fancy artwork. Advocates of flat design claim that fancy design elements that aren’t directly related to the message get in the way of the message, that they take attention away from the message that the page wants to convey.

The Bottom Line

If you’re planning–or even just considering–a redesign, ask yourself whether a flat design would enable your site–and your home page in particular–to convey your message more effectively. Remember that a first-time visitor will give your home page just seconds before deciding whether to stay and look further or to move on.

Facebook

Twitter

Google

WordPress–Its Time Has Come

WordPress started life as a blog hosting platform. But it has evolved, and now it’s quite capable of hosting quite a complete Web site. In fact, if you’re a reasonably typical small business and don’t have more than 1,000 visitors per hour to your site, then WordPress is the tool you should be using to build your site.

All of my new clients have WordPress sites, and others are converting to WordPress. In fact, I’m converting my own site to WordPress to build my own expertise. I don’t have to be a Webmaster, because I’m not a designer, but I do need to work with the software. I’ve hired a WordPress wizard who helps with complex issues or with site conversions.

What about Joomla?

You may remember me as an advocate of Joomla, and I was. Joomla is an open source content management system that let you build a site with a reasonable amount of work that you could set up so that non-technical people could maintain the content. However, WordPress is much simpler to use than Joomla and today has more capability. This chart of market share from our friends at w3techs.com shows that WordPress has outstripped Joomla and other platforms in market share:

Why WordPress?

There are a lot of reasons to go with WordPress. Here are some of the important ones:

It’s open source and free. No more $300 tools for building Web sites.
It’s easy to use and maintain. It won’t cost as much for your Webmaster to build and maintain your site.
Once the site is set up, it’s easy for non-technical people to maintain the content. So you’ll have that current content that Google craves.
It stores all the information about the site in a database on the site, so when you change Webmasters you just change the password and give it to the new Webmaster. You can change Webmasters without redesigning your site.
There is an astounding amount of functionality available as free or very cheap plugins. Your site can have all sorts of great features without a need to program them.
When you’ve installed a plugin and don’t like what does for you, you can remove it just as easily as installing, with a single click.
It’s easy to make a WordPress site Google-friendly. There are even free plugins to help with the task.
Converting an HTML site to WordPress is less expensive than you would expect. Plugins have been built that help with transition, although they do leave a significant amount of work to be done manually.
Because WordPress is the leader in market share, and because anyone can play with it for free, there are a lot of Webmasters with WordPress experience.
If you need to change Webmasters, just change the password to log in to maintain the site, and a new Webmaster can take it from there. You don’t have to rebuild the site if you want to change Webmasters.

The Bottom Line

Instead of pouring money into your present Web site, convert to WordPress. You’ll be glad you did.

Facebook

Twitter

Google

The Five-Second Test

You’ve probably heard of the five-second test. You show someone an image of your home page for five seconds, and then you ask them what the site is about. This is based on a number of tests that tell us that visitors make a quick assessment of whether the site will provide the information that they seek, and they move on if that assessment is negative.

Today’s Thinking

There’s data today that indicates we may not have five seconds to get across that idea! It may be more like two seconds. So when you do the five-second test, try some tests using just two seconds and see if visitors get any idea what your site is about. And at the same time ask them if they liked the appearance of the site; if they like it they get a favorable first impression of you, and if they don’t like it you are starting out from behind.

The Bottom Line

Try the five-second test! And the two-second test! The results may convince you to consider a redesign of your site.

Facebook

Twitter

Google

Purpose of the Home Page

The Home Page

What should appear on the home page? The first question to ask is about its purpose. What do we want the home page to do? It has four functions:

Greeting New Visitors

When a visitor arrives for the first time, the home page has the important job of convincing that visitor in just a few seconds that the site has the information the visitor is seeking. The home page needs to make it very very clear, in large type, what the site is all about. The home page also needs to present very clear navigation so that the new visitor knows how to find information on the site.

Navigating for Repeat Visitors

Returning visitors are important! They have taken a step toward doing business with you by returning to the site. Perhaps your excellent newsletter brought them back–or they remembered your domain name–or they found you again by searching. But they’re back! So you need to make the navigation very clear with direct links to the major categories of information on the site. They want to know who you are, what you offer, why you are the best choice.

Rescuing “Lost” Visitors

Visitors can get lost in your navigation, and click on “Home” to get back to the starting point. Clear navigation on the home page will help them. But you don’t want this to ever happen–make sure they always see links to all the major categories of information on your site. It’s also a good idea to display “breadcrumbs” at the top of the screen, so that they can go back up the path of navigation that they’ve followed.

Provide Google the Big Picture

Some overall discussion of your organization, what it does and why it’s best on the home page is a good opportunity to use high-level terms about your business so that Google can index your site on those terms. Use those terms in your URL, your page title, the page meta description, H1 and H2 headings, as well as in the text on the page. And include them in the alt text of any images on the page, especially your trademark.

The Bottom Line

Paying attention to the multiple purposes of the home page, and designing for those purposes, is important for maximum effectiveness of the site.

Facebook

Twitter

Google

Pay Attention to Image Size

Image Size and Site Effectiveness

It’s know that site load time is a factor that Google considers when setting search engine results position. But beyond that, if your site is slow to load you’re not serving your visitors well, and they may depart before they’ve seen any of your careful, well thought out design. Site load matters, and it matters a lot. If you have a broadband connection, the first page of your site should load in three seconds.

What Causes Slow Site Load

It’s always possible that your site is hosted on a server that’s over-busy. That’s between you and your hosting provider. There are other possible causes that we won’t talk about here. But far and away the greatest cause of slow site loading is the size of the images you’re downloading. This is usually the cause of slow loads that I see.

Flogging the Webmaster

Don’t blame your Webmaster. Webmasters tend to come from one or the other place–from design, in which case you get beauty but you may not get speed, or programming, in which case you will get more speed than beauty. If you’re in the former group, you’re lucky because you have a good-looking site that now can be speeded up. Your friend who has the ugly, fast site is stuck. In my experience, Webmasters often may not pay attention to site load time. So caveat emptor!

Fixing the Problem

Site design tools commonly provide tools for reducing the size of images. To solve the problem without spending any money, there’s a free service that will reduce the size of your images while preserving the resolution, called Jpegmini. It’s easy to use, and completely free.

The Bottom Line

Check the load time of your site; and if the home page takes longer than two seconds to load, try resizing the images.

Facebook

Twitter

Google

Two-Step Opt-In

Two-Step Opt-In Works Better Than One-Step

Once upon a time there were two bulls grazing together, a young bull and an old bull. The young bull spied some good-looking cows some distance away in the pasture and said to the old bull, “Let’s run right over there and breed a couple of those cute cows.” The old bull looked back at him and said, “Instead, how about we amble over there and breed all of them?”

The point of the story is that with marketing, you can push hard to make a sale, and you’ll get some sales, but sometimes pushing less hard can make more sales. Clay reports that he’s done experiments that show that the use of a two-stage opt-in appears to be more effective than a one-stage opt-in.

One-Stage and Two-Stage

We’re all familiar with a one-stage opt-in: the visitor is presented with a box to enter an email address to sign up for current news, latest developments, free advice, or whatever. Typically a Web site will have a one-stage opt-in on every page. One click, slam bam, it’s done. Simplicity. Directness.

The two-stage opt-in, on the other hand, presents just a box to click to get the information. The visitor might be then provided an opportunity to enter an email address, in a box that provides a little more information about what’s to be provided than is shown in the typical one-stage opt-in, or the visitor might be presented with a survey. For example, a question might be posed such as “How often would you like us to send you information?” With responses such as, say, weekly or monthly. Then the box for the email address would follow.

The Bottom Line

Two-stage opt-in appears to work better than one-stage. Given the importance of building that email list of prospects, it’s worth a try.

For this observation and the humorous story illustrating it, I’m indebted to Clay Collins of The Marketing Show.

If you like this newsletter, please check out Web Marketing 101 , our guide to Web marketing.

Facebook

Twitter

Google

Your Webmaster

Where Do Webmasters Come From?

Your choice of a Webmaster is important. This Newsletter outlines some issues for you to consider. As the Web increases in importance as a promotional and communications method, your site will become ever more important to your business, and your choice of Webmaster, by affecting the effectiveness of your site, can have major impact on your success.

A large organization gives the Web site job to their advertising or public relations provider, who has a staff that brings together a lot of disciplines to develop the site. They spend a lot of money with a company that typically has high costs, but as you can see from a lot of very effective large sites, they can get effective sites as a result.

For a smaller organization that doesn’t have a single agency supplying them a wide variety of advertising and related services, when the Web site is to be constructed, someone to do it must be identified. If the company doesn’t have this discipline in-house, then an outsider must be found. What sort of qualifications should a Webmaster have?

Often Webmasters come from an artistic background. They can make something that is beautiful that has wonderful colors and form. But they often see the site as graphic design, rather than as a communications vehicle, so their designs can be lovely not help the communication or even get in the way of it. And the artists sometimes may not be as sensitive as we might like to the idea that the words on the site convey the most important part of its meaning.

Other Webmasters come from a programming background. They are even less interested in the communcation aspects of the site, and their designs don’t look as nice as the graphics people, either. They see the site as something that does complex operations, and they are likely to have doing complicated things–potentially very well. You need one of these people if your site is likely to be very complex, collecting and providing data in many ways, or you plan on extremely elaborate graphics.

Today we are starting to see Webmasters who have an educational background in Web design, who understand a Web site as a communication vehicle, and can design it that way from the beginning. That’s the ideal background for you to seek. The generalist who can do enough graphics and enough programming, but who really understands how information can be presented so that visitors can understand it and be persuaded to act. There are also small companies that can bring together several different people to give you this sort of blended expertise. But you’re better off with a single person who understands the site as a communication vehicle.

Content

If you’ve followed my advice and your site is being developed using Joomla, then you’ll be able to have it set up so that you can change content yourself, and you should. There’s no reason to pay a Webmaster, or wait for her to get around to your work, just to change a few sentences. The search engines will give you higher position if you change your content regularly; they want to dish up fresh content for their own customers. If you can change the site’s content yourself, you save the cost of a Webmaster’s time to do the work, but more important, you make it easy to change content–whoever in your organization knows the content simply makes the change. And it’s done.

You can do a Google search to find Webmasters in your area who specialize in Joomla. There are plenty of them, including small companies that do excellent work. Because of the nature of the product, firms that use Joomla tend to not try to milk their customers for all sorts of maintenance, since the customers can do it themselves and generally know it.

Visit your Webmaster, see examples of sites that she has developed, call the site owners and find out how satisfied they were with the relationship as the site was developed. And find out how much they paid.

Danger!

Nothing is forever, not even your Webmaster, so engage her with that in mind. Be sure that you’ve registered your domain name or names yourself, so that your Webmaster can’t hold your domain hostage if there’s a dispute. If Joomla is used to develop the site, then all of the development information is on the site. Another Webmaster can take over without redeveloping or even rehosting the site.

As a precaution against a lot of problems that can occur with Web hosting and all the rest of the players, have someone in your own organization make a backup of the entire site on your own computers at least once a month. It’s a simple FTP job that’s not hard to do once it’s been done the first time, and that extra backup will protect you against all sorts of problems that can arise.

The Bottom Line

Choose a Webmaster who is a generalist who does graphics as well as programming, but most important, who writes well and understands that Web sites are for communication. And look for a Webmaster who prefers to use Joomla.

Facebook

Twitter

Google

The First Few Seconds

Test Your Site for Those First Few Seconds

We all know that when a new visitor arrives at our site, we have a few seconds to convince that visitor that our site is worth delving into. If the site doesn’t pass that first scrutiny, then the visitor goes on to another site. Here’s an approach for you to evaluate your site for that first sizing-up by a visitor. Just give your site a quick look and answer these questions:

1. What do you see first?

When you first look at your site, what’s the first thing you notice? Is it really important? This first look may be the only look if you don’t start getting your message across.

2. Can you tell the topic of the site?

In this quick look, can you immediately tell what’s the topic of the site? Your visitor is looking for specific information. Make sure she can tell what information you’re offering on the site.

3. Can visitors understand the benefits?

Make sure that it’s easy for visitors to understand the benefits of what you offer. Lower cost? Better function? And make it apparent during that first inspection of the home page.

4. Is the most important information above the fold?

Can the visitor find important information without scrolling down? If not, that downward scroll may never occur.

5. Do you present a clear call to action?

What do you want the visitor to do? Make an appointment? Subscribe to you newsletter? Check for availability? Make sure that’s very apparent in the visitor’s first look at the site.

6. Are the fonts and colors distracting?

Do your colors and animation and fonts make the home page easy to read or do they cause distractions? Do you have a dark color background and lighter letters, which makes your site harder to read? Don’t let the design get in the way of the message.

7. Do you feel a personal connection?

Remember that you’re trying to inform and persuade at a distance, so it’s essential to create trust. Use a friendly, conversational style to connect to visitors. Be straightforward and be honest.

8. Does your home page have links to social media?

Before making that final decision, visitors may want to do more research. So have a presence on FaceBook and YouTube and have favorable reviews on Yelp and photos in Flickr. And link to them from your home page.

The Bottom Line

Each visitor who arrives at your site is precious. You may have paid for them through paid advertising, or you may have worked on your site for months to attract free search traffic. Or you may have worked hard to get referring sites. Now that the visitor has arrived, make sure that your site is hospitable on that first glance so that you don’t send them to the competition.

Facebook

Twitter

Google

Don’t Forget Your Favicon!

Favicon.ico

You will notice that when you visit some sites, you’ll see a site logo displayed next to the URL in the browser’s location bar. You can drag this logo into the bar just below the location bar and it becomes part of the bookmark. If you right click on it, you can remove the page title that’s displayed with it, and use just the icon as a bookmark to get back to the site quickly.

Clearly, this is a good thing, because it enables visitors to like the site to bookmark it and easily come back to it! This issue of the Newsletter tells you how to add this feature to your site. Of course, you can simply ask your Webmaster to do it. But if you do any work on your site yourself, it’s easy to do.

Building and Storing Your Icon

Icons are 16 by 16 pixels. Because they are so small and simple, it’s easy to design one. Do a Google search on “free icon editor” and download an editor. Then use it to design your icon. Then store it in the same directory as your home page on your Web server, and you’re done.

If you don’t do your own site work, don’t worry, this won’t be hard for your Webmaster to do. And you should have it done because it will help visitors come back to your site.

The Bottom Line

If your site doesn’t have a favicon icon, then consider it. Anything that helps visitors remember your site provides an important boost to the effectiveness of your site.

Facebook

Twitter

Google