06 - Mobile Design and Development.pptx - Mobile Design and...

  • No School
  • AA 1
  • 110

This preview shows page 1 - 21 out of 110 pages.

Mobile Design and Development
Image of page 1

Subscribe to view the full document.

Outline Why Care About Mobile Phones? Mobile Features, Challenges, and Applications Markup Languages Design Considerations and Mobile Web Best Practices Responsive Web Design The Viewport Media Queries Device Dedication Creating Mobile Optimized Web pages From Pages to Applications Concluding Remarks
Image of page 2
The Market is Changing…Going Mobile
Image of page 3

Subscribe to view the full document.

Why are Mobile Websites Important ? Increase growth in mobile usage. You want to reach more people.
Image of page 4
Image of page 5

Subscribe to view the full document.

Image of page 6
Image of page 7

Subscribe to view the full document.

Mobile Features Lightweight with long battery life: easy to carry anywhere. Cameras. GPS locations. Touchscreens. Wi-Fi and phone data plans. Advanced computing abilities.
Image of page 8
Challenges / How is it Different ? Connection speed and cost. Screen size. Presentation and layout. Input. Limited processing power and memory. Rendering Web pages. Browser support. Old mobile devices support limited browsing.
Image of page 9

Subscribe to view the full document.

Top 3 Software Platforms Google’s Android Apple’s iOS Microsoft’s Windows Mobile 10
Image of page 10
Mobile Applications Native Compiled and downloaded applications. Browser-Based Apps/services developed in a markup language. Hybrid Browser & Native. A browser is needed for discovery and download. iPhone App Store & BlackBerry App World.
Image of page 11

Subscribe to view the full document.

The Main Mobile Browser Platforms WebKit Safari Chrome BlackBerry Palm Presto Opera Opera Mobile Gecko Firefox Firefox Mobile Trident Internet Explorer IE Mobile Mobile browsers can be full-featured as desktop browsers . Layout Engine : Browsers :
Image of page 12
Mobile Browser Classes
Image of page 13

Subscribe to view the full document.

Markup Languages Markup Languages for Mobile Device Browsers: HDML (Handheld Device Markup Language) WML (Wireless Markup Language) C-HTML (Compact HTML) XHTML Basic XHTML-MP (Mobile Profile) 14
Image of page 14
HDML HDML = Handheld Device Markup Language. Developed in 1996 by Openwave. Never standardized by W3C. Influenced the development of C-HTML & WML. 15
Image of page 15

Subscribe to view the full document.

WML (Wireless Markup Language ( WML is XML-based and runs over WAP. WML = Wireless Markup Language. WAP = Wireless Application Protocol. WML is to WAP as HTML is to HTTP. 16 Mobile Applications – Mobile Platforms – Browser-Based
Image of page 16
WML Example <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" ""> <wml> <card id="MyFirstCard" title="First Card"> <p align="center"> My First WML Example </p> </card> </wml> 17
Image of page 17

Subscribe to view the full document.

C-HTML C-HTML = Compact HTML. A subset of HTML. Accepted by W3C in 1998. Is becoming obsolete due to XHTML. 18
Image of page 18
XHTML Basic Became W3C recommendation in 2000. Most restrictive version of XHTML. 19 Structure body, head, html, title Text abbr,acronym,address,blockquote,br,cite,code,dfn,div,em,h1,h2,h3,h4, h5,h6,kbd, pn,pre,q,samp,span,string,var Hypertext a List dl,dt,dd,ul,li Forms form,input,label,select,option,textarea Tables caption,table,td,tr,th Image img Object object,param Meta Info meta Link link Base base
Image of page 19

Subscribe to view the full document.

Valid XHTML Basic Syntax
Image of page 20
Image of page 21
  • Fall '19
  • Cascading Style Sheets, XHTML, Mobile browser

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern

Ask Expert Tutors You can ask 0 bonus questions You can ask 0 questions (0 expire soon) You can ask 0 questions (will expire )
Answers in as fast as 15 minutes