Top Banner
21

Responsive Web Design

Jan 15, 2015

Download

Technology

zilojo

This was a presentation done by Zilojo Ltd during the Mobile Web East Africa Conference. MWEA is East Africa’s premier mobile conference.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Responsive Web Design
Page 2: Responsive Web Design

Responsive Web Design

Zilojo© Team

Page 3: Responsive Web Design

The situation

Zilojo© Team

Page 4: Responsive Web Design

Mobile Usage: Fixed Vs Mobile Access

2009 2010 2011 2012 2013 2014 20150

500

1000

1500

2000

2500

3000

Fixed Mobile

Page 5: Responsive Web Design

Global Device Share

//Graph

Page 6: Responsive Web Design

Mobile Usage: Site Traffic Insights

A dipstick research report by Zilojo showed that upon optimization for mobile revealed:

• Number of visits through mobile surpassed desktop visits by 15%

• 20% increase in dwell time• Visitors accessed more pages during site visits via mobile

when responsive than before

Page 7: Responsive Web Design

What did this growth lead to?

The need to design for optimal mobile sites that capture the audience in the “new” platform.

However this raised a problem as one had to design as per several mobile technologies such as HTML, XHTML Mobile Profile (WAP 2.0) or WML (a subset of HDML).

Page 8: Responsive Web Design

Responsive Web designAn approach to websites that allows developers

to create sites that load as per the device environment. The sites are sensitive to factors such as the screen size, orientation, browser settings and orientation.

This is in line with optimizing the viewer experience.

Page 9: Responsive Web Design

Responsive Vs Adaptive design

Page 10: Responsive Web Design

Elements: Responsive Web design

Media Queries

Flexible Images

Fluid

Grids

Page 11: Responsive Web Design

Media Queries

Page 12: Responsive Web Design

Fluid Grids

Page 13: Responsive Web Design

Flexible Images

Page 14: Responsive Web Design

Considerations: Responsive Web Design

Mobile First

Call to Action

Columns Branding

Page 15: Responsive Web Design

Pros: Responsive Web DesignIncreased Conversions

Easy to maintain

Improves SEO

Saves Time and Money

Competitive Advantage

Page 16: Responsive Web Design

Cons: Responsive Web Design

Increase Development Time- Pioneer Phase

Advertising

Complex Testing

Page 17: Responsive Web Design

Relevance to the East Africa Region

Page 18: Responsive Web Design

Relevance to the East Africa Region

Page 19: Responsive Web Design

Figure: Estimated Number of Internet Users and Internet Penetration

Page 20: Responsive Web Design

Case Study: Tusky’s Supermarket

Page 21: Responsive Web Design

Thank You.

Contact us: [email protected]