Construction site: working with web developers
- Ruby Blessing
- 4 July 2008
Photo credit: Getty Images
Put your hardhat on. You have a great digital agency, the team is fully briefed and everyone has agreed on the strategy. Now for the hard work: building the site and realising your vision.
No matter what the scope of your website, there are some distinct phases you will go through before you go live.
You’ve already outlined your requirements and briefed your web developer, now you need to embark on several core tasks: define the architecture and design of the site, clarify the functionality and make some major technology decisions. And you will be at the pointy end of all those decisions.
Throughout the development, you will need to give feedback to your web developer; approve structure, prototypes and some pretty boring technical documents; supply or write content; give direction in search engine optimisation (SEO) keywords and, of course, stay calm. Much like having a baby, conception is the easy part.
Step 1
Architecture: more than blueprints
Based on your brief, your web developer will start defining your website, creating a prototype and commencing design. The goal at this stage is to clearly define the site’s structure, content and functionality. This phase should include a search engine optimisation strategy, as this will impact on the overall navigation and content.
A website’s structure is defined through the information architecture. This comprises a site map, wireframes and some supporting documentation. The information architecture is more than a blueprint; it defines the virtual space in which the visitor will interact with your brand and your business. The site’s information architecture, design and functionality create the user experience. And getting the user experience right is the most important aspect of any web development.
Creating clear information pathways will help potential customers find what they need. If you’re building an ecommerce site, this will more efficiently direct customers to your products and make it easy for them to start spending.
Step 2
Creating the site map
The site map clarifies the information hierarchy and navigation. Site users should be able to access the most important content areas through the global navigation: navigation tabs that can be seen from every page on the website.
Less vital information can be made available through secondary navigation, which sits below each of the global navigation content sections.
Step 3
Wireframes
Wireframes are created from the approved site map. They are a way to visualise the navigation, features and functions of the site. It helps to think of wireframes as the architectural drawings of your website. They can range from a simple grid to extremely complex diagrams. For a smaller site, most pages will need to be wireframed. For larger sites (developed on a content management system), all page templates and processes would generally be wireframed, depending of course on your budget.
The wireframes are a guide to let the designer and programmers know what is being built. Your designer’s final interpretation may look completely different, as long as the elements are still all there. This is definitely a good thing, as wireframes can be pretty ugly!
Step 4
Supporting documentation
As well as the site map and wireframes, your developer should produce a functional requirements or technical specification document, or both, clearly outlining the intended functionality. Make sure you read and understand all the defining documents before approving this phase.
If you don’t understand what’s in these documents, ask questions until you do. Your web developer should know that it is far easier to answer questions and get the definitions right than to change anything past this stage.
Step 5
Design: form follows function
Imagine your architect has taken the time to get the floor plan of your new home just right: function and flow are perfect, living areas are flooded with light and the building is cleverly placed to take advantage of the morning sun and afternoon breezes. But the house is to be built in concrete blocks with small, ugly windows and purple fibro walls. The house might work internally, but only if you close your eyes and try not to breathe.
The way it should work is the visual elements that a good architect articulates in the design unite to make it beautiful, inviting and ultimately a home.
Your website is no different. The look and feel should engage the visitor, emotionally connecting them beyond the functionality. This doesn’t mean you should embellish the site with lots of colourful buttons, flashing banners or massive images. In my experience less is always more.
Your web designer creates the layout and sets the style, visualising page elements such as navigation, fonts, colour palette, buttons and forms, and makes sure they are all consistent and complimentary. All these elements are eventually implemented as code, such as cascading style sheets to define the visual styles and layout. It is important that the designer defines the styles and you approve them now, rather than having a programmer update them later in a hurry to meet the deadline. This would be like having an interior designer decorate your home, then having the electrician choose the cushions and curtains.
Step 6
Don’t panic, we’re experts
The build phase implements the architecture and design into a working website. From now on, things are less hands-on from your point of view, but they may get a little disjointed. Like most building sites, a lot will happen simultaneously, but it will often seem like nothing is happening at all.
Firstly, the designs are implemented into cascading style sheet-defined pages or templates. A basic site development might consist of a number of pages created in a combination of cascading style sheets and other scripting languages, and this becomes a construction exercise to complete. Sites based on a content management system are much more complicated. The designer needs to build the visual interface and set up a database to contain the content that is added, stored and edited in the future. Finally, the designer needs to implement code to deliver this content to the user through page templates. And don’t forget the shopping cart and ecommerce will all be hooked up to the content management system as well. Phew!
I have been involved in building more than 300 websites – major and minor – and there is a point on every single one where chaos takes over. You may see the site in development when pages are not loading as they should, the approved design is nowhere to be found and error messages abound.
Don’t panic. Think back to house building. Two-thirds of the way in, the construction site is a pit, wires are hanging from every ceiling and the plumbing is exposed. We are at this point of your website’s construction.
Then you will check into the site one morning and almost overnight it will all have come together to look like the website you imagined from the start. And guess what? It’s time for you to step in again.
Step 7
Testing, testing
You will need to be available again to assist in the quality assurance and testing phase, and to start adding the content to your nearly completed site. By this stage, you should have assembled, written and search engine optimised all the content.
At the same time, you will be implementing internal business systems to manage the communication your website will generate. Ensure you collect all leads, attend to feedback and enquiry forms within 48 hours, and fulfil your orders.
Once you have finished uploading the content and testing the site, the site will be sent live in a soft launch. This means the site will be live to the internet, but without any promotion – unless people know it’s there, they’re not likely to come across it. That way you can continue to tweak any loose ends or upload additional content. Try waiting at least two weeks before telling the world about your website. Use this time to get to grips with the realities of the web and the fickleness of technology.
Step 8
Don’t run from commitment
Finally, your web developer will teach you how to manage and update your website content using the content management system. This won’t happen overnight and is the last and hardest part of your website build.
An effective online strategy requires long-term commitment to constantly improve the site in response to customer needs, feedback and your business goals. It takes commitment to adapt what you’ve learned from the SEO strategy and site traffic analytics, and to implement additional technology to evolve the user experience.
It’s a commitment not to be taken lightly, and it’s well worth the effort.
Jargon translator
Site map: a simple text or diagrammatic representation of the site’s information structure.
Wireframes: a visual illustration or blueprint of a web page that identifies all the features on a page. Most sites will require at least seven to 10 wireframes; many require up to 80.
Functional requirements or functional specification documents: most sites should have the functionality required on each page outlined in a document so all elements are clearly defined.
Technical specification document: defines the technical requirements of a site, including the technology platform, hosting setup, database and programming requirements.
Content plan: outlines the copy, imagery and other media required and should always be mapped to your search engine opitmisation strategy. The content plan should also determine how to repurpose any existing content.
Cascading style sheets (CSS): a language for defining the style of the content on a web page. CSS are used to instruct your web browser how to render text, colours, fonts, layout and other aspects of presentation, making the site more consistent, professional and user-friendly.
Template: a prototype web page that forms the basis of a number of pages on the site. A website of hundreds of pages may be built from just a few templates.
Web host: your web hosting service provides a number of computers or servers where it stores (hosts) your website, then delivers it to the internet.
Programming, coding or scripting: any language that can be interpreted or executed by a web browser or a web server. Examples include ASP, HTML, Perl, PHP and XML.







