Harp Interactive

Keep Calm & Design On: 10 Web Development Best Practices

Is your outdated website bouncing readers like a trampoline?

As a marketer, are you at a loss for what to ask when it comes to having your business’s website redesigned?

Web development and design is an ever-fluid target and often difficult to navigate—and a poorly developed site is difficult for users to navigate! Below you’ll find our top tips to keep in mind when considering your company’s website development or redesign.

Keep calm and read on to learn top website development best practices.

1) Responsive Website Design

People are accessing the Internet from a myriad of mobile devices (even more than from desktop computers or even laptops). Millennials are especially likely to almost exclusively use mobile devices to browse the internet. Responsive website design means your website will be automatically optimized for any device the viewer is using (including mobile) to navigate your website. Content, images, videos and links will all look and work their best in a responsive web design.

Ultimately, a responsive  website means you will retain visitors and cut down on bounces. All good things for any business.

2) Brand Messaging

Your brand needs to be identifiable and consistent. There are the obvious factors—color scheme, fonts, logo, etc., but good web design incorporates brand messaging into prominent locations of the site.

 

above-fold banner image

Can you identify the brand messaging best practices at play here?

For example, the ideal place for a tagline is below your logo in the top left corner. Your tagline should communicate what your brand means to the user. Place key messaging above the fold, usually in the banner image or slider.

3) Include Visuals

Visual marketing is the current king of content marketing, a must-have for any content marketing solution. According to HubSpot, when people hear information, they’re likely to remember only 10% of that information three days later. However, if a relevant image is paired with that same information, people retained 65% of the information three days later. And content paired with relevant images get a whopping 94% more views than content without relevant images.

visual marketing design

Visually organized content has a more interactive, easily navigable feel.

 

Whether photos, video, illustration or infographics, images set the tone for your site, and create compelling, memorable storytelling. Maintain a consistent image style throughout the site to strengthen your branded look. It is important as well that images are correctly sized and uploaded, but we’ll discuss that in a little bit.

Bonus tip: Include well-defined graphic standards in your branding style guide.

4) Cross-linking & Internal Links

Ever heard the phrase ‘all roads lead to Rome’? What is the ‘Rome’ of your website? Where on your website, is the end goal for your users? What is the purpose of your website?

For most business websites , the goal is to create conversions (email signup, call, form, registration or purchases). Decide your goal and reverse engineer your funnel from there—mapping out your website linking game with it.

Cross-linking is the practice of inbound and external linking between two separate sites whether or not they are owned by the same company. Examples of cross linking includes linking to your social media assets and linking to external website resources. Inbound links to your website, especially from highly authoritative, relevant websites are great for providing SEO juice.

Internal links, also known as interlinking is the practice of hyper-linking keywords to related content on your website. For example, linking a keyword or phrase from your blog post to another relevant blog post and/or to relevant landing pages on your website.

According to MOZ, these internal links are useful for three reasons:

  • They help users navigate around a website easily
  • Establishes an information structure or hierarchy for your website
  • Internal links help elevate and spread SEO link juice throughout your website

5) Unique Landing Pages

Rather than cramming all of your content into one long, confusing web page, create unique landing pages for the different services or products that your business offers. Landing pages are important for two main reasons:

  • Conversions: Landing pages function with one goal; getting your customers to convert, regardless of what that conversion entails.
  • SEO: Having a unique web page for each product/service allows you to add a unique title tag relevant to what that page is about…a critical element in search engine optimization. It also provides ample opportunity to use keywords and keyword synonyms throughout your content specific to that product/service page which will greatly improve the chances of that page being found in Google searches.

6) A Call-to-Action

Your website will be far more successful at converting visitors into leads if it contains a call-to-action. A call-to-action (CTA) can include calling, emailing, filling out a form, commenting, downloading and more.

In general, CTA’s should be:

  • Brief & action oriented (call, register, sign up, download)
  • Visually striking so they immediately stand out to your visitors
  • Repeated in top spots on your website or landing page

