Functionality

Does it work? This might seem an obvious question to ask, but above all else this is the most important part of a project. You might have everything else in place but if the site doesn't work correctly what’s the point in launching it?

Minor bugs may appear when visitors use the site for the first time but making sure it works at near 100% will ensure a successful launch.

• Compatibility:

  Check the site works across all browsers and platforms. Specify at the beginning of a project to the client what platforms you will build and test to and stick to these. Use platforms such as The HTML5 Test, Can In use?, HTML5 Please and BrowserStack to test sites quickly as well as on physical browsers and devices.

• Old Browser Detection:

  If you are planning on showing a warning for users with old browsers, include detect-old-browser.js, style the warning message, and add the relevant Modernizr feature detections. (d-o-b.js requires csstransforms3d, csstransitions, flexbox, flexboxtweener, flexwrap and history by default, but the tests can be customised).

• Favicons:

  Obvious, but this can be missed. Look at creating an iOS, Android and Windows Mobile home screen icons too. The Real Favicon Generator will do a lot of the heavy lifting for you.

• Logo:

  Does the logo link to the homepage?

• 404 Pages:

  Check you have these in place, make sure they signpost ways for a user to get back into the site or direct them to pages of interest with relevant links.

• Redirects:

  If you are redirecting pages use suitable 301 re-directs over 302.

• Links:

  Do internal page links work? Do all external links work and do they open in a new tab if so intended? This tool may help you find broken links (Xenu Link)

• RSS Feeds:

  Feeds can be useful. You don’t have to limit these to articles, you can have feeds for most pages for example new work or case studies added to a site. If you do have RSS Feeds check they are pulling through the correct content and that they validate. The W3C Feed Validator is a great place to start.

Forms

HTML forms are one way a user can send data to Web sites. They are essential in almost every interaction one can have with a site. In most cases, checking form usability will improve the usability of the entire site.

• Language:

  Helping users understand the form will save them time and ensure that they provide correct input. On the other hand, instructions should be as concise as possible. Always take into account potential users and that your forms address to both new and experienced visitors.

• Essential Information:

  Forms should always contain a title, labels and a submit button. In some cases there may optionally be a Cancel button too. Make sure this information uses a polite tone of voice and has been spell checked and read for grammatical errors.

• Number of fields:

  Avoid using forms that contain a large number of fields. If lots of information is required, consider splitting the form into multiple pages (e.g. one for the shopping cart, one for personal details, one for payment details).

• Preserving data:

  If an error occurs or there is an option to navigate back to a previous step, form data should remain in place.

• Layout:

  Forms should look neat and tidy. Input fields should be aligned and labels should site appropriately above or the the side of the input field they relate too.

• Mandatory Fields:

  Make sure these fields are clearly marked. You could use an asterisk and the word 'required', or split up mandatory and optional fields into separate blocks.

• Error Messages:

  Always use straightforward, easy to understand messages. Error messages should tell the user what went wrong and offer a possible solution. You should draw attention to the input field that caused the error, this could be through colour or placing the error message inline next to the field.

• Success Messages:

  Include a thank you state once a form is submitted so a visitor knows it is sent successfully

• Input lengths:

  Make sure the input fields are long enough for a user to enter the information. For example a full name field could contain 40 characters or more. Make sure the content can all be read without scrolling.

• Placeholder defaults:

  Where possible provide default placeholder copy to help the user determine the type and format of data being requested.

• Usability:

  Check the tabbing order is correct through the form. Make sure that clicking on a label inserts the cursor or activates the appropriate input field

• Testing:

  Have your forms tested out by as many real users as possible.

• Spam:

  Make sure your form isn't sending to spam mail boxes.

ExpressionEngine CMS

ExpressionEngine should be optimised and set-up correctly so that clients can access and edit all appropriate areas of the CMS backend. ExpressionEngine should also be set to deliver the site content and templates as quickly and securely as possible.

• System Paths and URLs:

  All system relevant paths should be checked to make sure they are pointing to the correct place on the 'production' server. This includes paths set in:

  • 'Admin' > 'General Configuration'
  • 'Admin' > 'Channel Administration' > 'Channels' > 'Edit Preferences' (for each channel)
  • 'Admin' > 'System Administration' > 'Emoticon Preferences'
  • 'Admin' > 'Security and Privacy' > 'CAPTCHA Preferences'
  • 'Content' > 'Files' > 'File Upload Preferences'
  • 'Design' > 'Templates' > 'Global Preferences'
  • 'Members' > 'Preferences'
  • You may also need to check your add-ons to update any paths or URLs set in those
