If you like your existing website design, or if your website is not mobile friendly but you need to live with it until the next major redesign, PaperThin can help you go mobile in a timely and efficient manner.
We can take your existing design and make it mobile friendly. Best of all, it may not be as hard as you think. From our experience helping numerous customers convert their existing CommonSpot website to a mobile-friendly, responsive website, three (3) phases of work are needed. They are as follows:
Discovery & Analysis Phase
- Understand Goals and Functionality
- Research of Existing Site Architecture
- Develop Wireframe Mockups
- 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 come up with the 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 would like to 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 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 of 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.
Develop Wireframe Mockups
As part of the Discovery & Analysis phase, PaperThin will iterate the responsive design behavior with quick wireframe mockups as needed in order to finalize the overall layout for each device size. This will allow both parties to reach agreement on the basic layout without concern for the specifics of the look and feel.
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:
Develop HTML/CSS Prototype
Once the direction of the responsive layout/design is solidified, the next step is to create a working HTML/CSS/JavaScript prototype that covers 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.
PaperThin will take the current site’s HTML, CSS, and JavaScript and will modify these to produce the series of working HTML pages. 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 o 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.