Designing and building a web site/app requires development teams to follow a process of steps that get the project to completion. As an interface designer at Mercury for more than three years, I’m well versed in this process and I understand what it takes to get to the finish line. For a client or business owner, understanding the process is key to their sanity leading up to and during the project.

If you are a client or business owner, this post is for you. Over the years I’ve seen the pain caused by confusion in a project, so I wanted to share a few words and outline the basic steps in hopes that it will help set your expectations on any future projects you might have and make the whole process easier to understand.

Planning your website

Step 1: Planning

Planning the project is the most important step, and it is even more critical than the actual development. A good plan produces a yellow brick road for designers, developers, managers, content editors, clients, etc. to follow. A plan gets massaged and altered along the way, but it is advantageous to keep the core plan intact. Let’s look at three important planning steps:

Requirements Analysis

This stage is used to develop a project summary, gain a clear picture of your target audience, your goals for the project, any special bells and whistles you want, and to generally understand as much about the site’s direction and the end users need for it.

Information Architecture

Sometimes called a Site Tree, the Information Architecture diagrams the structure of sections, pages, navigation flow, user interaction elements, and basic content. Clients and business owners should pay special attention to this piece, because it ensures that consideration has been given to all key pages in the site, showing their relationship to each other and also defining how the navigation experience should be.

Technology and Resources

Having a clear picture of the project requires seeing the end result. For example what type of server will be needed, will the site be utilizing any specialized tools, what are the software requirements, what maintenance plans will be in place post launch, will stock photography need to be purchased, or will there be any required fonts. All of these decisions and when they are implemented impact the project success over its lifetime.

Design your website

Step 2: Design

After the planning step is complete, all the information is obtained from the client and resources are gathered, it’s time to focus on the visual aesthetics for the project. The design team will breakdown the planning and requirements for the project and start the process that will lead to the creation of a beautiful design that is unique to your company’s brand. Designers use a few tried and true methods to produce eye popping designs and happy clients.

Wireframes

Wireframes can be used in many ways by many different designers, and each have their own purpose. Some designers use pencil and paper, others like the use of a specialized wire framing tool such as Balsamiq or Mockflow. No matter what the method the goal of a wireframe at this phase of a project is to show the basic design layout with a rough view of how the content will appear on the page.

Mockups

Mockups are highly detailed designs that start with a wireframe but take things to the next level. They are a sound layout with polished design elements created in a program like Photoshop or Fireworks. The designer also organizes the sections and elements of the design so that they are prepared for extracting individually and can be used in code. This step isn’t to be taken lightly, as it determines the design users will see and interact with each time they visit your site or use your app. Take as much time and effort as needed in order to ensure a solid foundation for the visual identity of your online presence. This is immensely important!

Review & Craft

Review and crafting takes place throughout a project, but this particular phase is an important milestone in any project. When this phase is complete, the real development begins to construct your new website or online application. The focus here is to get everyone involved in the project to agree and signoff on the mockups that have been developed. This includes reiterating the design and tweaking the layout. Working closely with the client to achieve a successful market-ready website is important so that all requirements are met, and the hidden details that are typically buried in nooks and crannies are sniffed out and addressed.

Develop your site

Step 3: Development

Now that approval has been given on the visual aesthetics for the project, it’s time to slice up the mockup, break out the design elements, and jump into code. Many core tasks are involved here such as building the site structure, constructing the templates, importing data, publishing content, and creating news stories and events, etc. Of course, rigorous testing is performed for functionality and performance throughout this stage. Below I have broken out several key concepts.

Bootstrap

Developers load up the project into a source controlled repository and get the CMS or custom development framework in place so that the entire team can access and work with the code.

Chrome & Skeleton

Interface designers slice and dice the final creative design and start using it in code. A job well done here will show in the web browser the site’s brand, navigational elements, header and footer, and any other site-wide elements, as well as a complete site structure with all pages created and accessible in the CMS (if applicable).

Build Templates

Each unique section and layout needs a template built. We do this by using HTML/CSS, JavaScript, and the tools within the CMS (if applicable). This includes the home page, main landing pages, and tertiary content pages.

Special Features