• Member Group Permissions:

  Check member group permissions for access for the following:

  • Access to the Control Panel
  • Access to the Channels
  • Access to the Add-ons (including Comments)
  • Access to the Channel Entries, their own, and others
  • Access to the add/edit/delete categories. You will need to also check preferences in 'Admin' > 'Channel Administration' > 'Categories' > 'Edit Category Group' (for each category group)
  • Access to upload files. You will need to check preferences in 'Content' > 'Files' > 'File Upload Preferences' (for each upload directory).
• Index.php:

  Remove index.php from the site's URL's. You will need to delete the contents of the 'Name of your site's index page' field from 'Admin' > 'General Configuration' and you will need to setup some ModRewrite rules in a .htaccess file at the root of your site. Here's a little index.php tutorial tutorial from ExpressionEngine themselves.

• Performance:

  Template caching should be on and given a suitable expiry timeframe (between a week and a month is good, this will depend on frequency of new content put on the site). Enable GZIP Output under 'Admin' > 'System Administration' > 'Output and Debugging'. Template performance can be measured using this free module.

• Entry Forms:

  Optimise the layout of all channel entry forms, hiding unnecessary fields and setting the order of fields as appropriate.

• Member Registrations:

  If not in use, turn off 'All New Member Registrations' in 'Members' > 'Preferences'

• Add-Ons/Modules:

  Uninstall unused modules from 'Add Ons' > 'Modules' so that EE isn't loading them on every page load.

• Control Panel session time:

  To enable sessions to persist for longer than 30 minutes set the 'Control Panel Session Type' under 'Admin' > 'Security & Privacy' > 'Security & Sessions' to 'Cookies Only'

• File Uploads:

  Test file uploads to ensure the permissions are set correctly and the php memory_limit is suitable.

Craft CMS

Getting the following things right will keep problems to a minimum, and keep page load times snappy.

• Template Caching:

  Craft's cache tag is a super simple mechanism of greatly improving template performance. This can be given a custom expiry time, and can be given a "key" to group caches. It is particularly important for pages which make heavy use of database queries, including matrix block loops and related entries.

• SVGs:

  Make sure svgs have the correct mime type by adding this line to the web root's .htaccess file:

  AddType image/svg+xml svg svgz

• Dev Mode:

  Make sure devMode is not set to true in the general config file or users may see errors they shouldn't.

• Updates:

  Make sure the site administrators can't auto-update Craft as this could cause problems. Set 'allowAutoUpdates' to false in the general config file.

• Login Screen Logo:

  If relevant, upload the company's logo in the General settings page to show it on the login screen.

• Timezone:

  Make sure the timezone is set correctly in General Settings so that dates show correctly in the CMS.

• Live Preview:

  Live Preview is a really helpful feature allowing users to see how their page will look as soon as they update it. With complexity however comes buginess, and there are a few issues with Live Preview and things which can break it. Check it is displaying correctly and updating for each of your templates using it.

• File Uploads:

  Test file uploads in each of your directories. If you're having any problems you can't figure out, check out this helpful post.

• Email Preferences:

  Under settings > email you're usually better off using an STMP server rather than 'Sendmail'. We'd recommend Mailgun.

Standards & Validation

These two things should be considered throughout the design and build to make every users experience on your site as good as it can be. Points to consider:

• Accessibility:

  It's easy to forget how inaccessible a webpage is for some users. Have you considered how assistive technologies such as screen readers will navigate your site? Have you implemented WIA-ARIA roles and states, or at least considered the tab order of form controls? This Web Accessibility Checklist Accessibility Checklist should have you covered in most cases.

• Contrast:

  This follows on from our point about accessibility. Using the very latest monitors it’s easy to see subtle differences in colour, be sure to test your site on multiple devices and laptops to make sure the design has clarity and text can be read with ease. Here's a useful contrast tester tester.

• Visual Impairment:

  You should test against different types of colour blindness. Colour Filter Filter will help you do just that.

• Text Size:

  Make text clear and easy to read, adjust line spacing and allow plenty of white space. Bigger, can mean better, when it comes to text on the web.

• Consistency:

  Make sure common elements across the site are consistent to avoid confusing your users. Make buttons look like buttons, links look like links, and titles and text should be consistent in size, colour and hierarchy.

