Designing for mCommerce
•Download as PPTX, PDF•
2 likes•676 views
Everyone is talking about mobile. Some e-commerce websites are venturing into it. Mobile commerce (also known as “m-commerce”) has immense potential, exhibiting a 86% growth rate and hitting $25 billion in 2012 (set to reach $86 billion by 2016, according to eMarketer). This is a presentation I've done at eCommerce Now and Beyond organised by Netstarter Sri Lanka. Related Article on Medium - https://medium.com/@shiran_sanjeewa/designing-for-m-commerce-7584f2ab4702
Recommended
More Related Content
Similar to Designing for mCommerce
Similar to Designing for mCommerce (20)
Recently uploaded
Recently uploaded (20)
Designing for mCommerce
- 1. Designing for m-Commerce by Shiran Sanjeewa & Niranga Rajapaksha
- 2. Your smartphone has more processing power than the onboard computer of Apollo 11
- 3. Three ways to deliver M-Commerce Experience » Native App » Separate Mobile Theme » Responsive
- 4. Why? Responsiv e One website, multiple viewports.
- 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.
- 6. The Recipe » Simplified Navigation » Prioritize content » Minimize user input
- 7. Prototype, Review & Refine
- 9. The Wireframes and Designs
- 10. A Case Study
- 12. Visual Design for 1200px
- 13. 768px
- 14. 768px
- 15. 320px
- 16. 320px
- 17. The Style Guide
- 19. Why do you need a style guide? » Can Identify Common Elements » Can create common CSS file and easy to maintain. » SASS / LESS friendly
- 22. Responsive Theme. » One code base » Easier to maintain » Can add or remove breakpoints easily
- 23. 1654px
- 24. 1425px
- 25. 1164px
- 26. 960px
- 27. 768px
- 28. 480px
- 29. Magento site of the year finalist www.activeskin.com.au
- 31. SASS and LESS…..
- 32. Clean CSS Work concurrently
- 33. Benefits of Responsive CSS Framework ? » Speeds up your development » Enables cross-browser functionality » Gives you clean and symmetrical layouts » Enforces good web design habits
- 35. 1.Battery Life
- 36. 2.Speed
- 37. 3.Bandwidt h
- 38. Tools you should use.. Page insight YSLOW
- 39. Read the report.
- 40. Image Sprites…
- 42. Thank You!
Editor's Notes
- Short for mobile e-commerce, is the term used to describe the growing trend of using devices, such as laptops, handheld computers or mobile phones to initiate or complete online electronic commerce transactions. We are relying on advanced handheld communication devices more that ever in the human history, more commercial opportunities are being created in this particular space enabling businesses to reach their end users directly and the users send feedback to the business directly, That enabled space is called m-Commerce.
- Many worries about the security of their personal and financial details might be preventing many from embracing m-commerce fully. More than 60% of both of smartphone and tablet owners said they believe it is not safe to share those details on their mobile devices, underlining a need for education about security issues. Furthermore, 54% of smartphone users and 61% of tablet users said they find mobile applications and websites ineffective and difficult to use, further discouraging purchasing on those devices.
- Mobile responsive design is all about automatically delivering your audience the content they want, within the context that they’re viewing it. Since it is one website, you get the maximum security and maintainability as well as you get to deliver the similar shopping experience across a variety of different devices. Responsive design eliminates the need for multiple versions of your site, or expensive app development and maintenance. As well as gives good SEO Support
- Define device groups by grouping screens with similar widths together resulting in a manageable number of groups, Create a default reference design that will adapt to smaller and larger screens, Define rules for content and design adaptation for it to display well across different viewpoints Opt for Web standards and a flexible layout and frameworks in our case “foundation” created by Zurb Media
- SIMPLIFY NAVIGATION Without a mouse to point and click, mobile users have to rely on tiny keypads, trackballs and touch to navigate mobile websites. Add in the small screen with the need to complete tasks quickly and efficiently, and clear and intuitive navigation becomes crucial. A common approach that works for the start pages of most sites is a list of links to main features and content, prioritized based on user needs. Reduce the number of categories and levels of navigation, Make links obvious, Use clear, concise and consistent labels PRIORITIZE CONTENT Smaller screen sizes require even more careful attention to the content displayed to the user. We put our editor’s hat and cut unnecessary content, then we cut some more. When we’re done, we prioritize the content and display the most important content first. MINIMIZE USER INPUT Keep your URL as short as possible, Use alternative input mechanisms where possible. Limit input to essential fields Select the best mobile input option (e.g. allowing users to select from a list of options is often faster than typing).
- This is a sample style guide that we use normally, it contains all the colors, buttons, H tags, input fields etc.
- Now Shiran and his team has provided the PSD’s and the style guide to us . Why do we need a style guide? Using style guide developers will be able to identify common elements and can create a common CSS file which is really easy to maintain. Also, it will come handy if developer going to use SASS or LESS framework, especially to create MIXINGS and variables. We will discuss about SASS and LESS later.
- In Earlier days, we used a separate mobile theme for mobile web site and it was a complete different web site and we had to maintain it separately and even it has a separate URLs. Specially, with Magento developer can easily do this. If there is different devices you have to create separate themes. However, maintaining it was a tough task. If client request a new feature developer had to build a mobile version. Also, there was SEO issues as well.
- But with responsive theme, developer can use one code base to maintain all the versions. Manipulating CSS and JS, developer can do wonders. I will tell you a story, how we build our first responsive web site. One day, one of our directors Jakes, came to skype chat told me, Mate! We need a responsive web site. This is going to be massive. And it has 7 break points I was like, 7 BREAKPOINTS????? Interesting…
- It took about 4 months to build this web site and we have completed the site with many features. The site called “activeskin.com.au”
- It took about 4 months to build this web site and we have completed the site with many features. The site called “activeskin.com.au”
- It took about 4 months to build this web site and we have completed the site with many features. The site called “activeskin.com.au”
- It took about 4 months to build this web site and we have completed the site with many features. The site called “activeskin.com.au”
- It took about 4 months to build this web site and we have completed the site with many features. The site called “activeskin.com.au”
- It took about 4 months to build this web site and we have completed the site with many features. The site called “activeskin.com.au”
- And the site has become “Magento site of the year finalist” last year. When we completed the web site, we have learnt many things. Most important lesson was, this is not going to be the last responsive web site that we built, and we have to build more web site in the future. So, we had a discussion, how are we going to build a responsive web site with ease. Without spending so many hours.
- Then we have decided to use Responsive CSS framework. There are many frameworks available in the internet. We chose use Bootstrap and Foundation. What are the frameworks that you guys use? Any specific reasons?
- Main reason to choose Bootstrap and foundation is, Both Bootstrap and Foundation support SASS and Less
- With SASS or LESS developer can generate Clean, symmetrical code easily and it allows many developers to work concurrently as well. And using mixings and variable, developer can easily eliminate unwanted CSS tags.
- A CSS framework lays out the groundwork for you so you can start developing quicker. It’s already coded to look similar across all browser, so you can focus on customizing and creating content rather than tweaking the base appearance. A grid-based CSS framework arrangements are pixel perfect. So developer don’t have to worry about the layout. He just have to follow the framework. The more you work, you will become an expert. CSS frameworks encourage developer to follow good habits. It gives you a set of selectors that you’ll use for all websites and web apps that you develop with the framework, which creates consistency in your web design.
- When it's come to mobile. There are three things that developer should keep in his mind.
- Number 1, Battery Unlike desktop PC, mobile devices have limited power, if your site drains users battery, you will lose your visitors. So every bite is counts. You should optimize your web site.
- Number 2, Speed If your mobile site take longer period to load, features are too complicated to use, simply user will get bored. And you will lose your visitors. So every bite is count. You should optimize your web site.
- Number 3, Bandwidth If your site has unwanted content, large images and banners? Duplicate content. I will consume user’s bandwidth. And you will lose your visitors, mobile internet is costly user will lose interest to visit your site. So, you should optimize your web site.
- Tools you should use. I said that, you should optimize your web site quite a few times. So, when it’s come to optimization you can use chrome page insight or YSLOW to generate a report about your web sites performance.
- If you run the YSlow you will get this kind of report and developer can act according to it. Specially, developer can reduce HTTP request, minimizing CSS and merging CSS and JS. Using sass or less you can achieve it easily.
- Also, developer can use sprite images and technics like font-awesome to replace icons which is quite popular these days.
- There are many thing that I wanted to discuss with you but, we have limited time. So I have to conclude my presentation now. Thank You!