mobile and responsive design
DESCRIPTION
On Jan. 24, Renata Sinn presented on considerations for mobile sites and responsive design at a lunch and learn event at Creed Interactive in St. Paul, MN.TRANSCRIPT
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 in 2012…
…tablet sales are expected to 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
APPLICATION (APP)
• Must be downloaded by the user • Runs naIvely on the device • Most costly to develop
MOBILE SITE • m.sitename.com -‐or-‐ sitename.com/mobile • Can be a whole separate code base specifically for
mobile
RESPONSIVE DESIGN/CODE
• URL stays the same • Fluid design and code base allows for adaptaIon
across mulIple screen sizes
STOP!
Fundamentals of Mobile InteracIons
Maslow’s hierarchy of needs
Image source wikipedia.org
Let’s take one step back before we blindly take ten steps forward.
THE WHO: Understanding human needs and moPvaPon
Fundamentals of Mobile InteracIons THE WHO: Understanding the needs of the mobile user
Kristofer Layon’s hierarchy of mobile moPvaPon
ENHANCE
PERFORM
INTERACT
ACCESS
Mobile strategy should leverage and address the user’s needs.
See/Navigate
Read/Share/Buy
Performance/Speed
Extra features/UI enhancements
Thinking Full Circle about Mobile
Business
Design Development
MOBILE SOLUTION
NUTS AND BOLTS: Bringing all the players to the table
Thinking Full Circle about Mobile BUSINESS: Point of Entry
Business
WHERE ARE WE NOW WHERE ARE WE GOING?
• We don’t have a website and are creaIng one from scratch.
• We have a legacy site and are adding mobile enhancements.
• We don’t have a website, but only care about our mobile users.
• We have a legacy site, but want to re-‐build and redesign the enIre site.
Thinking Full Circle about Mobile BUSINESS: Why, What & How?
Business WHY WHAT HOW
• Why is a mobile experience good for business?
• What are the business objecIves for the mobile experience?
• What content is important? • 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
Design
Development
MOBILE SITE
RESPONSIVE DESIGN/CODE
Business WHY WHAT HOW
hZp://googlemobileads.blogspot.com
Thinking Full Circle about Mobile DESIGN ELEMENTS of the mobile experience
Design WHY WHAT HOW
+
First and foremost a user needs to be able to access the experience.
• Limited and Big NavigaIon
• Shorter Elements
• UIlizaIon of whitespace
• Be aware of content length and presentaIon
PERFORM
ENHANCE
ACCESS
INTERACT
• Limit images within content • Build in gradual UI enhancements
(mobile first thinking)
Thinking Full Circle about Mobile DEVELOPMENT ELEMENTS of the mobile experience
WHY WHAT HOW
+
Building with Responsive Design
• Media queries
• Image re-‐sizing, mobile specific images
• Flexible grids/fluid CSS
• Limit/restrict Flash
PERFORM
ENHANCE
ACCESS
INTERACT
• Implement gradual enhancement
Development
Responsive Design Fundamentals The flexible 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 different screen sizes. Content importance is prioriIzed and user interacIons are defined 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 flexible layout and responsive behaviors
Responsive Design Viewed at Desktop Dimensions. NoIce the various areas called out in blue.
CONTENTCONTENT
ASIDEASIDE
NAVIGATIONNAVIGATION
Responsive Design Fundamentals The flexible layout and responsive behaviors
Responsive Design Viewed at Tablet Dimensions. NoIce how the navigaIon has adjusted to accommodate the smaller size and how the aside slides below the content since it’s of less importance.
NAVIGATIONNAVIGATION
CONTENTCONTENT
ASIDEASIDE
Responsive Design Fundamentals The flexible layout and responsive behaviors
Responsive Design Viewed at Phone Dimensions. NoIce how the navigaIon has again adjusted to accommodate the smaller size. The navigaIon links remain large for ease of use with touch devices. The aside
NAVIGATIONNAVIGATION
CONTENTCONTENT
ASIDEASIDE
Example of Mobile Only Site User interface and design specifically 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 specifically targeted to mobile device use
The same template on a mobile phone screen size. As you can see the simplificaIon of buZons and content are well suited for the mobile phone dimensions.