responsive web design
DESCRIPTION
This was a presentation done by Zilojo Ltd during the Mobile Web East Africa Conference. MWEA is East Africa’s premier mobile conference.TRANSCRIPT
![Page 1: Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7a1284a795993718b46f5/html5/thumbnails/1.jpg)
![Page 2: Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7a1284a795993718b46f5/html5/thumbnails/2.jpg)
Responsive Web Design
Zilojo© Team
![Page 3: Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7a1284a795993718b46f5/html5/thumbnails/3.jpg)
The situation
Zilojo© Team
![Page 4: Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7a1284a795993718b46f5/html5/thumbnails/4.jpg)
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](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7a1284a795993718b46f5/html5/thumbnails/5.jpg)
Global Device Share
//Graph
![Page 6: Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7a1284a795993718b46f5/html5/thumbnails/6.jpg)
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](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7a1284a795993718b46f5/html5/thumbnails/7.jpg)
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](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7a1284a795993718b46f5/html5/thumbnails/8.jpg)
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](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7a1284a795993718b46f5/html5/thumbnails/9.jpg)
Responsive Vs Adaptive design
![Page 10: Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7a1284a795993718b46f5/html5/thumbnails/10.jpg)
Elements: Responsive Web design
Media Queries
Flexible Images
Fluid
Grids
![Page 11: Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7a1284a795993718b46f5/html5/thumbnails/11.jpg)
Media Queries
![Page 12: Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7a1284a795993718b46f5/html5/thumbnails/12.jpg)
Fluid Grids
![Page 13: Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7a1284a795993718b46f5/html5/thumbnails/13.jpg)
Flexible Images
![Page 14: Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7a1284a795993718b46f5/html5/thumbnails/14.jpg)
Considerations: Responsive Web Design
Mobile First
Call to Action
Columns Branding
![Page 15: Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7a1284a795993718b46f5/html5/thumbnails/15.jpg)
Pros: Responsive Web DesignIncreased Conversions
Easy to maintain
Improves SEO
Saves Time and Money
Competitive Advantage
![Page 16: Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7a1284a795993718b46f5/html5/thumbnails/16.jpg)
Cons: Responsive Web Design
Increase Development Time- Pioneer Phase
Advertising
Complex Testing
![Page 17: Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7a1284a795993718b46f5/html5/thumbnails/17.jpg)
Relevance to the East Africa Region
![Page 18: Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7a1284a795993718b46f5/html5/thumbnails/18.jpg)
Relevance to the East Africa Region
![Page 19: Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7a1284a795993718b46f5/html5/thumbnails/19.jpg)
Figure: Estimated Number of Internet Users and Internet Penetration
![Page 20: Responsive Web Design](https://reader033.vdocuments.us/reader033/viewer/2022061218/54b7a1284a795993718b46f5/html5/thumbnails/20.jpg)
Case Study: Tusky’s Supermarket