• Device Compatibility:

  Consider how the website will be used across multiple devices, responsive or not your website should work for desktop and mobile web users on normal resolution and high resolution screens.

• Validation:

  Always aim for 100% validity. If your site fails to validate fully don’t get too upset, but be sure to understand any errors in order to to eliminate any unwanted issues. Some validators include:

  • HTML Validator
  • CSS Validator
  • RSS/Feed Validator
  • Link Validator
• JavaScript:

  Many people browsing the web have JavaScript turned off for security reasons. Make sure your site is functional and forms still perform server-side validation checks without it.

• Flash:

  Yeah, we know, nobody uses Flash anymore right? If Flash has to be used, be sure to include an alternative backup image should Flash Player not be installed.

Sitemaps

Make sure you include sitemaps. These help search engines correctly index your website during the crawling process.

• HTML Sitemaps:

  Although not as common practice as they were, this form of sitemap can have its benefits in helping visitors see a complete overview of the sites pages. Links for these are normally found in the footer of a site.

• XML Sitemaps:

  These are only ever used by search engines such as Google, Bing and Yahoo. Create an XML Sitemap easily and submit it via Webmaster Tools. These will then be used to inform search engines about the pages you have published. More information about Sitemaps here: Sitemap Tutorial

• robots.txt:

  It may only be a single file but with it comes great power. If you're not careful you could inadvertantely tell search engines not to crawl your site and therefore not appear in search results! Eek! USe the robots.txt file to allow/disallow search engines to crawl parts of your website. You might for example want to stop seasrch engines indexing the images on your website or even very specific single files like a PDF. Here are some some common examples and some SEO best practices regarding this power file.

Performance

A faster site is a better ranking site. You’ll also lower bounce rates on pages if you can reduce load times - who wants to wait for pages to load?

• Check site speed:

  You can use services such as Google Page Speed Page Speed or YSlow to check the load times of your site's pages. Web Page Test Page Test (warning: it isn't pretty!) is maintained by Google and allows you to access a website from a given location around the world on specific browsers to see how your site performs from various locations.

• Image sizes:

  Keep your images as small as possible. Although network speeds are better than ever, no one wants to wait for a 10Mb page to load. Compressing images will only improve page load times. ImageOptim for Mac OS X can produce some significantly reduced image sizes without compromising the quality.

  For responsive websites you should be loading in images at appropriate sizes for the size of the device. You can use tools such as Picturefill, HiSRC, Adaptive Images and Mobify. Here's a great article outlining some of the pros and cons to these responsive image solutions.

• Gzip Compression:

  This tells your web server to compress every byte before it sends it to the browser. Every web server supports gzip, every browser supports gzip.

• CSS:

  Run some performance and quality tools on your CSS to see where you're being inefficient. CSS Lint Lint is a great tool but will probably make you cry. Compress, minimise and concatenate css into as fewer files as possible for production.

• Javascript:

  Run some performance and quality tools and checks on your javascript. JS Lint Lint should cover you. Compress, minimise and concatenate css into as fewer files as possible for production.

SEO

Great SEO will mean your site will work harder and achieve greater success than a site that uses little or bad techniques. Get your research right and the rest will fall into place.

This list is by no means extensive and if you want to learn more then we recommend reading more from these articles Search Engine Optimisation FAQ and A Web Designer's SEO Checklist.

• Keyword Research:

  Make sure you are targeting the right demographic and market. It’s important to get this right in order to attract relevant traffic to your site. Carry out some research with Google Adwords and see which keyword (or search term) has the highest traffic potential and the least amount of competition and balance these two factors.

• Google Webmaster Tools:

  Submit the site to Google Webmaster Tools Webmaster to enable submission of a sitemap, search query results and notification of any google crawl errors.

• Page Titles & Descriptions:

  Do all the templates have the necessary page titles and meta data based on your keyword research? When focusing on a particular keyword try and get these to the front of descriptions and look at using both singular and plural forms.

• Image alt tags:

  Do the main images of the site contain relevant and descriptive alt-tags? Using short descriptions will help. And remember try and choose a descriptive file name instead of random words and numbers for these images.

• Anchor Titles:

  These expand on the text in the anchor to provide additional information to users.

• Keywords:

  Embed these in titles, descriptions and copy. There is little or no need for the keywords meta tag anymore.

