CIRCUIT – An Adobe Developer Event Presented by ICF Interactive

The Road to Mobilgeddon

Racing Google from Zero to Responsive

Bill Engels & Jeanette Olson

5 years of CQ experience 5 years of working with ICFI (Citytech)! •  Comic books. •  Great Food. •  Craft Beer. •  Level 7 member of the

Resistance. •  Your typical programmer

guy.

bill.engels@trustedchoice.com

@tanilium

My first time here Myself, Bill Buerlein, Mark Szumowski, and Randall Fokkens

TrustedChoice.com

Problem Statement

•  Problem: •  Google will lower mobile search results for non

mobile site. •  Trustedchoice.com is not mobile friendly. •  We have two months.

How can we avoid “mobilgeddon”? Just how important is this?

Constraints

•  Turnover in UX design •  No content re-authoring •  Site look and feel should be identical •  Keep site performant •  How to test? Resources vs. Devices •  Two people (2 to dev, 2 to test…) •  That Google “deadline”

Starting Out

•  Greenfield – what do we do? – m.dot vs responsive, LESS vs SASS vs CSS

•  Inventory CSS / Javascript •  Research CSS / Javascript frameworks •  Michelotti’s Maxim – You can do

everything in Bootstrap, except the moon landing.

Solution – Phased Plan of Attack

•  Phase 1 – Mobile Aware –  Over-ride key pages.

•  Phase 2 – Mobile Friendly –  Update site / templates to be responsive

from highest usage to lowest •  Phase 3 – Fully Responsive

–  Redesign high visibility pages to be optimally responsive

Bootstrap

•  LESS •  Maven does the heavy work

LESS

Breakpoints  

Basic  default  Mixin  default  variables  

Works  –  but  not  the  best  Min-­‐width  vs  Max  width  Hide  /  Show  dependent  

File  Layout  in  IntelliJ  

Advantage – Base system

•  Nearly ever template inherits from Global •  Lack of OOTB column controls •  Existing LESS implementation •  Content is more text than images •  ICFI (Citytech) had done the original

implementation. Very structured.

Advantage – Base system

Structured  content  helped  …  a  lot!    All  templates  derived  from  these  two    basic  structures.  24  templates  converted  to  fluid  layout  with  maximum  Kme  savings.    Unless,  we  needed  to  keep  staKc.  And  we  did.  

Phase 1 Implementation

Home Page with Mobile content

The upper Link Boxes display at tablet and above sizes. The below image is what a mobile user would see. Completely different content.

Phase 2

•  Migrate base template to grid – 24 templates based on globals

•  Validate templates – Does it make sense mobile wise? – How much is lost? –  Is it performant?

•  Check components – Validate OOTB – Check out custom components

Call to Action The Call to Action is our biggest component.

Swiss army knife or Swiss cheese depending on the business requirement.

Refactored as a result.

Displayed on nearly every form.

Configured via content.

Top Call to Action is default for desktop. Mobile transition is larger, and also, the form factor gives an opportunity to reasonably add a new Call to Action more naturally.

Carrier Profile

Desktop Mobile

Phase 3

•  Same as Phase 2, but now upgrading the hard templates

•  Fix modals •  Add some usability

Find an Agent (FAA)

Desktop FAA Mobile FAA

Agency Profile

Desktop Mobile

Phase Forever

•  Mobile. Is. Forever. •  Readmore Component

-  SEO friendly text != mobile experience •  Designing with wireframes -

http://support.balsamiq.com/customer/portal/articles/615901

•  More tracking – Phone numbers now clickable

•  New Design!

What we have left to do

•  Transition from jQuery modal to Bootstrap modals

•  Advance usability to take advantage of more mobile settings

•  Back end mobile processing

Google Webmaster Tools Mobility Check 459 pages. Still going down. Remaining pages will be removed when re-crawled. Yep, we’ve tried…

Traffic 15% to 50% - well … close anyways. 160% more mobile searches and 600% more mobile conversions.

What we learned

•  Do more with LESS •  Prioritized high usage pages better •  Too conservative on functionality (CTA) •  Worked Call to Actions better for conversions •  Going responsive = a new design must include

mobile •  Breakpoints are key – make sure to have them

identified •  Javascript behavior in mobile •  EM vs PX transition

Questions & Comments

•  Email: bill.engels@trustedchoice.com jeanette.olson@trustedchoice.com

Had to leave some code on the final page. J