It’s a fine line, straddling that chasm between cutting edge-web design and hyper-optimized, content-heavy web pages. Sometimes it even feels like the SEO warriors are winning out over communicative design. Any Google search will turn up too many articles to count about SEO rule X or rule Y on what you should be doing to get your page to rank. What do you do?
Follow Philosophies, Not Tactics
We follow philosophies as opposed to tools and techniques. While methodology can change, good fundamentals and principles persist and inform good design overall.
Maybe it’s the eternal optimist in me, but I feel if you design for the user, not for Google, SEO will follow naturally. It’s a case of quality over quantity, and accessibility above all. Google’s aim is not to reward the best ‘optimized’ site, but the most relevant one. And in that endeavour, good design need not be compromised.
What is web accessibility and why is it important? Web accessibility in a nutshell removes barriers that prevent interaction with websites by people with disabilities. According to Wikipedia, “When sites are correctly designed, developed and edited, all users have equal access to information and functionality.”
What does this mean for design, and will design need to be compromised? Largely, no – properly built sites with semantic HTML don’t need to compromise design at all. And even when building sites specifically for a universal audience and adhering to WCAG 2.0 or WCAG 3.0 principles, design can still be creative and unique. The following are a few areas to focus on from a design perspective when it comes to accessibility:
Following solid UX principles goes a long way. Menus needn’t be overly complex and should allow users to get where they want to go quickly and efficiently. With accessibility in mind, users should be able to navigate a navigation bar without the use of a mouse and move through links – even through dropdowns – with keyboard controls. Properly built nav bars also have the added benefit of describing to search engines how your site is laid out, so remember to include some good semantic HTML in your links.
They say an image is worth a thousand words, so don’t forget to tag it and describe it! Following in the vein of accessibility, make sure your images aren’t invisible to non-visual readers. A few to-dos:
- Give images descriptive file names
- Include appropriate alt text
- Don’t hide important text within the image
- Avoid using images for text
I remember a time when images were used for everything, including text. Thank goodness those days are gone and we have web services like TypeKit and even Google Fonts to help make websites more palatable for typophiles. These days, you don’t need to compromise on how images are used in your design, but ensuring a few simple things are done properly goes a long way toward solid SERP results.
The W3 Consortium has established pretty specific guidelines as to what can and cannot be done to reach a level of accessibility ‘compliance.’ The extent to which you adhere to these guidelines is up to you, and there’s no clear threshold between being in compliance and not. Being in compliance is not black and white, but there’s certainly a sliding scale when it comes to being more or less accessible.
While I’ll leave discussion of WCAG to another blog post, bear in mind that there are specific standards out there that when followed will not only make your site more open to people with disabilities, but also allow search engines to crawl your site and rank it more easily.
Accessible websites should largely be built to at least WCAG 1.0 standards anyway – not just for the sake of catering to an audience who might be visually impaired, but also because it’s just good code. Get in the practice of always including accessible and semantic HTML code.
Be Mobile Friendly
April 2015 was a big month for web managers as Google rolled out new changes to the way it ranked sites. Websites that were mobile-friendly were prioritized in SERPs over those sites that were not. Overnight, there was a mad dash to ensure websites were future-proof to avoid being penalized, especially when “mobile searches surpass desktop searches at Google.”
- Responsive: the same HTML code is presented regardless of what device the user is on, but the layout is rendered differently. Responsive design is Google’s recommended design pattern, and therefore our preferred method for multiple device delivery as well.
- Dynamic serving: the same URL is used, but a different version of the site is delivered to the user depending on the device.
- Separate URLs: a different version of the site is served on a different URL, depending on what device is being used.
Above all, the philosophy of being mobile friendly means that sites should be built responsively, naturally. It’s good practice.
Build it Right
You’ve put so much time into design, so don’t sell it short by not building it properly. You wouldn’t paint the Mona Lisa on tissue paper, so don’t compromise your design by not rendering it on a foundation of well-structured code. While the web is full of how-to’s on proper semantic HTML, here are a few things we keep in mind when constructing SEO-friendly sites that still look great:
SEO friendly URLs and filenames
Avoid long URLs, and make sure the URL is relevant to your keyword content. Use hyphens when separating terms, not underscores. File names should make sense when you read them – they should be descriptive, contain your keywords and not have nonsensical characters or numbers.
Google takes into account loading speeds, so make sure your scripts and stylesheets are minified, and use caching or a content delivery network like MaxCDN. Lose extraneous bloat and try to get your page to load within 2 seconds. How fast is your site loading? Use Google’s Page Speed checker.
Be a sport and help out a search engine by providing an XML sitemap. It’s a quick and dirty way for crawlers to get a snapshot of your site and understand content relevancy. Your page ranks will be rewarded.
Structured titles (h1, h2, h3)
Just as important as site hierarchy is the hierarchy of page elements. Proper use of HTML structure tags makes search engines happy, and they’ll know what the keywords are that they should be ranking your page for. Use your h1, h2 and h3 titles to delineate content hierarchy and remember to avoid using them as typographic sizing. Also, be sure to nest your titles for maximum effect!
So there you go. If you follow governing design principles rather than specific rules and tactics, your SEO ranking will come out on top and you won’t necessarily have to compromise on your design. Remember to design for people, not for search engines – the level of honesty and transparency that you have with yourself and with your audience will be rewarded.