Features unique to the site require special attention when building. Usually these features are custom built according to project requirements (+1 for planning). All sorts of features fall into this category such as Advanced Search, Map/GPS Based Searching, Data Exporting, Reporting, On Demand PDF Creation to name a few. Once a feature is complete it then gets placed on its respective page(s) of the site.

Content Population

A typical project has its fair share of page copy and images, as well as news stories or events that need to be available to the user. This is a step we take during development to get all of that important information put into the proper locations around the site. Sometimes multiple team members are working together to get a mass amount of page content loaded into a site.

Testing

This is a good place in the project to do full review. Even though Mercury developers are constantly testing throughout the project and adhere to a stringent testing protocol that reinforces our ability to catch errors before they break; this additional testing makes the project go smoother and is always fruitful. The project is made better by taking testing seriously and proactively.

Client Training

Inevitably clients are going to need to work with the product we build them. Changing text, images, publishing news/events, creating/editing/removing pages are all things our clients need to do at their leisure. At this phase of the project, we are almost ready to launch, but we make sure our clients understand their software and can work with it at full speed.

Launch your website

Step 4: Launch

We have the project developed, now we are ready to show the world! While we’ve come a long way, we aren’t out of the woods yet. We need to do some final touch-up, get everything over on the production server, some more testing, and then we can flip the switch.

Crafting

Taking one final opportunity to make the site better is a staple of high fidelity work. All sorts of improvements are welcome here such as performance, user experience, responsiveness, tacking, kerning, padding, margins, and one last dab of paint.

Push to the Production Environment

Okay, this is it. This is judgment day for developers. Literally, make it or break it. The site has been tested inside and out, we have approval to launch. Now is the time to get all the code and data needed for a fully functional site on to the production server. This can be handled in numerous ways but are typically determined by the project specifics discovered in the planning step. But we have found the smoothest transition is having all the data on the server ahead of time so that when the word is given, switching to the new site is as easy as pressing a button.

Testing – Functionality and Final Cross-browser & Responsive Checks

Everything is up, the world can see it, now is the time to run back though the site for final testing in the production environment and to ensure the site works across all modern browsers and devices. Many things can be auto-tested, others require manual testing. Tools like SauceLabs or BrowserStack can be utilized to help test across browsers and devices.

Post launch

Step 5: Post Launch

At this stage we will provide documentation, discuss additional needs and next steps explained in detail below. Even though your site has launched and your project has reached completion to ensure your site or application continues to yield positive results it will require ongoing care and maintenance. Your team may want to consider an Online Care Plan.

Documentation Handoff

Clients often want and need most (if not all) of the documentation that is created during a project. This includes documentation for Releases, Testing, Products, User Interface, Screenshots, Wireframes, Photoshop documents, Images, etc. Clients that host and maintain their own site/app usually require all source files and databases to be packaged up and delivered to them. The goal here is to provide any and everything the client needs to be happy.

Additional Client Training

Following up with the client is important so that additional training that may be needed can be scheduled and conducted. Sometimes its training that goes deeper into managing and creating content, other times the client can benefit from another round of training on their software to better familiarize themselves with it.

Final Thoughts

Hopefully this post has helped you gain a better understanding of the basic process used to take a project from beginning to end, and if I did what I set out to do, you also learned a thing or two. If there’s any follow up questions, or a related topic you would like to know more about, please comment below. That’s all folks!

One more, final thought:

Our support team can provide you online reports of all maintenance tasks performed, action recommendations, recent improvements, and your website’s performance stats all in one place. It’s a pretty unique and useful tool we call the Online Care Portal. It uses cool things like charts, stats, snapshots, and videos to give you a well-rounded view of your software. Schedule your demo today!

Sitefinity is a powerful CMS indeed and depending on its current version and custom implementation upgrading can be a seemingly daunting task. This post will reveal the steps and a few hints to make the upgrade process run much smoother than you thought.

As Platinum Partners with Telerik, we find ourselves producing and shipping all manners of CMS driven applications. Sitefinity is a robust and client-centric CMS offering developers the opportunity to craft a powerful website with little customization out-of-the-box. There is an expiration date though. Like every great car, general maintenance and new features will be desired by its owner and it’ll be time to upgrade. The good folks at Telerik are constantly improving Sitefinity so that clients and developers can better deliver technology and information to the world.  But I know what some of you who’ve worked with content management systems are probably thinking:

