As the worlds of web design and SEO merge ever closer, we've been seeing design-specific elements produce a positive impact on SEO for the sites that employ them. It's terrific news for SEOs who love design and are capable of and passionate about making it part of their repertoire. It's also great for designers who find that as they evolved from Flash designs to machine-readable CSS and separated markup from content, they've earned more links and more organic search love.
In this post, I'll walk through examples of those design practices in use and describe how they can help improve your opportunity for organic search rankings and traffic.
#1 - Designing that Elicits & Conveys Emotion
A phenomenal article from Aarron Walter of Mailchimp on ThinkVitamin - Emotional Interface Design: The Gateway to Passionate Users - deeply explores the trend of designers using their talents to imprint emotion on users. Personally, I love this practice, and professionally, I see it as incredibly valuable for SEO, too.
Rather than simply providing a user with information, these sites attempt to convey a sense of the companies, products and services they represent in a tangible way.
For McMiller's Sweets, below, the website expresses the brand's humor, whimsy and obsession with their product. I only wish I could buy online - there'd be a few boxes headed for the SEOmoz offices right now.
Box.net, an enterprise-focused software company, aims to achieve an air of simplicity and a feeling of the ease that comes from using a basic, consumer application but targeted at a business audience. Their redesign has me convinced - it's light and airy, it's up in the clouds (perhaps a double-meaning since they host in "the cloud") and it even calls out the "sexiness" of the application.
When users are emotionally invested in the websites they visit, they're more likely to:
- Link
- Share
- Contribute Content
- Participate
- Remain Loyal
- Invest in the Experience
- Browse more Pages
All of these have either first or second-order impacts on SEO in a positive way.
#2 - The Scroll-Triggered Call-to-Action
Sometimes, you don't want to overwhelm content with calls-to-action... At least, not until you're fairly certain your visitor has finished reading. That's where the brilliance of the scroll-triggered call-to-action comes in.
Browse any article on the New York Times website and you'll see this behavior in action, driving you to read the next article in the series only after you've reached the bottom of the current piece:
It's great for boosting page views, but also drives more awareness of those pieces, improving links and driving up visibility for previously less-well-publicized works. My guess is that clicks are quite high.
In the next example, the OKCupid Blog leverages precisely the same tactic:
This use case might be even more brilliant. After wrapping up a remarkable article about what statistics tell us not to do in online dating, my first instinct is to share the piece with some single friends. OKCupid's flawlessly timed, dropdown overlay synchs with this internal compulsion and makes it easy to tweet, like, stumble or buzz away.
Scrolling + triggers = more browsing, more awareness and more sharing (and I think the potential applications for SEO are far greater in quantity than just what's been shared above).
#3 - User Badges
If your users are passionate about your site and their experience or participation, why not make it easy to share?
For years, sites have been offering users the virtual incentives of points, badges and status to encourage greater participation. Andrew Follet from Concept Feedback authored a brilliant piece analyzing this precise behavior and exposing some terrific examples.
We've noticed an interesting behavior as it relates to user badges as well, and it's spurred me to whiteboard the following chart numerous times for those who have online communities considering SEO:
The lesson? Make great communities, encourage participation and reward your users with badges that will make their sites look good. It's the online equivalent of giving out high quality, well designed t-shirts - fans won't just wear them to bed; they'll actually show off your brand.
#4 - The Animated HTML Multiheader
I wrote about the multiheader a long time ago, and the evolution of design has made them tremendously more compelling and useful since then. Case-in-point, Unbounce, who has 5 different messages/features on their homepage all accessible to engines and all part of a single multiheader. I've screencaptured them elegantly "swooshing" in and out of the headline position:
The advantage is two-fold - more content on the homepage that's accessible to search engines (thanks to clever CSS/HTML usage) and everyone who links to any one version is concentrating the link juice singularly on the home page. In some cases, that could cause problems, but in others, it's a great opportunity to leverage design to focus the links you acquire where you need them most.
BTW - Speaking of Unbounce, If you have yet to read Oli Gardner's 12-Step Landing Page Rehab Program, you're seriously missing out.
#5 - Sexy, Embeddable Infographics
Infographic linkbait is certainly all the rage these days, and I think it's a well-justified trend. The brilliant part is that you benefit by producing the infographic and other bloggers benefit by sharing it and attracting views, attention and links of their own. So long as the embed works seemlessly and the infographic is compelling, you're off to the link acquisition races.
Some examples I enjoyed came from Smashing Magazine, who put together this piece on programming (and the how-to behind it's creation):
And this smart contribution from Visual Economics:
As with badges, the "beauty rule" applies - the sexier your infographic (and the most interesting/useful/compelling the content), the higher adoption will be.
#6 - Designing Around Illustration (with CSS)
It used to be that I'd see a website built around illustrations and artistry and shake my head in sadness, knowing that the beauty of the UI was unlikely to be experienced by anyone except those coming via type-in. Today, with the amazing progress of CSS, sites like Carbon Made can have their design cake and eat their SEO, too.
Google's "text only" cache shows every word you can see in the screenshot - we've come a long way indeed. And, darn it if that design doesn't make me want to just climb a mountain and jump off a cliff into an octopus-filled lake below... errr.. make an online portfolio (yeah, that's the one!)
For another look, check out Ruby on Rails developers, Pioneers:
Pretty, accessible and indexable, what more could an SEO ask?
#7 - Creative Content Formats Unleashed
Sometimes, you visit a site that stands out from everything else you've seen on the web in the past. Historically, many of those sites have also been tragically obscured from search engines. Nowadays, a new breed is emerging, showing off massive creativity, brilliance in design innovation and a compelling combination of link-worthiness and search-accessibility.
A few of my favorite recent stumbles into this realm include:
Above: Grain and Gram Gentleman's Journal
Above: Sanctuary T Shop (who knew a small e-commerce shop could be this pretty?)
Above: Heart Directed (a great place to find more remarkable creative formats, though lacking the machine readable content to be an SEO example itself)
It's a great time to be on the web, thinking about SEO, design and the brilliant things that can happen when they overlap strategically. Here's to hoping that more of us who invest in organic search traffic will bolster that task with the power amazing design can bring. It's not just more links - it's greater engagement and a higher liklihood that sharing of all kinds will occur. However the search engines evolve, you can be sure this is the type of behavior they'll seek to reward.
p.s. If design inspires you, I'd recommend checking out Drawar and Six Revisions list of 10 Fresh Galleries for Inspiration
Hurray! A coherent response I can provide to my dev/design friends who complain about how SEO "hurts usability" or "limits design"
It's nice to have an authoritative source provide some actual examples beyond me just trying to fumble through client lists to prove a point.
Thanks!
BAD Seo hurts usability, same as bad design hampers SEO. It's great when the two co-exist.
My argument exactly... shame it's never won over my flash-loving friends
Sam, don't worry they will eventually get over Flash once HTML5/CSS3 becomes more prominent in future. :)
I think that's something Google et al have always aspired to with their algorithms - the best-optimised results are the most useful. They're not there quite yet but it's getting close to it. Now with HTML5, CSS3 and @font-face embedding we can have a mix of usability, optimisation and beauty, which is how the web should be.
SEO and usability are entirely interdependent. Design is an element of both fields. Which is why it continues to baffle me when clients (if not designers themselves) try to artificially separate these fields.
Some really amazing designs in there!
Those scroll triggered calls to action or share bars are something I am really interested in... they seem like they would dramatically increase conversion rates since they appear at a point where you are clearly engaged.
I also really enjoy the unique blog posts featured on Heart Directed. Those must take quite some time to create.
Really cool post Rand, certified enjoyed!
- Jason
Sometimes it's hard to explain SEO to web designers. (Or anyone else, for that matter.)
**whiney voice** Why can't we all just get along? ;)
Nice post. I definitely passed this on to my designer.
:)
Very smashing magazine. Nice post.
You hit the nail on the head. A very SmashingMagazinesque type of post.
I don't necessarily agree that following the trends is the best thing to do when it comes to SEO.
My reasoning behind such an argumentative statement? Simples! Conversion Rate optimisation... If all sites looked the same there would be nothing different for the customers to coo over :)
Good post though...
I believe that even if you are right on a general term - being diversity what makes remarkable something (remember the Purple Cow example of Seth Godin) - to take care of the Trends in anyway important IMO because they give you the pulse of the public tastes.
Then, the really good SEO (but also Designer or Marketer) in that one who is able to anticipate the Trends over the base of the existing ones... being so able to make his/his client site emerge from the mass.
There are two sides to that coin though. From a Usability standpoint there should be a certain amount of predictability in a design so the user knows what to do.
It's definitely a balance, new and innovative vs. known and understood.
A good article, with a lot to think over. No 3 interested me, (and I thank you for the links in it to do more reading) while infographics I think dumb-down things too much, and I'm not a great fan ... for example give me a well written book or webpost, not a wall chart anyday ... the infographic on programming (given as an example) I know was factually and grammatically incorrect in places, all by trying to shove someone's life-time of work into one sentence - to do that you have to be VERY good at writing summaries or it sticks out like a sore thumb.
Great article and indeed, point 2 about the Scroll Triggered Call-to-action is awsome.
After reading this article i've actually developed a wordpress plugin that takes care of a box like the one on OKCupid, so people can easily add such a box on their WordPress blog.
If you like this idea, just take google for a ride on 'scroll triggered call to action' and you should be able to find it!
Cheers, Danny
We have an interesting process for design and development. We have a designer (who only does graphics) create our designs and deliver the PSD files and the folder of images. Our developer (most of the time, me) takes the design and creates the SEO friendly themes for our CMS driven sites. We end up with a great looking design, with the theme coded by an SEO guy :)
I really like the example you gave about using CSS/HTML to deliver more content on the homepage. This has been one of our staples for a few years now. There are some great examples of using javascript and CSS to control areas of content dynamically that remain indexable such as a tabbed content script, rotating containers, and so much more. SEO gets more fun when you can make design and content exciting! Thanks for the inspiration.
I run with a team of brilliant web engineers and incredible web designers. We also have a patented CMS solution. Yet at this point all disciplines (and perspectives) are extremely silo'd. Slowly i'm pushing myself into the process earlier and earlier.
... but ...
I love the looks I get while explaining the importance of canonical, duplicate content and URL casing to an engineer. Their work is done if the webpage is served and the links work.
Really great post Rand.
It's really refreshing to see design and SEO brought together like this. And thanks for the Unbounce mention!
I have a question for you (and the community) about the best way forward with an implementation like that.
First, in the spirit of the post, I'll provide some design background before I discuss the SEO part (with my question).
Aesthetically, the site is designed using Helvetica Neue for the bulk of typographic elements. This is one of the more flexible fonts (if people have it - which most don't) - as it utilizes the full spectrum of CSS font-weight properties. I used to get very frustrated by never seeing any visual difference between 100-900, with only 400 - normal and 900 - bold showing a change.
That was until I learned that the font chosen needs to contain all 9 stylistic variants to facilitate this. (ultralight, light, light italic, regular, bold etc.).
To ensure that the subtle use of this was maintained I used graphical headers in the multiheader area - to maintain a level of visual quality - as like I said, most people don't have the font on their system and I wanted to ensure that at least the top portion stayed consistent.
Soooo, my question is regarding SEO, now that I'm considering replacing the images with HTML text.
Q. How would you structure the headers on the page?
(I see 2 main options)
1. Have the H1 for the title of the first slide and H2's in the other slides - and H2's for the remainder of the page
2. Keep all top pieces as H2's and put the main title in the lower content area as the H1 - which can have a more easily changeable paragraph of related text beneath it?
Any thoughts?
Man Oli. You are just a veritable fountain of knowledge this week. Even in you questioning comment I learned something.
I too have been perplexed about the different useless CSS font weights. I had no idea that you needed specific fonts to make it work.
Thanks for the light bulb moment.
Our research (and that of many others) points to the idea that keeping keywords in H1/H2 tags isn't particularly important for SEO. It's far more important to just have the keywords on the page, hopefully close to the top of the HTML code.
I'd also point out that on-page optimization of keyword usage and H tags and repeating terms/phrases, etc. isn't particularly useful - I'd rather have a page with no H tags, just a few instances of my keyword but draw in 1 more high quality, external link.
All that said, I'd vote for a single H1 and the rest in H2s :-)
Thanks Rand. Appreciate it.
Great examples and all of them makes me think that the figure of the web designer (meant more as art designer than pure developer) is probably going to a mainstream revamp.
In a era where tecnology can give the opportunity to create websites that are sexy and usable at the same time (that was the great gap of the Flash era), I believe that web marketing agencies are going to be very similar to old school "advertisement agencies", which see equally responsible the art dept. and the copy dpt.
An now, with the maturity of CSS and Java, the incoming of Html 5 (even though a great mind like Steven Wozniak* in a debate yesterday here in Valencia expressed his doubts about a real respect of its strict standards), that web design is not anymore conceptually against SEO, IMO our job is going to be literally even more cool, productive and - finally - easy to make understand and accept by the Clients. Infact, one of the problems in the past toward them was the need to make them renounce to some kind of "special effects" or to abandon all-about-design messages because of the SEO implications.
Finally, what I do believe is that SEO and Art Designer are going to become very good friends in the future: the first will take advantage of the natural link baiting nature of good web design (just think about infographics), and the second will see even more universally recognized his/her job thanks to SEO. And their clients will be the happier.
Are there any problems with indexing, ranking, etc. multiheader content? For example, do search engines mistake some of the content as black hat hidden text or miss it altogether?
#2 - The Scroll-Triggered Call-to-ActionI have noticed this myself on the New York Times and thought 'yeah that looks good' and then seeing it here it made me determined to impliment it on my site .... three days later, it is now fully working and optimised, thanks Rand for the nudge in the right direction.
I do!
Hello Mozzers.
Could someone point me to the right read about optimizing graphics so that ingraphic dialouge is catalouged by the robots? -900 margins = spam, right?
Thank you!
Great read. I think we should follow the trends instead doing same old age websites. Some great examples are here in this article. Really liked the structure of The World of Programming.
I agree with point #2 strongly to not overwhelm content with call to actions.
Thanks for this great article!
Awesome post Rand, very good compilation of a topic that is definitely troubling to internet marketing companies and their clients.. it's not always easy to get that balance of great SEO and sexy design --
But your point of "When users are emotionally invested in websites.. they are more likely to: [list] ... ALL OF THESE .. IMPACTS ON SEO IN A POSITIVE WAY" is so TRUE :)
Also, thanks for the intro to Sanctuary Tea - I'm definitely buying from them now haha - if their analytics is tracking well, they will see me as a referral from SEOmoz.org who purchased a variety of products :) -- My only concern with their site is that it loads really slow.. Magento FTL? Hosting FTL? or do they just need some caching in their lives?
-Arsham of WebMechanix
"emotionally invested in the websites". Great concept Rand, lots of great examples... I will pass it to my partner who is a Web designer/Developer, he will love it.
I also agree with you: No SEO or Marketing campaign is going to work well without a great Website Design.
Great post. I liked this article very much
Great post. To be honest being at work I didn't read every word since it was kind of long but loved the visuals.
Extraordinary designs. I liked the mcMiller's sweets design and the world of programming design. I failed to note them in the smashing magazine. Really brilliant one's.
Thanks!
Great post Rand.
The Sancturay T site is absolutely stunning - both from a design and an SEO standpoint. Definitely soemthing to aspire to.
Plus, the wife and I are big Tea drinkers so it's always nice to find another resource for that...
'preciate it!
Great post.
I'm gonna try #2 and #4 on my site.
Cheers
Asim
Having a attractive and well-designed site can help increase your trustworthiness and communicate a high level professionalism to potential linkers. Most people wouldn't want to give a personal recommendation to a site that looks like garbage because it reflects poorly upon them. They also are more likely to link to information that is trustworthy - poor design can create doubt about your level of professionalism and accuracy of information.
I would go for #6... I like to use seomoz because i have realize that the result it shows, very real and very useful for SEO. One of my clients, ibecamewe, an Indian wedding photographer is using the carbonmade and it got very good result of using that.
https://www.pieoneers.com/ is awesome! A well optimised site clearly geared for awesome user experience. I am going to share this, my social networks will see that and they will share and then it becomes viral. A few weeks later, bloggers will start featuring it as "10 Examples of SEO optimised with Cool User Experience Sites" and backlinks will start to flow naturally. Brilliant example of how great works get rewarded in an organic natural way.
Great post
Thanks for sharing .
2015 = 98%
Just wanted to let you know that this article has been really useful especially the call to action part and even the use of info-graphic part. As a web design company, it helps me grow as well coz at the end of the day, its all about usability.
"Overlap of synergistic awesomeness" indeed nice... good thing our in house designer & SEO geek get along. We've been paying attention for quite sometime. Good to know the cat is out of the bag!
I would go for #4 , Social Dating Site
[link removed]
Nice sites
There is a reason though why car doors are put on the side of a car & it pretty much is the same reason the menu system is generally on the left, because its expected.
seomoz's design is very good!
No Limits!! Cool :)
When I designed the https://HighRANKers.net site concept, I used the thinking behind #1--dipping in to the emotions of the target client. This company is a purely LOCAL SEO and online marketing strategy firm that is targeting the older generation of Mom-and-Pops who have ZERO web savvy and are BARELY sure they even need anything more than a basic online digital business card. They are older baby boomers, many of whom wish they had been able to retire 5 years ago (or realize they will not be able to retire on time as planned) and their memories of that nostalgic period of time when WWII propaganda posters were everywhere evoke deep emotions. I tried to leverage that emotion and create a seamless fusion between nostalgic look and feel and images, and a clean, easily navigated page that reads in a voice they feel comfortable with. (I wrote the copy too, *toots own horn*)
Without fail, every single client we have said the website we designed was so different from the other SEO/SEM sites they looked at, that they chose us because we seemed less technical, less uppity, and more salt-of-the-earth. BINGO!
Getting inside the head of the target client/market is ALL about emotional empathy. As a woman, that comes pretty naturally to me. ;)
ANyhow, GREAT article. Now...to get inside the emotional thoughts of MY target clients! HA!
~Cortney Jacobs, Graphic Design, Branding Conceptualization, SEO Copywriting, and the Kitchen Sink
[links removed]
Always fun going back to read old posts.
In a word "great post"....i
Very nice post. I caught myself staring at the programming history infograph for a few minutes haha. Proved your point, I suppose! :P
That's sure...
I think I am in love with infographics since I was a child and started reading the National Geografic Magazine. I consider it the 'granpa' of the infographic art somehow... shame NG don't use infographic so well online (ironic, isn't it).
But infographic is an "or or" linkbaiting tactic:
or it is very well planned and realized and timely proposed to the users
or it is a piece of brick in the website foot
And one thing is to be stated clear: infographic (that personally reminds me a lot the art of the Movie Trailers or of the Movie Credits) is one of hardest tecniques, as it has to deal with:
As far as one of these ingredients is missing or bad pondered, the infographic won't be effective or so effective as desired.That's why many are trying to use it as a linkbait but so few are really creating memorable infographics as the one presented by Rand as example.
I think I am in love with infographics since I was a child and started reading the National Geografic Magazine
I dunno G. I'm thinking that there's a better name for those pictures of the tribal woman than "infographic"
Agreed. The appeal of the infographic over a traditional article is that they are more likely to be linked, and easy to share. Its easy to say that someone can copy your infograph and use it for free, because you can't really alter the content. You give all of it or none of it; as opposed to giving out an article where the person quoting it could alter the content, or not include correct references, etc. Its a lot cleaner (and prettier, to boot :P)
I really liked #2 on the list: Scroll-Triggered Call-to-Action. I can really see the SEO opportunities with that one. Great article...
very nice article. I'm playing catch up with the subject of SEO so these types of articles are very helpful
I really like the pieoneers site :) But I'm slightly concerned by the pie/UFO art. Is the designer mentally deranged? lol i suppose it is extraordinary...
Lol, I thought it was even worse than that when I first looked at it - it looked like a combination of UFO and brain. Or maybe it's some strange aliean Hannible-like combination of all three?
"Overlap of synergistic awesomeness"
I'll have to use that at some point.
Terrific article, I found it really interesting
Design, usability and SEO need not be mutually exclusive, they can be combined and the examples you’ve given are really inspiring.
Carbonmade.com is fantastic!!! and unbounce.com is great too...
One of the BEST articles I've read on SEOmoz, this one really gripped me. I've noticed the NYTimes scrolling tool months ago but was not sure what it was called. Really genius targeting-tool.
The "integrator" job is more important now exactly because they do the merge between a good semantic and well marked-up html page and a beautiful design.
Interesting post !
Do search engines treat multiheader pages exactly the same as if they didn’t have CSS/JS hiding all but one section and making the others viewable through clicking? Or are they just not sophisticated enough to determine that the content is hidden?
The only thing about them that kinda sucks from a UI perspective is when I see content in Google, load the page, not immediately see the content I was expecting, cmd+f to search for it, fail to find the content I wanted and leave the page before noticing the multiheader nav. Then again… this is probably less likely to happen on a homepage than a content heavy sub-page (which is less likely to have one of these).
I'm definitely passing this on to the designers and developers I work with. Great stuff.
I really needed something that would help these guys make their sites more SEO friendly without squelching their creativity. A fantastic win-win for devs and SEOs.
Unbounce is a great find. The article is worth it for that link alone.
I had a real 'Doh' moment in the multiheader section. It's so obvious now.
1st Class! :0)
A much needed topic for post. Thank you.
The multiheader idea looks very interesting. I am getting ready to redo my homepage. Does anyone have source/suggestions for the basic html and css?
Hey gbh,
I started with the code from Sleekslide (and monkeyed around a little for my needs).
You can see their example here: https://themeforest.net/item/sleekslide-portfolio-4-in-1/full_screen_preview/22741
Terrific post. I particularly loved the Programming History Infographic, Alan Turing is one my heroes - amazing intellect, genius, shame he done himself in at such a young age.
Really great food for thought here in this article, posts like this make me want to start ripping up my site and starting again.
Loved it.
I love this article! Really, I think until now the work from a web designer and a SEO has been divided, when it is soooo important that both of them work together to accomplish the goal of a good web page. Because there is no efficient site if it does not make the user to react in a positive way, and there is no point of this if there is no visitors.
Rand: One question. Is jQuery SEO friendly?
I love jQuery but I thought it is not very SEO friendly since it is behind JavaScript.
There is so much designers can do with clever CSS and images.
I think every developer/designer should know basics of SEO. At least on page optimization and building Google friendly websites.
But few months ago one of developers told me that SEO is bulls**t.
SEO education should be standard in industry.
another brilliant post!
Great post. In the process of redesigning our site and obviously looking at SEO. It is really a great time to be doing this.
great examples. I 'm surprised though that you left out apple.com/iphone which actually is navigable (swipable on the ipad) Kinda like unbounce but swipaable.
I love the Grain and Gram site. It's clean, simple, streamlined. Oh yeah...that's the stuff.
... if only i could create such fantastic infographics... :(
Another really great article! Also loved the article from Aaron Walter, also because it's really founded with the Maslov comparison.
I do however sometimes wonder if over-designing doesn't hurt the goal of the website, but you've put some great solutions to that (like the multiheader or the scroll-triggered CTA)
Great read, thanks again!
Came across this post via a RT from Brian Clark. Awesome ideas. I hope to put some to use.
Thanks!
Sean Cook
Thank you for the inspiration. It's easy to let SEO get in the way of design and vice versa.
Really great post, and extremely pretty sites! I now want sweets between the pie and mr miller's.
agreed. can someone start a petition to get them to sell online? haha I would have been a conversion if only that was an option! :P