SEO News
Google

5 Pillars of a Successful Modern Web Design

Jim Yu
by , Comments

click-here-image

To compete successfully in today's new media landscape, simply having an optimized website isn't enough. You must now consider a number of new factors when designing your website. These factors include modern design and content, usability and conversion, and search and social media.

Not only has the SEO technological market changed with new on- an off-page SEO considerations, the way the consumer views and consumes content and changed. New and modern aesthetic, design, and navigational considerations are being built into the architecture of new website builds.

Building Outside of a Silo

Gone are the days when a web developer builds a site, the SEO consultant optimizes the site, a conversion expert looks at the site, and then the business owners review the site.

To make your new website work for your business it essential that a marketing led approach is implemented that involves technical, search, social, usability, and design teams.

Objectives are set by the business so that your site reflects not just your brand but also meets your business objectives and conversion goals.

Start Point – Understanding Business and User Objectives

Understanding your market, clients, potential users, and competitive environment is a large project management task that should kick off your design and build process and ensure your site matches what potential customers/users are looking for.

How many times have you seen a beautifully designed website that just doesn't do what you need it to? The information isn't there, the structure isn't there, it's slow, it's hard to navigate, and it doesn't appear in the search results.

Vice versa, websites that are well optimized can look outdated, less engaging for the user and, given the recent focus on quality and content Google, lacks the relevant content that the user is looking for. Go overboard on "optimization" and your site may even get flagged as spam by Google and kicked out of the search results.

Tip:

  • It's important that you start by defining goals and conversion points for each page, part, and section of your new website. Calls to actions should be defined and put in place for each section of content that answers your users needs and wants. It is then time to hand over to the design, SEO, and usability project team.

The 5 Pillar Approach

Modern day web design involves multi-department, multi-function, and multi-skill set approaches. SEO and content is a core part of the design and build process.

However it is also important to ensure you understand factors such as how design impacts SEO, the link between usability and SEO, how readability impacts SEO and the differences between content and information and technical architecture.

five-website-pillar-approach

1. Design

You would be surprised how many websites haven't caught up with times in terms of modern day design. A disproportionate amount of spend has been placed on marketing and over optimizing that, in reality, needs to be balanced with advanced usability and clean, simple, engaging design.

Finding the right balance between design that looks modern yet simplistic in nature, informative and engaging for the user and maintainable for SEO performance is the bedrock of success.

One of the biggest challenges designers face is juggling visual representation, HTML and CSS elements. A traditional designer normally has a totally different view of how a website will look compared to a marketer or SEO person. One looks for beauty while the other looks for findabilty, readability, and crawability.

We're seeing the rise of modern design techniques such as flat design (two dimensional design for two dimensional screens) with Apple design looking to replace all of the software on your iPhone and Mac with clean edges and flat surfaces. This ties in with responsive design but more on that later.

Tips:

  • When designing your site, make sure it reflects what your users want.
  • Make it easy to navigate.
  • Be creative and build a modern, flat look and feel.

The Search Engine Watch website is a great example of modern design with creative, yet simple elements, in it's navigation systems – like the NYC subway system

sew-navigation-and-design

  • Ensure design and content match and complement each other.
  • Utilize webfonts such as Fontdeck and Font.com to add modern style with typography and crawabilty.
  • Utilize copy, text, and images alongside content to create content rich pages.

Further reading:

2. Usability

Inbound traffic is key to a marketers goals and SEO represents a large part of that activity. It is important to also blend your SEO strategy and web design with actually usability – what happens once users hit your site.

Many years ago web projects were built with SEO, content, design and usability as sub projects. Usability was focused purely on the user interface, accessibility, technical and QA testing. A fragmented relationship with marketers focused on conversion-oriented design was a common occurrence.

Modern marketing and design utilizes both SEO and usability skill sets and for many the usability versus SEO balance is a organizational issue that can be solved via effective project management.

It is also important to understand the difference between information architecture and technical architecture.

  • Information architecture relates to the labeling of website content to support usability and I will talk more about this in the Content and SEO sections of this post. 
  • Technical architecture relates to more SEO related labeling such as crawlabilty, indexation, canonicalization, and robots exclusion.

As Shari Thurow, Omni Marketing founder and SEO director, explained in a Level 433 interview:

"SEO is a subset of information architecture. Most SEOs are clueless about information architecture. They constantly confuse information architecture and technical architecture. On a website, information architecture is organizing, labeling, and connecting content so that it is easy to use and easy to find.

"The information architecture process should occur long before the technical process of website development."