You do not just upgrade Sitefinity

It’s true. This isn’t a walk in the park, there is no upgrade “one-click-to-rule-them-all” button. But it’s certainly do-able and highly attainable. So let’s get a game plan going.

Back that app up!

Before proceeding with the update process, always back up the production code and database. There’s always the small chance you need to start over recover lost items (a rarity albeit). Keep in mind that you’ll be pulling down production and upgrading locally and replacing the old production with your shiny, new upgrade. Be sure to give a heads up to your clients and fellow developers that this will be taking place as you’ll want a “Hands-out” of the production CMS to avoid any content loss. Due to the significant database and configuration changes, this is a must. Might I suggest a new branch for your code base as well…

Get the latest manager and get Crackin’!

Getting the latest version manager is a cinch and can be pulled down after logging in to your Telerik account here. The first thing I suggest doing is creating a test project with the new manager.  This will allow you to easily compare files later to make sure nothings is missing or reconfigured wrong.

Once you’re ready to dive in keep some of these articles in mind (and probably open):

The General Upgrade Documentation is a must.  The document lays out the basic steps using the project manager for upgrading your Sitefinity site. The process is rather auto-magical to start, once you’ve deleted out the dlls bin directory the manager will do ‘its thing’ prompting you if you want to update the web.config automatically (which you do). Once the code update is complete the browser should open and begin the database re-configuring process. This can take several minutes depending on the version-hop as its adding and reforming many of the database tables. Eventually, hopefully error free, the site should announce its completion and the easy part comes to an end.

I have Errors!

There are a number of issues that could have caused errors with the initial upgrade process.  Here is a few I’ve commonly seen:

  • Missing Dlls. The most common for me thus far.  This is usually solved by pulling in any missing or updated dlls from that test project created earlier.
  • Reference or Dependent Assembly Errors. These are common as well, especially if your project was updated before. Make sure the web.config has the proper assembly references to the new version, not the previous version.

     <dependentAssembly>
            <assemblyIdentity name="Telerik.Sitefinity" publicKeyToken="b28c218413bdf563" culture="neutral" />
            <bindingRedirect oldVersion="0.0.0.0-65535.65535.65535.65535" newVersion="7.3.4210.0" />
    
  • Clear out the bin folder first! This is how conflicts generally appear.
  • Configuration Files. These should have upgraded themselves but if they are marked for the previous version be sure to set them for the latest.
  • Custom code breakage. This is a tough one. I find this usually happens due to code referencing common older dlls that have different methods then previously utilized.

Time to Get Thorough

So if you’ve made it this far, the sites up and running and seemingly without errors. The worse thing that could happen now is you publish to production without thoroughly sweeping the site. You need to CHECK EVERYTHING.

  • Modules
  • Libraries
  • Pages
  • Custom Code
  • Settings
  • Users
  • Ensure forms are still functional
  • Email functionality is still in tact

This is rarely an issue when hopping just a few versions but we’ve found older code bases need “re-application’ of new code and widgets to the page. Forms controls, for instance, have been remodeled several times over the years and you may need to update. Here are a few key things to keep in mind:

  • Drop new widgets if others are outdated. This is an obvious issue to spot, as it generally turns your page into error screens.
  • Some modules may need to be re-installed. This I see commonly in libraries and will need to be unloaded and reinstalled. In most cases you won’t lose data, but it doesn’t hurt to do a backup.
  • Settings are different/reset. This is fairly common with big hops. Take some time and peruse through the Module and Advanced Administration Settings.
  • Forms & Security. You may have jumped so far from an older version you now have claims authentication instead of Forms authentication. Check out this documentation

I Survived, Now What

Setup the good stuff and go live! Surely you’re ready to get started with your new features and you’ll want to go live as soon as possible. I’d suggest keeping your old implementation around for bit in case something got missed or perhaps an item in staging didn’t quite make it to production yet.

Final Words To the Wise

Stay calm and plan plenty of time to upgrade. It’s rarely a ‘fast’ thing and depending on the obstacles you run into, it may take several hours.

  • Plan ahead of time
  • Make sure the client is hands-out
  • Make backups

Follow the plan and you will find yourself in the seat of a shiny-new CMS ready for the world.