1. DEVELOPING FOR MOBILE Jackie Calapristi

2. AGENDA  Why you should go mobile  Mobile Design Options  Responsive Design  Tips & Tools to Help You Build  Meta Viewport Tag  Media Queries  A Word on HTML5  Best Practices for all Mobile Design

3. WHY YOU SHOULD GO MOBILE FACTS AND FIGURES 1.83 million people on mobile web 2.Smartphones now outsell PCs 3.Mobile websites reach all audiences, apps do not 4.Website mobile traffic grew by 50- 100% this year 5.Your website likely is impossible to use on mobile 6.Don’t get left behind

4. MOBILE WEB DESIGN OPTIONS 1.Responsive Web Design 2.Separate Mobile Specific Site 3.Native App

5. E-COMMERCE MOBILE PRESENCE BY USER TASK PREFERENCE

6. RESPONSIVE DESIGN A CLOSER LOOK  Responsive Design-Sasquatch!Sasquatch!  Client-side innovation, the browser size determines the page  Server-side technology, the server detects all environment rules

7. DETERMINING USER MOBILE DEVICE NO SIMPLE TASK!  Server-Side  Not in HTTP Request  PHP and HTTP Accept Code  Client-Side  Media Queries  Examine User-Agent String .NET IsMobileDevice property  Not Reliable  $$$$  Dedicated Device Detection Product https://deviceatlas.com/ https://deviceatlas.com/

8. TOOLS & TIPS FOR RESPONSIVE DESIGN  Test with Mobile Emulators  Opera Opera  Use Responsive Frameworks  Twitter Bootstrap Twitter Bootstrap  Foundation Foundation  Skeleton Skeleton  Responsive Website Tutorials  jQuery Plugins  CSS3  JavaScript

9. META VIEWPORT Definition: A phone browser’s visible screen area What it looks like: Purpose: Set’s the viewport width and initial-scale on mobile devices Features:  initial-scale=1, maximum-scale=1 Renders the page 100%  user-scalable=yes Allows user to zoom

10. MEDIA QUERIES Definition: CSS3 module to define styles for screen and print media types What it looks like: @media screen (min-width: 700px) and (max-width: 800px), handheld and (orientation: landscape) {... } Purpose: Tailored CSS for multiple viewport sizes and devices Features:  (min-width: 700px) and (max-width: 800px ) Renders for screen with this size viewport  Screen, Handheld Adjusts for screens and for handheld devices

11. USING AN ONLINE TUTORIAL STEPS WITH CODE HANDOUT 1.Add a Meta Viewport  2.For CSS: Use percentages rather than fixed widths 3.Add multiple Media Queries for different screen sizes:  @media screen and (max-width: 600px) { … }

12. THAT WAS A BASIC EXAMPLE  It will probably take a lot of time and testing to make sure your site is responsive across all platforms

13. A NOTE ON HTML5 THE FLASH KILLER & WHY YOU SHOULD USE IT  HTML5 = HTML + CSS + JS  Full mobile/cross browser support  Meta Tags:  Viewport  Full screen browsing mode  Add as Home Screen Icons  Your Website ~ Native App!  Better User Interactions  Cleaner Code (Ex: Class/IDs become tags, one line for animations) 

14. BEST PRACTICES FOR MOBILE DESIGN

15. CONCLUSION  One size does not fit all  Many Options for Mobile development  Many Resources, too!  Be sure to utilize Emulators, Templates, HTML5 and Best Practices

16. QUESTIONS?