Evaluating the time needed to build a website is often under-estimated.
The estimation process itself, is often under estimated.
It may be possible to simply 'code up' a graphic design in a couple days, but how much more is there behind the scenes that should also be done?
Visually, quickly built websites can masquerade as their more dominant cousins, so what is it that differentiates them?
Answer: Setting goals, meticulous planning and careful evaluation of requirements.
Being Old School, I find it difficult, when shown a couple snap shot images, to quote on the spot: there is often so much more to it. Sure, I could give them something the next day, but would that be a quality product or would it fail to perform?
When a new website replaces an old, often any prior achievements are discarded and growth starts from scratch - this shouldn't be the case. Reuse Reclaim Recycle
When costing a website, what should I evaluate?
The following checklist might not be viable for companies that churn out budget websites as this level of planning could take longer than the whole allocated timescale. However, if you are a company that takes it's online presence very seriously, it maybe worth quizzing your web development company about their procedures.
The checks below should take place before a Graphic designer or a Web developer start. For major clientele, that are social media active or sell online, this checklist can take several days to complete. I've worked on projects where this early stage has taken months to get signed off and agreed.
Some customers will not allow full access to their server at the quote stage so answers to many of the following questions will have to be judgement calls based upon experience.
Website Quote Checklist & Pre Development Procedure
Old website (Hosting & Access Checklist)
- Get ftp access to current site
- Get hosting details
- Is email server on same host?
- Get mySql access if possible
- Take a back-up of current ‘old’ site (if possible), including remote files, fonts, scripts, favicons etc.
- From the generated font list, check them against font licenses, company brand guidelines etc.
- Get pingback links
- Get current admins / logins
- Does site have licensed plugins, json links?
- What plugin's does the old site have and when were they last updated - it could be they are no longer compatible with the latest CMS platforms.
- Does site auto posts to other sites e.g. ebay, rightmove etc
- Does the old site have an error_log file? If errors are present, what has caused them?
- Are all files listed on the same server
- Record all Server login details somewhere secure (e.g. Keeper, Lastpass etc)
- Get all current oAuth api keys, usernames etc.
- If the current site is in Wordpress or similar CMS perform a site export.
- Get google map api codes
- Get current robots.txt
Graphic Design Checklist
Remember, graphic design is not the first stage of designing a website.
Before graphic design begins, arm yourself with as much info, functional requirements and objectives as possible. For conceptual advice, involve the designer early, supplying basic layouts, brand guidelines and content. Bare in mind graphic design affects page load time, responsiveness, click through and conversion rates. Only once functionality, content and dimensions etc have been solidified, can graphic design begin in earnest. Starting graphic design too early can kill a website's SEO chances; even before a single line of code or word of content is written.
During any build, the scope can creep; tweaks are made, leaving the final look distorted and weak. Therefore, when designs are pre-supplied, such as in white-label work, build extra graphic design time into the quote.
It is important to understand that the requirements of a website are completely different to those of printed media such as magazines or billboards. With magazines, quality full page images sell and the decision to read is either habit or through prior & careful browsing in a newsagent. However, with websites, a visitor could land on your site after a 2 second Google search. That visitor needs to be reassured they're on the right site without having to scroll, click the mouse or flick to another page.
Pick a graphic designer that has a wide portfolio and ask to see analytics and requirement specs for the sites they've done. If many of the sites in their portfolio are similar, they probably aren't used to following brand guidelines and are unfamiliar with the needs of different markets. Search on Google for what you think their sites should rank for and note the position.
Ask to see how your site will look on different devices, as branding and careful page layout across many devices is vital.
Picking a graphic designer and a workable design, is a slow costly process that needs to be factored in.
- Does the new site's graphic designer have any experience of websites or are they more print orientated - if this is their first website - walk away, or double the timescales.
Search Engine Optimisation (SEO)
What's the point of a website if it can't be found?
Words and pictures still rule the SEO roost, but if the code and graphic design aren't solid, you're going to loose any advantage over the competition. Don't ignore the content from the old website or indeed any previous SEO work. Instead, where possible, make what was there easier to read, faster to load and gentler on the eye. Make content easier to share and shout about on social media.
If your web development company has used a phrase similar to 'there maybe a dip in traffic whilst the new site sets in', then chances are they haven't done their homework properly.
- Get current SEO strategies and the names of those responsible.
- Scan the old site's root directory for search engine verification files such as Alexa, Bing, Google, Pinterest. (e.g. google9b5a5785678ghj1350.html, y_key_ab689689625d61c2ca.html) Copy these files to new server.
- Look in the old site's <head> structure for search engine verification codes / licenses.
e.g.<meta name="yandex-verfication" content="123456abc">
- Get the old site's google analytics <script> code from the old site. Place above closing </body> in new design.
- Scan the old site's Google analytics for currently scoring keywords, customer settings etc.
- Perform a site speed scan using either http://gtmetrix.com or http://www.webpagetest.org making a note of load speeds, server response times and functionality such as CDN, compression, etc.
- Is the ‘old’ site on a CDN? Are images / scripts served from the same server? Is something like cloudflare currently used?
- What sizes are the pages (in Kbytes)?
- What are the old sites page word counts, ignoring menu structures.
- Get current traffic levels
- Get current browsers, device usage stats
- Get the old site fan-base e.g. sex, age, location, mobile, daytime, evening, referral etc
- Site objectives, short and long term
- Does the old site have rss/ json / xml feeds incoming and outgoing?
- Does the old site have click-through structure?
- What is the old site's current ranking profile, popular keywords etc.
- Does the site have music playing? - If your not a casino or gaming site this can be very annoying.
- Does the old site have iframes, popups, flash, slow loading videos etc?
- Generate a list of potential target audiences
- Get all directory links - yell.com thomson etc - are the addresses on external sites correct?
The Importance of sitemap.xml
The site map is often much neglected and yet it is Googles invitation to view a website. Often pages are missing, it's years out of date, has private pages listed..... In short, it's useless.
Many sites don't even have one and I've seen several sites where the pages listed are for a completely different site - probably for the last website that developer built.
When you plan your new sitemap, design in a 'click through' structure, detailing any 'call to actions' each page should have. Tagging can play a huge part in cross-relating pages within the sitemap, but on whatever page a visitor end up on, make sure their is an obvious way back. e.g. breadcrumb or related article etc. Think of the sitemap as a funnel for visitors, carefully directing them to your goal.
Some sites are very content rich, with many high ranking articles. These articles are often poached or syndicated by other sites. When this happens; since Google's Panda update; those that get caught copying can have their sites excluded from results. The sitemap.xml file is used to establish a creation date. If this creation date changes during updates, in Panda's eyes, you can loose ownership of your own work.
Wordpress doesn't come with a sitemap.xml facility so add a plugin such as Yoast SEO or All in One SEO
If you have a massive page count - there's a strong chances you've got lots of manual work ahead. NB. Link extractors and some basic sitemap generators struggle over 10,000 pages.
- Export a sitemap of the old site using something like Link Sleuth. This can be used to get current page titles, image titles and links for generating a 403 redirect list. Link Sleuth will also find broken links and currently used email addresses.
- Get the old site's sitemap.xml and compare it to above.
- Make a note of the total number of pages, as for each you'll need to copy content, record dates, create re-directs and re-check it's replacement. If you sitemap has more than 50,000 pages then you'll have to split it up and create a sitemap index page.
- When was the sitemap last submitted to Google Webmaster Tools / Bing Webmaster Tools and is it possible to get a copy of those versions?
- For the new site, produce a new sitemap and re-direct list from above with a tool such as Lucid Sitemap Creator
- Is the sitemap.xml listed in the old site's robots.txt file?
- For each post and page in the old site's sitemap make a note of the creation date. Note these against their replacement in the new site.
Your web developer will need this information when coding starts. Your graphic designer will need dimensions, number of social profiles etc.
- Make a note of all social media links - facebook, google+, linkedin, twitter links etc.
- Is there functionality such as facebook commenting, sharing, liking etc?
- Get all youtube, vimeo links etc
- Get social media profiles and links, how they are used etc.
- Get current automatic social media posting methods e.g hootsuite etc
- Get current live messaging/chat services
Users and Logins
This is a great chance to improve your security. If you have a members only section, then familiarity is the key. If nothing is where a user expects it, chances are you're going to loose them. If they can't login because their login has been lost, you are back to square one. If passwords change, users should be redirected to a 'send me a new password' screen when they try to login.
- If current site is run by a CMS, take a note of all admins and subscribers username/passwords. If passwords are encrypted plan a system whereby on attempted logins, all users are prompted to enter a new password. - Captcha and maximum try protected.
- Are any directories protected by .htpasswd? If so who has access and for what purpose?
- Are there different levels of user access and what functionality does each level have?
- Who is going to update the site? What are their skill levels?
- Is CMS training to be included?
Importance of Responsive Web Design
You website must display well across all devices and resolutions. All the functions such as links and scroll bars must be actionable with keyboard, mouse, touchpad or thumb. All the text should be readable, images quick to load and forms easy to fill in.
If your site isn't mobile friendly, then it won't appear in search results on mobile devices - that could be 50% of your possible traffic excluded.
Why is Website Accessibility Important
The 2010 Equality Act and the previous 1995 Disability Discrimination Act (DDA) means there is a legal obligation for businesses and organisations to ensure all their services are available to everyone, regardless of ability. However, only a small percentage comply.
Check out the WAI accessibility guidelines or a WAI online checker
- Is the site to be responsive, printer friendly etc? Has it been cross-browser / device tested?
- Make notes of all the alt tags and captions for images etc on the old site.
- How does the old site fair when viewed on a phone in direct sunlight? This will help you understand the issues people with vision difficulties face.
- How much colour differentiation is there?
- Is text place over images or patterned backgrounds?
- Do page links have title tags? Are they helpful to those using text-readers?
- How close are buttons and clickable elements?
- Does the text scale? What is the minimum text size on the old site?
- For e-commerce sites or popular forums where user familiarity is key, ensure new site procedures and layout do not differ significantly from that users expect.
- Accessibility requirements e.g. are they a school, M.O.D., government etc? jquery / java / css restrictions. Are there hidden text-reader codes, scaled fonts etc?
- Does the ‘old’ site meet accessibility standards?
Some websites show Google Ads, whilst others are the target of ad campaigns. This needs to be planned and detailed before any graphic design happens. Adding adverts in a less than prominent position will prevent them from producing any revenue.
- Scan the current site for Google Ads, sponsored content etc.
- If Google Ads (or similar) are currently displayed on a site, in which dimension format are they displayed in? Where on the page (including above or below page fold)
Security & Backup
Protect your investment early!
Virtually every website I look at has major security flaws, so having a new website is a great chance to boost security and reduce the risk of downtime after an attack. If your site is constantly being attacked, is slowed by hackers, filled with comment spam etc. the chances of visitors returning and indeed it being indexed are minimal. Restoring a hacked site can be very expensive, often costing more than it did originally. If your site is large or vital to your business, take expert advice, as recovery maybe slow and hard fought. For Wordpress, consider plugins such as Wordfence and All in One Security and Firewall
- What are the current security settings and how do they compare with any new requirements
- Backup requirements - daily, monthly, full export or simple mysql backup
- Ask if the current host has any blocked I.P. addresses or blocking services installed (such as cloudflare). Copy any blocked i.p. addresses to new server. Scour the ‘old’ .htaccess file for blocked IP addresses.
- Get a security expert to look over the old site.
- Has the old site ever been hacked, subject to DOS attack, cloned etc?
- Get current .htaccess file - check for re-directs, blocked ip's, security settings etc
Open Graph and Schema.org Mark-up
- Get all schema.org / opengraph markup
- Where open graph meta data is used, make a note of this.
- Does the site match any schema.org markup e.g. Estate Agent, Recipe, etc.
- Is the customer aware of the advantages?
Don't throw functionality at a website for the sake of making it flashy. If the extra functionality isn't going to increase rankings, sales or contacts, ask yourself whether it is essential. Adding plugins because they look 'cool' can reduce security, weaken SEO, slow page load times and reduce cross device compatibility - not to mention making future updates a nightmare.
- Scour the ‘old’ site for functionality outside the replacements CMS's core functions.
- Is extra bespoke code to be generated on the new site? What does this code do?
- Is every standard page within the CMS to be coded or only those shown in what has been drawn? CMS's often have functionality that isn't required by every website e.g. comments, default widgets, tagging, author, images attached to pages etc. It maybe that default CMS pages need suppressing in the new site.
Caching and compression
Caching and compression helps the site to load faster, improving the visitor experience and increasing the number of devices on which pages load in a timely fashion.
- Are styles and scripts concatenated / compressed etc?
- Have image expiry tags been set in .htaccess?
- Have image and file expiries been set in the .htaccess file?
If I had a penny for every dead email or form on websites I've evaluated....
- Make a note of where forms are being sent, what emails are present on the site etc. What fields are present on the forms. How many forms are there? Do they all go to one email address? Is this email address on the same domain as the website?
- Use an email scraper (such as Link Sleuth) on the old site to extract all emails
- Don't rely on scrapers as many sites obfuscate email addresses to prevent spam. Email obfuscation isn't as popular as it once was as email addresses from the same domain as the website have SEO ranking advantages. With the number of email capable device growing exponentially, prominent clickable email links are considered by many as essential.
- Are all telephone links clickable? With Mobile browsing slowly taking over, one touch dialling is vital.
External links to the current site
It often amazes me that companies have new websites written yet do not bother to acknowledge any of the work done by their old site. Often, over 50% of visitors come from links from external sites, yet when the new site is uploaded those visitors land on an empty 404 page.
- Do external sites link to pdfs, images, pages etc stored on the site?
- Is the current site listed on forums, local directory indexes etc? Access to Google analytics will be helpful here. All these links will need identical urls in the new site or redirects creating.
- Are all the old site's url correctly formed and are they easy to remember? If your url are just a mass of random characters and white-space, then you've got your work cut out.
Online Store / Service list
Online stores are no small undertaking. I've worked on shop sites with over 60,000 products each with galleries, dynamically generated pdfs etc. It was only possible to enter 3 products per hour so a bespoke import script needed a few weeks of coding. With this scale of data entry it can be easy for standards to slip, so build in not just plenty of import time, but as much again to check everything from visible facts and prices, to hidden SEO factors. This can be highly labour intensive work involving photographers, marketers, stock controllers, developers, graphic designers, data entry specialists etc.
- Does the site link to any external system such as stock control, booking or document management etc
- Delivery / shipping methods and details
- What are sites' main services, product categories?
- Get product, services list
- Get online payment methods + vat / shipping included?
Not as popular as they once were, but if your audience is of a technical or corporate nature, you might be surprised just how popular they are. Since Google dropped it's RSS reader, many have said RSS is dead, yet now with the birth of RSS reader apps on mobile devices it usage has begun to stabilised again; even grow. Omitting the feed on the new site could deprive current customers of their daily email or news.
- What are the RSS feed addresses?
- What do the Feeds list? e.g. latest news, sale items etc.
For search engine visibility, careful planning of word content is vital. Simply cutting and pasting a few words isn't going to perform. Aim for 300-400 original words per page.
The word to remember is Balance. A picture may speak 1,000 words, but in Kbytes it could in fact be 50,000 words. Keep in mind your text/kByte ratio. KIS, with plenty of white-space.
Unfortunately, many websites are still generated from graphic designs that have very few words. Large hi-res imagery and fancy fonts are used to distract you from the fact they are useless in SEO terms.
By having a hugely graphic website, with very few words, in seo terms, it arguable that you are telling the web that there is no need for advertising as everybody already knows your name and what you do.
Very relevant, in context, quality imagery is great, whereas imagery purely for artistic styling needs strong justification. Blog sites and others like Pinterest do very well from intriguing imagery and associated tag lines, whereas full-screen, stock-shots will do you few favours.
For many sites, there are two types of visitors that you are trying to attract: Potential customers and those just hungry for knowledge. You may think there is no need to attract those just looking for answers, but often these people out-number potential customer many times over and it maybe with the use of a basket, share button or shopping list, these researchers can inform those that buy, what they looked at. Their traffic, if handled correctly, helps boost your site up the rankings, so those that you really care about can find you much easier.
Researching subjects, quizzing audiences and gathering imagery can put a huge drain on resources; so factor this in.
- Get all current copy - was it generated by seo expert, ripped from wiki etc?
- Translations - which languages? Is a translation plugin used? Is a service such as Google translate used? Are the translations done by native humans? Are the on sub-domains etc?
- Get tags from all posts (or mySQL export). If tagging is not used is anything else used to 'relate' posts together such as post category or post date?
- Get current news + categories + events
- What phrases does the current site score for?
- Which pages are popular and where on those pages are visitor clicking?
- What content has a favourable bounce rate?
- Can more content on favourable subjects be generated and would the current content benefit from freshening up?
- Get search requirements e.g. predictive, multi-choice. Results with or without images? Popular search phrase plugin etc.
- Does the customer/company/end user expect to post articles or comments via mobile apps, android or apple devices?
- Get all current image, video links - for redirect generation
- Get all image alt tags - check against headers and meta data for patterns
- Get decent descriptions of all images for where alt tags are missing or gallery pages exist.
- Get High resolution copies of all images, videos, pdf's, vector files etc. If possible, get the originals, as many CMS's compress and scale as they upload - failing that scrape current site.
- Are all images legitimate and do they have shutterstock etc account?
- Get the Favicon and make sure it's identifiable.
- Are pdf downloads uploaded or generated dynamically?
- Do they have any really useful content e.g service manuals, top tips, statistics, jargon busters, guides, history etc? - general wiki stuff
- Do you have the content for the new site? Has this content been spell checked e.g. By importing it into Word, spell checking and saving as a .txt file.
- Has a spell check plugin been installed onto the developers, administrators and checkers Web browser?
- Do they are supplier permission for logo usage?
- Upcoming events, news items, email campaigns etc
- For sites such as forums or those with user comments, how is what is posted 'policed'. Are there any automatic word filters? How often are user posts checked?
Expectations / Suggestions and Ideas
As with most projects, some ideas are great, whilst others not so good. Just because another website has certain features, doesn't mean they work. Talk all aspects of the design through with marketing, seo and web experts, then finally ask a graphic designer to pull things together.
- Get template requirements e.g. rows + columns
- Get current likes / dislikes about current site
- What sites have they seen?
- Timescales and times not to take site down (e.g. during transfer to new design).
Brand consistency, recognition and audience attention are vital to success. Check out the competition and work out your angle of approach. It may sound obvious, but if your selling children's toys, your branding and marketing will be different to a jewellers making bespoke diamond rings.
- Get all of the target company's urls e.g .com .co.uk .uk, age of domains etc
- Get all sister sites / brands / companies
- Get brand colours (hex codes, cmyk, rgb etc) and brand directives etc.
- Does the branding really match their market or is it time for a re-brand?
- Is the company logo available in high resolution or even better vector format?
- Do they have accreditations, endorsements, testimonials etc.
- Branding strategies e.g. discreet, corporate, sensual, service, luxury, value
- Staff profiles
- All company addresses e.g. locations / postcodes / latitude & longitudes / telephone numbers / emails / location photos etc.
- Is business local or national?
- Geographical reach of business, main towns nearby etc. Do they only supply local services or do they ship internationally?
- Who are their competitors? Are they local, national or international?