Wooden table w/ chalkboard, chalk, & tea cup w/ cookie. Written on chalkboard are words relating to Web Design.

The Balance Between SEO & Web Design

By Litha Ramirez, Breakthrough's Director of Experience Strategy and Design

When it comes to Web Design, you have to consider the intersections between design and SEO, otherwise you risk being lost in a sea of competitors. This is nothing new, and it is worth restating over and over again that Google owns the primary search market shares. According to comScore, it is well over half the searches worldwide. According to Internet Live Stats, there are over 3.5 billion search queries a day, which is about 40,000 searches every second. Knowing that and that there is estimated to be over a billion websites, no one can doubt the importance of SEO.   

One of the benefits of Google having so much of the search market share is that they drive SEO guidelines and recommendations. Those guidelines and recommendations are informed by their mission to "organize the world's information and make it universally accessible and useful." This means that a great user experience for all is essential. Since 2012, Google has begun to more aggressively weigh user experience indicators in their search engine algorithm. Additionally, many of the SEO guidelines and recommendations make sites more accessible so that they can be accessed by both web crawlers and screen readers.   

As a web designer, what should you be doing? Where is the intersection between web design and SEO, and what is the appropriate balance? There is a ton of information, and you can spend months researching the various facets of SEO optimization and web design best practices. So, where do you begin? A good place to start is by making sure the site you design has quality content, fast loading times, is easy to use and navigate, accessible to all modern browsers, and is optimized for mobile.  

Quality content with fast load times should be your highest priority. When someone exits your site from the page they landed on, without interacting with that page or the rest of the site, that counts as a bounce. Google looks at this as a down vote regarding a site’s content quality, which weighs against your search engine ranking. Quality content, which includes text, images, videos, etc., is legitimate, credible, meaningful content. It answers the questions or goals your users have.

To create quality content:

  1. Know your user’s goals and needs, and how your site can fulfill them. 
  2. Make sure that the most important and relevant content starts above the fold.
  3. Specifically for images, give images descriptive file names, descriptive alt text, and surround them with relevant text. 
  4. Do not hide important text from web crawlers and screen reader. Make the text browser rendered text, not images. 
  5. Make sure the content loads quickly—no longer than four seconds, but aim for less. This is important because a slow loading page can be another cause for a user to leave your site. Some contributing factors that lead to slow page loads include a page having too many complicated interactions or too many large image files. 

Once you have quality content, the next step is ensuring your site is easy to use and navigate. Everyone has experienced frustration over sites that are difficult to use and navigate. Most of these sites lack clear information hierarchy and labeling. To fix this, establish an information hierarchy that a user, web crawler, and screen reader can easily process. H1 for page titles, H2 for headers, H3 for sub-headers, and so on. Clearly label page titles, headers and sub headers, links, and buttons. Make sure the labeling makes sense, is clear, concise, consistent, and accurate in its description. Navigation should be logical with a good link structure. Stay away from redundant links or dead-ends, which will hurt your search engine ranking. 

Quality content only goes so far. If your site isn’t rendering for your user, then that well-crafted information will never reach them. If users can’t see the content or it isn’t rendering properly, chances are web crawlers can’t crawl and index the site either, so it will rank poorly in search engine results if it ranks at all. That is why it is important that sites be accessible to all modern browsers. Ensuring a site is available to all modern browsers means the coding does not require browser-specific workarounds for the performance of important site content and functions. To achieve this make sure to follow HTML, CSS, JavaScript, and general web standards.

Optimizing a site for mobile display is a must. More than 50% of all searches happen on a mobile device. Starting in 2015 Google began factoring in mobile-optimized pages in search engine ranking for searches carried out on mobile devices. What does this mean? Simply put, it means your site displays on mobile devices in a manner intended for mobile screens. There are three paths you can take for creating a mobile-optimized site: separate mobile site with its own domain name, dynamic pages, or responsive web design (RWD). Of the three, Google recommends RWD. The main benefit of RWD is that it allows for one URL and single content source, and it can serve any device or screen size, so you do not need to design separate websites for mobile, tablet, and desktop devices. 

These are but a few recommendations to ensure your website design is optimized for search engines. While there are a ton more things you can do, starting with these will put you on the right path to ranking higher on search results.