What makes a “good” website?

What makes a “good” website?

It’s a question, even in my years of experience in the corporate world, isn’t asked or answered enough. Far too often sites are designed and implemented purely on visual appeal rather than on the ‘goals of the business.’ The decision makers who commission the website tend to focus on the bells and whistles of the design, rather than if the site will serve their business needs or goals.

Typically, if the site looks pretty – it must be a great site – right? Isn’t a website just a piece of art that captures the eye?

In this post, I hope to show that web design beauty is only skin deep, and one must look beyond the graphics, animations, and beautiful technology to determine if the site is “consumer worthy,” and not just a piece of eye candy.

Often times the pretty websites are the dangerous ones! Far too often “pretty” sites are created in proprietary tools, such as Adobe Flash and Microsoft Silverlight, which come with inherent limitations when it comes to search engine optimization, accessibility, and mobile device friendliness.  The notion that a ‘pretty site’ is a good site ends up hurting a lot of businesses.

A comparison of two sites

To help demonstrate our point, we decided to compare two sites in a series of tests, starting with page speed, search engine optimization (SEO), and finally mobile friendliness (i.e. will the site work on a smartphone or tablet).

Pretty site: PiaggioMP3.com

Very pretty, but is it effective?

Our ‘pretty’ site in this experiment is PiagioMP3, a company that sells three wheeled scooters and motorcycles and is based in the UK.

The website, Piaggiomp3.com, was chosen because it was listed in many web-design reviews tops list for its visual design and beauty. The site is Adobe Flash-based and contains lots of movement, nice graphics, and a whole bunch of things for the user to click on and get “entertained” while also learning about the product. What’s not to love?

Ugly Site: UseIt.com

Pretty ugly – but does that matter?

UseIt.com is the website of Jakob Nielsen and associates that focuses on, of all things, usability.  Jakob Nielsen is considered the world’s expert on web and software usability, but it’s possible, like a lot of people ‘in the industry,’ he is working on the designs of his client’s sites rather than spending time on his own.

To say the site is not visually appealing is an understatement. The site is very basic with two columns, lots of links and text.  There is no images to speak of, and even the column colors are an ugly yellow and blue.  The structure of the site is very basic HTML and CSS. Ugly personified.

Comparing the sites on looks, PiaggioMP3 has it all over UseIt.com, but which site does best at attracting customers?

Page Speed:

When looking for information about something or to purchase a product, most consumers are interested in the information rather than the entertainment factor. They want to find out what they are buying, what the features are, and what the cost is. What they don’t want is a bunch of distractions that prevent then from finding the information they need, or a site that takes a relatively long time to move from page to page.

According to the article Every Second Counts: How Website Performance Impacts Shopper Behavior:

Slow Rendering Websites Lead To Lost Online Sales

• 79% of dissatisfied shoppers are less likely to buy from an online site again
• This is up 17% from those consumers surveyed in 2006
• 75% would be less likely to return to the website again
• In 2006, only 64% stated they would not return

Buyers want sites that are quick to load so that they can quickly buy or find information on what they need and move on to their next activity.  The speed of the page is in fact so important to consumers that Google and Bing are both using page speed as a factor in determining how sites rank in their search engines.

When we compare page speed between UseIt.com and PiaggioMP3.com, we saw that UseIt.com has a considerable edge over PaiggioMP3.  According to Google’s own Page Speed Tool, Useit.com scored a respectable 84 out of 100 ranking, where PiaggioMP3 scored a 74 ranking.

However, when we dive deeper, UseIt.com widens its advantage in this area due to its simplicity. Each link on UseIt.com moves quickly to the next web page, where as PiaggioMP3 takes a few seconds to jump from page to page as it plays a small animation with each click.

While this couple second delay does not seem like a lot, over the course of going though the entire website, this delay could cause users to get frustrated with the site and perhaps abandon it. Especially if the user is a repeat visitor and has already seen the animations.

So when it comes to page speed, UseIt.com has the advantage.

Search Engine Optimization (SEO):

