CommonSpot is design independant. If you have created a design with internal design resources, plan on using a crowdsourced design (by DesignCrowd or DesignContest for example), or have hired a third-party design firm to create your new design, we can implement the design for you in CommonSpot, ensuring all of CommonSpot's robust capabilities are utilized to the fullest and implemented within best practice guidelines.
Our proven methodology for implementing a new design in CommonSpot is to first create a working HTML/CSS/Javascript prototype. If you already have a working prototype, that's great we can start from there. If not, we can take your design mockups (typically Photoshop PSD files) and roll those into an interactive working prototype. Developing a working prototype has several compelling advantages. It allows you to see the site in a working form giving us (collectively) the ability to test and quickly resolve any issues with the site's responsive design interactions, navigation, and behaviors on all the different devices and browsers you wish to support. This makes the overall development faster, saving you time and money.
From our experience in helping numerous customers with this process there are two to three (2-3) phases of work that are needed. They are as follows:
Discovery & Analysis Phase
- Understand Goals and Functionality
- Research of Existing Site Architecture
- Review Design & Plan Site Implementation Tasks
- Provide Prototype & Implementation Estimates
Prototype Development Phase (not needed if you already have a prototype)
- Prototype Development and Iteration
- Initial Quality Assurance Testing
- Revised Implementation Estimate
Responsive Design Implementation Phase
- Development Server Setup
- Responsive Design Implementation
- Content Tweaking
- Quality Assurance Testing
- Migration to Production
Each of these three phases are outlined in more detail below. If you have any questions on this process, feel free to contact your Account Representative to schedule a call with our Professional Services team.
The tasks performed in the Discovery and Analysis phase are as follows:
Understand Goals and Functionality
The first step in the process is to identify and understand the goals and desired outcome of the responsive site. PaperThin will conduct a series of 1-2 hour online meetings with the proper stakeholders at your organization to review the design concepts, desired break points, layouts, and behaviors of the responsive design. For each targeted device size we will understand what content stays, what content goes, and how to display the content that remains. This includes examining all aspects of the website including headers, footers, each of the various templates, common elements, and navigation.
We typically schedule all of the meetings within a two week period if possible. It is assumed that your team's participants would have thought through the basic responsive design layouts prior to beginning the meetings. If you have materials you wish to provide, you can send them before the first meeting and we will review them.
Topics that will be covered include:
- Review of overall goals for responsive site
- Review of scope and stages of responsive rollout
- Review design concepts and/or responsive prototype
- Review list of templates and use throughout the site
- Review design and develop strategy for handling main horizontal navigation, search, and general site link display
- This includes your logo, search box, and horizontal navigation
- Review design and develop strategy for handling left/right navigation elements
- A plan for how to display the left and right columns, including section navigation, related links, and other modules will need to be defined. How will they be displayed when the site is using one column?
- Review design and develop strategy for handling large tables
- Wide tabular data does not display well on small devices by default. There are several ways of solving the display issue from custom-built adaptive tables to automatic scrollable solutions
- Review design and develop strategy for handling large images
- Smaller devices do not need the same photo sizes as desktop browsers, and large images can take a long time to load over cellular networks. What will be the approach for delivering smaller images to smaller devices?
- Handling of 3rd party services (i.e. Google Calendar, etc.)
PaperThin will also provide utilities to identify use of Tabular Layout elements and RTEs with tables.
Research Existing Site Architecture
PaperThin will review your existing base templates, soft templates, custom elements, render handlers, and style sheets with an eye towards what needs to be done to convert these to utilize a responsive design. We will develop a task list of items that will need to change, along with an estimate for making those changes.
From this review we will also determine the recommended direction for implementing the responsive design. Whether to use an existing framework like Twitter Bootstrap or make the changes directly.
Provide Refined Prototype Estimate & Initial Site Implementation Estimate
The outcome of the Discovery & Analysis Phase will be to provide the following:
- A refined estimate for the prototype development phase
- An initial estimate for the Responsive Design Implementation and migration to Production
- A detailed task list outlining what templates, render handlers, custom elements, and other components need to be modified
- A plan for migration from development to production environment
- A possible list of content that needs to be manually modified
The tasks under the Prototype phase are as follows. Note this phase is not required if you have already developed a working HTML prototype and tested it against your desired set of devices and browsers.
Prototype Development & Interaction
With an inventory of the templates and content objects and their rendering (one of the outputs of the Discovery & Analysis Phases), we will take the working HTML/CSS/JS starting point templates and modify them to meet your design requirements. We will incorportae your fonts, color palettes, layouts, etc, into the working proptype covering all of the major templates for the site. The prototype will provide a live preview of important pages and functional elements. You will be able to see in a functioning manner how the site will look on various devices and how users will interact with the components of the design. Using this more rapid development environment allows both PaperThin and your organization to answer design and programming questions prior to the real development phase. From our experience this results in a quicker development time with less re-work, and thus less cost.
We will iterate the prototype until you are comfortable with all interactions.
If new CommonSpot elements are needed to support responsive layouts, HTML/CSS will be created in the prototype as the foundation for defining the elements.
A large portion of the real implementation will be done in this phase. It is important to note that the work completed in this phase does not result in throw-away code. The code will become the foundation for the modifications to the CommonSpot assets.
Initial Quality Assurance Testing
While developing the Prototype we (both PaperThin and your team) can begin to test the prototype pages and various responsive layouts on different devices and browsers. Any glaring issues can be addressed here in the Prototype phase to ensure more rapid development, as it is quicker to fix the issues here than in CommonSpot code.
Once you are satisfied with the rendering of the prototype on the target devices, you can sign off on the prototype and we can take this code as the foundation for the modifications to the CommonSpot assets (template, render handlers, custom scripts, etc).
Revised Implementation Estimate
After the prototype is complete we will also be able to revise the Responsive Design Implementation estimate provided after the Discovery & Analysis phase in case of project scope changes.
The tasks under the Responsive Design Implementation phase are as follows:
Development Server Setup
In order to begin the site implementation, access to your development environment needs to be setup and configured. We suggest that you refresh the environment with a current copy from Production. If your team needs help with this task, PaperThin would be happy to assist.
Responsive Design Implementation
PaperThin’s Professional Services team will perform the following tasks as part of the Responsive Design implementation.
Template Updates
In order to make the site responsive, changes will need to be made to the underlying CommonSpot templates. PaperThin will transfer the code used to create the working HTML/CSS prototype into the CommonSpot Base Template and soft templates as appropriate. If custom metadata forms are required to drive options in the templates, those metadata forms will be created and registered.
Elements and Render Handlers
In order to facilitate the responsive design, certain elements and/or element render handlers may need to be added or updated. PaperThin will make these modifications as appropriate.
Programmatic Manipulation of CommonSpot Data
There may be cases where the parentage or ordering of CommonSpot elements needs to be changed directly in the CommonSpot database. If such cases exist, PaperThin will make the appropriate changes.
CSS Tweaking
As the HTML is moved from the working prototype into the CommonSpot templates, the style sheets may need to be tweaked slightly to account for minor changes in the resulting HTML.
Content Tweaking
Certain aspects of your site may require manual modifications to existing content. One such case might be use of HTML tables with RTE elements. PaperThin will create a script that will identify which Rich Text Block elements have HTML tables. PaperThin and your team will review the list and come up with a strategy for replacing the content, if needed.
Quality Assurance Testing
If desired, PaperThin can assist your team in performing final quality assurance testing once the Responsive Design Implementation phase is complete. Final testing should cover all supported devices and browsers, and should include testing of content modifications.
Migration to Production
Once your team is satisfied with the results of the quality assurance testing, PaperThin will need to move the work that was performed on the development server into production. Depending on your server configuration, we will devise the most efficient plan for accomplishing this task, and will execute that plan upon final approval.