When my business partner and I joined forces we had some uncomfortable moments regarding SEO and past website designs which, while graphically beautiful, left no opportunity for optimization and content. Julie needed an SEO person and I needed a graphics and print media person. Years later (today) we have successfully melded our expertise between appealing graphic design, functionality, conversion techniques, and on and off page optimization, SEO. All of our clients rank of the front page of Google for many of their keywords and its reflected in their increased sales revenues. Many business owners forget the primary purpose for publishing a website is to increase sales revenues. All the other purposes are secondary, information and awareness. If no one finds the website how pretty it looks won’t matter, except to your family and friends.
The following article is the best description I have found to easily help you to better understand what questions your should be asking when interviewing website developers and SEO service providers. Enjoy and leave a comment for us, please.
““Why do so many beautiful websites usually have terrible SEO?”
This is the question I set out to answer recently.
To be a true king of the SERPs (Search Engine Results Page), you are, of course, going to need more than a well-designed, search-optimized website. You are probably going to need a ton of social mentions, quality links, citations and co-citations, etc. The problem with these ranking factors is that they are difficult to accomplish in volume and generally require a lot of work to achieve, and, subsequently, the vast majority of websites don’t have them.
You can, however still achieve big wins with great design and on-page optimization
Whats the problem?
The problem is simple. Websites that look amazing typically offer little opportunity for on-page optimization and conversely pages that are well optimized will often compromise the design and user experience.
This creates a chicken and egg scenario – what is the point in having a website that looks great if it can’t be found? And is there any point of being easy to find if the website isn’t engaging?
How can we build sites that look amazing and are engaging, yet still maintain SEO performance?
Enter the webfont
Webfonts from the likes of Google, Font Deck, Typekit, and Fonts.com have been around for a couple of years and offer a great way to give a website style without compromising crawlability. They form the fundamental structure and underpinning of any well-designed, well-optimized site.
To add visual impact, designers will add graphical elements to websites such as banners and calls to action. These elements are usually created as images so the designer can use gorgeous fonts, add type effects such as drop shadows, gradients, and a whole host of other treatments that form part of the designers toolkit. Websites need these kind of graphics, as they make websites engaging, they improve the UX, and they make the user much less likely to bounce.
Take the graphic below, as great as it looks there is too much information to include within an Alt-tag. Also it is difficult to emphasize and prioritize the information within an alt-tag as it is just plain text.
By using a combination of webfonts, HTML, and CSS, it is possible to retain the beauty and achieve good SEO by creating all of the text elements within this banner as “live text.”
Not only can the live text banner now look great, but they can also be marked up with H1’s, body type, bold text, and updated dynamically. Search engines will just see this as standard HTML. Best of all, these banners or graphics can be even be marked up as rich text using schema or microdata.
Design for optimization
The biggest hurdle in building great looking websites that also have great performing SEO attributes is uniting these two disciplines. Designers focus on sites that look great and create a good user experience whilst being engaging, whereas an SEO typically wants a site which is very crawlable and one which ranks well.
If the design and SEO teams gain an appreciation of each others’ requirements, the results can be innovative and outstanding. Take the example below: these panels are for a fashion retailer, the one on the left was visualized by the designer, in terms of UX this panel is great, it shows a model wearing the product, explains through the use of well positioned type exactly what a user can expect to see on click through. The trouble is, from an SEO perspective, this panel does not cut it.
An SEO is going to need something more like an information panel on the right hand side. It has a clear, defined header, possibly an <h1>, followed by some great long tail text. It’s clear that from a UX perspective this panel falls well short of the mark, the panel on the left will get a lot more click throughs than the panel on the right.
One potential solution to this problem is a mouse-over. Initially when viewed, the panel will look as it does on the left hand side (exactly as the designer want it), yet when a user rolls over the image the panel changes into what you see on the right hand side (exactly what the SEO wants).
The beauty of this solution is the user experience and click thru are maintained and as all of this text is live text, it is crawlable and very accessible to robots, giving the search engines everything they need to index the site.
The expandable div
Another great way of incorporating indexable content into minimalist page design is the expandable div. It can deliver big SEO and UX wins by making relevant (and crawlable) text visible on mouse click.
Take the example below: frequently, these kind of product panels are represented as images, and they do a great job of engaging the user by offering a visually rich single click method of navigation.
With the exception of some alt-text, these kind of panels offer very little for search engines to crawl.
By adding an expandable div to these panels, it is possible to present a host of SEO opportunities. Clicking on one of the items above can now provide a compelling description of this product category, include additional imagery to aid the purchase process and as a result increase conversions and user engagement. But perhaps the biggest bonus of the expandable div is that we can provide search engines with so much additional long tail text to index.
The inclusion of expandable divs within web pages are not only great for the user, but also offer incredible opportunities for indexable content.
The concealed weapons!
Calls to action, trust signals, billboards, and all other page elements will often contain the kind of messages we want google to crawl, yet in most cases, these will be represented as images. As a result, discounts, free delivery, next-day delivery, and other offers are not being crawled.
Create all of these elements with webfonts, CSS and HTML so that spiders and bots can crawl them. Do we really want messages such as “Free Delivery,” “10% discount,” or “SALE” to be hidden from search engines?
The following items contain great sales messages, and all of them have been built using webfonts, CSS, and HTML so are all fully crawlable.
Bringing it all together
The simple answer is yes, and to prove it, we have built a site using these techniques for a fictitious retailer “random boutique.” The site showcases all of these techniques and uses webfonts, HTML, and CSS to build an experience which is not only pleasing to the eye, but provides a great user experience and provides plenty of data for search engines to crawl. The demo site uses rollups, expandable divs, and live text billboards, plus many other techniques to deliver a site which has a great user experience. However, none are at the expense of the on-page SEO. The site gives search engines a ton of great indexible content without compromising the UX.
The use of live text also inherently delivers some other big wins for mobile, accessibility and multi-language sites, but most notably with the use of webfonts A/B testing becomes super easy. To demonstrate this we have created A/B versions of the demo site which are served from the same URL, share the same code base and look identical to search bots, the only difference between the two sites is achieved purely by the use of webfonts, CSS, and a couple of different background images.
Anatomy of a webpage
Armed with webfonts, HTML, and CSS, you have the tools to create amazing websites that contain all of the elements an SEO would also require.
To fully capitalise on these assets, it is also important to understand page structure. Naturally, this will vary depending on your customer, market sector, and the messages you want to deliver.
One of the first things designers are taught to understand is the importance of position of information on a page, calls to action, and trust signals.
A very good parallel for homepage design is a magazine cover. It is no coincidence that most magazine covers are very similar in layout, this is because magazine designers understand the parameters that are most likely to engage people at point of purchase (i.e. on a magazine rack).
They will know that often magazines are stacked on tiered shelves, and therefore they have to have a clear mast head identifying the magazine.They will also tend to use this top quarter of the page to communicate key features/offers. These parameters for magazine design have natural parallels with websites, web designers have to contend with page fold and have to focus more than ever on page position with Google’s recent top-heavy algo update.
On and offline, the requirement is to grab your attention. In the case of the magazine, the mast head area lures you with familiarity and offers that are designed to make you pick the magazine up, and once you pick it up, you will see seductive photography and more key offers. The areas these key offers occupy are known as the “hot spots” – essentially tactical positions on the page that magazine designers know will have the best chance of gaining your attention.
These exact same parameters apply to web page design. The primary purpose of your website should be to increase sales revenues. If the site is attractive and has a ton of useful information but no one can find it in a search for your product or services what use is it? If your website design does not immediately engage the visitor in order to at least obtain some contact info what lies in the following pages won’t matter either. Remember, your website reflects your company, online, same as a store front. Make sure your vision is represented properly with quality graphics, unique, informative and relevant content, and especially a call to action in order to convert visitors into customers. The saying “you get what you pay for” usually applies for a reason.
Disclaimer: This is a supplemental post to the Mozinar “Designing for SEO: Improving Site Visibility and Enhancing UX” by Justin Taylor.