Sitemap and Wireframe Creation

The planning stage is another important step because it sets the milestones and timelines for the entire website project. At this stage of the cycle, the initial data is created that can give the client an opportunity to see how the entire site will look like. The goal is to create a blueprint of the client’s new website, including figuring out what the client wants the new website to do and then planning the structure of the website in order to meet those goals.

In the first part of this phase, the sitemap is created. The sitemap is a categorization of pages, like a table of contents, outlining what pages relate to which content on the website. In other words, it’s a list of all the pages on the website organized in hierarchical fashion. The sitemap should describe the relations between the areas of your website. This will help the client understand the usability of the final product, including the relationship between the different pages of a website. The client will be able to further determine how easy it will be for the end-user to find the required information or service when starting from the home page. The main goal behind a sitemap is to build a user-friendly and easy to navigate website.

Once the sitemap is finalized, and before any coding work has begun, or even any work on a color scheme or design, a wireframe should be created. A wireframe, or page schematic, is a visual representation of the user interface that you’re going to create, and breakdown of what content will appear on each page. The wireframe shows the arrangement of the website’s content but doesn’t yet contain any design elements such as colors, images, textures, graphics, logos, etc. The wireframe includes interactive and navigational elements and how they work together. Generally, development of the wireframe starts with the home page, then moving on to main internal landing pages on the website. This is basically the crude first pass of how a webpage may appear on the website.

Page Layouts, Review, and Approval Cycle

With the information in the Planning stage set, the initial page layout and visual design cycle begins. This is where the website starts to really take shape. The visual content, such as the color theme, type of font(s) and font sizes, and images/photos are created and is organized in this step.

In this phase, designers should create a demo installation, so that the client may view and interact with the web pages as they are being developed. Page layouts are crucial and the primary function of the layout is to represent the visual and information structure of the content so the end-user remains engaged.

The client is typically more involved at this stage, which is very much encouraged, in order to look over the initial designs and provide feedback or request changes. There are usually several versions of the page layout before the final version is set. This is normal since page elements can be effective in many forms. It comes down to the client’s comfort level with the end product and how each page would be seen by the end user.

Upon completion of the design phase, the client’s website should more or less be a rough sketch of what the website will ultimately look like.

Writing and Assembly

The website is only as good as its content. Appealing design is important, and what usually hooks the end-user, but good content keeps them coming back for more.

Relevant and reliable content will increase the presence and usability of the client’s website. While content is usually added after the design stage, it’s a good idea to have most of the content ready to be added during the Design phase. Content will typically be revised several times, but there should at least be something to put on the site to give it some perspective.

The client plays a critical role in the content stage. Content should be focused, informative, interesting, and useful. Otherwise, you risk losing the end-user, no matter how “pretty” the site.

The timeline for this phase varies greatly depending on the number of pages and the amount of content on those pages. The client must be prompt with providing the content for the site, especially since certain sections may go through several drafts or complete overhauls before launch.

Content creation and assembling usually overlaps with other stages of website creation, specifically the Design phase. Content writing also involves creation of catching headlines, calls-to-action, text editing, writing new text, and other minor tweaks to the layout of these text sections, which takes time and effort. Most times, the client is responsible for providing website content ready to migrate to the website. It is advisable to have a majority of the copy completed during the planning and design stage.

Page Assembly, Special Features, Navigation, SEO

With the sitemap, wireframe, and design largely approved by the client, it’s time to refine the design of the pages, update and develop new content, and create slideshows/videos and other media that will appear on the website. This stage also involves coding for requested elements and special features on the site, as well as validation, and cross-platform and browser testing.

Graphic design elements and any other visual elements that have been designed during the previous stages should be used to create the first draft of the website. The home page is generally created first, and then sub-pages are added, according to the website hierarchy which was created in the sitemap. If the site has a blog, the format and functionality is usually decided at this point as well.

