A couple of weeks ago, I had the pleasure of speaking at Lorain County Community College in Elyria as part of their Wednesday morning networking sessions, so I thought that I’d share the contents of the presentation here with you today in text form.
#1 – An Attention Grabbing Headline
This is truly one of the most critical elements of your website’s homepage. How many times have you visited a website, and you’re just not too sure at a glance what the site is even about? Maybe it uses lots of technical jargon that you’re just not savvy enough to understand yet, or maybe they’ve decided to forgo a headline altogether and just use an image rotator. Whatever the case may be, the lack of an attention grabbing headline is truly a missed opportunity in helping to connect with and engage your visitors.
A good headline…
- Grabs your readers attention
- Informs your visitor why he or she should convert
- Gives your reader a basic understanding of what your site is all about
A good example: Spotify
Spotify’s deal is front and center on this homepage example, so at a very quick glance, the reader knows exactly what they’ll be getting if they sign up.
#2 – Primary Call to Action
After your headline, you’ll want to give visitors something that they can immediately take action on, in case they choose to do so. Imagine if the Spotify example above did not include a button right below their big offer. Would the visitor easily be able to take action and sign up? Probably not. They’d need to dig around and find a button or link that instructed them to sign up elsewhere. We want to make taking action as simple as possible for your prospective customer, so you never want to be without a primary call to action!
A good call to action…
- Is visible and contrasts the other elements surrounding it
- Has a clear and compelling message
- Is strategically placed around supporting content
A good example: Netflix
Netflix gives us a good example to look at with their clear, compelling call to action message, urging users to join free for a month. The bold red button contrasts the dark background nicely, and the supporting content lets the visitor know that they can cancel at any time.
#3 – Imagery that Conveys Your Message (and is true to your brand)
Imagery is something that tends to have an immediate affect on your website visitors. Whether it’s a good or bad one will depend on the type of images that you choose. Authentic imagery is always a biggie for the sites I’m working on—whenever possible and as your budget allows, I highly recommend hiring a pro to take some unique photos of your product, your office, you at work, or your staff.
Good website imagery…
- Is relevant to your message and brand
- Is high quality
- Is as authentic as possible
A good example: Pocket
Pocket uses a beautiful custom image prominently on their website’s homepage. Because the image was created just for their website, it fits around and supports the headline and call to actions very nicely.
#4 – Your Unique Offer
Think about the things that you want to know when you’re visiting a website for the first time, especially for a product or service that you’re not too familiar with. You’ll probably want to know things like “what’s in it for me?” and “why should I choose you?” This is your time to answer those questions and help ease any concerns that your website visitors might have.
A good offer…
- Paints a clear picture
- Sells more than just a service or product
- Shoots for the 10X factor
A good example: LastPass
LastPass’ homepage features a concise statement about just what their product does: it helps to manage your online life. It gives the offer of getting the product for free, but also nudges you to try their premium service for just $1 per month.
#5 – Testimonials That Help Tell Your Story
Visitors to your site really want to know that they can trust you before they consider making a purchase or reaching out for more information. This is where solid client testimonials can come into play, and help make a huge impact on your visitors’ decision making process.
Good testimonials…
- Are from real customers
- Offer up specifics about your product or service
- Help back up your claims
A good example: Dreamhost
Dreamhost shows off a small gallery of user testimonials right from their homepage. While this module doesn’t take up a ton of real estate, it’s still prominently placed and each slide features a testimonial sharing the reasons why the customer chose Dreamhost.
#6 – Easy, Intuitive Navigation
We’ve all been to a website before where it has seemed impossibly difficult to find what we’re looking for: there’s either a massive navigation system that doesn’t make a whole lot of sense, or there’s not enough of a navigation to get you where you want to go. That’s where an efficient, easy to use navigation system comes into play.
A good navigation…
- Has links to the site’s most important pages on every single page
- Should be clear and easy to read, with a consistent design from page to page
- Should typically be no more than three levels deep
A good example: Hubspot
Hubspot has a nice, consistent navigation on every page of their site, leading to their site’s most important content. They also employ a great, unique use of a submenu, with every tab being very clear and easy to read.
#7 – Fresh, Original Content
Imagine landing on a website where news articles from three years ago are featured on the homepage: you might scratch your head and wonder if the company is still in business. One of the best things you can do for your website’s visitors (and bonus, your SEO!) is to be constantly evolving your website with fresh information.
Fresh, original content could be…
- Posting a new blog or news article monthly
- Adding in new case studies or profiles as you work with new clients
- Updating content to add new services or revise old ones
A good example: Grain & Mortar
Grain & Mortar does a great job of adding fresh content in the way of both blog posts and new pieces of client work they’ve recently completed. This is great for getting users to keep coming back to their site, and it’s also an excellent way to organically boost SEO.
#8 – Social Media Integration
A great way to further—and a lot of times to more easily—connect with your audience is through social media, so any accounts you regularly use should definitely be linked out to from your website. You’ll probably find that you’re much more active on social media than you are on you website (through blog posts and updating content), so you’ll want your social media presence and website linked as seamlessly as possible.
Ways to integrate social media include:
- Adding social media icons to your website’s header or footer
- Adding social media sharing buttons to any sharable content on your website
- Adding social media feeds to your website
A good example: Three Sixty
Three Sixty does an excellent job of uniquely incorporating their instagram feed onto their website’s homepage. It fits in nicely with the rest of their site’s design, and also functions as a nice piece of constantly rotating content.
#9 – Should Function Equally Across All Platforms
If you haven’t heard of responsive design yet, let me fill you in! Responsive design ensures that your website is built to scale down to even the smallest of devices, without compromising the content or functionality. We’ve all been warned that the number of folks accessing our websites from their phones or other mobile devices has been rapidly increasing, so there’s a huge need to make sure that your website is functional no matter what device it’s being viewed on.
A responsive website will:
- Scale down well on any device
- Retain all primary functionality regardless of the device its being viewed on
- Not eliminate any content, just because it doesn’t fit within the smaller screen size
A good example: Smashing Magazine
Smashing Magazine has always been on the forefront of the latest technologies, and they were one of the first to the game of responsive web design quite a few years ago. Visit their live website and play around with resizing your browser to see how the site functions as the screen size increases or decreases. No functionality is lost in doing this – all of the content simply adapts to the size of the screen.
#10 – Design Consistency Across All Pages
The overall look and feel of your website should exist across all pages, whether it be a contact page, blog post, or service page. The same thing holds true for color schemes, fonts and font sizes, backgrounds etc. All pages don’t necessarily need to have the same layout, but having various templates for the different types of content ensure visual consistency.
Design consistency includes things like:
- Using similar layouts for similar types of content
- Using consistent typefaces and color scheme across all pages
A good example: Airbnb
Airbnb does a great job of maintaining design consistency across all of the various sections of their site. Whether you’re browsing properties on their front pages or perusing their support articles, they maintain the use of the same fonts, colors, and navigation.
And there you have it! Ten elements of an effective website. Ready to work on your site? Drop me a line, and let’s chat about how we can work together to improve your online presence!