is your website mobile-friendly? colorado housing and finance authority
TRANSCRIPT
mobile fun facts
94% of people with smartphones search for local information on their phones. (ThinkwithGoogle.com)
The majority of consumers are of the opinion that mobile-optimized sites run faster than non-mobile-optimized sites. (ExactTarget, 2014 Mobile Behavior Report)
77% of mobile searches occur at home or work, places where desktops are likely present (ThinkwithGoogle.com)
78% of US small business indicated they did not have a mobile solution or app, but 71% felt having one would have a positive impact on their business. (Website Magazine)
how about you?
How many of you have done a recent redesign? How many are considering a website overhaul? Are you thinking of incorporating responsive/mobile
aspects?
chfa’s website redesign
Project kickoff: Summer 2013 First design and platform update in 10+ years
Changes in technology and business environment Customer expectations not being met
new website strategic objectives
Engaging design and content Home page that tells “CHFA’s story” Improved navigation Easy account login for existing customers Responsive Have a site that is more extensible and scalable
responsive web design (rwd)
Responds according to the screen you’re viewing the website from
Sites work across all platforms, browsers, and devices Easy viewing without resizing or scrolling Same URL/same code so that you only need one
version of your site No maintenance of multiple sites – and SEO has
adapted to it.
chfa’s responsive design
SharePoint 2013 Bootstrap 3.0.2 (CSS and Javascript)
Bootstrap is a an open source responsive framework. It’s based on a 12-column grid system that naturally expands/contracts or stacks based on browser/viewport size.
Mobile phones: 480px – 767px Tablets: 768px – 979px Desktop: 980px – 1200px+
website redesign
Overwhelming and “Where do I start?” Research, organization-wide discussion, RFP
In-house elements, choose a designer/developer Responsive vs. separate mobile site
How to address responsive/navigation needs
Inventory existing website content - every page Create a matrix to capture existing content’s details
and use it to map it to its new location within the new site’s architecture
concurrent activity Development
Development (dev), stage, and production environments can be spun-up and synched
Testing can begin as elements become available
Provision/Acquire devices and browsers for test
Content migration Content migration
planning can begin immediately
Create new site map Inventory current
content and map to new location and plan for new content—and best of all—delete
website content matrix
Key elements to track: Site map ID Page name Template Copy owner (department/division) Content document
chfa’s website content
Our existing website was on a proprietary CMS, and hadn’t changed or been upgraded in 10 years
Identified 275+ pages that needed to migrate The Marketing and Communications team led the
content review process. To retain a record of existing content and make editing
easy for all, CHFA used Microsoft Word documents for content review.
For each page: focused on Call-to-Action (CTA) and Key Audience to help guide the content
content migration workflow
Figure out how to review all content in a way that is meaningful and addresses the needs of all who are involved. Website content owners from all business areas Legal division (CFPB/UDDAP requirements, etc.) Marketing and Communications (branding/style)
Set expectations, make it realistic, and make it clear Give a starting-off point (Word drafts), provide tools,
visual aids, and “writing for the web” lessons
Sitemap would be highlighted to show the “chunk” of pages the team needed to review and in which document.
early chfa sitemap example
This is an example of one page within the content review document; typically there would be 3-14 pages in any one document.
Later content reviews were able to use more fleshed-out versions of webpages, served as strong visuals for the content teams.
In a year over year comparison:• ~59% increase in mobile device sessions• ~75% increase in mobile phone visitors • ~20% increase in tablet visitors
google analytics
tools that helped chfa Strong communication between IT and Marketing –
daily stand ups with status updates Web writing lessons from a local expert Content Matrix Site Map (for new website) Design Comps (initially Wireframes) Documents for Editing (MS Word)
Attack content in chunks and in 25% rounds
Content Migration Workflow
lessons learned
We worked with a design firm who then engaged a development team to implement their design. It’s probably a better idea to work from a responsive
framework, and build your branding/design on top of that. Or better yet, a one-stop shop that does it all.
We used SharePoint. There are easier/more user friendly platforms on which to build a responsive website.
Create a “war room” - isolate your content warriors for the days or weeks it takes for physical migration.
lessons learned (continued)
Keep the environments synched - and remember that they’ll never be perfectly identical
It takes some practice getting used to creating and maintaining mobile content, but it’s also geeky fun.
Responsive design is a living beast - as technology evolves, you’ll find new challenges on a monthly basis. We’re currently updating our responsive code for iPads and iPhones.
Have a sense of humor - you will get through!