The framework and/or a content management system (CMS) should be decided and implemented to make sure that web-host server can handle the installation and set-up smoothly. We highly recommend the use of WordPress for most installations but based on the client’s needs, another CMS (such as Drupal, Joomla, Weebly), can be utilized.

Most web page elements that were designed during the Design and Content phases should be created, reviewed, and tested. Special features and interactivity should be added at this point as well.

Site “plugins” are added at this stage as well, if needed. Plugins extend and expand the functionality of the website, such as search engine optimization, social media, site performance, and many other functions. Most special features can be built into a website using a plugin and often speed up development of the website since most features that may need to be added can be covered by installing and configuring a plugin. The use of plugins will be discussed during the initial stages of development.

An important step during this stage is Search Engine Optimization (SEO). All major search engines (Google, Bing and Yahoo) have primary search results, where web pages and other content are ranked and displayed based on what the search engine considers most relevant to users. Optimization of website elements (page title, description, keywords) can help your site achieve higher rankings with search engines. Valid code is pretty important for SEO, so this is a crucial phase to make sure that this has been set properly.

This is also a good time for a full website review. All pages should be reviewed—everything from the Home page to the Contact page submission confirmation page—to ensure that everything is in working order and any additional visual or functional elements can be added or adjusted.

Testing, Review and Launch

Testing is a routine part of the entire website design process, but this is the time to step up the process to work out any bugs or formatting issues. All links should be tested to make sure that they all have a valid destination. Page names or destinations may change during the design process so it’s important that there are no broken links by the time the website is launched. Pages and forms should be checked for spelling errors.

All coding should be checked to make sure that it conforms to current acceptable web standards. Valid code is crucial, especially when considering cross-browser compatibility. What works and looks good on one browser or device may not appear properly on another. This is a more time-consuming process that other stages, but it’s very important that the site looks the same or as close as possible on all browsers and devices.

Web based applications need intensive and continuous testing, as external factors may influence and impact the functionality and operability of the site. Graphics, images, and slideshows should also be tested to calculate their loading time, as they are very important for any web site.

A final set of tests should be run to be sure that everything is functional and properly connected. This also requires final polishing of design elements, deep testing of interactivity and special features, and consideration of the user experience. As soon as the website has been thoroughly tested, reviewed, and approved by the client, it’s time to launch the website. This is when the website will be “live” and viewable by the world.

Once you launch the site, it should be closely monitored to adjust accordingly. Here, you can identify parts of the website that could be improved in small ways. This is also your chance to get feedback from colleagues and trusted peers to make final tweaks to the website. The length of this testing period can vary depending on the depth of functionality.

The launch process may consist of simply allowing the end-user to view your site once they click on your domain name or URL, but, if the new website has a new domain name or different URL than the existing website, there should be some consideration for the time it may take for the site to propagate across the internet. Domain or DNS changes can sometimes take up to 48 hours to propagate across the entire internet.

Occasionally, issues come up. This can happen no matter how much testing is done on the site pre-launch. For this reason, a point person should always be designated in the client’s organization to be available for any last-minute questions and consultation if changes are needed.

Keep Your Site Functioning Properly

Esquire Tech provides website maintenance and will monitor your website’s overall health, performance, and security. If your website isn’t functioning properly or is out of date, you may lose out on significant business opportunities, such as new customers and sales. We help with all critical maintenance tasks, including security updates, backup and recovery of site data, bug fixes, mobile responsiveness, performance and analytics tracking, SEO optimization, user experience updates, content updates, social media integration, and legal compliance.

If you go too long without regular website maintenance, your site (and business!) will suffer. Your website will run slow, stop converting leads, potentially be infiltrated with malware or get hacked, thereby causing problems for those who visit your site. At that point, it’ll likely stop working altogether.

In addition to website maintenance, Esquire Tech can assist with ensuring that your domain name, SSL certificate, and website hosting package are up to date and renewed when required.