designing for mcommerce

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!