Merging two worlds: SEO and UX Design

As search engine algorithms get more and more complex, crawlers and botsAlso known as a robot or spider, this is a software program that follows links around the web and categorizes them into a database. Search engines and a variety of private companies use these to collect data. become more sophisticated, but there’s still a lot they’re unable to do. Designers and web masters have also become more eloquent in their techniques. Schema data helps bots understand a website better; it’s design, purpose and overall function. Three websites talk about insurance: one is overall encyclopedic knowledge meant to cover the broad market, one is a local company competing in their city of location and the other is an insurance agent who has a much more specific function to serve their clients’ needs. Just because they all talk about insurance does not make them equal or even remotely the same.

Like computers in general, you have to tell them exactly what to do and crawler bots can have a hard time telling the difference unless they’re helped along.

Designers often forget all about this.

I’ve been in this field for ten years now and the way in which the industry grows and evolves is ever expanding. As creatives, we’re excited to try the new and unused, develop and reinvent the wheel. As a whole it’s a great thing. We’re constantly pushing boundaries and expanding our field, shaping it in ways only previously dreamed of and conceptually maturing a young field. We’re a passionate lot who forever seeks to increase our skills and birth new ideas. Yet, it’s come with its share of blunders. The biggest designer sin? Too much visual and not enough copy.

HTML 5, CSS3 and Javascript

ROI Bot showing popular search engines.HTMLThis stands for hypertext markup language, and it is the computer language used to build websites and specify elements such as fonts, colors, and graphics. defines the document layout, CSSCascading style sheets are used within websites to define stylistic elements and decide precedence if there are conflicting artistic elements. defines the look and Javascript the behavior. With advents such as the canvas element, scale-able vector graphics and a new way to display audio and video, html has really grown up. We’re able to layer and animate elements which back in the days of tables was but a mere pipe dream.  It creates more than just a design layout. It creates an interactive user experience. Websites are no longer static images and content on the other side of the glass. They’re whole tours which can be modeled to lead the user through content, engage them one on one and often more importantly get much needed feedback. CSS templates with the addition of things such as SASS and LESS speed up developer work flow especially when the confines of the user screen take many shapes and sizes. Being able to manipulate a stylesheet programmatically means for that adventurous group of developer clients, the user can now define the client’s site to suite user tastes, personalizing their experience even further and engaging them on an even deeper level. Let’s not forget Javascript, the bridge over the gap of behavior design with the fall of Flash. It’s cross platform supported with many amazing libraries such as JQuery which have a great community of support and are actively being expanded and managed. Designers have a flux of tools at their disposal.

Which means it is very easy to get carried away. Javascript and images can suck up bandwidth resources and make server requests take a long time which results in the user staring at a loading page forever. The user’s attention span dwindles more and more as we learn to digest content in shorter chunks (thanks Twitter). If it takes more than a few seconds for the site to load, many will go their separate ways. Your hand crafted user experience is all for naught.

Pictures, pictures, everywhere! The Internet is a very visual place. It’s rare anymore to see content unaccompanied without at least one trending stock photo. The problem is where the internet used to be verbiage heavy, it’s gone to the other extreme.  Images fill up the entire screen with maybe a sentence or two having to speak for the entire page. Even worse parallax sites force everything onto a single page. Parallax is not just pushing anymore at the limits of crawler bots but rather completely breaking them. It leaves no room for tailoring content – and why is this a problem?  Search engines are also worried about giving their users a good experience and they want to show the most relevant sites to their user’s search terms. Guess what, they don’t care about images unless they’re properly named and tagged! If you have too many topics on a single page, the website is no longer the most relevant website for your clients’ users and they will bury your clients’ websites deeper in search results. Again, the design you poured your heart and soul into won’t be seen.

HTML5 is still in its toddler years. It’s gaining more support across a broad spectrum, but Internet Explorer 7 and Windows XP still hold market share. I know, we’re all exasperated. Which means your awesome animation combining canvas, WebGL and Javascript means diddly up to roughly 25% to 30% of users. Which, designing for legacy systems is its own article.


I am by no means saying to not continue to push the envelope! It mostly means we all have to keep in mind we’re designing for three different things: the client, the user and the search engine. They each have their own needs and you are the ambassador that ties the three together. Your front end development requires a bit of diplomacy in talking the three components together. Your client won’t understand what you do about design, so you need to find a way to meet their needs and wants while also educating them about the process. They don’t need technical specs, mostly just the method behind the madness – the why. Users need to be able to navigate your site quickly, efficiently and actively. It’s about building a relationship between your client and their clients. When you’re building the online face, the presence, keep in mind that you’re building rapport and communication. Lastly, their gateway to the online world is going to be their visibility in terms of rankings. Bots are simple creatures indeed and need a good shove now and again in the right direction. Helping them in any way you can to crawl your clients’ sites, understand what they’re looking at by marking up sections of your document and mapping out the structure of the site will go a long way to also building rapport between your client and the search engines indexing them.

Sometimes less is more. It’s a little painful to even say that, but it’s true. Written content is just as important as the rest and needs to be presented just as well.

Happy coding!