So, you’re looking to optimize your web design. Since we live in a world where anyone can publish information online for a few dollars, it is more important than ever to establish legitimacy and originality. What really sets you apart from the others? Your website is the defining moment when it comes to potential customers searching for information. Though we have been taught differently growing up, web design is very much “judging a book by its cover”. Nothing shoots down your professionalism or legitimacy more than a crappy website design that has poor functionality and looks like the days of Ask Jeeves.
To make this simple, we are going to break it down into a few categories: structure, design, and functionality.
What is a proper web design structure?
Since we have the capability to build and optimize a website on platforms like Squarespace or WordPress, a lot of the heavy lifting can be done by seeking out a template best suited for your end goal, but we always recommend tailoring your website to you to avoid being one of the many who use a template. Again, it is about uniqueness. All websites have the same basic structure when it comes to code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><title></title></head><body></body></html>
Components of basic website structure
All of the components that make up basic website design structure are important for search engines to find you. The use or proper titles, tags, and descriptions will help search engines like Google find you and improve rank for users searching for your key information.
Title, URLs, and the h1
Each page has a unique page title that lives on your website. This page title is known as the h1 or heading 1. An h1 tells search engines what the main purpose is of the page. You will also see this as the main headline on the search results page. Traditionally, URLs will follow the title of the page, for example, an Indianapolis Digital Marketing page would be .com/indianapolis-digital-marketing.
Page title best practices:
- Keep page titles to 60 characters or less to avoid truncation
- Make each page title unique and specific to the information on the page
- Make sure all URLs are unique and separated by hyphens or underscores
- If you change the title, make sure the URL is changed as well and redirect as necessary
- Include the keyword you want to rank for in your page title
Optimize a websites meta descriptions
Meta descriptions are the first look at your website. Each page provides the opportunity to provide a short description of the page so users can see this under the page title in search results pages. Though this does not directly impact your page rank, it is an opportunity to sell yourself to the potential user seeking information.
Meta Descriptions best practices:
- Keep your meta descriptions at a maximum of 156 characters, but no less that 120
- Make sure you include the topic or keyword you are intending to rank for in the descriptions
- Do not use the same meta description for multiple pages, uniqueness is key
- Write your meta description as if it were ad copy
Body, H2, h3, and everything in between
When a search engine crawls a website, it scans the information on the page to see if it best fits the user’s search. If the page is properly structure and the on-page content is thorough and chock-full of keyword-rich text, the higher the potential for ranking on search results pages. This is where proper content strategy comes into play.
A proper page will have in-depth content regarding a topics, service, or product broken down into a structure that is easy for the user and search engines to understand. For example, you may have noticed the various font sizes and weights above certain paragraphs. These are what we call sub-headings. Each one serves a purpose to relay the importance in indexing information.
Heading 1, or h1 is the main page title and is the more important heading on the page. Heading 2, or h2 begins to break the content into sub-sections. This allows the user to jump to sections that locate key information faster and more efficiently without having to sift through loads of plain text.
Heading and content best practices:
- Make sure you plan what each page is about
- Research high ranking keywords to implement into the content
- Break the content into sections
- Include keywords in various sub-headings
Now that we’ve covered the basic structure of the web design and how to optimize structural aspects, let’s move on to design.
Website designs are important as design must find a way to relay the information in a user-friendly way while looking good doing it. As we said earlier, nothing kills your credibility faster than a poorly designed website. So what does this entail?
Color schemes, fonts, and branding
Your website should be a direct representation of your company’s brand and every brand should have a guideline. A brand guideline tells you and others how to represent your brand, like what fonts to use, how to use a logo on certain colors or for certain mediums, and what not to do in order to maintain control over your brand. Smart companies like Coca-Cola have maintained their brand and exist as one of the most iconic brands of all time. If you do not have a brand guideline, work to develop a document that you can share with your marketing team or companies you may partner with. Consistency is key.
Brand Guideline Checklist
- Various logo files and formats for all mediums
- Font selections for titles, headings, and body
- Color schemes that complement your brand/logo
Optimizing on-site imagery
Nothing dulls the senses like a site that is straight from the late 90s, not that these times were bad, we’ve just got better resolution. As screens become bright and filled to the brim with more pixels, the need for high-resolution images will grow. Determining the style and proper landscape of your on-site and off-site photos will help you maintain a consistent aesthetic across all channels and help users match an image with your brand. If you cannot afford to hire a good photographer with professional gear to shoot photos, remember you likely have a middle of the road compact camera living on your phone.
Worst case scenario, you shoot 4k video with your iPhone and pull still images from the video file. Knowing this, there is no excuse anymore to have poor quality images on your website.
Remember, a personal touch with original images will go a lot farther than splashing your page with stock images. Be original, always.
Optimize website content in design
Your design should complement the content and present it in a way that flows naturally to the end-user. We all read from left to right, with the exception of a few, and your website should do just that. Place key information at the top and follow with supporting content. Remember, subheadings exist for a reason, use them properly and the website design process will be much easier.
It is important to note that users should be able to contact you easily. Provide links to a contact form or page that indexes all of your methods of contact. This should include phone numbers, emails, social icons, and business address. If all of the above do not apply, tailor it to your specific needs.
Optimizing primary navigation
When a user reaches your website, they expect a seamless experience otherwise they bounce out (this is known as a bounce rate and is affected when a user leaves or stays on your site). The more reliable the information and the ease of navigation, the more likely the user is to remain on your site. If you find that you have too many pages that will extend a simple menu and make it a complex drop-down, find a creative way to use inter-page links and avoid adding more items in the menu. Primary navigation is simply that, primary. Let other pages work for you and get users where they need to go. How do you think you ended up here?
You could also create menus that are unique to your audience. This would allow users to hover over the main menu item that pertains to them and see the pages that relate to the main category. If you are finding it hard to minimize a number of pages in the main navigation, always remember there is a secondary, or footer navigation available for you to expand on.
Optimized site navigation best practices:
- Avoid complex drop-down menus with many page links
- Pick the top pages (home, about, services, contact, blog, and shop)
- Create on-page menus or category blocks that link to proper pages
- Use sticky menus that remain at the top as users scroll or employ a scroll-up menu
- Make use of all menus from primary to footer
Great, now that we have the structure and design down, let’s dive into the functionality of the site. The overall function of the site is just as important as the categories that proceed it on this page. Without the function, the user cannot move about the site. A proper quality control process is important to ensure that there are no dead links or missing redirects on the site.
Say you edit a page and change the title and make a switch to the URL or delete the page and it is still index in search engines, what happens? A user can still navigate to the site page and find that it does not exist or has been moved. This can’t be more frustrating as you are expecting to find the information keyed in from your search. Make sure you are set up for these situations by always pointing to the new page or a page relating to the topic and submit a new sitemap when things change.
Double check your links and callouts
Part of quality control is ensuring all links function properly. When we were provided the ability to click to call straight from the website on a mobile phone, it was great. The same went for email. Making sure each click has a purpose will keep your user happily navigating through the site to obtain the information they require.
Optimizing a website’s site speed
As internet speeds get faster, so does the request for information. Making sure your code is lean and not bogged down for unnecessary lines of code will help your site load time and offer the user the ability to access your information faster.
Optimizing on-site Images
When you upload large files directly to your media library and display them on the site, it takes longer to load than small files. We prefer to host images from a separate server in order to offer our clients faster load times. There are various WordPress plugins that help you achieve optimized images for your website, but make sure you select one that is maintained and updated regularly.
Caching your website
Ever wonder why you can access sites so rapidly all the time? Most websites cache images and information rather than burdening the server every time you want to access a site you visit on a regular basis. However, caching becomes stale and needs to be updated. Imagine your company changed your logo or content on your site, the cached files are no longer applicable to the new site design and will not be represented when users visit the site. Our platform cycles every hour to ensure old information is moved out and new information is ready for viewing. This is not always the case for everyone, but we host many sites and not just a single site.
When you have user-friendly site building tools like WordPress it gets increasingly easier to inflate your code with unnecessary lines. Each line of code expands the size of the site files which bog down the servers from returning a faster site. Make sure you remove unnecessary characters from the code to minimize file sizes. This will not affect the operation of the code, but boost speed.
Once you’ve combed through the site and made sure each link does what you want it to do, it is time to put the hard work to the test and format a marketing plan.