Disclaimer: This is a supplemental post to the Mozinar “Designing for SEO: Improving Site Visibility and Enhancing UX.” Justin Taylor answers Q&A from the Mozinar and expands on the question that was asked most frequently by listeners.

"Why do websites that look great nearly always have SEO that sucks?"

This is the question I set out to answer during my recent Mozinar about designing for SEO.

To be a true king of the SERPs, you are, of course, going to need more than a well-designed, search-optimised 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 optimisation

Whats the problem?

The problem is simple. Websites that look amazing typically offer little opportunity for on-page optimisation and conversely pages that are well optimised 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-optimised 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 emphasise and prioritise 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 optimisation

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 visualised 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 the panel on the right hand side. It has a clear, defined header, possibly an <h1>, followed by some great long tail text. Its 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 techniques outlined all sound great in theory, but in reality can they actually be implemented?

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.

The demo site is available on the following link:
http://www.graphitas.co.uk/randomboutique

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 they 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, so with the team at Graphitas, we have put together an infographic which outlines the key positions and hotspots for any homepage and indicates their likely impact.

Download our infographic here

More Mozinar Q&A

During my Mozinar, there were a few questions which I either didn’t get time to answer, or that have required more in depth answers. Here are the fully answered questions:

Q: How does browser compatibility affect the design?

A: Very little. All recent versions of browsers (including IE 6) support web fonts, so design is only compromised by browser CSS compatibility. For example, some versions of IE won’t allow text to be displayed on an angle. In these scenarios, the browser will ignore the CSS entry, and then results in layout issues that we would have to fix by creating a separate CSS for the offending browser. In most circumstances, it is possible to make design exceptions for incompatible browsers without compromising the design.

Q: Are there any good tools for creating “live text” graphics?

A: In truth, I haven’t come across any great tools yet. Tools like Adobe Edge do show some potential, although at the moment the file sizes of the elements it generates are too large, and it is heavily tied into its own webfont library Typekit. We tend to create our own elements as in their basic form these are just classic HTML and CSS which incorporate webfonts and these can be created with any standard web development tools.

Q: Is there a good resource for using “live text” within web pages?

A: Again, there isn’t an all-encompassing resource that caters for webfonts, HTML, CSS, and SEO. There is, however, a lot of resources that deal with these items individually. The best advice I can give is to utilise the work that other people have created and borrow that. The example site shown above shows some great examples of common elements, so please feel free to use the code from there. I am planning to create code snippets for the various elements of the demo site so they can be more easily used. Please drop me a tweet or an email if you would like me to notify you as they become available.

Q: Do webfonts slow down page load?

A: Each webfont is around 50k in size, so overuse of webfonts can affect page load. As webfonts are often used to replace graphics, the end result can be that webfonts could easily decrease page size. My advice is to evaluate the file size during the development process and keep to your existing page size thresholds. Obviously it makes no difference if bandwidth is used downloading a graphic or a webfont.

Q: What about roll-overs and mobile viewing? Do they work on touch screens?

A: Roll overs (or mouse overs) don’t work on touch devices, there are two solutions to this, either remove the mouse over event for touch devices so that the panel just acts a button, or change the mouse-over event to an on-click event to show the text behind the rollover. Either scenario is fine as the text hidden behind the mouse over event will still be visible to search bots.

Thanks for reading, and please leave any thoughts or other tips in the comments below!

Photographs courtesy of ASOS.