WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia
-
Upload
web-wednesday-thailand -
Category
Documents
-
view
716 -
download
1
Transcript of WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia
![Page 1: WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia](https://reader033.fdocuments.in/reader033/viewer/2022052523/555a5afcd8b42a47748b5019/html5/thumbnails/1.jpg)
RESPONSIVE WEB DESIGN
![Page 2: WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia](https://reader033.fdocuments.in/reader033/viewer/2022052523/555a5afcd8b42a47748b5019/html5/thumbnails/2.jpg)
A website that responds to the device that accesses
it and delivers the appropriate output for it uses
rather than designing multiple sites for different-sized
devices, this approach designs one site but specifies
how it should appear on varied devices.
What is responsive design
![Page 3: WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia](https://reader033.fdocuments.in/reader033/viewer/2022052523/555a5afcd8b42a47748b5019/html5/thumbnails/3.jpg)
There are currently 6 Billion mobile subscribers worldwide
This equals to 87% of the world’s population
China and India account for 30% of this growth
There are over 1.2 Billion people accessing the web from
their mobiles
Over 300,000 apps have been developed in past 3 years
Google earns 2.5 Billion in mobile ad revenue per year
Why mobile friendly ?
Source: www.digitalbuzzblog.com/infographic-2012-mobile-growth-statistics/
![Page 4: WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia](https://reader033.fdocuments.in/reader033/viewer/2022052523/555a5afcd8b42a47748b5019/html5/thumbnails/4.jpg)
Why mobile friendly ?
Source: www.digitalbuzzblog.com/infographic-2012-mobile-growth-statistics/
![Page 5: WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia](https://reader033.fdocuments.in/reader033/viewer/2022052523/555a5afcd8b42a47748b5019/html5/thumbnails/5.jpg)
Source: www.digitalbuzzblog.com/infographic-2012-mobile-growth-statistics/
![Page 6: WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia](https://reader033.fdocuments.in/reader033/viewer/2022052523/555a5afcd8b42a47748b5019/html5/thumbnails/6.jpg)
Why mobile friendly ?
Source: googlemobileads.blogspot.com/2012/09/mobile-friendly-sites-turn-visitors.html
![Page 7: WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia](https://reader033.fdocuments.in/reader033/viewer/2022052523/555a5afcd8b42a47748b5019/html5/thumbnails/7.jpg)
48% of users say they feel frustrated and annoyed when
they get to a site that’s not mobile-friendly.
52% of users said that a bad mobile experience made them
less likely to engage with a company.
48% said that if a site didn’t work well on their
smartphones, it made them feel like the company didn’t
care about their business.
Non-mobile friendly sites can hurt a company’s reputation !!
Source: googlemobileads.blogspot.com/2012/09/mobile-friendly-sites-turn-visitors.html
![Page 8: WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia](https://reader033.fdocuments.in/reader033/viewer/2022052523/555a5afcd8b42a47748b5019/html5/thumbnails/8.jpg)
How many screen size actually?
![Page 9: WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia](https://reader033.fdocuments.in/reader033/viewer/2022052523/555a5afcd8b42a47748b5019/html5/thumbnails/9.jpg)
Benefit of Responsive Website?
Support broad range of screen sizes.
Centralize website content, easy to update.
Full tracking code and URL management.
SEO friendly, better in result.
Get response and convert immediately from mobile
search result.
No need for App Store approval.
![Page 10: WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia](https://reader033.fdocuments.in/reader033/viewer/2022052523/555a5afcd8b42a47748b5019/html5/thumbnails/10.jpg)
Mobile Web Best Practices?
Source: http://www.howtogomo.com/en/d/why-go-mo/#mobile-best-practices
![Page 11: WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia](https://reader033.fdocuments.in/reader033/viewer/2022052523/555a5afcd8b42a47748b5019/html5/thumbnails/11.jpg)
Mobile Web Best Practices?
Source: http://www.howtogomo.com/en/d/why-go-mo/#mobile-best-practices
![Page 12: WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia](https://reader033.fdocuments.in/reader033/viewer/2022052523/555a5afcd8b42a47748b5019/html5/thumbnails/12.jpg)
Mobile Web Best Practices?
Source: http://www.howtogomo.com/en/d/why-go-mo/#mobile-best-practices
![Page 13: WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia](https://reader033.fdocuments.in/reader033/viewer/2022052523/555a5afcd8b42a47748b5019/html5/thumbnails/13.jpg)
Mobile Web Best Practices?
Source: http://www.howtogomo.com/en/d/why-go-mo/#mobile-best-practices
![Page 14: WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia](https://reader033.fdocuments.in/reader033/viewer/2022052523/555a5afcd8b42a47748b5019/html5/thumbnails/14.jpg)
Mobile Web Best Practices?
Source: http://www.howtogomo.com/en/d/why-go-mo/#mobile-best-practices
![Page 15: WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia](https://reader033.fdocuments.in/reader033/viewer/2022052523/555a5afcd8b42a47748b5019/html5/thumbnails/15.jpg)
How much does it cost?
Start from open sources to $75,000
Source: http://www.iab.net/mobilevendors
![Page 16: WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia](https://reader033.fdocuments.in/reader033/viewer/2022052523/555a5afcd8b42a47748b5019/html5/thumbnails/16.jpg)
Where should I get Start?
Source: http://www.howtogomo.com/en/d/get-started/#build-your-site
![Page 17: WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia](https://reader033.fdocuments.in/reader033/viewer/2022052523/555a5afcd8b42a47748b5019/html5/thumbnails/17.jpg)
Where should I get Start?
Source: http://www.howtogomo.com/en/d/get-started/#build-your-site
![Page 18: WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia](https://reader033.fdocuments.in/reader033/viewer/2022052523/555a5afcd8b42a47748b5019/html5/thumbnails/18.jpg)
Where should I get Start?
Source: http://www.howtogomo.com/en/d/get-started/#build-your-site
![Page 19: WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia](https://reader033.fdocuments.in/reader033/viewer/2022052523/555a5afcd8b42a47748b5019/html5/thumbnails/19.jpg)
Mobile App VS Responsive Design?
Source: http://analytics.blogspot.com/2012/07/mobile-websites-vs-responsive-design.html
![Page 20: WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia](https://reader033.fdocuments.in/reader033/viewer/2022052523/555a5afcd8b42a47748b5019/html5/thumbnails/20.jpg)
Which one to choose?
Source: http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-
website-presidential-smackdown/
Mitt Romney’s dedicated
mobile website
VS Barack Obama’s
responsive website.
![Page 21: WWTH 11.0: Responsive Web Design by Komjak, Co-Founder Flexmedia](https://reader033.fdocuments.in/reader033/viewer/2022052523/555a5afcd8b42a47748b5019/html5/thumbnails/21.jpg)
Thank you !!