Webdesign Sins Graphic

6 Deadly Sins for Relaunching a Website

Planning a website relaunch or (re)design in 2017? To make sure you get the most out of your site in terms of SEO, there are few rules you should follow.

Stock Themes and Templates

Many websites today are made using pre-built themes or templates. The advantage of this is that each website doesn’t need to be programmed from the ground up, but can be assembled using a set of existing elements.

However, stock themes and templates have their disadvantages, too: Users can quickly recognize similarities between websites that use the same templates. Even if the colors, fonts and content are different on each site, the average person can still easily recognize repeating patterns.

Enfold Theme Screenshot
The Enfold Theme was bought already more than 100.000 times – So maaaany websites look similar (Screenshot: kriesi.at)

This is what happens if you use the parallax effect without thinking about how Google should crawl this. Compare this scene from the Google Search Console with the real page of OSRAM

This means that websites that used pre-made themes lack individual character. Users are hard pressed to find a reason to stick around and are quicker to switch to a direct competitor’s website, who, in some cases, even uses the same theme. This is compounded by the fact that lots of templates contain errors and can slow down your website with the plethora of features they offer. Dealing with these issues often leaves you without enough time to individualize your chosen theme.

If you’re planning to use a pre-made template or theme, you should set enough time aside for bug fixing, performance optimization and, most of all, for customization. However, if you already know how to develop themes yourself — or know someone else who does —, you’re better off creating something of your own, since this often takes less time than optimizing a pre-made theme.

Fonts

Lots of pre-made themes offer a ton of fonts, typically embedded via Google Fonts. The problem with this, however, is that externally embedded fonts take more time to load.

With the average Internet user’s attention span totaling eight seconds, we can hardly afford to have our loading times slowed down by special fonts.

You can keep your load times reasonable by hosting fonts locally on your server and keeping the number of fonts you use to a minimum. The “king of performance,” Amazon, is a good example: By completely doing without special fonts — all hail Arial! —, the Amazon site is able to load in under 0.5 seconds. But since this approach tends to not be as useful for websites with aesthetic requirements, I recommend following this rule of thumb: Never use more than two fonts, or work with .svg vectors — we’ll cover this in more depth later.

Sliders and Animations

Another problem with pre-made themes, or hasty designs, are sliders and animations. Sure, they look good at first and are tempting to add to your website, but they also come with a risk:

Sliders and animations can slow your website down massively and can even prevent search engines from crawling certain content.

This is because practically every slider contains hidden content that is supposed to appear at a specific moment (either automatically or following a click). This content is loaded when the website is opened, even though it isn’t visible. This means big performance losses for your website, especially if you’re using sliders that contain large background images.


Screencast of Google Search Console: The search engine can’t see what’s hidden under OSRAM’s parallax — so we’re redesigning entire parts of their website. Most people wouldn’t notice this just by looking at the lighting manufacturers’ website.

Displaying sliders correctly on mobile devices is also often problematic: They often require the same aspect ratio as desktops, which — given the different (height) format they use — means they can appear small, if not completely illegible, on mobile devices. Since now about half of all Internet traffic comes from mobile devices, illegible content is a total no-go.

And apart from this, hidden content is rarely crawled by search engines, since Google considers it irrelevant (and justifiably so). Google’s thinking here is that important content doesn’t get hidden. Sliders and other types of animation, such as the parallax effect, which requires the user to scroll with the mouse, can prevent your content from being properly crawled (Google, after all, doesn’t have a mouse). And if your content doesn’t get crawled, that means fewer visitors for you.

So, you should question the benefits of each element you use and limit your animations to a few, well-animated modules. Design trends such as flat design or modern retro, with their pared-down yet expressive styles, speak to this approach. Test your website’s load time with tools such as WebPagetest and check to make sure your content can be crawled — especially animations — by using the Google Search Console.

Stock Photos

And while we’re on the topic of licensed themes and sliders, we shouldn’t forget to mention images. Image material is often licensed via image databases for cheap. But when it comes to images, too, material that lacks an individual character can come across as uninspired and impersonal.