Visibility is one of the most important criteria for a website. If people can’t find the site, what good is it?  While Google, Bing and other search engines keep changing their algorithm that determines where sites end up, there are some general rules and best practices that have been around for a while.

For starters, the more relevant text you have on a page, the better, as search engines love keyword rich text on a page.  Obviously, UseIt has a lot more text and links on its page than PiaggioMP3 does, but that’s not the only thing that might hurt PiaggioMP3.

It has long been known in the SEO world that having a lot of images and Flash content on your site can negatively affect a sites SEO rank.  Although Flash is indexable by search engines, it all depends on how the movie has been coded and put together. If the Flash movie utilizes HTML-friendly text and META tags properly, there is no reason why a Flash based site can’t rank high in the search engines.

Unfortunately most Flash movies are image heavy and text light, and many Flash developers don’t understand what they need to do in order to make a Flash movie SEO friendly. There are many wonderful Flash sites out there, that companies spend a ton of money on, that are never seen, simply because they are pushed way down in the search engines due to their lack of optimized text.

So how did these two sites fair with the Search Engine Optimization?  According to HubSpot’s Website Grader - UseIT.com scored a 91 out of 100 for marketing effectiveness and SEO grading, and Alexa scored it in the top 0.03% for web traffic and the site scored a 5.4/10 Moz rank for SEO Efficiency.  Very impressive numbers.

PiaggioMP3 scored a 53 out of 100 for marketing effectiveness and SEO grading according to Hubspot.  Alexa scored it in the top 3.52% for web traffic, and it received a Moz rank of 4.8 for SEO Efficiency. Other than the grade of 53 from Hubspot, the site ranks well but in comparison to UseIt.com, it still falls short.

Mobile Friendlyness

Being mobile friendly is fast becoming an important criteria for websites. By 2015 the mobile web will be bigger than desktop internet use and if the typical mobile user can’t view your site, you’re in trouble. So the last comparison test is in mobile friendliness, using an iPhone 3GS as our test environment.

UseIt.com formatted itself perfectly to the small screen of the iPhone. It looked exactly the same as it does on a desktop browser, although smaller. I wish I could say the same thing about PiaggioMP3′s website – but unfortunately when you try to view it on an iPhone, you get an error message due to the fact that the iPhone does not run Flash, which is what PiaggioMP3′s website runs on. To solve this issue, PiaggioMP3 website should, at the very least, detect the user’s device (iPhone) and then offer up an alternative page or content specifically on the iPhone.  While the site might not give you the same functionality as the desktop version, its better than an error message.

Conclusions:

As we’ve demonstrated, looks are not the most important thing when it comes to a website design. All factors, including how a site handles mobile devices, social media, and search engine optimization, should be discussed in detail and be understood by all stakeholders when developing or redesigning a new website. Visual appeal should not be the most important thing when designing a website, and in fact, one should not put too much emphasis on any one particular aspect of a web design. In the end, all the pieces should fit and work together.

Is UseIt.com the model that you should follow? Not necessarily. The site has a ton of good information, ranks high in search engines and works well on any device but lets face it, its just plain ugly and boring.

Good sites today are able to produce great visual design without sacrificing SEO or mobile friendliness. Take for example Aviary.com. Their site received a 99 out of 100 grade on Hubspot’s Grader tool and is one of the most user friendly and visually appealing sites out there.  The site offers a ton of interactive tools, and is 100% mobile friendly, using HTML5 and JQuery (also mobile friendly) to create the effects.

Do you have thoughts or opinions about this article?   Please comment below – I would love to hear from you!

About Ryan

Ryan has been developing and designing websites for over ten years, and has worked as a senior developer, web marketing consultant, and technical lead for a number of corporations and institutions before starting Massachusetts Web Designs.Earning a bachelors degree in Computer Science from Assumption College and a master’s degree in Visual Media Arts and New Media from Emerson College, Ryan brings with him a unique background in software engineering and visual media arts that sets him apart from most web designers and developers.