Marketing famously stands at the intersection of art and science. Few endeavors illustrate that reality more distinctly than web design. The best websites are a harmonious marriage of visual refinement, relevant content, and cutting edge technology.
When it’s time to build or rebuild your site, all of these aspects need careful consideration to achieve a result that functions as good as it looks. Kevin Harter, Hanlon Creative’s digital project manager and lead developer, also contributed to this article, which will address every step of our comprehensive web development process:
Step 1: In-Depth Research
The very first step in any web development undertaking should always be a comprehensive evaluation and discussion of the project. The first questions to ask center around the scope and requirements of the assignment:
- How big will the site be?
- What is the budget?
- What is the intended purpose of the site?
- How much functionality is needed?
- What feature set, or list of specifications, must be included in the finished product?
These questions are a core part of benefit realization management, a process that ensures the hoped for advantages of the website are considered throughout development and actually fulfilled.
Next, the research phase should delve into the target market and developing personas for members of that group:
- Who will be using the proposed website?
- What type of person are they and what are their major demographic markers?
- What is motivating them to seek out a solution you may offer?
- What are their likes and dislikes?
- What problems do they face that this website can solve?
The final component of a thorough pre-planning investigation is a competitor analysis, an assessment of the strengths and weaknesses of similar websites from rival brands:
- Who are you competing against for search engine result rankings?
- What are they doing to differentiate themselves?
- Who are their customers and visitors and how do they appeal to them?
- How successful are they at drawing traffic and satisfying users?
These questions are hardly an exhaustive list but rather a jumping off point to guide a full-scale research process.
Step 2: Long-Term Planning
With so many intricately connected parts that all need to work together seamlessly, it would be impossible to build a best in class website without substantial planning. The first item to tackle should almost always be the logistics.
A great project manager breaks down a massive undertaking into achievable units, and figures out how to best apply the resources at hand. That includes setting a reasonable timeline and keeping track of the necessary resources.
Because search engines, particularly Google, are the primary means by which websites generate traffic, Search Engine Optimization (SEO) strategies should be considered from the earliest stage of development.
If a website is going to be relying heavily on organic SEO (unpaid results in search rankings), it needs a strong focus on things like social media integration and content sources like blogs to raise its relevance and attract traffic.
SEO is sometimes confused with Search Engine Marketing (SEM). Both aim to increase a website’s visibility in search engines, but while SEO focuses almost exclusively on improving your website to get better rankings, SEM is broader and includes Pay-Per-Click (PPC) advertising.
If there is going to be a strong paid SEO component to your strategy, extra attention should be given to keyword analysis. Determine ahead of time which keywords are most valuable to attracting your ideal target audience and ensure that those keywords are integrated into the final site in a natural and comprehensive manner.
More than ever, content rules the web today. Videos, articles, images, podcasts, and all manner of multimedia material are being consumed, shared, and commented upon around the clock. Keeping up with that unceasing demand is no easy task.
Build your content management strategy before you build your site. That way, when it’s time to launch, you’ll have a steady stream of material ready to go. The questions you need to answer include:
- What type of content do you want to share?
- What topics are most current, relevant, and likely to create an intersection point for your audience and your offering?
- How often will you update your channels?
- Who will be responsible for overseeing your content and ensuring it matches your brand?
There are any number of third-party content management systems today that can help you create, modify, categorize, and share your content. If you’re hurting for things to share, dig deep into your archives. The appetite for content is large and you might be surprised at how much of your existing content can be updated and repurposed. The rule of thumb is if it’s relevant and informative consider making it available.
Too many web development primers fail to address security concerns, which is surprising given the rash of headline-making security breaches lately. It’s impossible to safeguard against all intrusions and data losses, but that’s no reason to be lax in preventing them. Don’t be the next to see your brand tarnished by a clumsy oversight.
Consider your security weak spots from the get go, and choose a developer that is aware of common exploits, monitors for unusual activity, and is religious about keeping your defenses updated. Trust is a hard won and valuable resource that is difficult to reclaim when lost. Build a site that your users can be confident will protect their sensitive information.
Step 3: Process-Driven Design
With your initial research and overarching planning done, it’s time to move away from high level strategizing and goal-setting and start making the many individual decisions about the look, feel, and functionality of your site.
You could hardly build a house without a clear understanding of where all the rooms are going to go, what their intended purpose is, and how they will connect to each other. The same is true of a website, which is why choosing an information architecture is the first part of the design process.
Sometimes confused with the sitemap (a hierarchical list of the pages in a website), the information architecture is a scheme that describes the relationship between all the areas of a website (or websites for multi-site projects). The type of architecture you choose will depend on the type of website you need. For example, will your site be:
- Passive or Interactive
- Centralized or Decentralized
- Informational or Transactional
It’s also important to consider the workflow of the users. Will they be relying heavily on known-item searches or do you expect more exploratory, browsing-style behavior?
One of the most popular methods for determining an optimal architecture for your needs is card sorting. Test subjects are given index cards with all the major components of a website written on them and tasked with categorizing and organizing the lot. After repeated tests, common patterns emerge and a fitting workflow and structure is revealed.
Your information architecture choices may sound like they will all work together nicely in theory, but you won’t know for sure until you start mocking everything up. A wireframe is a page schematic or screen blueprint with placeholder elements that can be easily moved around and experimented with to find an arrangement that best suits the needs of the site.
Wireframing is typically done in either low or high fidelity. LoFi wireframes are quick and rough tools to promote team communication and get a first, rough idea for layouts. They use blank images and filler text to facilitate a visual brainstorming session. HiFi wireframes are where ideas get more fleshed out. Actual text and imagery replaces dummy content, tone and contrast is experimented with, typeface choices are tested, and a final design begins to take shape.
Style and Branding
Every website has a brand unto itself and needs to be positioned and differentiated accordingly. It should be tailored to its audience, appealing to their tastes, and solve their problems. It needs to lay claim to a position that stands out from the crowd and demonstrates superiority to any alternatives.
Some brands are brash and colorful, others muted and modest. Some are all business and others are more playful. There are many elements of style and all must blend together to form a consistent and integrated whole:
Virtually all websites are built on a grid structure (e.g. the common four-column layout). The choice of layout should accord with workflow needs and brand tone, but also take into account fundamental human behavior, for example most English readers view the page left-to-right and top-down.
However, when just quickly scanning, eyes commonly move in an ‘F’ or ‘Z’ shape. These findings are why featured information like Call to Actions (CTAs) are commonly placed above the fold, towards the top of the page where people look first. It’s also why page length should be limited; few people will scroll all the way down.
The color scheme of the website must be in line with the brand, but also translate well to a variety of screens and devices. For that reason it should incline towards small color palettes and sufficient contrast.
Every additional choice you give the user increases the time it takes them to make a decision. Scrimping on white space results in overcrowded, hard to use websites. For some brands, with highly sophisticated offerings, it can make sense to fill the page with content and information, but simpler, cleaner designs work better for most.
Like with colors, stick to a few font choices. Three to five is more than enough. Too many is confusing, distracting and not pleasing to the eye.
Also, If you ever wondered why Helvetica and other san serif fonts are so popular with web designers today, it’s because serifs, the finishing strokes on typefaces that look lovely in calligraphy, just don’t adapt well to smaller screen sizes. With mobile overtaking the desktop, and wearables growing in power and popularity, it’s more important than ever to design websites that look great on any size display.
Even today, text makes up most of the web, but photos, graphics, charts, and other imagery is incredibly important for transmitting information and creating an appealing and confidence-inspiring presence.
The text on your website illustrates your tonal choices as much as abstract elements like color. Copy should reflect the brand story and its level of formality, and all copy should be readable by the target audience. Business websites, particularly transactional ones, also need a strong focus on persuasive and compelling language.
User experience (UX) refers to the actual emotions felt when using a system. Unintuitive, malfunctioning, or simply unattractive websites leave users frustrated and their tasks unaccomplished, which is hardly a great experience.
Good UX extends to the entirety of the website’s usability and is affected by the information architecture, style, and other choices such as user interface (UI) design and navigation tools. When everything comes together, the whole should be greater than the sum of its parts, resulting in an experience that is gratifying and productive for the user.
Even mostly passive websites require some degree of interaction. A simple gallery still needs a way to move to the next slide. The affordances that enable functionality on a website fall under the heading of UI design.
The primary goal of all good UI is the development of processes and controls that are easy to learn, easy to use, and highly efficient. Never require two clicks to perform an action when one will do.
One of the major components of a UI on a website is the navigation system, of which there are three principal types:
- Main: User-centric, located prominently, usually at the top of the page, and provides access to the major areas of the site.
- Service: Provides back-end access for logins, registrations, and searches.
- Footer: Optional duplication of main navigation at the bottom of the page and also a common location for privacy statement, terms of service, and other legal compliance links.
Step 4: Solid Builds
There are two major layers to every website, the front and back-ends. The front-end, also called the presentation layer, is what the users see and interact with, such as the text, images, forms, buttons, etc. The back-end, also called the data access layer, refers to the unseen systems supporting the front-end, such as databases and administrative tools.
Fast and Responsive Front-end
Secure and Reliable Back-end
Like the engine under the hood of a car, the data access layer of a website isn’t seen directly, but its functioning makes everything else work. Users are notoriously unshy about abandoning a website that takes too long to load or return a result to them. According to many reports, you have about three seconds before a web visitor will give up and try another site.
A properly coded back-end keeps things running smoothly, but it’s also important in avoiding security breaches, losses of data, and other costly mishaps that diminish trust and tarnish brand images. All back-end systems should include reliable backup solutions and flexible database administration tools, and they should be highly scalable and able to grow with the website.
Third Party Apps and Integrations
In the hyper connected cloud, services from a variety of platforms can share information and work together. Whether it’s as simple as linking Google Maps to a website to use its location data or adding social media interaction to a blog, there are countless ways to augment a website on both the front and back-ends, including:
- Eventbrite: Event Registration
- Hubspot: Content Management System
- Salesforce: Customer Relationship Management
- Google Analytics: Web Traffic Monitor
- Mailchimp: Email Marketing
The World Wide Web Consortium (W3C) maintains a set of standards for HTML and CSS coding. W3C compliance doesn’t guarantee flawless functioning, but it’s still considered a best practice. Compliant sites are more likely to render properly on a variety of web browsers, and they are formatted to be accurately scanned by search engines, improving ranking results.
One area of web development that is growing in importance is improving access for people with disabilities that might otherwise prevent them from fully utilizing a website. For example, properly tagging all images is not only a smart SEO practice, it enables users with vision impairments to use text-to-speech software to hear a complete description of the page’s contents. Color blindness can be accommodated by including navigational cues that don’t rely on a particular hue, such as underlining all links.
Large, easy to click buttons are generally considered a good choice for drawing attention to calls to action, but they have the added benefit of making life easier for people who have difficulty controlling a mouse with precision. Video content is incredibly popular on the web today and adding closed captioning allows people with hearing impairments to get full use out of them. Adapting a website for maximum accessibility broadens its reach, aids user retention, and can be done without limiting usability for the average visitor.
Virtually every site today has a use for landing pages. These focused, single purpose pages are tied to specific offers, which can be everything from requesting user information to selling a product or service.
Landing pages are conversion points on a website and should be tuned to match the brand tone. Hard selling works in some industries, but others require a more relaxed dialogue. All calls to action should be short, clear, and direct people to the next step in the conversion funnel.
Before a finished website is launched, it undergoes a full audit of all functionality. Users test the system, broken links and 404 ‘not found’ errors are fixed, and a variety of minor tweaks and changes are made to ensure that everything is fully operational and ready to go live.
Step 5: All-Encompassing Analytics
Just like a business or a campaign, a website has key performance indicators (KPI). These metrics will vary for every site, but commonly they examine quantitative data like traffic and user behavior statistics. They should also include qualitative measures such as reported satisfaction levels and other forms of user feedback.
Google Analytics and other services that monitor and report web traffic can tell you more than just how many people are visiting your site. They can also tell you how many of them are unique individuals, where they come from in the world, and what they clicked on or searched for that brought them to you. Collecting and processing that data reveals business intelligence for appealing to your target market, improving traffic flows, and directing attention to desired areas of the site.
Just like digital advertisements have their click-through rates (CTR) measured, the many links on a website reveal who is clicking them and what proportion of all visitors they represent. Clicking often occurs at the top of a conversion funnel and understanding click behavior helps optimize that crucial early interaction.
Also called the exit rate, the percentage of users that visit your website and then immediately leave, is called the bounce rate. Failing to move visitors deeper into the site — or just getting them to browse the first page they see — can indicate poor website performance. Some websites thrive on ephemeral visitors, but most aim for low bounce rates and traffic that stays a while.
Whether its generating leads or making sales, any time you present a call to action and request the user do something, you affect your conversion rate. If they abandon a shopping cart or leave a form half filled your conversion rate drops. Detecting a low conversion rates signals the need to better optimize customer service and marketing communications.
With search engines driving the majority of traffic to websites, researching the keywords being used to find your site is a fundamental SEO practice. Keyword competition is fierce, so unless you are devoting massive resources to bidding on major terms, the best bet is to find several niche areas to focus on.
Good keywords are closely related to your subject area and not overly competitive. However, they should still have a substantial number of searches associated with them. Determining the keywords moving traffic to your site can help you find related terms to stake your claim on. Incorporate them liberally into your site to improve incoming traffic.
Step 6: High Performance Optimization
Once a site is designed and built, launched online, and receives traffic to analyze, you can start poring over that data for areas to improve.
Also called split-run or bucket testing, A/B tests are controlled experiments where two alternative design choices are compared. For example, conventional wisdom holds that calls to action should be placed above the fold to achieve the highest click-through rate, but for some brands users need a little more convincing before they are willing to take the next step. A/B testing CTA placement can quickly reveal which option is superior for a given website.
Search Engine Audit
SEO should be built into a website from the start, but it’s an ongoing process that requires regular audits to ensure the practices being employed are effective. It also demands frequent changes and updates to stay in line with the ever changing algorithms of Google and other search engine providers. A thorough SEO audit should reveal areas to improve, such as:
- Broken Links
- Duplicate Meta Descriptions and Titles
- Invalid HTML
- Error Pages
- Overall Site Speed
Decreasing Load Times
All the planning in the world won’t find every file and process that can slow down website loading times. Once a site is fully launched, you will need to continue monitoring the areas where optimization can help. Swapping out very large files with smaller more compressed ones (when practical) and tuning the front and back-ends to reduce the number of requests needed for a page to load can drastically improve a sluggish, frustrating user experience.
If that doesn’t do the trick, there are other ways to speed things up. Websites with global audiences can benefit from a content delivery network, a chain of proxy servers with duplicates of all your content that are located in distant geographic regions. When a user requests your content, the closest and fastest server automatically serves it up.
When users visit your site repeatedly, their experience can be improved by intelligent caching, temporarily storing content they previously loaded on intermediary servers so that all subsequent requests can be delivered faster. Doing so decreases network costs by moving oft-used content closer to the user and improves perceived and actual responsiveness of the website.
Commercial websites have to answer to numerous stakeholders in equal share. The finished product must satisfy the sometimes competing goals of marketing, branding, visual design, and usability.
It’s a challenge, but one that can be met when you combine proper planning and research with talented, attentive designers and proven technical experts that are all backed up by a forward-thinking maintenance plan.
Choose a partner that can help you make the right choices, stay on top of the latest industry trends, and build a best in class website that is as impressive to behold as it is to use.
If you are thinking about building or refreshing your online presence, take a look at our Digital Experience services today.