Apart from this, licensed images also come with the risk of being “duplicate content”: They can’t be found in Google in a way that helps to point to your website, since they’re often also used on other sites. Take any stock photo and throw it into Google image search. You’ll quickly see that the picture is already used on other pages, making it useless for SEO purposes.

If you choose to license images, you should edit them so that they don’t look like (cheap) copies: Combine them with other pictures to create a collage, add sketches or graphics to them, or apply a filter to make the colors look different from the original and other copies. Or you can use your own photos or graphics. Your own image material sets your website apart from the competition much more than stock photos.

Especially if you use Facebook Instant Articles or Google Accelerated Mobile Pages (special mobile-optimized templates that are displayed when users come to your website from one of those two platforms), then your corporate or web design isn’t going to make you much more noticeable — but images will. It’s at this point, at the latest, that you need your own visual language (although I wouldn’t advise using AMP or IA).

Media Formats

The need to use correct file formats isn’t anything new, but I see people making serious mistakes all the time when adding images and videos. It’s always recommended that you use the right format and properly embed media. Otherwise, your website will run unbelievably slowly.

Best photo formats
Using the wrong format can cause an image to use five times as much storage space as needed (e.g. when using PNG instead of JPEG). Photo from OSRAM.

So make sure to:

  • Use JPEG images and compress them before upload with ImageOptim or tinypng. The new WebP image format isn’t supported by all browsers yet and still requires fallback solutions, so I don’t recommend using it.
  • Embed graphics as .svg vectors. These work on all standard browsers (http://caniuse.com/#search=svg), can be scaled losslessly and require very little storage space. This also makes them good for animations, e.g. using CSS3 and JQuery. You can also use Elementor to create SVG animations if you don’t know how to program.
  • Use embedded videos, since these don’t eat up too much web hosting or server performance. The easiest way to do this is to use YouTube, or even Vimeo. When you embed videos, some structure data also needs to be amended. This can be done with Sistrix, for example.

Menus and Navigation

The basic rule of thumb here is “the simpler, the better.” Users should be able to understand your website and navigate it immediately. I never recommend using experimental menus, such as hidden menus, unless it’s on an artist’s website and users understand that they need to grapple with them to get around. When it comes to mobile sites, hidden hamburger menus like this are an absolute must, so that the users sees the website content first and not the menu.

To make the surfing experience optimal, you should avoid using dropdown menus as much as possible. They require too much thinking on the part of the user and make it more complicated to use the site on mobile devices, since these lack mice. There are ways to use dropdowns on smartphones, but mobile users rarely take the time to learn how to do it:
Graphic Infographic Desktop Mobile Smartphone User Signal Comparison

Plus, having too many pages or menu items steals the attention of your users away and costs you time and crawl budget (how often search engines like Google crawl your site). Presenting users and search machines with boring, “watered-down” content is a waste of an opportunity. So, ask yourself: What are my visitors actually interested in? Do they really want to read the personal histories of all my team members, or are they more interested in comprehensive information about my products and services? Anything superfluous should be shown the door.

But don’t just go around deleting pages. Doing this would cost you visibility and lower your ranking in search engines. However, it’s useful from time to time to have a look at your website stats, Google Search Console and Bing Webmaster Tools. If you notice a page getting a lot fewer hits during one month with a much higher bounce rate, then I would either remove this page or have it forward visitors somewhere else. But if it’s an important page, then I would do some work on it. This goes for blog posts, too: Small amounts of high-quality content is often better than having lots of mediocre content.

Speaking of navigation: I recommend placing a call-to-action button on every page which can be used for getting in touch with you. But the ideal thing is to have services and products which correspond to the content on your site, so that you can convert more users and get to know them better. (Micro) conversions like these allow you to establish your own database and make yourself less dependent on search engines, social media and other sources.

Summary

Design is about making form follow function, but many people forget the function part in favor going straight for the design aspect of their website with licensed themes and images. They add lots of non-unique content, which makes it difficult to perform a successful relaunch or (re)design.

However, if you focus on customization, high-quality content (less is more) and performance, you’ll be able to stand apart from your competition.

Of course, this is only a selection of all the things you can do to create a great website experience in 2017. Can you think of anything we missed? Let us know in the comments!

Follow us on Twitter Subscribe via RSS