For simple websites you can get away with emails and phone calls for communications, a photoshop mockup and a quick build by one generalist developer who cuts up the design into html and integrates it with a CMS.  

That process doesn't scale though.  When requirements are complicated and there are multiple stake holders, developers, SEO staff and content generators, you need a lot more structure.   

What follows is a whirlwind tour of what goes into managing a complicated site with a lot of people & functionality involved.  

Design

Wireframing

At beginning of a project, be that a whole new site or a complex feature, use wireframing.  Wireframing forces the designer to think through the problem, it allows the stakeholders to visually understand the solution, allowing meaningful sign-off.  

Good wireframing software allows a designer to create reusable components and interactive elements to allow for efficient change requests and allow the viewer to get a good sense of how the solution will work.  It's more important how it will work at this point than how it will look.

Balsamic mockups is a good tool designed for this purpose.  

balsamiq mockups review 11

 

Visual Design

Visual design for complex websites needs some of the same abilities as wireframing. Designers need to be able to refactor the design elements so that components can be reused and changed across the project in a single place.  Multiple pages, CSS like styling of text, export to interactive mockups.  Photoshop is a terrible choice for this.  SketchApp is excellent for website visual designs can also be good for higher-fidelity mockups. 

 sketch screenshot promo2x

 

Design & CSS Framework

A key component of managing complex website code is to reduce how much you write.  CSS frameworks help avoid reinventing the wheel and provide common visual components and a responsive layout grid using a common codebase that developers are familiar with and is well documented.  A css framework written in Sass enables semantic code to be used with the framework and for settings changes in the code to flow through to the css in real time.  Foundation is one of the leading Sass CSS frameworks.  The accessibility (A11Y) features are especially well thought out.  

Project Management & Communications

Communications are handled within dedicated project management systems where projects, tasks and conversations can be tracked. The days when spreadsheets are an acceptable form of bug tracking are over, thank goodness! Basecamp, Asana, Trello and many other web based collaboration software are a huge step forward. Choose the best one for your requirements and never go back to pure email for project requirements, bug tracking and discussions.  

hair-on-fire

 Basecamp makes this a thing of the past for Kindleman and her clients. 

Rapid Application Development

Code Framework

Web projects these days are built on frameworks.  Modern web frameworks divide up the code base into 3 layers- Model, View & Controller.  They provide common functionality and a way to add further functionality through modules.  Kindleman use Rails for interaction based sites.  RubyOnRails is the best web application framework. It's open-source, battle tested and incredibly powerful. It allows modules to be specified in code, which is ideal as it allows developers to exactly replicate the live codebase easily and to manage version conflicts.  Silverstripe is also a great choice as a backend framework for content driven sites.  

Code Management

All modern web development practices revolve around Source Code Management (SCM).  If you are not using it, you are simply doing it wrong.  GIT is the best, most modern and widely adopted SCM available.  We use it with github.com - a hosted repo management app that enables multiple developers to collaborate on huge codebases without messing it all up (a technical term). Developers create code branches for each feature and then request they are merged into the master branch.  Github provides a graphical interface to see what has changed and allow discussion right in the code. Code can be rolled back easily if anything goes wrong. 

github

Integrations 

A lot of functionality is best served by offloading it to 3rd party specialist solutions.  Relaying Email delivery with Postmark or sendgrid allows you to focus on the core offering of a site whilst delivering (pun!) great functionality in terms of deliverability, tracking & metrics.  This is true for Analytics (google analytics, marketing interactions (salesforce or marketo) and many other common functionality items.   

postmark metrics

Testing & Tests

Automated Tests

If something can go wrong, it will go wrong.  Sound familiar?  As awesome as all web developers are, this is true, even for us.  Complex websites can also become too big to hold in one brain all at once.  That means that even whilst you are working on it, you might not be aware that another part of the site is going to be broken by your changes. New developers (or old ones returning after a few months on something else) to the project have even more chance of making that mistake.  

To combat the limitations of the developer brain, complex websites should be supported by automated tests.  These are tests written in code that test the rest of the code.  Modern systems like RSPEC and Capybara make this surprisingly easy and the tipping point of complexity where these become worthwhile is surprisingly low. Automated tests are best run using a continuous integration service that runs the tests when a code change is pushed to the repo.  The results can then be sent as notifications or directly to the code management console on github.

Error Tracking & Uptime monitoring

Even with automated tests,  things go wrong.  Errors logged to servers is great, but ideally you want a full stack trace, collate similar errors and to notify the relevant person.  Error tracking software like Rollbar saves downtime and money by making debugging all the wonderful new ways users find to break a site easy.  Uptime monitoring alerts Sys admins when the site is down.  Ideal when the fault is more widespread or server based when an exception tracking service would be disabled.  

Hosting & Deployment

Hosting.  It's just a server box with your code on it right? Predictably, no.  The server is comprised of the Hardware and software. It includes your database software, web server software.  Quite a bit can go wrong with a server that has nothing to do with the application code. Network outages, firewall issues,  hardware failure etc.  This needs to be managed.  Good hosting solutions should also have flexibility in the versions of components installed and easy ways to add components and integrations.  Currently, Heroku.com is unmatched in this. 

Whichever server your application is on, a simple deployment process should be set up. This should handle all the dependency management in terms of application modules & versioning, code deployment, database migrations and asset management.  It should be hard to get wrong and roll-backable.  Famously, heroku have packaged that into one simple command that deploys via the GIT repo. 

 

git push heroku master

 

 ... and you're live.  Breathe easy.  Your site is big, complicated and important but it's backed by a structure and process that can handle it... isn't it?