The Importance of Combining SEO & Website Design Early
There comes a time for every company to have their website built, renovated, or reimagined. Whether you’re just starting out or have years of experience in the dos and don’ts of getting a new website built, one things for certain: you need to make sure SEO is on your mind.
It’s very easy to go all hell for leather on designing a funky new website with all new exciting features and dudats but stop! Take a break! I know only too well as a designer that sometimes design takes over the mind. However, we need to start thinking on a more technical level: how does the design fit into a structurally brilliant website? Is the website internally connected? Does it optimise content placement to get the best results in Google? Will the design impact the page load speed? If so, how do you combat that? Does your site do what it says and say what it does? These are just a few items on the agenda for today’s article on “The Importance of Combining SEO & Website Design Early”.
Where do you start?
So, where should you start your build if design is off limits? Well, as with any build, you should start with brainstorming a user flow. This sets up an idea of what pages are needed, how a user should be able to move through the site, and what functionality you need to allow this to happen.
This is an incredibly important stage of the development as it allows you to plan out your internal links. If you don’t know how important internal links are, then have a quick look at this article on internal link-building which will help you out. Now you have a visual map in front of you, you can see what pages relate to eachother and how they should link. Can a user get to your blog feed from every page? Will Google robots be able to crawl from page to page with ease?
Designing for content
Most modern trends in website design lean towards the minimalist. That is: less is more. This has huge impact on the ability for your site to have enough useful content for SEO. What we need to do, then, is come up with cunning little tricks to fill in the right amount of content without it encumbering your website. Here are some nifty ideas to get the most from your site’s content:
- Space – Starting with the most obvious, but often overlooked, is spacing. Move your content about! Most users are very accustomed to scrolling down pages (thanks to mobiles) so don’t be afraid to put space between chunks of content.
- Typography – This is a really simple idea but has amazing effects. Make your font bigger – it takes up more space but is easier to read and less scary on the eyes. Why not also try a bigger line-height and increasing letter-spacing as well for even more eye relief?
- Headings – More headings break up large chunks of text and give the feeling of an easy read. It also helps to put headings in a block on their own with a colourful background to separate the text even more.
- Cards – Rather than putting your content all in one place, a very common trick is to use a card structure – splitting your content into blocked sections. Try using different backgrounds to make them look even more separate and easy to read.
- The Reveal – With CSS transitions and other new tools, it’s very easy to create reveal effects. Why not use a card structure with a hover over reveal for extra content?
Keeping it speedy
Now we are moving into the design of the site and deciding how best to position content, it’s time to think about other types of content: images/videos/animations. There is now a distinct need to design visually appealing websites that look just as good in a 460p mobile screen as in a 5k retina screen. With this, comes a new challenge: high quality graphics that don’t damage the page load speed.
I don’t think it needs to be repeated, because we all know how important load speed is for both user interaction and SEO. What we need to know, however, is how to design beautiful sites that are fast and efficient. Here are some excellent ways that you can maintain high page load speed:
- Image Optimisation – The first and foremost factor is making sure your images are only as big as they need to be. What is the lowest filesize you can get away with before your images start pixelating? You don’t need anything larger than that, period.
- Image Combine – CSS Sprites! Every heard of them? Use them! The idea is that you create a collage of images in one image and use CSS to position them for your backgrounds. This means your browser only needs to download one image for 5 – which is a lot quicker than accessing multiple files in multiple directories.
- Defer Scripts – With new animations and functions comes more scripts. However, there are much more important things in your page source than the scripts they call on for nuances, like text and images. So, tell your script not to load until everything else has loaded. This means your user will still get to see the important things and won’t get impatient and go somewhere else in frustration!
- Lazy Loads – Load as you go. Why load the entire page when the user will only see what’s above the fold? Lazy Loads only loads content once the user scrolls down to see it and it seriously increases page load speed.
- So much more – There are so many things to think about to maintain page load speed. Take a look at this great article on common practices for page speed.
Does what it says. Says what it does
Now the site is designed and you’ve thought exactly how to piece the puzzle together to, its time to make sure it works.
Test it! Test it! Test it! Do you have any broken links? Are all the pages bustling with useful content? Do all the images appear? These are just three points from a very very long list of checks that you need to do before going live. One of the biggest falling points for new websites is that they are too eagerly shoved online without being fully tested. Broken links on your site are detrimental to your rankings. HTML and CSS errors closely follow behind for impacting your rankings. Why? Quite simply – they shouldn’t happen. If your site doesn’t work as it should, Google robots will disregard it as junk and you’ll struggle to gain rankings as junk.
With the site working fully, the second point comes into play. Do the Google crawlers know what the site is about? We know we have enough content on the site after carefully planning for it, but does the code tell Google the correct things?
This is where terms that you’ve problem heard a million times come into play: Meta Data, Tags, Titles. If you haven’t heard of them then you are lucky that you’re reading this! Without meta data, your site is just a flopping mess of strewn together words in the virtual eyes of crawlers. If you don’t believe me, try and read your page source word for word. Good luck!
So: say what it does! Fill in every possible chance you get to tell crawlers what your website is about. Describe what each page is about and remember to include your keywords without being spammy:
“Website Designers and SEO Specialists Brighton doing Graphic Design Brighton and SEO Website Design for Commercial E-commerce Websites. “
CROSS “Website Designers & SEO Specialists in Brighton helping local and national business’ to market their companies online successfully.”
You need to do the same with your inline script tags as well:
Alt Tag: “Website Design Brighton”
Alt Tag: “Our Team Designing a New Website”
Realistically, you shouldn’t have website design separate to SEO. You are trying to gain leads with your website and making it as optimised as possible is crucial for achieving these goals. With these few tips above, you are on your way to making this a reality and I promise you won’t regret it!
The moral of the story is: there is more to building a website than a swanky design. Websites need to be carefully constructed machines. Just like cars – there’s no point putting an attractive body on a broken engine because it won’t go anywhere. Build your site from the ground up – even though you can’t see the code, the crawlers can and the quality of that code has a massive impact on where those crawlers decide you’ll rank.