• Content:

  If the content is good it will work to optimise and compliment the SEO. Good keyword density within the copy works well so use both singular and plural forms of keywords in your text. Don’t overload the content or over think this, make it natural and only add when and if it is relevant. Search engines also prefer longer pages of content so look at getting the content to 500+ words but focus more on the quality than quantity.

• URLs:

  Make sure the site's URLs are clean. Using a descriptive URL instead of ones that are made up of random numbers or words will help with SEO and visitors finding a page they may want to return to, and look at getting a keyword into the URL if relevant. A site should resolve to one version of the domain (e.g. http://www.site.com and http://site.com should both go to http://site.com. You will probably need to run a ModRewrite rule on a .htaccess file to do this)

• SEO & Performance Tools:

  The Feed the Bot website has some great tools for performance tuning and SEO best practices to follow. The SEO Site Checkup and First Site Guide websites have free analysis tools that provides some great insights into areas of SEO and performance that can be improved.

Analytics / Monitoring

No matter how small a site is, having web analytics running will gather you valuable information on how to improve your website going forward, and to be proactive about finding and dealing with problem areas of a site or server.

• Site Analytics:

  In order to suggest improvements going forwards make sure you have access to the analytics, this way you can monitor traffic and site stats for the client and suggest improvements over the following month and year after launch. Tools such as Google Analytics (free) or services such as GoSquared or KISSmetrics (paid) will give valuable feedback.

• Server Analytics:

  Make sure your application or site is being monitored for uptime and overhead. New Relic will monitor individual sites as well as the state of play for all sites on a single 'box' (server). New Relic can also track resource usage for the server itself. With ExpressionEngine, New Relic automatically tracks installations (above v2.7.0) on a monitored server. We should give an appropriate, descriptive name for the ExpressionEngine installation for ease of use in the New Relic tool. 'Admin' > 'System Administration' > 'Output and Debugging'.
  For other sites, the following line can be added the web root .htaccess file: php_value newrelic.appname 'Site Name'.

  Pingdom will monitor your sites uptime and keep you up to date on your websites performance over time.

Security

You may have a lot of things you do not want the world to know about. For example; user-uploaded media, or shoppers' Credit Card details.

• Protect Sensitive Pages:

  Protect any sensitive pages or folders from being indexed on search engines by putting in place robots.txt files and by excluding them from within Webmaster Tools. Also consider whether you need to use an .htaccess file to disable folder view within directories.

• Security Certificates:

  When developing an eCommerce website, or a site that handles sensitive visitor information, the level of security will be paramount. Secure sites also are stsrting to benefit from higher ranking in search engine results. Use protocols such as SSL encryption to protect against unwanted information theft. It has also been proven that displaying seals such as TRUSTe, can increase the credibility of a site.

  The Let's Encrypt initiative aims to provide free certificates so really there is no reason to have an unsecure site as cost no longer is a factor to consider.

Hosting & Backups

Finding a web hosting provider can be hard and knowing what you need can be even harder to understand. There are many options and pricing plans to choose from but make sure to choose a provider that meets your needs, not one that offers more than you need to pay for.

• Backups:

  Always, always, make sure backups are in place. Make sure you the hosting provider can accommodate daily and weekly backups of your server, website and database data. If they can backup to a separate site in the cloud or elsewhere that is a bonus.

• DNS:

  If a domain needs pointing to a different hosting provider or new IP Address make sure you give yourself at least 48 hours to either make the DNS or Nameserver changes, or lower the TTL (Time To Live) to as low as possible so that any near future DNS changes will have almost immediate effect.

• LAN Caching:

  Check with the client whether they have any LAN caching in place, and advise them to clear it if so to prevent them seeing an old, cached version of the site, or not being able to see the new site at all.

Server Tuning

So you've made a stunning website, tuned it up and optimised everything you can in the CMS, image delivery and accessibility areas. Now it's time to eek out a little more performance from the server itself. The following have been applied to LAMP (Linux, Apache, MySQL, PHP) setups on CentOS but many of the practices should be transferable across various operating system and technology stacks.

This is by no means an exhaustive list and is subject to change over time.

• PHP Memory limit:

  Depending on your servers RAM resources it can often be beneficial to increase to the default amount of RAM allocated to PHP especially if the site is running a CMS that'll handle images. 256M or 512M should do the trick.

• PHP Max Execution Time:

  A typical default value for this is around 30 seconds which is often plenty, but for sites or applications that need to process significant amounts of data from a local database, API or elsewhere, there could be benefit to increasing this value to 60, 90 or even 120 seconds.

