Today there are a growing number of open source (or super cheap) professionally designed responsive themes that you can use as the starting point for your new website design. These templates include the latest design concepts, layouts, and technologies and often provide many different configurations for the design to choose from (i.e. full width vs boxed, different navigation styles, different color schemes, multiple layouts, etc). The templates are provided as working HTML, CSS, and JavaScript so you can choose a template that closely resembles your desired look & feel and that has the responsive behaviors you desire, then modify/tweak it to fit your exact needs.
Instead of the traditional design process where you start from a blank canvas, produce a couple design mockups, and iterate with photoshop mockups, here you start with something close to what you want the final design to be and then quickly iterate your design through a working HTML/CSS/JS prototype.
Using this approach can save months of work. We can quickly take your choosen starting point template and make it your own unique design that is mobile-friendly on all devices. From our experience in helping numerous customers with this process there are three (3) phases of work are needed. They are as follows:
Discovery & Analysis Phase
- Understand Goals and Functionality
- Research of Existing Site Architecture
- Review Selected Responsive Template & Plan Prototype Changes
- Provide Prototype & Implementation Estimates
Prototype Development Phase
- 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 theme templates
- Review list of templates and use throughout the site
- Strategy for handling main horizontal navigation, search, and general site link display
- This includes your logo, search box, and horizontal navigation
- 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?
- 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.
- 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.
Review Selected Responsive Template & Plan Prototype Changes
PaperThin will recieve the selected starting point responsive design template, and its CSS and JS. We will discuss and understand what aspects of the template you like and don't like and what changes you would like to see made to the templates or interactions. We will develop a listing of content templates that you will need for the new site and map those to the templates/layout provided in the starting point template. We will identify those new templates/layout that will need to be added to the working protoype.
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:
Prototype Development & Interation
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 prototype 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.