SHA TIN 沙田 Mobile Web App Layout Development. Content adaptation – you create many versions of your site No content adaptation – Don’t need to create

Embed Size (px)

Text of SHA TIN 沙田 Mobile Web App Layout Development. Content adaptation – you create many versions of...

  • Slide 1
  • SHA TIN Mobile Web App Layout Development
  • Slide 2
  • Content adaptation you create many versions of your site No content adaptation Dont need to create different version Two basic approaches to create cross-platform mobile designs
  • Slide 3
  • Web standards is just an easy way to say a web page based on the XHTML 1.0 and CSS 2.1 specification, coded in such a way that the majority of presentation elements are omitted from the XHTML markup and defined in the CSS instead HTML: Page structure CSS: Page presentation JavaScript: Page behavior Web Standards
  • Slide 4
  • HTML5 & CSS3 HTML5 is a markup language for structuring and presenting content for the World Wide Web and a core technology of the Internet. It is the fifth revision of the HTML standard. HTML5: New Tag, Native Media Supports CSS3: Transition, More graphics effect JavaScript: Stoage, FileIO, WebGL Difficulties Browser Support
  • Slide 5
  • Design in layers of degradation Use Progressive Enhancement Designing for Multiple Mobile Browsers
  • Slide 6
  • The practice of using web techniques in a layered fashion to allow anyone with any web browser to access your content, regardless of its capabilities Create not just one ideal experience but multiple less-ideal experiences First design to the Lowest common experience Next add basic styling techniques Continue to add layers until reach the best possible experience Progressive Enhancement
  • Slide 7
  • Techniques for mobile web Always code your markup semantically. Have a device plan Have both your lowest common denominator and high-end device designs before you begin to code Test on different mobile devices from the beginning to the end to ensure that your incremental work will display correctly in the intended devices If you plan to add a desktop layer, always create the mobile version first Mobile progressive enhancement techniques
  • Slide 8
  • Both design and development Remember that your design might be viewed on a small 120-pixel screen for the lower-end phones, or on a 320-pixel screen for the smartphones Fixed versus fluid designs Fixed-width has provided slightly more reliable rendering across devices. Problem is that it might limit the viewable content. Single-column versus multiple-column layout Not employ a multicolumn layout on a lower- end device Consider whether youre designing for touch. If your target devices support touch, then it is OK to use multiple columns. If the device does not support touch, then opt for a single-column design Designing for Multiple Displays
  • Slide 9
  • Slide 10
  • Slide 11
  • Slide 12
  • Slide 13
  • Slide 14
  • Slide 15
  • Slide 16
  • Define each of the progressive enhancement layers Determining what will be that center, common experience and what layers you intend to support Device Plans
  • Slide 17
  • A list of popular browsers and their assigned classes, starting with A to F The Device Matrix ClassMarkupCSSJavaScript Class AXHTML, XHTML-MP, HTML5 CSS2, CSS3Great, include DHTML, Ajax Class BXHTML, XHTML-MP CSS2 (Decent)Limited, some DHTML Class CXHTML, XHTML-MP CSS2 (Limited)Limited Class DXHTML-MPCSS2 (Basic)None Class FXHTML, WMLNone
  • Slide 18
  • Markup is used to make content readable by mobile browsers HTML is the language of the Web In mobile, it use different markup language WAP is the stack in which the mobile web lives, it is a protocol unto itself Markup
  • Slide 19
  • XHTML-MP is a modularization of XHTML Basic XHTML Basic is a subset of XHTML XHTML-MP has evolved to become the predominant language for the mobile web Safely be assumed to be used in devices manufactured since 2002 XHTML MP Overview
  • Slide 20
  • The following are guidelines, recommendations and best practice to structure your XHTML-MP documents appropriately Class A browser : Recommendations, not mandatory Class B browser : Best practices, should reduce inconsistencies Class C browsers: Strongly recommend, veering from will increase inconsistencies Class D browsers : Required, should adhere closely Class F browsers : Required, but may still produce inconsistencies Document Structure
  • Slide 21
  • Applying the XHTML-MP doctype tells mobile browsers how to render the content For Class B and lower devices: For Class A and lower devices: Doctypes
  • Slide 22
  • Character encoding is essential to make sure that pages render correctly on device Specify the correct character encoding for your pages, otherwise, your page may display strange characters Character encoding
  • Slide 23
  • MIME types provide information to browsers on how to treat a document. For XHTML-MP, the recommended MIME type is application/vnd.wap.xhtml+xml MIME types
  • Slide 24
  • Page titles surrounded by the element Good titles increase the findability and usability of web page Most of the devices use the page title as a default label for book-marks Page titles
  • Slide 25
  • Mobile browsers prioritize markup before presentation Loading stylesheets and images last Use external stylesheets, separating your markup and presentation and decreasing the overall page size Use of stylesheets
  • Slide 26
  • Most of the mobile devices dont support embedded objects or scripts Its not possible for users to install plugins Avoid using it unless you cant find another means to express your design Objects and scripts
  • Slide 27
  • Auto Refresh the page Avoid creating periodically auto-refreshed pages, If use, provide a way to stop it Auto refresh
  • Slide 28
  • Using markup to redirect pages increases the load time and cost as a result of downloading and processing another page Redirects
  • Slide 29
  • Use cached information to reduces the need of reload resources Especially helps resources like a stylesheet or logo, Not all devices support cache control Caching
  • Slide 30
  • It is good practice for documents to indicate structure with headings and subheadings e.g. Top Level Heading Second Level Heading Paragraph Body Use structural markup, rather than formatting effects, makes it easier to modify content Minimal document structure
  • Slide 31
  • . The paragraph is the tag you will probably use the most Each paragraph of text should be wrapped in the paragraph tag Paragraph will apply default margins to the top and bottom on the element, which can be modified in the CSS Text Elements - Paragraphs
  • Slide 32
  • The blockquote is used for quotations or comments Used as a wrapper tag for one or more paragraph tag It create the inherit margin around the entire element to give the appearance of being indented from the primary text You can define the margins for blockquotes in CSS Text Elements - Quotations
  • Slide 33
  • em, strong, small, abbr, acronym, cite, dfn, code, kbd, smp, var, del, ins Use Phrase elements may not be fully supported on Class C or lower devices Text Elements Phrase elements
  • Slide 34
  • Unordered lists are a hallmark in web-standards- based design Used for navigation lists and structuring nested content Text Elements Unordered lists
  • Slide 35
  • Ordered lists are not used as often as unordered lists in desktop sites For mobile device, use ordered lists for all your navigation lists that have fewer than 10 items Text Elements Ordered lists
  • Slide 36
  • . Definition list is for lists that contain term and definition pairs. Useful for creating repetitive lists where you simply need a title and do not wish to use a header Text Elements Definition lists
  • Slide 37
  • . div is used to identify and label any block-level division of text or content span is used to identify a grouping of inline elements Text Elements Structural elements
  • Slide 38
  • , Line breaks and horizontal rules work as expected on virtually all mobile devices Text Elements Line breaks
  • Slide 39
  • nonbreaking space, &,, , , TM, Common characters not found in the normal alphanumeric character set Must be specified in XHTML as character references starting with an & and ending with a ; For example, a nonbreaking space would be coded as and an ampersand is & Text Elements Character entity references
  • Slide 40
  • Links are the foundation of how hypertext works It take you to new pages or be used as an anchor to content further down the page With XHTML-MP, links can also initiate a telephone call and perform other device actions Due to the constrained screen size, there are additional best practices surrounding links Creating Links
  • Slide 41
  • Too many links on a page makes it difficult for the user to navigate and read content Try to limit links to 10 links per page Add access keys to links, so that users can navigate with the keypad as well Item1 Creating Links Number of links
  • Slide 42
  • Navigating a mobile site can be difficult and cumbersome You can simplify navigation and limit scrolling by provide keyboard shortcuts to the common li