Website Strategy

3. Client Collaboration Meeting

At this stage of website strategy and planning, an intensive client collaboration meeting is timely. In addition to reviewing the keyword strategy and resolving site map issues, the client and agency should discuss milestones and timelines for the website development project, assign responsibility for tasks and determine how communication will be handled. These discussion points, which may seem rather tedious, are actually vital to create a successful website. A website development project involves a great number of people on the client side and agency side. If communication is slow and has overlaps or gaps, the quality of the final product suffers — and just as important, bad feelings can easily arise.

To elaborate on that last point, relationship building is another powerful benefit of an intensive client collaboration meeting. The more people get to know each other, communicating effectively and overcoming challenges or disagreements become easier. A truly successful website project is one that not only delivers a high-quality, effective lead generation website, but also ends with all participants enthusiastic about the project experience.

4. Determining Main Template Pages

If you look closely at just about any business website, you will notice that each page is not unique in terms of layout. Instead, page templates (design shells) are created for various groupings of pages. Page templates have two major benefits. First, they reduce the cost of the new website by reducing the amount of design work required; second, they enhance UX by providing visitors with a predictable pattern for similar pages, making knowing where to look for specific pieces of information easier.

The number of templates for a given website varies depending on the nature of the client's business and breadth of content. Typically, separate templates are used for the home page, product/service pages, company pages and the blog(s). Identifying the appropriate templates is critical, because upcoming stages of the Web development strategy will take shape around the selected templates.

5. Designing Style Tiles

Style tiles give clients and agency Web development team members a sense of the new website's look and feel. Conceptually, style tiles are similar to what an interior decorator might do to convey a concept for a new kitchen by showing the client pieces of wood flooring, cabinetry, backsplash tile, countertop and paint that will comprise the redecorated room.

For website development strategy purposes, style tiles depict color schemes and font styles for various content elements, imagery style (e.g., black and white versus color photography), background colors, and design for conversion elements such as call-to-action buttons. Essentially, style tiles are a visual representation of a website page without any specific layout or content.

Client reactions to a style tile range from, "This doesn't feel like our company at all," to "This is exactly what our site should look like!" The important thing at this stage is not to achieve immediate perfection, but to shape the style tiles until they reflect the visual branding the client is seeking. However, if the earlier discovery phase of the Web development project has been conducted effectively, the agency design team has a pretty good sense of what fits with the client's brand, making this phase very smooth.

6. Creating the Content Inventory

From a Web development point of view, one of the biggest changes that has come about due to responsive (mobile-friendly) design is the need for a content inventory structured for each page template. A responsive website works by "shrinking" page content to fit a mobile phone screen by stacking content vertically in a predetermined order. In the old, desktop-only days, content could be thrown down on a page in any old way. But with responsive design, each content element must have a designated space on the page, enabling content elements to be rearranged for different size screens.

Content inventory elements include top-level navigation, a search bar, breadcrumb navigation, sidebar navigation, logo, footer, page title, introductory content, secondary content, graphical calls-to-action and images. Clients should review content inventories in two ways: first, to make sure all necessary content elements are included; and second, to help the agency determine the proper ordering of content elements for mobile screens. For instance, should images appear above or below secondary text on the product page template? The client may also feel certain content elements, such as lengthy secondary text, need not be displayed in the mobile view at all.