Why Responsive Web Design Benefits SEOMarch 7, 2018
Top Advice for Setting Up a Successful Facebook CampaignApril 13, 2018
38% of Internet users will stop engaging with a website if it’s unattractive. And SEO isn’t just about getting people to your page, it’s also about keeping them there. Savvy web design tricks are a smart way to increase your audience engagement and, in turn, boost your website’s traffic.
Here are 10 web design tips and tricks that’ll enhance your SEO and keep your website at the top of its game.
1. Make It Responsive
The majority of Internet users worldwide are multiplatform. This means your target audience might be looking at your website on mobile, tablet, or desktop.
To keep users on your page and boost SEO you need to make sure your website is easy to navigate across all platforms, regardless of resolution. Responsive web design is the key to that.
Designing your site to be responsive isn’t just a boon for your users. Google’s actively penalized sites that aren’t mobile friendly since 2015. You’d be doing your ranking a favor by jumping on this of all web design tricks.
2. Use Grid Theory
Grid theory is design 101 but you’d be surprised how many websites wing it and hope for the best.
A good grid design establishes the meter and rhythm of the design. It lays elements out in an easy to parse manner and establishes content hierarchy. All of this goes a long way to keeping your website users from hitting that back button.
But designing your website to a grid isn’t just good design practice, it also makes things easier when it comes to building your pages. All good HTML frameworks already use grid theory, so applying a gridded design to them is far easier than trying to build around floating elements.
Grid designs also make building responsive websites easier because the content already has a clear hierarchy. The coder is simply intuiting the structure that’s already there.
3. Structure Your HTML
HTML structure is about more than just layout. It also tells search engines what information is relevant and in what order they should pay attention to it.
You should already be building your pages in HTML5 but take a bit of time and also ensure you’re making proper use of HTML5’s semantic elements.
Beyond your H1 and H2 tags, your page should make use of MAIN, NAV, and ASIDE tags at the very least.
4. Use the Correct Image File Types
Smart use of images is one of the best web design tricks you can learn.
Your website’s images should be PNG, JPEG, GIF, or SVG file types. You should also know when to use each specific file type:
As of this writing, JPEG is still king when it comes to web-optimized photo-quality images but there are exceptions to its use.
PNG is ideal for images that require transparency but often falls down when it comes to file size.
SVG can be awesome for icons or logos as it doesn’t lose quality as it scales but again, watch that file size.
5. Optimize Your Images
Large, unruly images are the bane of your website’s page speed. And page speed can directly affect your Google ranking.
When exporting images from programs like Adobe Photoshop or Illustrator, make use of their “export for screen” functionality and pay attention to their file size.
If your website uses a CMS then make use of its thumbnail functionality. If you’re placing an image on the page at a max width of 300px then you needn’t be loading the 1600px hi-res file.
6. Optimize Your Code
This is an easy one to overlook, particularly if you do regular updates to your website. Next to images, unoptimized code is a great way to blow out your page speed.
Your CSS and JS files should be run through a code compiler to optimize their file size.
If you make use of CSS preprocessors such as LESS or SASS then be mindful of how you nest elements. Practices that make for nice LESS or SASS code don’t always make for optimized CSS.
7. Catch Your Broken Links
Broken links and missing pages are bad web practice 101 but mistakes can be made. The important part is catching them before they can impact your SEO proper.
Your website should have a 404 page template to catch any missing pages and redirect them back into your website’s flow. It’s also a good idea to regularly scan your website for any broken or out of date links.
8. Check Your Accessibility
W3’s Web Content Accessibility Guidelines (WCAG) are oft-overlooked in the world of web design tricks. They’re a set of standards that aim to make websites and web content more accessible to people with disabilities.
Keeping accessibility in mind when you design and build a website won’t just increase your potential audience it can also impact your SEO. This is because many accessibility standards mirror web design best practices. And we already know how much search engines love them.
9. Check Your Readability
Content is king when it comes to SEO. We know that Google ranks pages better that keep their users from clicking away. We also know that the best way to keep your visitors on a page is giving them relevant and engaging content.
But even the best content in the world isn’t going to keep a user on the page if they can’t easily read it. How you lay out your content will impact how readable it is.
Take care to use the correct alignment for your text – left aligned is the most readable while right aligned is the hardest to parse. Be mindful of your font size and line spacing. And ensure each line of text is 45-75 characters per line.
10. Don’t Neglect Your OG Tags
Open Graph meta tags are your website’s secret weapon to funneling web traffic from social media. And with 8 out of 10 people now on social media, that’s a lot of potential traffic to be targeting.
Always make sure each page of your website has their OG tags in line and check how they’re displaying to social media platforms.
The Best Web Design Tricks Are Also the Smartest
Web design is as much a science as it is an art form. By applying these tips to your web design processes, you’ll ensure your website is putting its best SEO foot forward.
Looking for more ways to get traffic to your website? Check out how to run a successful SEO campaign.