It’s an argument that comes up from time to time – can you have a great website design and still achieve good rankings in search engines such as Google, etc? The answer is, of course, yes. You can have your cake and eat it too with some careful planning, a good website design and a sound search engine optimisation (SEO) strategy. This article by Rand Kramer explains the concepts well.
Here are some things to think about well before, and during, the design process:
1. When setting up a page structure and composition, designers tend to start with a specific defined grid system. Designers look at the grid as a foundation for positioning elements on the page. You should take it a step further by considering how the grid can support elements for SEO. Not only where images and text will be placed on the page, but also setting up a clear hierarchy of information, logical page titles and text links, headings and sub heads. This approach not only supports users’ browsing behavior but also makes it easier for search engine spiders to move throughout the site.
Aarron Walter’s, Building Findable Websites, makes the point that designers should think about human interactions first and not try to trick the system to get to the top of search rankings. “Build for humans first and at the same time make sure our content is accessible to machines as well, which is going to help us reach more humans to make it more findable.”
The first place to start is clear page titles. The page title is essentially what displays in a Google search results page. It needs to be clear and express your brand and what you do. An example of how we set up our home page title is: “Interactive Agency, Web Content Management & Application Development – Siteworx.” It covers who we are, our top areas of expertise and company name. The same title technique should be applied to all sub pages so each is unique.
2. Search engine spiders read clean semantic markup and basic HTML. They read from left to right and top to bottom. It is important to make sure that unnecessary tables do not obstruct your HTML code. Most competent designers today would not consider building a site with tables and are on board with standard and validated code practices.
JavaScript at the top of your page can also inhibit search engine spiders. Some developers suggest placing the JavaScript at the bottom of the page. Be careful if you take this approach since it can substantially slow down page load times. In addition, for global drop down menus that may be overlooked by search engines it is recommended to have a set of redundant navigation links in the footer and as inset sub page navigation. Also be sure to use cascading style sheets (CSS) to emulate rollover effects and don’t use images in the place of text.
3. As a designer, I have always enjoyed the benefits of the interactivity of Flash and bringing Flash into components of a website. Flash as an early web tool allowed designers to think more about the emotional user experience and less about technical considerations. Designers could think about interactive immersive environments and less about the Web as a page metaphor. In addition, Flash allows typography and video to render uniformly across a variety of platforms, which removed design limitations found in straight HTML-based sites.
The catch with using Flash as it relates to search is that search engines have trouble getting into published .swf files and cannot effectively index the content embedded in Flash files.
One work-around has been to imbed a smaller Flash component into your HTML page and keep your navigation links and supporting content outside of the Flash component. For example, YouTube uses a SWF video player and is a highly visible and searchable site. It uses effective titles and descriptions embedded in the HTML parts of the page to make the SWF videos more visible to search engines and more findable to users.
To learn more on this topic, I’d recommend a very good interview with Justin Everett-Church from Adobe where he speaks about how to make Flash accessible. There’s also more information from Adobe at Adobe’s Developer Connection: Search Engine Optimization Technology Center.
4. Type should be type and not a graphic representation. Search engines do not see graphics the same way as text. They see only a single associated alt tag. If you present text elements as graphics, you are putting your site at risk for lower search engine rankings. Instead, use system fonts for text, which is also a basic principle when building a purely HTML site.
So much has evolved in the area of web fonts that there is no reason for a designer to render text elements as graphics. You can still start by laying out your text in your illustration or painting program of choice. Having the flexibility to try different font selections, move type around, and mix and match to communicate the brand direction is essential. Once your design is approved and you are moving onto the build phase, take the time to acquire your Web fonts and build the tags into your code. There are very affordable ways to license Web fonts if that’s something you’re considering.
5. An area for designers that is not discussed often enough as part of the SEO equation is information architecture and design conventions. The ability for users to find a web site depends not only on how well the site is built from a technical perspective, but also on good user experience principles. By focusing on-site architecture and sticking with some basic conventions, you’ll produce clearly defined content and pages for your site. Your users will find what they are looking for, visit more of your site, stay longer and tell others about the site. After all, that is what you should strive for.
Design conventions are somewhat like rules that have become part of a visual, non-verbal language for the Web over time. Conventions allow a designer to solve common design problems so he/she can focus on other specific issues around content, branding and features. Typical conventions for example are a company’s brand mark in the upper left corner of the page, while search typically is located at the top right. Underlined or blue text indicates a clickable link. There are conventions for button styles and link styles. Peter Lynch and Sara Horton have developed a site that touches on design conventions and other Web style suggestions that you can view at Web Style Guide 3rd Addition.
Ultimately, it is possible to have a well designed website that is visually appealing, content rich and emotionally engaging – while also achieving high search engine rankings. As designers, we shouldn’t ever pursue top search ranking to the detriment of usability, accessibility and brand integrity. If you plan for both, and realize that as a good designer, SEO and compelling design are your responsibility, this will lead you to creating findable sites and enjoying the kudos of happy clients.
About The Author
Rand Kramer, vice president of visual design and co-founder, is a driving force who helps formulate and institute the design and creative methodology that is Siteworx’ signature methodology for Web and mobile application design success. In his role as VP of Visual Design, Rand guides creative teams of art directors, visual designers and interaction designers, working in close collaboration across disciplines. He ensures that Siteworx stays true to its high standards of design and usability. Rand’s emphasis is on effective conceptual design that produces educational and entertaining products with the highest production values.