Mobile Sites & Responsive Design Building and designing for the future …tablet sales are ? expected to exceed 100 million this year… …about half of the US’s 311 million people own a smartphone… …mobile web usage took 50% of sales related to Mother’s Day …tablet sales are expected to in 2012… exceed 100 million this year…
Mobile Sites & Responsive Design Building and designing for the future Desktop Tablet Phone The Mobile Experience Mobile Site Full Spectrum User Experience
The Mobile Experience at a Glance Experience PlaIorms • Must be downloaded by the user APPLICATION • Runs naIvely on the device (APP) • Most costly to develop • m.sitename.com -‐or-‐ sitename.com/mobile MOBILE SITE • Can be a whole separate code base speciﬁcally for mobile RESPONSIVE • URL stays the same DESIGN/CODE • Fluid design and code base allows for adaptaIon across mulIple screen sizes STOP!
Fundamentals of Mobile InteracIons THE WHO: Understanding human needs and moPvaPon Let’s take one step back before we blindly take ten steps forward. Image source wikipedia.org Maslow’s hierarchy of needs
Fundamentals of Mobile InteracIons THE WHO: Understanding the needs of the mobile user Mobile strategy should leverage and address the user’s needs. Extra features/UI enhancements ENHANCE PERFORM Performance/Speed INTERACT Read/Share/Buy ACCESS See/Navigate Kristofer Layon’s hierarchy of mobile moPvaPon
Thinking Full Circle about Mobile NUTS AND BOLTS: Bringing all the players to the table Business MOBILE SOLUTION Design Development
Thinking Full Circle about Mobile BUSINESS: Point of Entry WHERE • We don’t have a website and are creaIng one from scratch. ARE WE • We have a legacy site and are adding Business NOW mobile enhancements. WHERE • We don’t have a website, but only care about our mobile users. ARE WE • We have a legacy site, but want to re-‐ GOING? build and redesign the enIre site.
Thinking Full Circle about Mobile BUSINESS: Why, What & How? • Why is a mobile experience good for business? WHY • What are the business objecIves for the mobile experience? Business WHAT • What content is important? HOW • How do we want the user to interact with the content? • What kind of resources do we have for mobile development?
Thinking Full Circle about Mobile CHOOSING A SOLUTION: Design and Development MOBILE SITE Business Design WHY WHAT HOW Development RESPONSIVE DESIGN/CODE hZp://googlemobileads.blogspot.com
Thinking Full Circle about Mobile DESIGN ELEMENTS of the mobile experience WHY Design + WHAT ENHANCE HOW PERFORM First and foremost a user needs to be able to access the experience. INTERACT • Limited and Big NavigaIon • Shorter Elements ACCESS • UIlizaIon of whitespace • Be aware of content length and presentaIon • Build in gradual UI enhancements • Limit images within content (mobile ﬁrst thinking)
Thinking Full Circle about Mobile DEVELOPMENT ELEMENTS of the mobile experience WHY Development + WHAT ENHANCE HOW PERFORM Building with Responsive Design INTERACT • Media queries • Image re-‐sizing, mobile speciﬁc images ACCESS • Flexible grids/ﬂuid CSS • Limit/restrict Flash • Implement gradual enhancement
Responsive Design Fundamentals The ﬂexible layout and responsive behaviors Responsive Behaviors: The basic concept behind having a responsive design is to have a layout and organizaIonal structure that can adapt to diﬀerent screen sizes. Content importance is prioriIzed and user interacIons are deﬁned based on various screen sizes. The “break points”, or dimensions at which the design adjusts, are usually set for average desktop, tablet and mobile phone sizes. Checkout the example at h]p://mobile.creedinteracPve.com/
Responsive Design Fundamentals The ﬂexible layout and responsive behaviors NAVIGATION Responsive Design CONTENT Viewed at Desktop Dimensions. NoIce the various areas called out in blue. ASIDE
Responsive Design Fundamentals The ﬂexible layout and responsive behaviors NAVIGATION Responsive Design Viewed at Tablet Dimensions. NoIce CONTENT how the navigaIon has adjusted to accommodate the smaller size and how the aside slides below the content since it’s of less importance. ASIDE
Responsive Design Fundamentals The ﬂexible layout and responsive behaviors Responsive Design Viewed at Phone Dimensions. NoIce how the navigaIon has again NAVIGATION adjusted to accommodate the ASIDE smaller size. The navigaIon links remain large for ease of use with touch devices. The aside CONTENT
Example of Mobile Only Site User interface and design speciﬁcally targeted to mobile device use A mobile only template viewed on a desktop. NoIce how the design is very streamline and replicates the “mobile UI” one would expect on a naIve phone applicaIon.
Example of Mobile Only Site User interface and design speciﬁcally targeted to mobile device use The same template on a mobile phone screen size. As you can see the simpliﬁcaIon of buZons and content are well suited for the mobile phone dimensions.