1 / 38

Mobile First & Responsive Web Design

Mobile First & Responsive Web Design. David Weedon - UI/UX Designer, Covenant Technology Partners. 1.2 Billion mobile web users worldwide. 25% in the U.S. are mobile-only. So Why? Why did smartphone sales take off so suddenly?. Why the iPhone?. Mainly, ease of use

kalani
Download Presentation

Mobile First & Responsive Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 1.2 Billionmobile web users worldwide 25% in the U.S. are mobile-only

  3. So Why?Why did smartphone sales take off so suddenly?

  4. Why the iPhone? • Mainly, ease of use • It was designed as a consumer product • Blackberry was designed with business users in mind

  5. 90%of all websites are not mobile ready 50%of business websites are not mobile ready

  6. Anywhere from 20%-100%increased conversation rate after optimizing for mobile

  7. mobile first.

  8. the old way:Design for the desktop first, then scale and trim the content to fit on a phone. (graceful degradation)

  9. the new way:Design for the phone first, then expand and enhance the site up to the full sized version. (progressive enhancement)

  10. Sounds like you end up in the same place… So, what’s the difference?

  11. desktop first…

  12. mobile first…

  13. desktop first: cutting away fatmobile first:adding spice

  14. mobile first: constraints (and why they are a good thing)

  15. Smaller Screen Size

  16. 1024x768 Uh oh. 320x480

  17. 80% gone , and that’s awesome!

  18. If all the importantcontent does not fit... Some of that content is probably not important.

  19. An example credit to: Luke Wroblewski

  20. This is great. They should have started here.

  21. How do we know what to cut out? Know your users and what they need.

  22. Not all mobile devices are 320x480. *gasp*

  23. There are a wide variety of screen sizes. This isn’t a new problem. We’ve seen it on the desktop for years.

  24. The real problem: Pixel Density

  25. scaled icon retina ready icon original icon

  26. Limited Attention

  27. Content must be focused. Make it Easy and Fast. Don’t make me think! -Steven Krug

  28. Optimize for Speed. Delays and hiccups are extremely detrimental to conversion rates.

  29. mobile first is about focus. Decide what is important at the beginningof a project.

  30. responsive design

  31. Responsive design is powered by CSS Media Queries

  32. 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.

  33. 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.

  34. Questions?

More Related