Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners.

Download Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners.

Post on 31-Mar-2015

217 views

Category:

Documents

5 download

Embed Size (px)

TRANSCRIPT

  • Slide 1

Mobile First & Responsive Web Design David Weedon - UI/UX Designer, Covenant Technology Partners Slide 2 1.2 Billion mobile web users worldwide 25% in the U.S. are mobile-only Slide 3 So Why? Why did smartphone sales take off so suddenly? Slide 4 Why the iPhone? Mainly, ease of use It was designed as a consumer product Blackberry was designed with business users in mind Slide 5 90% of all websites are not mobile ready 50% of business websites are not mobile ready Slide 6 Anywhere from 20%-100% increased conversation rate after optimizing for mobile Slide 7 mobile first. Slide 8 the old way: Design for the desktop first, then scale and trim the content to fit on a phone. (graceful degradation) Slide 9 the new way: Design for the phone first, then expand and enhance the site up to the full sized version. (progressive enhancement) Slide 10 Sounds like you end up in the same place So, whats the difference? Slide 11 desktop first Slide 12 mobile first Slide 13 desktop first: cutting away fat mobile first: adding spice Slide 14 mobile first: constraints (and why they are a good thing) Slide 15 Smaller Screen Size Slide 16 Uh oh. 1024x768 320x480 Slide 17 80% gone, and thats awesome! Slide 18 Some of that content is probably not important. If all the important content does not fit... Slide 19 An example Luke Wroblewski credit to: Slide 20 Slide 21 This is great. They should have started here. Slide 22 How do we know what to cut out? Know your users and what they need. Slide 23 Not all mobile devices are 320x480. *gasp* Slide 24 There are a wide variety of screen sizes. This isnt a new problem. Weve seen it on the desktop for years. Slide 25 The real problem: Pixel Density Slide 26 Slide 27 Slide 28 original icon scaled icon retina ready icon Slide 29 Limited Attention Slide 30 Slide 31 Content must be focused. Make it Easy and Fast. Dont make me think! -Steven Krug Slide 32 Optimize for Speed. Delays and hiccups are extremely detrimental to conversion rates. Slide 33 mobile first is about focus. Decide what is important at the beginning of a project. Slide 34 responsive design Slide 35 Responsive design is powered by CSS Media Queries Slide 36 Requires more forethought and planning than traditional layout, especially for the designer(s). Easier to maintain... One Site. One Set of Links. Works best for content focused sites. Slide 37 RWD is probably not the best choice for web apps. Sites with Specific Workflows or a big E-Commerce elements work better with custom tailored mobile sites. Slide 38 Questions?