• PHP Upload Max Filesize:

  For mosts sites built on content management systems there will be an element of file uploading, be it images, PDFs, audio, video or other filetypes. Often the default value is set around the 2M mark and should often be increased to allow larger files to be uploaded to the server. Intelligently set this value based on the type of files you plan to allow to be uploaded to the site and what you think is a reasonable maximum size for them to be. Somewhere in the region of 64M is often a good middle ground.

• PHP Post Max Size:

  For sites or applications that need to transmit large amounts of data using the POST method (file uploads for example), this value can often need increasing beyond the typical 8M default. This should be larger that the PHP Max Upload Filesize setting but lower than the Memory Limit. Somewhere in the region of 64M – 128M is often a good benchmark.

• PHP Additional Configuration:

  Sometimes you may need to load in extra PHP extensions or provide some more custom configuration. If you're running something like New Relic server monitoring you will likely need to provide the 'App Name' on a per domain level using 'newrelic.appname="yourwebsite.domain"' directive.

• Local Mail:

  For servers running server management software like CPanel and Plesk, there is often a local email service installed which can mess with form-to-email type functionality on a website. If a domains email mailboxes are being handled on a separate server (e.g. Google Apps, Microsoft 365 etc) then you don't need a local email service turned on as well, so turn it off.

• Preferred Domain:

  Decide which domain (with www or without) the site should be served from. Setup the other domain as a 301 redirect so that your search rankings aren't penalised due to serving duplicate content from 2 domains. The forward can be setup in a .htaccess file, Plesk/CPanel control panels and some domain/DNS management services.

• Asset Compression:

  If you're running an nginx proxy server in front of Apache this configuration can help to compress (gzip) common asset filetypes. If your site's assets are being served directly from the Apache server you can use the following apache configuration.

Legal

Before you start any project a signed contract should be in place. The contract should clearly outline the project deliverables and processes so both parties are 100% clear on what will be achieved as an end result. As part of that contract make sure the following has been agreed to cover any unforeseen circumstances.

• Payment Terms:

  Always, always, make sure backups are in place. Make sure you the hosting provider can accommodate daily and weekly backups of your server, website and database data. If they can backup to a separate site in the cloud or elsewhere that is a bonus.

• Timelines:

  Set reasonable timelines that are fair to your client as well as manageable for you and your team. Clearly state that you will not be held responsible for any loss or damages as a result of a delay in the schedule caused by the client. It is a good idea to use something like Basecamp to manage your projects so all work and conversations are recorded should you need them to fall back on in the future.

• Intellectual Property Rights:

  This will be different depending on who you are, what you’re offering, or the project in question. Clearly state what is owned by you and the client once the project is complete and payment has been made in full. Consider the rights to any software or code written by you that you wouldn’t want sold on, or anything similar that you feel you need to retain the rights to.

• Copyright & Intellectual Property Credits:

  It is common practice to use images and other assets on websites which are owned by another individual, company or group. Don't exploit these people, make sure you have the correct permissions to use their material on your website. You should always endeavour to acknowledge the owner in some form of a credit, citing their name with a link to their website or email address. If you're in any doubt about whether you have permission to use something play it safe and don't use it. More about copyright and permissions on the web.

Deliverables

In the project contract clearly explain what the client will physically receive once a project is complete. The following is recommended.

• Live Website:

  This is the bare minimum. Make sure their website is up and live and fully functioning as intended.

• Style Guide:

  A simple style guide is extremely beneficial for any website owner, points to consider include:

  • Font Styles
  • Image Sizes
  • Tone of Voice
  • Colours
  • Imagery Style
• Assets & Icons:

  Any icons, illustrations, or infographics design and created for the website may be helpful to your client going forward. Supply them the files in different formats so they can use them in presentations or future design work.

• Offline Copy:

  If requested by the client provide a copy of the site. Remember websites are a living document that should be continually updated and improved, so unless the site is static you will have to be making regular offline backups for the client.

Ongoing Maintenance

You’ve launched the site, it’s working great and the client is happy, now what? You need to make sure that it continues to run without a hitch. Things can go wrong or get missed, server security compromised, or it could fall over. Make sure you’re ready for every eventuality.

• Version Control:

  Run projects through the Git version control system. Source code history is saved meaning that you can refer or revert back to previous versions if and when needed. For an introduction to Git read this in-depth 'Getting Started' walkthrough.