SlideShare a Scribd company logo

Building Mobile Friendly Websites

•Download as PPT, PDF•
•
Cittrex
Cittrex

This presentation emphasises the relevance of responsive web design as an ideal option for building mobile friendly websites.

1 of 15
A Presentation based on the statement: “Web applications that are suited for the needs of mobile devices and mobile users, based on existing Web standards, will play an important role in how the Web ecosystem evolves to encompass the mobile platform” Daniel Appelquist (Vodafone) W3C Mobile Wednesday Workshop Mobile Web 2.0 Week in Seoul, Korea 3th - 7th March 2008 Presented By: Oluwasegun Adedokun Adedugbe
Overview From the statement: “Web applications that are suited for the needs of mobile devices and mobile users, based on existing Web standards, will play an important role in how the Web ecosystem evolves to encompass the mobile platform” We have the following as keywords:       Web Applications: web-based applications on the Internet Mobile Devices: handheld devices with computing capabilities Mobile Users: users of mobile devices Web Standards: sets of standards for the web ecosystem Web Ecosystem: the world wide web Mobile Platform: mobile operating systems, devices and users
Web Standards It defines generally accepted standards in relation to the technologies used on the World Wide Web to build web applications and how they are implemented. These include:       HTML5 CSS Media Queries Mobile Browsers Media Listeners Mobile Page Validation Mobile Platforms
HTML5      Newest version of HTML (HyperText Markup Language) Introduces new elements that enhances consistency and uniformity in HTML documents Also, it has made certain types of browser plugins redundant and/or unnecessary by replacing them with some newly added HTML elements These also enhance having consistent rendition for HTML documents across different web browsers Examples are ‘<video>’, ‘<audio>’, ‘<section>’, etc.
CSS Media Queries    A module introduced into the newest version of CSS (CSS3) Used to declare different sets of CSS rules for different computing devices, based on their screen sizes The essence is to ensure that web applications have a fluid layout which responds to the rendering device by adapting itself to render in a manner that will be suitable for the mobile user.  An example declaration is:  “@media screen and max-width: 480px { p.search{float: left;} }”
Other Standards  Mobile Web Browsers – Examples are Opera Mini, NetFront, Firefox for Mobile, etc  Media Listeners  Mobile Page Validation (via http://validator.w3.org/mobile/)  Mobile Platforms, such as iOS, Windows 7, Android, Blackberry, Symbian, etc.
Options  There are several options available for the encompassing of the mobile platform by the Web ecosystem. The major ones are as follows:  Building a mobile site  Building a mobile template  Building a responsive site
Mobile Site         Developing another version of a web application specifically for mobile devices. Advantages: The cost implication is low The turn-around time is quick Disadvantages Oftentimes, it will be deficient in features Different URLs for main and mobile site Rigid design – inconsistent user experience
Mobile Template        Having two templates for a web application and serving them to the requesting device as appropriate. Advantages: Single site, single URL Disadvantages Oftentimes, it will be deficient in features Uses browser sniffing which is inconsistent Rigid design, not fluid
Responsive Site        Developing that a web application that will be fluid in nature and render properly on all types of devices, either fixed or mobile. Advantages: Single site, single URL Fluid design that renders well on all devices Portability and Consistency Disadvantages Might be difficult to build into an existing site
Others       Mobile Application: A native application built for a specific mobile platform. Features: Runs on the local device Requires updates sometimes Data repository could be outdated Could be expensive to build, challenging to develop and tedious to publicise
Others (continued)     Hybrids: A combination of at least two of options together into one or the implementation of a non-standard option Examples are: - Facebook (m.facebook.com) - BBC (m.bbc.co.uk) They both have mobile sites that are also responsive in nature.
Conclusion and Recommendation   The use of HTML5 and CSS Media Queries to create responsive web designs is highly recommended as an ideal way to ensure that mobile users can make judicious use of web applications on mobile devices without missing out on having a great user experience. Having a single web application that displays/renders perfectly well on any form of device, either fixed or mobile, irrespective of the screen size will go a long way in fully integrating the mobile platform into the web ecosystem.
References     Curran, K., Bond, A. & Fisher, G., (2012). HTML 5 and the Mobile Web. International Journal of Innovation in the Digital Economy. 3 (2) p. 40-56 Power, M. (2012). Delivering Web to Mobile. JISC Observatory Techwatch Report. 1.0 (May) p. 1-20 MSDN Magazine (2012) Building HTML5 Applications [Online]. Available from: http://msdn.microsoft.com/enus/magazine/hh882445.aspx [Accessed: 04 November 2012] Marcotte, E. (2011). A Book Apart: Responsive Web Design. New York: Jeffrey Zeldman.
References     Middleton, B. (2012). Responsive Design Vs. Mobile Site: The Benefits and Drawbacks. Planet Argon (May) p. 1-6 Gardner, B.S. (2011). Responsive Web Design: Enriching the User Experience. Inside the Digital Ecosystem. 11. (October) p. 15-22 Jacobs, D. (2011). CSS3: Ripe and Ready to Respond. Web 2.0 Expo. New York, October 11, 2011 New York. pp. 170-212. Lewis, J.R. (2012). Design Responsively: Flexible Scalable Web Layouts using HTML5 and CSS3. Sandia National Laboratories. (May) p. 1-42

More Related Content

Building Mobile Friendly Websites

  • 1. A Presentation based on the statement: “Web applications that are suited for the needs of mobile devices and mobile users, based on existing Web standards, will play an important role in how the Web ecosystem evolves to encompass the mobile platform” Daniel Appelquist (Vodafone) W3C Mobile Wednesday Workshop Mobile Web 2.0 Week in Seoul, Korea 3th - 7th March 2008 Presented By: Oluwasegun Adedokun Adedugbe
  • 2. Overview From the statement: “Web applications that are suited for the needs of mobile devices and mobile users, based on existing Web standards, will play an important role in how the Web ecosystem evolves to encompass the mobile platform” We have the following as keywords:       Web Applications: web-based applications on the Internet Mobile Devices: handheld devices with computing capabilities Mobile Users: users of mobile devices Web Standards: sets of standards for the web ecosystem Web Ecosystem: the world wide web Mobile Platform: mobile operating systems, devices and users
  • 3. Web Standards It defines generally accepted standards in relation to the technologies used on the World Wide Web to build web applications and how they are implemented. These include:       HTML5 CSS Media Queries Mobile Browsers Media Listeners Mobile Page Validation Mobile Platforms
  • 4. HTML5      Newest version of HTML (HyperText Markup Language) Introduces new elements that enhances consistency and uniformity in HTML documents Also, it has made certain types of browser plugins redundant and/or unnecessary by replacing them with some newly added HTML elements These also enhance having consistent rendition for HTML documents across different web browsers Examples are ‘<video>’, ‘<audio>’, ‘<section>’, etc.
  • 5. CSS Media Queries    A module introduced into the newest version of CSS (CSS3) Used to declare different sets of CSS rules for different computing devices, based on their screen sizes The essence is to ensure that web applications have a fluid layout which responds to the rendering device by adapting itself to render in a manner that will be suitable for the mobile user.  An example declaration is:  “@media screen and max-width: 480px { p.search{float: left;} }”
  • 6. Other Standards  Mobile Web Browsers – Examples are Opera Mini, NetFront, Firefox for Mobile, etc  Media Listeners  Mobile Page Validation (via http://validator.w3.org/mobile/)  Mobile Platforms, such as iOS, Windows 7, Android, Blackberry, Symbian, etc.
  • 7. Options  There are several options available for the encompassing of the mobile platform by the Web ecosystem. The major ones are as follows:  Building a mobile site  Building a mobile template  Building a responsive site
  • 8. Mobile Site         Developing another version of a web application specifically for mobile devices. Advantages: The cost implication is low The turn-around time is quick Disadvantages Oftentimes, it will be deficient in features Different URLs for main and mobile site Rigid design – inconsistent user experience
  • 9. Mobile Template        Having two templates for a web application and serving them to the requesting device as appropriate. Advantages: Single site, single URL Disadvantages Oftentimes, it will be deficient in features Uses browser sniffing which is inconsistent Rigid design, not fluid
  • 10. Responsive Site        Developing that a web application that will be fluid in nature and render properly on all types of devices, either fixed or mobile. Advantages: Single site, single URL Fluid design that renders well on all devices Portability and Consistency Disadvantages Might be difficult to build into an existing site
  • 11. Others       Mobile Application: A native application built for a specific mobile platform. Features: Runs on the local device Requires updates sometimes Data repository could be outdated Could be expensive to build, challenging to develop and tedious to publicise
  • 12. Others (continued)     Hybrids: A combination of at least two of options together into one or the implementation of a non-standard option Examples are: - Facebook (m.facebook.com) - BBC (m.bbc.co.uk) They both have mobile sites that are also responsive in nature.
  • 13. Conclusion and Recommendation   The use of HTML5 and CSS Media Queries to create responsive web designs is highly recommended as an ideal way to ensure that mobile users can make judicious use of web applications on mobile devices without missing out on having a great user experience. Having a single web application that displays/renders perfectly well on any form of device, either fixed or mobile, irrespective of the screen size will go a long way in fully integrating the mobile platform into the web ecosystem.
  • 14. References     Curran, K., Bond, A. & Fisher, G., (2012). HTML 5 and the Mobile Web. International Journal of Innovation in the Digital Economy. 3 (2) p. 40-56 Power, M. (2012). Delivering Web to Mobile. JISC Observatory Techwatch Report. 1.0 (May) p. 1-20 MSDN Magazine (2012) Building HTML5 Applications [Online]. Available from: http://msdn.microsoft.com/enus/magazine/hh882445.aspx [Accessed: 04 November 2012] Marcotte, E. (2011). A Book Apart: Responsive Web Design. New York: Jeffrey Zeldman.
  • 15. References     Middleton, B. (2012). Responsive Design Vs. Mobile Site: The Benefits and Drawbacks. Planet Argon (May) p. 1-6 Gardner, B.S. (2011). Responsive Web Design: Enriching the User Experience. Inside the Digital Ecosystem. 11. (October) p. 15-22 Jacobs, D. (2011). CSS3: Ripe and Ready to Respond. Web 2.0 Expo. New York, October 11, 2011 New York. pp. 170-212. Lewis, J.R. (2012). Design Responsively: Flexible Scalable Web Layouts using HTML5 and CSS3. Sandia National Laboratories. (May) p. 1-42