1. Designing for m-CommercebyShiran Sanjeewa & Niranga Rajapaksha 2014 Netstarter

2. Your smartphone hasmore processingpower than theonboard computer ofApollo 11 2014 Netstarter 3. Three ways to deliverM-Commerce Experience Native App Separate Mobile Theme Responsive 2014 Netstarter 4. Why?ResponsiveOne website, multipleviewports. 2014 Netstarter 5. The 4 Ingredients Define device groups (Breakpoints) Create a default reference design Define rules for content and design Go for a framework and a flexible layout. 2014 Netstarter 6. The Recipe Simplified Navigation Prioritize content Minimize user input 2014 Netstarter 7. Prototype, Review & Refine 2014 Netstarter 8. Setting up Breakpoints 2014 Netstarter 9. The Wireframesand Designs 2014 Netstarter 10. A Case Study 2014 Netstarter 11. Wireframe for 1200px 2014 Netstarter 12. Visual Design for 1200px 2014 Netstarter 13. 768px 2014 Netstarter 14. 768px 2014 Netstarter 15. 320px 2014 Netstarter 16. 320px 2014 Netstarter 17. The Style Guide 2014 Netstarter 18. 2014 Netstarter 19. Why do you need a styleguide? Can Identify Common Elements Can create common CSS file and easy tomaintain. SASS / LESS friendly 2014 Netstarter 20. http://www.dicksmith.com.au/ 2014 Netstarter 21. http://m.dicksmith.com.au 2014 Netstarter 22. Responsive Theme. One code base Easier to maintain Can add or remove breakpoints easily 2014 Netstarter 23. 1654px 2014 Netstarter 24. 1425px 2014 Netstarter 25. 1164px 2014 Netstarter 26. 960px 2014 Netstarter 27. 768px 2014 Netstarter 28. 480px 2014 Netstarter 29. Magento site of the year finalistwww.activeskin.com.au 2014 Netstarter 30. Responsive CSS Framework? 2014 Netstarter 31. SASS and LESS.. 2014 Netstarter 32. Clean CSS Work concurrently 2014 Netstarter 33. Benefits of Responsive CSSFramework ? Speeds up your development Enables cross-browser functionality Gives you clean and symmetrical layouts Enforces good web design habits 2014 Netstarter 34. 2014 Netstarter 35. 1.Battery Life 2014 Netstarter 36. 2.Speed 2014 Netstarter 37. 3.Bandwidth 2014 Netstarter 38. Tools you should use..Page insightYSLOW 2014 Netstarter 39. Read the report. 2014 Netstarter 40. Image Sprites 2014 Netstarter 41. Font-awesome is awesome 2014 Netstarter 42. Thank You! 2014 Netstarter