Keeping up-to-date with website design and development

Did you know keeping up-to-date with design best practice can help with SEO and UX? While the history of web design is one of constant change, there are some fundamental conventions that are the cornerstone of good web design and development. From image optimisation and webpage speed, to navigation and formatting content, this guide provides basic steps to improving website development, boosting SEO and UX.

Optimising your images

If you’re ever wondering whether or not to add an image to your webpage, the answer is probably yes. Images can make an article more vivid, help visitors understand the content whilst also contributing to SEO, however there are a few steps you can take to ensure your image is fully optimised and user-friendly. Our first piece of advice is to use your own image, and if that’s not possible, refrain from over-used stock photos. Carefully chosen imagery can really help to define the character of your website so it’s worth investing a bit of time and it needn’t cost the earth. There are a number of websites offering royalty-free and paid for images, check out our blog post ‘Taking the pics’ for tips on sourcing images. However, always remember that an image will be most useful to your visitors if it’s directly related to the content, and so an image that is relevant to the surrounding text will rank better for the keyword it is optimised for.

Once you’ve found an image, the next step is to optimise it for the web. Search engines use file names, captions, alt and title tags to decipher the content of an image. For example, a photo of a researcher aliquoting reagents, should be named reagents-aliquoting.jpg, always ensuring the keyword is at the beginning of the file name so that it can be easily found by search engines.

The next step is to adjust the image size before uploading, taking into consideration the image dimensions (pixels) and file size (kb). If an image is, for example, 3000×2000 pixels, but showing at 300×200 pixels, it still has to load the entire image, which slows down the webpage speed, impacting both SEO and UX. It is also important to reduce the file size through adjusting the image quality, or through the use of websites (such as JPEGmini) that allow you to resize an image whilst maintaining 100% quality. On average, full-page images should be between 80kb-100kb while images that only take up part of a page should be between 20kb-30kb.

As technology advances, so does the way visitors access websites. With screen sizes varying across devices it’s important to make images responsive where possible so that they adjust accordingly, maintaining resolution and proportions. You can do this by adjusting the code for the image width to 100% and height to auto.

When uploading an image to your website you have the option of including a caption. While this can contribute to SEO, it is important to ensure the content is beneficial to both visitors and search engines. You also have the option to include alt and title text. These provide descriptive text when an image cannot be displayed and are great for search engines – again, just be sure to include keywords.

Interpreting content and code

Search engines are restricted in how they interpret content and rely on code, keywords and tags to do so. If you haven’t already, install Google Analytics onto your domain in order to gather specific data on how your website is performing. Google Analytics shows which keywords, search engines and traffic sources are delivering results, highlighting areas for improvement.

One basic rule to SEO is that the less code there is on a webpage, the quicker a search engine can read it. It’s always best to add scripts1 and CSS2 as external files, because excessive code can slow down webpage speed and increases the possibility of coding error.

Another tip is to ensure that each page is unique not just to your company, but also to every page on your website. Internet algorithms look for what sets a site apart and by reusing content across your website you run the risk of generating a warning for duplicate content. If referencing another page on your site, it is important to use only snippets of information, or rephrasing where possible.

If you don’t use Meta tags already – we recommend you do. Meta tags are used to describe a page’s content. While they don’t appear on the page itself, they do appear in the code and are visible to search engines. Meta tags give you the chance to offer visitors an overview of your webpage when it appears in search engine results. Search engines also use title tags to determine the content of a page and these appear in the title bar of the browser. Adding keywords to the title, as opposed to the company name, can help boost SEO but keep in mind that there is a 60-character limit.

Boosting webpage speed

Despite what many people think, Google’s page speed insight tools are meant for developers to identify things that are slowing down a site from a technical perspective (bad scripts, image sizes etc). While search engines do look at the time it takes for a page to load, it is more of an indicator than a ranking factor for SEO. Search engines take into consideration the core metrics of a site including bounce rate, time on the site and page views per visit, all of which impact SEO.

According to Google, the average time it takes for a mobile landing page to load is 15 seconds – quite a long time compared to the few seconds it takes for someone to decide if they want to wait for your page to load. There are sites that register how quickly your website processes information on different platforms (we use GTmetrix and Google Page Speed) which can be key to maintaining visitors. Why not check out Google’s page speed insights tool to see how you can improve the speed of your site?

Navigating through your site

When it comes to navigation, it’s important not to sacrifice UX for search engine friendliness. The best way to approach navigation is to put the user first, create a clear, simple layout, offering the content they want, quickly. The first area to address is the position of the menu, most commonly employed within the top of a webpage or on the sidebar, enabling the menu to load without the user having to scroll. Including a menu can also give search engines an indication of what the webmaster thinks is important on the site.

Our next tip for boosting SEO is to remove image-based navigation (where an image links to another page/element), or if that’s not possible, make sure to implement alt attributes. Alt attributes are alternative text to describe the content of an image if, for some reason it cannot be displayed. Search engines look for connections between links, and without alt text, there is no information for them to understand the content of the image.

Also try to implement hierarchical navigation if possible through the use of breadcrumbs and URL structure. Breadcrumb navigation allows visitors to easily back track to higher-level pages, and allows for more internal links. Internal links connect your content and give search engines an idea of the structure of your site, what content is related and the value of that content. If used correctly, they can boost SEO. Also, a URL structure that is hierarchical (e.g. www.yourwebsitename.com/category/brand/product-name) makes it easier for visitors to navigate through your site – just remember to include keywords in the URL.

Making it easy to read

When it comes to how your content appears online, it’s not just the typography that matters, but also the formatting. The most commonly used font size is at least 14 pixels as it can be read easily on mobile and desktop. When it comes to font colour, the sharper the letters, the easier they are to distinguish, making black font on white the best option.

Headings and subheadings are not only important anchor points for navigation, they also impact SEO. There is a hierarchical structure for headings that can be easily found by search engines. The <H1> code is used solely for the page title, and shouldn’t be used for any other heading. The remaining headings can then be used as and when to structure your page, just be sure they follow a pattern and are of use to your visitors as well as search engines.

Search engines are getting better and better at recognizing the elements of a website, so it is important to stay on top of the changes and continue optimizing your site accordingly. Look out for the final part of our ‘Staying on top’ guide where we go into more detail on website content, keywords, external links and social media platforms.

We understand that even the simplest steps will take some technical knowledge and time to implement which is why we are on hand to help. Why not get in touch today to see how we can help boost SEO and UX for your website?

Written by Lauren Heno – Digital Marketing Communications

1 – Scripts are code within a website that are instructions on how to generate a webpage or process

2 – CSS is a plain text file used for formatting content on a webpage, it can help define font size, colour, spacing etc.

Get in touch today to find out how we can help you

If you’re looking for people who really understand your needs and are easy to work with, talk to us.