I was asked by a coworker to come and speak to a class she teaches at a local university about what makes a good website. Like most students, I waited until the night before, and typed this up – my quick talking points for what I see as the building blocks for a successful website.
1. Content Management System
Primary functions of a Web Content Management System (CMS) are to:
- Separate the content from the design. Using templates allows faster global changes to the look & feel of a website.
- Allow non-technical users to update their website without learning HTML and CSS coding.
- Allow advanced functionality without additional programming. “Plug-ins” are pre-built applications that can be installed on a website and allow things like a calendar or form to be added without manual programming.
Best Web Content Management Systems
2. Information Architecture
A properly designed page hierarchy makes the site easier to navigate. Poorly structured sites will cause users to give up when looking for something. Visually, imagine a tree structure, with the home page at the top, landing pages below, and further levels of content below each primary landing page.
A big change to industry standards over the past decade has been using fewer pages with more content on them. For example, if you have a company website with an about page, a company history page, a page for your mission vision, and values, combine them into a single page. Search engines value content-rich pages over pages that have very little content on them.
3. Visual Design
Poor visual design is easy to spot. Good visual designs should be things that you don’t even notice. Large, clear typography. Proper line spacing. Good contrast. Plenty of white space and padding between block elements all play into a solid design.
If you’re using wordpress, Themeforest is a great place to purchase premium, pre-built themes, or just get inspiration.
Get the HeyDesigner Newsletter Sent Straight to Your Inbox for Daily Inspiration.
4. Interface Design
Parts can be subjective, but there are plenty of best practices that everyone can agree upon. Logo at the top left corner, Navigation menus typically horizontally across the top. Content in the middle with sidebars either on the left or right. Usually the content column is 2/3 the width of the page, and the sidebars are 1/3
- Think first and foremost about how it’s going to look and render on mobile. Especially large images that might look great on desktop, but eat up a lot of space on a mobile device.
- Consider hiding non-essential content and images on small screens to improve the user experience.
- Layout content in columns to prevent text from becoming full screen width on desktops, making it harder to read.
- Be consistent with button color and use them sparingly so they’re easy to spot.
- Come up with simple rules about Heading Tags. I typically only utilize H2 and H4 tags for Headings and Sub-headings, so I don’t have to come up with rules for how to use H3, H5 and H6 tags.
10 Rock Solid Website Layout Designs
5. Responsive Design
Years ago, the first approach to making websites work well on mobile devices was to create a separate website, usually a subdomain like mobile.greenvillewebworks.com that was specifically dumbed-down and formatted for smartphones.
Today, smartphones are 10x as powerful as the desktops of 10 years ago, so there’s really no need to do this. The advent of Responsive CSS has changed the way websites are created forever.
Responsive design means you basically build your website using blocks, setup in rows and columns, and when viewed on a smaller device, those columns collapse underneath each other (typically, but there are ways to re-flow them a number of ways) which allows the entire site to become very narrow to fit a tablet or smartphone screen.
While responsive design at first seemed kind of optional, today it is the defacto industry standard, and designers often use a mobile-first approach to ensure their websites look better on mobile devices than desktops, as sites as more and more frequently accessed on smartphones.
Use BrowserStack to test your site in a wide array of devices, browsers, and operating systems.
6. On-Site Search
Depending on the size, and target use of your site. You may, or may not have a search box on your site to allow visitors to search for content on your site. It’s extremely common nowadays for people to google what they’re looking for, and land somewhere on the interior of your site.
If you’re doing e-commerce, a quality on-site search function is essential. If you have a small site with less than a dozen pages, just hide the search function – it’s not doing anyone any good.
But, it’s a good backup plan if our navigation proves to be less than useful. Often seen as a last resort if a user can’t find what they’re looking for. The built-in site search capabilities of most CMS platforms is typically poor, so opt for a plugin that enhances on-site search, or use google’s custom search engine, which basically makes a mini google search engine just for your site.
7. Google Analytics
A Powerful (and free) tracking and reporting software. Great for testing the effectiveness of a campaign. Stores a multitude of data points focused into three areas – data about your visitors, where they came from, and what they looked at.
You can setup funnels and goals to see how visitors interact with your site, and at which point in your site they start to drop off. Especially important on e-commerce websites for tracking how may customers visit the site, add a product to the cart, get to the checkout, and ultimately result in a sale. It takes a little while once setup to gather sufficient data, but it’s worth it.
8. Google Webmaster Tools
A suite of tools that help improve your site. See what google sees when it crawls. See who is linking to you. Submit a sitemap etc. Some features are already found in Analytics.
9. Search Engine Optimization
Techniques used to improve ranking. White hat and Black Hat. Many of the popular CMS platforms have SEO modules or plugins that can be added, such as Yoast SEO. At a company that participates in e-commerce, there may be one or more people dedicated to SEO. In other cases, it may be a duty assigned to a web designer.
10. Social Media Presence
The most important part of having Social Media Presence is staying active. You also must decide how you want to interact with your followers and have plans to deal with negative interactions – turn them into a positive. Hootsuite is a great tool for managing posts across several networks.
11. Social Sharing
Facebook and Twitter both provide a range of tools designed to make sharing easier from your website. AddThis and ShareThis make the process even easier.
12. The User Experience
Doing as many of the above things correct as possible is the start of creating a positive user experience. These things must be constantly checked and rechecked, and changed as needed. Providing a ‚”Feedback‚” form or survey is a great way to gather real data on how well your site is working.
9 Web Apps for Gathering User Feedback
Other Useful Tools
Google Alerts
Sign up to get notifications when a new page or article is indexed by google matching your keywords.
W3C Validator Service
Free service checks the validity of the html code on your site, which can affect SEO and even the way the page looks or works in some browsers.
