designing for mcommerce
DESCRIPTION
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-7584f2ab4702TRANSCRIPT
Designing for m-Commerceby
Shiran Sanjeewa & Niranga Rajapaksha
Your smartphone has more processing power than the onboard computer of Apollo 11
Three ways to deliverM-Commerce Experience
» Native App
» Separate Mobile Theme
» Responsive
Why?ResponsiveOne website, multiple viewports.
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.
The Recipe
» Simplified Navigation
» Prioritize content
» Minimize user input
Prototype, Review & Refine
Setting up Breakpoints
The Wireframesand Designs
A Case Study
Wireframe for 1200px
Visual Design for 1200px
768px
768px
320px
320px
The Style Guide
Why do you need a style guide?
» Can Identify Common Elements
» Can create common CSS file and easy to maintain.
» SASS / LESS friendly
http://www.dicksmith.com.au/
https://www.dicksmith.com.au/?___store=dsau_mobile
Responsive Theme.
» One code base
» Easier to maintain
» Can add or remove breakpoints easily
1654px
1425px
1164px
960px
768px
480px
www.activeskin.com.au
Magento site of the year finalist
Responsive CSS Framework?
SASS and LESS…..
Clean CSS Work concurrently
Benefits of Responsive CSS Framework ?
» Speeds up your development
» Enables cross-browser functionality
» Gives you clean and symmetrical layouts
» Enforces good web design habits
1.Battery Life
2.Speed
3.Bandwidth
Page insight
YSLOW
Tools you should use..
Read the report.
Image Sprites…
Font-awesome is awesome
Thank You!