A popular CTA is an email signup form. There are 7 optimal placements on a website for adding an email CTA:

  • In the Feature box on the homepage
  • Top of sidebar
  • At the end of a blog post
  • In the footer of your website
  • On your About page
  • The top bar across your site
  • The pop-up lightbox

 

 

call to action, email sign up

This examples shows 3 CTAs: email sign up, call and social media join options

 

CTAs are also important for landing pages and internal pages. Forms are a great way to collect potential customer information, and forms specific to certain offers or products will give you additional information about what your visitors want.

 

Call to action, form

Even a simple form like this generates leads.

 

7) Quick Website Loading Speed

Google has told us that site speed is a ranking factor. But beyond Google and SEO, a fast site is a good user experience (UX) which is the main consideration in website development. You only have a precious few seconds to catch your visitors’ interest—don’t waste them on slow loading speeds. So how fast should your website load? As fast as possible with the general recommendation being to keep load time down to 2 seconds or less.

Speed up your website load time by:

  • Optimizing all images by saving them for the web which reduces the image to 70%
  • Host videos via Youtube or another video option and embed in your site (vs. hosting on your site)
  • Minimize HTTP requests by streamlining the number of elements on your page
  • Split your CSS into two parts to prioritize the above-the-fold content (top of the web page content) loads first
  • Eliminate background music (as annoying as it is outdated)
  • Use Google’s PageSpeed tools to identify ways to make your site faster and more mobile-friendly.

8) Social Media Sharing Tools

Most successful websites today have a social media and social sharing component. Make your content shareable by installing social media share buttons on your page (especially blog content and/or products).

Some social media sharing plugins, such as Monarch for WordPress, will also allow for a floating social media sidebar.

social media share plugin Monarch for WordPress

Monarch’s floating social media share sidebar. Image courtesy of monarch.com

 

9) Utility Navigation

It’s good UX design to help your website visitors find what they are looking for quickly. Three of the not-to-be missed UX design features include:

Search

The search feature is an important UX tool, especially for a website with a lot of content in multiple categories, such as a blog or an eCommerce site. Search bar design tips include:

  • Make the search bar a different color so it quickly stands out
  • Add text such as ‘enter keyword or item #’ inside the search bar to help customers instantly understand its function
  • Be sure to include the word ‘search’ or ‘find’ with the search bar.

Hamburger Menu

The hamburger menu is a must-have for mobile users who won’t be using top navigation and need that drop-down. It allows for more information to be display on a smaller screen.

 

hamburger menu

The hamburger menu, named for the three horizontal lines at the top.

 

Breadcrumb Navigation

Breadcrumb navigation helps show users the path they’ve taken to get somewhere, so that they can easily retrace their steps. It is very similar to the file paths on a Windows OS, and that familiarity is helpful for users.

10) Website Security

Website security isn’t just a concern for online merchants and HIPAA-bound businesses. While these types of businesses should take extra precautions (such as third-party payment systems, and hosting sensitive information on a HIPAA-compliant server), all websites should take the following  basic steps in website security:

  • Strong, regularly changed passwords-Enforce the creation of strong passwords and force all employees with access to update their passwords regularly. Certain web hosting platforms, such as WordPress, have plugins  like Brute Force Login protection, Wordfence and Clef to keep your passwords secure.
  • DDOS protection- A Distributed Denial Of Service (DDOS) attack is a purposeful overloading of a server with the intent of shutting down service to a website or websites. CDNs (client delivery networks, such as Cloudflare) help protect against such attacks by hosting your database through multiple proxy servers, making it harder for someone to target your server.
  • Keep up to date- Outdated code and plugins are a liability. Often, these are updated because vulnerabilities were discovered. Always update your code and plugins to avoid leaving such vulnerabilities exposed.
  • Clean code- Writing code isn’t so different from writing a blog–never use several lines when one will do. When it comes to writing code, more lines means increased chances of creating vulnerabilities.

Ask for Help

It’s always a good idea to ask for professional help. Considering the ever-growing complexities of Internet marketing, doing it yourself can be time-consuming, frustrating, overwhelming and impractical. Consider a digital agency like Harp, and save your time and resources for running your business.

Building a new website, or revamping your current one? Request a complimentary website audit today.