How to build a successful new website – Part 2: Development & Delivery

In part 2 of our guide, we look at how to develop and deliver a website that meets and exceeds your audience’s expectations. 

Be sure to check our first instalment on the importance of planning in the creation of a successful website.

If you read part 1, you’re already on top of the planning and know exactly who your new website users are and what they want to do. That’s great. Now to build it!

Design, which we mentioned in our first instalment, is the bridge between prototyping and development. It’s also the outward expression of both these disciplines – done well or otherwise. Taking your user experience (UX) and information architecture (IA) refinements forward, design will encompass much of what your users see and experience through creation of simple and engaging user interfaces (UIs).

However, it will fall to your developer to translate the approved designs into style sheets, templates and functionality that are performant across an array of devices, browsers and operating systems. Get this wrong and the risks are high. 

Having a note-perfect, visually striking website with an average page-load speed of 30 seconds is not a good first impression to make. Struggling to load a contact form properly on your mobile for the third time? That user is not coming back.  

The transition from design to development is a baton change that works most smoothly when your developer has been involved in the design process. Getting the designs right is as much about identifying the appropriate technical solution as realising the visuals in code.

You may not have had much contact with your development team up and to this point but with an end-to-end provider the devs will have been involved behind the scenes.

In fact, way back during scoping your developer will have been looking at where data lives in your current set-up and where it needs to go, if anywhere, on the new website. As findings emerge, these guide a technical outline before going on to inform the full solution, including its architecture, functionality, features and relative cost benefit.

If you are planning to send or receive information between different systems, it can be helpful to create an entity map. This schematic illustration will show the flow of data between separate applications and how and where it is displayed, edited and stored. 

Perhaps you have a booking form that needs to populate data in a customer relations manager (CRM) application or a registration form that adds users to a mailing list? Maybe your website needs to display information pulled from an internal database or update data dynamically in the other direction?

Happily, today’s website content management systems (CMS) and most back-office applications make data interoperable through the use of web services. If you have information in one system and you want to pass it somewhere else, it’s eminently doable. The challenge can be implementing this in a secure and resilient way – which is why having competent developers involved from the beginning of the project is essential.

Some developers specialise in one particular product or technology while others – like OWA – will recommend a content management system, platform or bespoke solution once the scoping and requirements are clearer. Approaching a brief with an open mind acknowledges that one size doesn’t fit all. 

Many current CMS – used to manage content-rich websites, big and small – are open source, including big hitters WordPress, Drupal, Joomla and Umbraco. Open source means you benefit from a development community working to share, innovate and improve the source code, and your budget can be focused exclusively on design and build. 

The alternative is a more traditional model involving a paid proprietary license and a long-term development partner – still a good fit for some organisations, particularly those at enterprise level. 

Ultimately, open source tends to offer greater flexibility. If you want to change developer in the future, there will likely be a wider choice of suppliers than a search for partners working only with a given piece of proprietary software. You are also less likely to be locked in to a lengthy contract and service level agreement (SLA). 

All that said, a lot will depend on whether your current systems need to speak to your new website. If this is so, the programming language or framework the existing platform uses may steer your choice – commonly this is PHP or .NET.   

In this guide we have managed to avoid a full housebuilding analogy… until now.

If website design is the exterior and interior appearance of your home and its layout, then development concerns how the house is built, the construction materials and whether the utilities work efficiently. 

There are three additional aspects to our creaking metaphor: the land the foundations are built on, how the home is secured and weatherproofed, and responsibility for its upkeep.

These considerations are easily brushed aside during the energy of the project planning stages but ignore technical and budget provision for them at your peril. Identifying the right hosting set-up, security protocols and ongoing support is absolutely critical to the success of any website and requires the same level of thought as the design and technical solution. By the time you are into the build, these items need to be very clear. 

Development itself can take different forms, depending on whether you are working in an agile way. Which ever route is chosen, be ready to test, break, report and test to within an inch of your life once the system is released in staging. This process of user acceptance testing (UAT) is there to catch bugs and banana skins, gremlins and gotchas. It follows detailed quality assurance (QA) testing by the development team and may go through a couple of cycles to ensure what goes live is absolutely match-fit.

The big day has arrived. Your developer has made the necessary name server (DNS) changes and your site is in the process of going live. Congratulations! The hard work is just beginning.

For a website to be successful it needs to serve its users well and meet their needs. Since this has underpinned your thinking throughout – and been tested and validated during prototyping – it should be inherent in the site’s design, UX and functionality. Now you need to prove it. 

An organisation’s ambitions for its website will often be part of a wider strategy or set of goals, which can be mapped to a mix of measurable actions or outcomes. For example, awareness and engagement may be critical for a charity but transactions more so for an eCommerce business. What are insightful ways of measuring these, and how about those users who begin but don’t complete a desired set of actions for each? 

There are a host of tools and services to assist with capturing this level of detail. Typically, you will test and iterate against certain results making small incremental changes to your website to improve or finesse outcomes. Or perhaps you will change what you’re measuring based on the results. In this sense, a truly successful website is one that continues to grow and evolve in response to these findings – one that is never ‘finished’. 

Coming out of these learnings may be all sorts of initiatives – a content strategy encompassing content creation, organic SEO and social activity or perhaps a marketing drive, including campaigns and pay per click (PPC) Google Ads. Offline events to raise profile and boost positioning within a given sector may be added. The possibilities are numerous, inspiring and always alive with potential. 

We hope you’ve found our guide to creating a successful website useful – it’s not exhaustive but it gives a flavour of some of the key considerations. If you have a project you’d like to discuss or an idea to chat over, please feel free to get in touch – we’d be delighted to help.

A brief list of (mostly free) tools and resources follows – and don’t forget to read our part 1 Planning a successful website if you haven’t already done so. 

Planning and project management 

• Trello – Team boards and lists 
• Google Sheets – Collaborative spreadsheets
• Slack – Messaging and community

Design and prototyping 

• Balsamiq – Wireframing tool
• Affinity Designer – Graphic design tool (£) 
• Adobe XD – Prototyping platform

SEO and content 

• Screaming Frog – SEO website crawler 
• Ubersuggest – Keyword suggestions
• Hemingway – Readability app

Developer

• Pagespeed Insights – Page-speed tester
• Lighthouse – Website auditor
• SortSite – Website testing 
• Funkify – Disability simulator

Analytics

• Google Analytics – Web user insights
• Search Console – Site search traffic 
• Keyword Planner – Search keywords