1. © 2012 DigitalDay | www.Digital-Day.com MOBILE WEB DESIGN PRINCIPLES Best Practices Workshop 1

2. © 2012 DigitalDay | www.Digital-Day.com Mobile web design principles Mobile first – Context Design for multiple screen sizes Look and feel – Layout Fixed vs. Fluid – Color – Typography – Graphics Image scaling and handling – Retina display considerations Designing forms for mobile 2

3. © 2012 DigitalDay | www.Digital-Day.com Designing for different screen sizes 3

4. © 2012 DigitalDay | www.Digital-Day.com iPhone dimensions 4

5. © 2012 DigitalDay | www.Digital-Day.com Mobile design considerations for thumb reach 5

6. © 2012 DigitalDay | www.Digital-Day.com Color differences across device types 6

7. © 2012 DigitalDay | www.Digital-Day.com Supported colors by device type 7

8. © 2012 DigitalDay | www.Digital-Day.com Finger friendly mobile design Ideal mobile touch target sizes – Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall. – Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34px with a minimum touch target size of 26px. – Nokia’s developer guidelines suggest that the target size should be no smaller than 1cm x 1cm square or 28 x 28 pixels. 8 UX Movement

9. © 2012 DigitalDay | www.Digital-Day.com Retina displays vs. Other mobile displays 9 Apple Insider

10. © 2012 DigitalDay | www.Digital-Day.com iOS retina displays What is the best method for adding 2x images to webpages that will be displayed on the new iPad with retina graphics? What is the best method for adding 2x images to webpages that will be displayed on the new iPad with retina graphics? 10

11. © 2012 DigitalDay | www.Digital-Day.com Bookmark icons for mobile Lest we forget... For Apple devices with the iOS operating system version 1.1.3 or later, such as the iPod Touch, iPhone, and iPad, as well as some Android devices, one can provide a custom icon that users can display on their Home screens using the Web Clip feature (called Add to Home Screen within Mobile Safari). This feature is enabled by supplying a in the section of documents served by the web site. If the custom icon is not provided, a thumbnail of the web page will be put on the home screen instead. 11

12. © 2012 DigitalDay | www.Digital-Day.com Mobile bookmark dimensions The recommended basic size for this icon is 57×57 pixels, with 90 degree corners; for best display on the higher-resolution iPhone 4 screen, an icon size of 114×114 pixels is recommended. For the iPad and iPad2, the basic size is 72x72 pixels with 90 degree corners. For the iPad3, the high-resolution size would be 144x144 pixels. The icon file referenced by apple-touch-icon is modified to add rounded corners, drop shadow, and reflective shine. Alternatively, an apple-touch-icon-precomposed icon may be provided to instruct devices not to apply reflective shine on the image. 12

13. © 2012 DigitalDay | www.Digital-Day.com Mobile email design considerations http://www.ddcg.com/mobile_email_size_ref/index.html This shows the DDCG roundtable email alongside a random assortment of spam for the sake of comparing initial default zoom, text size, etc. As long as the main headlines are legible at the initial default zoom state, we're generally in good shape (Apple's emails are a good example of this approach). In general, people are going to have to zoom in to read body copy, but they determine whether or not they want to based upon the headlines. 13

14. © 2012 DigitalDay | www.Digital-Day.com Designing for the future, today We need to design for “DEVICES WE HAVEN'T IMAGINED YET.” This notion has been bouncing around in my head for months now. Our first couple of mobile sites were built strictly for iPhones– so much so that we were trying to detect mobile browser and OS versions to determine which version of the site to serve up. Now that feels totally wrong– no one could ever keep up with future updates using that approach. 14

15. © 2012 DigitalDay | www.Digital-Day.com Designing for the future, today When we look at responsive design today, we're anticipating resolutions on devices popular TODAY. Our layouts change based on width thresholds that line up with desktops, laptops, iPads, and phones. If you squint at this as if you're looking back at it from three years in the future, the wrongness of it already seems evident. Building to specific resolutions equates to building to specific OSs. There will be resolutions, not to mention resolution independence and applications that we haven't imagined yet (I bet display on whatever TV turns into will have a lot to do with what happens).resolution independence 15

16. © 2012 DigitalDay | www.Digital-Day.com Relinquishing control and controlling the unknown Web design as we've known it thus far– basically slightly interactive print design– is over (in terms of thinking about what's next). Design in its current form will straggle on for another decade or so. The future is about presenting data from a multitude of disparate sources– letting users pick and choose what they want to see and how. It's going to be a combination of relinquishing control and controlling the unknown. 16

17. © 2012 DigitalDay | www.Digital-Day.com Mobile design resources http://mobiledesign.org/mobile_design Retina Display Example: http://duncandavidson.com/blog/2012/03/photography_on_ retina http://duncandavidson.com/blog/2012/03/photography_on_ retina http://uxmovement.com/buttons/finger-friendly-design- ideal-mobile-touch-target-sizes/ http://uxmovement.com/buttons/finger-friendly-design- ideal-mobile-touch-target-sizes/ 17