Tips:

  • Utilize user experience and eye-tracking studies and incorporate the findings into your interface.

heatmap-usabilty

Image Credit: Poynter

  • Ensure you have clear and concise headlines to capture readers attention.
  • Ensure your site speed and response time is rapid. A two-second delay can lose you a user and a sale.
  • Focus on readability – typography, color, text, images and backgrounds. Make sure the colors and fonts you use are easy to read and your information architecture uses subheadings to logically outline your content.
  • Keep the navigation simple and ensure the page looks and reads well – spacing, margins, and landing pages.

The easier you make your content to read, the easier it is for users to understand, connect, and share – this is essential for SEO and organic links.

Further reading:

3. SEO

onsite-seo-hitreach

Image Credit: Hitreach

This is where marketing and technical departments should align. The reality has been, that due to differences in left and right brain thinking, this never really used to happen.

As modern marketers and designers evolve this relationship, it is essential that core on-site SEO principles are built into technical architecture. Artistic influence needs to be balanced with search engine friendly structure.

Tips:

  • Build friendly URLs and a friendly URL structure so search engines know what your page is about.
  • Build HTML and XML site maps to ensure search engines correctly index your site during the crawling process.
  • Write post titles that are relevant and descriptive.
  • Avoid splash and Flash menus – they make look nice but search engines struggle to read their content/embedded text.
  • Use relevant anchor text links. Although terms such as "click here" or "learn more" look like clear call to actions, that doesn't mean the search engines know this is important.
  • Always use the image ALT attribute and fill in the description to help your images rank as search engines can not "see" images. In fact, in the USA it is considered an act of discrimination against those with disabilities, as described in ADA 508 (the Americans with Disabilities Act). Target actually lost a several-millions-sized lawsuit because they weren't using alt attributes.
  • Properly employ heading tags and avoid using too many H1 tags – they may look nice to a designer, but not to a search engine.
  • Utilize images in moderation to complement without distracting users away from the content.
  • Ensure you optimize your site for mobile and tablet search.

9-mobile-tablet-search

Further reading:

4. Content

Content is what connects every element of the design and build process. Content is core to everything that we do from both a technical and a marketing perspective. All good design should be focused around quality content and copy and is included in all five pillars of this process.

Tips:

  • Make sure you copy is clear, concise and relevant.
  • Ensure your copy and content says what you need it say in an easily digestible format.
  • Utilize white space to emphasis and break different aspects of your content.
  • Organize your content – date, time, geography, location, topic, and target audience.
  • Utilize all your sales and marketing assets and make them easy to find.

Further reading:

5. Integration

Organizational integration the key to success when building a website that works for your business. I have highlighted examples, in the further reading sections, how many of the disciplines in this process overlap. For example, integration relates to design (see responsive design below), content relates to technical CMS systems and design and SEO and so forth.

responsive-design-phone-desktop-tablet

As people consume content on a combination of desktop, mobile and tablet devices integrating your website design across multiple devices is becoming very important.

Responsive web design involves having one website for every screen and for many is seen as the future of web design. Earlier, I mentioned Apple and the rise of flat design.

The first (and best, IMO) was exhibited by Microsoft and it is worth noting that Apple still relies heavily on Skeuomorphics, which is digital design that visually looks and behaves like real-world objects. This lends to a fair amount of shading, gradation, and other such detail that at core is the antithesis of flat / 2d design

Social media also plays huge role for your website performance. This is far more than just adding buttons to your site. It is important to integrate and link campaigns from Facebook, Twitter, Google+, and LinkedIn so that people engage more on your site also. Ensure you providing "Share" options on your website which can also give you organic links and traffic.

Further reading:

Conclusion

It is always important to remember that a site's artistic design is ultimately for people, not the search engines. Modern day design needs to be balanced with effective content and SEO elements in your technical and information architecture.

Implementing flat, clean, and simple design principles means that engaged visitors spend more time on your site because they enjoy it. Your site gives them the information they are looking for in a clear and concise manner.

The SEO practices you implement in site design that optimize for search engines should be invisible. Modern day web design success requires a multi-function, multi-skilled approached to ensure maximum impact for your business.

Balance is key.


ClickZ Live San Francisco This Year's Premier Digital Marketing Event is #CZLSF
ClickZ Live San Francisco (Aug 11-14) will bring together the industry's leading online marketing practitioners to deliver 4 days of educational sessions and training workshops. From Data-Driven Marketing to Social, Mobile, Display, Search and Email, the comprehensive agenda will help you maximize your marketing efforts and ROI. Register today!

Recommend this story

comments powered by Disqus