Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Mobile Web App Layout Development SHA TIN 沙田 Two basic approaches to create cross-platform mobile designs • Content adaptation – you create many versions of your site • No content adaptation – Don’t need to create different version Web Standards • 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 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 Designing for Multiple Mobile Browsers • Design in layers of degradation • Use Progressive Enhancement Progressive Enhancement • 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 Mobile progressive enhancement techniques • 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 Designing for Multiple Displays • • • • 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 lowerend device • Consider whether you’re 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 Device Plans • Define each of the progressive enhancement layers • Determining what will be that center, common experience and what layers you intend to support The Device Matrix • A list of popular browsers and their assigned classes, starting with A to F Class Markup CSS JavaScript Class A XHTML, XHTML-MP, HTML5 CSS2, CSS3 Great, include DHTML, Ajax Class B XHTML, XHTML-MP CSS2 (Decent) Limited, some DHTML Class C XHTML, XHTML-MP CSS2 (Limited) Limited Class D XHTML-MP CSS2 (Basic) None Class F XHTML, WML None None Markup • • • • 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 XHTML – MP Overview • • • • 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 Document Structure • • • • • • 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 Doctypes • • • Applying the XHTML-MP doctype tells mobile browsers how to render the content For Class B and lower devices: <?DOCTYPE html PUBLIC “//WAPFORUM//DTD XHTML Mobile 1.0//EN” http://www.wapforum.org/DTD/xhtmlmobile12.dtd”> For Class A and lower devices: <?DOCTYPE httml PUBLIC “//WAPFORUM//DTD XHTML Mobile 1.0//Transitional//EN” http://www.w3.org/TR/shtml1/DTD/xhtml1transitional.dtd”> Character encoding • • • 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 <? Xml version=“1.0” encoding=“UTF-8” ?> MIME types • 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 Page titles • Page titles surrounded by the <title> 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 Use of stylesheets • • • 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 Objects and scripts • • • Most of the mobile devices don’t support embedded objects or scripts It’s not possible for users to install plugins Avoid using it unless you can’t find another means to express your design Auto refresh • • • • Auto Refresh the page <meta http-equiv=“refresh” content=“0” /> Avoid creating periodically auto-refreshed pages, If use, provide a way to stop it Redirects • Using markup to redirect pages increases the load time and cost as a result of downloading and processing another page Caching • Use cached information to reduces the need of reload resources • Especially helps resources like a stylesheet or logo, • <meta http-equiv=“Cache-Control” content=“max-age=300” /> • Not all devices support cache control Minimal document structure • It is good practice for documents to indicate structure with headings and subheadings • e.g. <h1>Top Level Heading</h1> <h2>Second Level Heading</h2> <p>Paragraph Body</p> • Use structural markup, rather than formatting effects, makes it easier to modify content Text Elements Paragraphs • <p> …. </p> • 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 - Quotations • • • • • <bq> … </bq> 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 – Phrase elements • em, strong, small, abbr, acronym, cite, dfn, code, kbd, smp, var, del, ins • Use <span class=“phrase”>…</span> • Phrase elements may not be fully supported on Class C or lower devices Text Elements – Unordered lists • • • <ul><li>…</li></ul> Unordered lists are a hallmark in web-standardsbased design Used for navigation lists and structuring nested content Text Elements – Ordered lists • • • <ol><li>…</li></ol> 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 – Definition lists • • • <dl><dt>…</dt><dd>….</dd></dl> 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 – Structural elements • • • <div>….</div><span>…</span> 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 – Line breaks • • <br />, <hr /> Line breaks and horizontal rules work as expected on virtually all mobile devices Text Elements – Character entity references • • • • 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 & Creating Links • • • • 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 – Number of links • • • 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 <a href=“#itme1” accesskey=“1”>Item1</a> Creating Links – Access keys • 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 – Initiating telephone calls • • For the mobile device, XHTML-MP includes a means to initiate a telephone call within a <a> element By prefacing the full phone number, including country code, with tel: within the href attribute <a href=tel:+155 12121222>Call me</a> Images and Objects • • 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 – Image types • • • 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 – Images sizes • • • • • • • The safe approach is to edit images so that they’re 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 – Image dimensions • • • 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 maps • • • • 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 – Alt text • • • 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 – Flash and SVG • • 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 – Embedded audio and video • All WAP 2.0 devices should support the 3GPP video format and MP4 audio format Tables • If you are having problems with layout consistency, a table is the solution Tables – Layout tables • • • • • 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 – Nested table • • Nested tables, like layout tables Tendency to render inconsistently and add to the page size Frames • • • Frames just don’t work in mobile design Devices don’t support frames because of many usability problems Applying server-side includes for loading local contents Forms • • • • • It is challenge to design and develop a form In Class A browsers, forms can resemble their desktop cousins For the other browsers, form don’t 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 – free text input controls • • It’s 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 – default input mode • • • 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 device’s keypad is automatically set according to the input mask value Input only numeric values: <input type=“text” style=‘ –wap-input-format:”*N”’ /> Limits the input to alpha characters <input type=“text” style=‘ –wap-input-format: “A*a”’ /> Other Recommendations – Validate markup • • 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 – Pop-up windows • • • Most mobile devices don’t support pop-up windows Try not rely on pop-up Changing the current view can be disorienting to the user Other Recommendations – External resources • • • • • 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 resource’s file size as small as possible Other Recommendations – Total page download size • • • • Page sizes (including images and stylesheets) should remain as small as possible Large pages take longer to load and cost the user money Target your combined page weight to be between 10 – 25KB Avoid exceeding 50 KB per page CSS: Cascading Style Sheets • • • In the past, mobile devices had incredibly poor support for CSS Use it to style text and apply background colors Today’s mobile browsers have far better support for both CSS2 and CSS3 Techniques to designing your CSS • • • Keep it simple • Keeping your styles very basic, using no complex styling techniques Code and reload • Constantly test how your styles render on devices • For each code change, you reload the browser on each device you plan to support Progressive enhancement • This approach requires you to create multiple layers of support • Your style gracefully degrades depending on the device Wireless CSS and CSS-MP • • • XHTML-MP, a descendant of XHTML There have two: Wireless CSS(sometimes referred to as W-CSS or WAP CSS), and CSS-MP(or CSS Mobile Profile) Both of the standards are working to come together into standard, they both based on CSS2.1 Box Model • • • The box model is one of the key concepts of CSS design It consists of five areas: the content, the padding, the border, the margin, and the outer edge Many elements have inherited values, means that they may have some margin or padding by default Box model Class A Class B Class C Class D Class F Great Good OK Poor Fail Selectors • Selector is used to tell which markup elements it should apply rules to • Universal • Type or element selectors • Contextual selectors (descendant, child and adjacent sibling) • Class and ID selectors • Pseudoclasses • Pseudoelements Selectors – Universal selector • {font-family:serif;} • Selects all elements, defining the default typeface or font size Selectors – Type selector • h1{color: red;} • The type or element selector targets the element by name Selectors – Descendant selector • Li a {color: red;} • The descendant selector targets elements that are descendants of another element • The descendant selector is not consistently supported on Class C or lower browser Selectors – Class selector • .error {background-color: red;} • The class selector targets any element with the matching class • Class selectors are one of the more common techniques used for crossplatform mobile designs Selectors – ID selector • #alert{background-color: yellow;} • The ID selector targets any element with the matching ID • All IDs need to start with at least one letter Selectors – Advanced attribute selector • Advanced attribute selectors target elements with matching substrings in the value of the attribute • You can target existing attributes or create your own custom attributes • Not supported on many Class B or lower browsers • Helpful for targeting different device classes <p device=“iphone”>iPhone</p> <p device=“android”>Android</p> Selector support Selector type Class A Class B Class C Class D Class F Universal selector Yes Yes Yes Yes Yes Type selector Yes Yes Yes Yes Flaky Descendant selector Yes Yes Flaky Flaky No Child selector Yes Yes Flaky Flaky No Class selector Yes Yes Yes Yes Flaky ID selector Yes Yes Yes Yes Flaky Advanced attribute selector Yes No No No No Font and Text Properties • • The typography options on mobile devices can be less We are seeing mobile browsers move closer to desktop Font and Text Properties – Available fonts • • • In mobile development, we can count on only two font options: serif and sans-serif In low-end devices, it only have one option – sansserif In class B or higher, we can use Georgia, Times New Roman, Arial, and Helvetica and Courier New fonts Font and Text Properties – Absolute size keywords • • Absolute size keywords: xx-small, x-small, small, medium, large, x-large, and xx-large p {font-size: xx-small;} Medium keywords is the default and recommended text size for the devices Font and Text Properties – Percentage measurements • • Percentage size values will work on Class B and higher browsers p {font-size: 80%;} Percentage size values rely on inherited parent values Font and Text Properties – Length measurements • • • • • A common means to style text on the desktop web by specific number of units of pixel p {font-size: 10px} Possible on Class B and higher mobile browsers Screen’s pixel depth can vary from device to device It will cause inconsistent, unreadable design Font and Text Properties Class A Class B Class C Class D Class F Available fonts Web-safe fonts Web-safe fonts Sans-serif and serif Sans-serif and serif Sans-serif and serif Font size Any Any Keyword Keyword Keyword Font-weight Yes Yes Yes Yes Limited Font-style Yes Yes Yes Yes Limited Text-transform Yes Yes Yes Yes Limited Text-decoration Yes Yes Yes Yes Flaky Line-height Yes Yes Yes Yes Flaky Text-align Yes Yes Yes Yes Yes White-space Yes Yes Yes Limited Flaky Text shadow Yes No No No No Font replacement Limited No No No No Basic Box Properties • Able to style the box area around an element is a part of web standards design • Height and width • Minimum and maximum dimensions • Margins • Padding • Borders • Box shadow Color and Backgrounds • Background color • Background image • Multiple background images Positioning and Page Flow • • • • • Appear for the display Floats of the images and other elements(right / left) Clearing, allowing you to prevent how block-level elements wrap in the use of a float Positioning – relative and absolute positioning Overflow: visible, hidden, scroll and auto JavaScript • • • JavaScript: the last pillar of mobile web development Hasn’t been a priority in mobile browsers JavaScript support in multiple mobile browsers with Class A and a few Class B browsers Class A Class B Class C Class D Class F JavaScript Support Yes Some No No No DHTML Yes Limited No No No Ajax Yes Limited No No No