Like any major marketing project, a website build can take many shapes and sizes—it can take the form of simple and strategic updates, or it can expand to a months-long endeavor. But the perils of a website build are fraught with potential pitfalls—most of which are avoidable through proper planning and forethought.
Here are a few of the most common mistakes.
The first thing one should always do before building a new site or redesigning an existing one is determine the goals of the site. Identifying the goals is critical to the success of the entire project. Clear, concise and mutually understood goals will be the building blocks of every step of the build. Questions you should be asking are—"Who is going to use the site?" "What will users do on the site?" "What is the purpose of the site?" Additional questions to consider for a redesign may include—"Does the site communicate its message well?" and "What is currently working on the website, what can be improved and what doesn’t work at all?"
After the goals for the site have been established, outline the expected timeline, conditions and scope. The scope outlines what exactly is going to be built for your company or organization and what will not. Identifying scope properly will help manage expectations and keep all invested parties from adding in new features or having to do extra work outside of what was initially promised.
A sitemap and wireframe are important parts of the web-build process. They are the schematics to how all the pieces of the site are connected. A sitemap can be considered a list of pages in the website—they are hierarchical, intended to help both humans and search engines navigate the site. Sitemaps are also important in the build process, as they give the designers, developers and strategists a clear picture of how the content on the site will be organized.
The wireframe is the structural plan for the website. Wireframes are important, because they show how information and functionality will be laid out on pages. This aids the designer and developer in creating things such as navigation and interface. It helps the team understand general, visual layout and determine what features a site will require building. Wireframes are also useful, because they can impel feedback from all stakeholders, ironing concerns out before the design and development processes have already begun.
The content of the website is king. The content is what will capture your users' attentions, and content is what will get your user to perform a desired action. Content has to do not only with quality, but also how well it is presented. A website that is built around high-quality information will trump an eye-catching, but low quality, info-based website. Designing around content is important, because it allows the designer keep the general layout and character of the website consistent throughout. Content-driven design allows the design to be optimized around the copy and visual content, often preventing the need to redesign or rewrite content because the content doesn’t play well with the design. Designing in a content-driven manner allows for a more focused design, mindfulness of the target audience and visuals built to match the content. Everything is designed around getting your users where they need to go, instead of determining it after the fact.
Responsive design is a requirement of modern websites. The majority of web traffic happens on mobile devices, and that number will only continue to rise. You have to design with a small screen size in mind. If the content can be conveyed easily on a small screen size, it can easily be translated to a larger screen. Designing for mobile removes any unnecessary functionality or visuals, making sure that the content displayed is what the user truly wants to know.
To design more responsively, try using a grid system. Consistent grid lines help keep the content intact. We suggest a 12-column grid, as 12 is divisible by many numbers and allows for a lot of flexibility in design as screen sizes change. Also, be sure to think about navigation design on mobile. You will want to provide the user with the simplest paths without any distractions. Choose a handful of core links that deliver the users to their desired answers.
Mobile-first does not mean the website has to look the same on every screen size. Hidden navigation, such as a hamburger menu, increases the time it takes a user to discover their desired content, so be mindful of that. Developers and designers should work together to determine how best to get users to the content they want in an efficient manner.
The last step before launching is testing. The first order of business is careful proofreading of content and checking for consistency in the design and how the site was developed. Make sure that all the colors, spacing, fonts, images, logos and content match the design and function correctly. Next, test your site in different browsers and devices. Each supports different features, so checking for variations on alternate platforms is important.
Optimization is also important. Make sure your images are responsive and optimized for slower networks. A slow connection could render your site unusable if the visual elements fail to appear. Be sure to test every single part of the site that requires a user to enter data—and that all data is going where it needs to go. Make sure those marketing emails, webforms and checkouts actually process the data correctly. Check all the links on the site, and be sure to set up an SSL. Lastly, optimize your SEO. Use proper semantic structure in your site's code, and use best practices to make search engines work for you. Ensure all the meta tags follow best practices, and proper keywords are used to describe the page(s).
Most importantly of all, outfit yourself with a development team with a great degree of skill in both planning web builds and executing them. Epicosity can help with that.