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

  • Published on
    25-Dec-2015

  • View
    212

  • Download
    0

Embed Size (px)

Transcript

  • 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 links Creating Links Access keys
  • Slide 43
  • For the mobile device, XHTML-MP includes a means to initiate a telephone call within a element By prefacing the full phone number, including country code, with tel: within the href attribute Call me tel:+155 12121222 Creating Links Initiating telephone calls
  • Slide 44
  • The desktop web is rick with a variety of embedded content Due to hardware limitation of mobile devices, you cannot assume that all mobile devices can display image in the same capabilities Images and Objects
  • Slide 45
  • Nearly all mobile devices support the JPEG, GIF and PNG formats 8-bit PNG and 24-bit PNG with alpha transparency are supposed to be supported as of WAP 2.0 Use PNGs as they are the recommended image format for the mobile web Images and Objects Image types
  • Slide 46
  • The safe approach is to edit images so that theyre as small as possible in terms of pixel dimensions Most mobile device screens about 120 pixels wide It is recommended that you not use images any wider than that If you are using a content adaptation system, you can dynamically insert different images based on the requesting device You can load larger images for larger devices Find the best solution for your users and their device, just keep in mind that every kilobyte of data you push have to pay Consider the size and use of images carefully Images and Objects Images sizes
  • Slide 47
  • Not specifying the pixel height and width of an image forces the mobile device to calculate the values Increasing render times Degrading the performance Images and Objects Image dimensions
  • Slide 48
  • Most devices lack a pointing device Difficult for users to use image maps If you know that the device supports touch, you can use image maps Avoiding them for lower-devices Images and Objects Image maps
  • Slide 49
  • Always provide alt text value for all images Some browsers allow you to disable downloading images Opting for text-only mode in order to increase rendering speeds Images and Objects Alt text
  • Slide 50
  • Many devices support vector objects like Adobe Flash, SVG(Scalable Vector Graphics) Avoid using it unless you specifically know that the targeted devices support it Images and Objects Flash and SVG
  • Slide 51
  • All WAP 2.0 devices should support the 3GPP video format and MP4 audio format Images and Objects Embedded audio and video
  • Slide 52
  • If you are having problems with layout consistency, a table is the solution Tables
  • Slide 53
  • Web design industry considers using tables for layout as bad practice in mobile devices Table-based layout combines presentation and markup Makes development more difficult and essentially eliminates the ability to adapt to other media Table-based layouts restrict your ability to adapt for various devices and to increase page size More efficient to do page layout with style-based layout Tables Layout tables
  • Slide 54
  • Nested tables, like layout tables Tendency to render inconsistently and add to the page size Tables Nested table
  • Slide 55
  • Frames just dont work in mobile design Devices dont support frames because of many usability problems Applying server-side includes for loading local contents Frames
  • Slide 56
  • It is challenge to design and develop a form In Class A browsers, forms can resemble their desktop cousins For the other browsers, form dont always render like you might expect As forms are difficult to control and add content to Limit the use of forms in the mobile context Forms
  • Slide 57
  • Its difficult for user to enter content into free text input controls such as text boxes and text areas Try to use radio buttons, select boxed and even lists of links to reduce the use of text entry Forms free text input controls
  • Slide 58
  • Limit the type of data entered into an input field by defining the input mask or input mode using Wireless CSS or CSS-MP Easier for users to enter information into a free text field The input mode (alphanumeric or numberic) of the mobile devices keypad is automatically set according to the input mask value Input only numeric values: Limits the input to alpha characters Forms default input mode
  • Slide 59
  • Nonvalidating markup may not display correctly or efficiently on mobile devices To check markup against the W3C mobile web best practices, you can validate your code aat: http://validator.w3.org/mobile/ http://ready.mobi Other Recommendations Validate markup
  • Slide 60
  • Most mobile devices dont support pop-up windows Try not rely on pop-up Changing the current view can be disorienting to the user Other Recommendations Pop-up windows
  • Slide 61
  • Most mobile browsers download each resource as a separate element Begin with downloading and rendering markup, followed by stylesheets and images Depending on network speed, the user may see the basic markup while external resources download When download finishes, the browser renders the page again with the included elements Limit the user of external resources you use and keep each resources file size as small as possible Other Recommendations External resources
  • Slide 62
  • Page sizes (including images and stylesheets) should remain as small as possible Large pages take longer to load and cost the u...

Recommended

View more >