Ontwerp voor één Web
Content die ontworpen wordt met het oog op verschillende apparaten spaart kosten, vergroot flexibilieit en geeft meer mensen wat ze nodig hebben.
Het Web in beweging
Dit zijn de Speelkaarten van Mobile Web Best Practices, die het document Mobile Web Best Practices 1.0 samenvatten. De Speelkaarten zijn een nuttige geheugensteun voor de zestig richtlijnen die de specificatie in detail uitlegt. Een PDF-versie of the cards is available.
"Mobile Web Best Practices 1.0" is een W3C Web Standaard die mensen helpt content te ontwerpen en genereren die goed werkt op mobiele apparaten. Dit spel kaarten vat de richtlijnen van dat document in tien thema's. Als ze deze richtlijnen volgen zullen producenten van content hun doelgroep vergroten, effectieve websites en webapplicaties creëren en het browsen van het Web op meer apparaten makkelijk maken.
Voor meer informatie zie http://www.w3.org/TR/mobile-bp/
Content die ontworpen wordt met het oog op verschillende apparaten spaart kosten, vergroot flexibilieit en geeft meer mensen wat ze nodig hebben.
THEMATISCHE CONSISTENTIE: Zorg ervoor dat content die je krijgt bij het accesseren van een URI een thematisch coherente ervaring oplevert, als de URI vanuit verschillende apparaten geaccesseerd wordt.
CAPACITEITEN: Benut capaciteiten van een apparaat om een verbeterde gebruikerservaring tot stand te brengen.
GEBREKEN: Neem redelijke stappen om om gebrekkige implementaties heen te werken.
TESTEN: Voer test uit op echte apparaten en enulaties.
In de sterk versplinterde markt van browsers en apparaten zijn standaaarden de beste garantie voor interoperabiliteit.
GELDIGE OPMAAK: Creëer documenten die valideren met gepubliceerde grammamica's.
ONDERSTEUNING CONTENT FORMAT: Stuur content in een format dat het apparaat kent.
GEWENST CONTENT FORMAT: Stuur content in een gewenst format, waar mogelijk.
ONDERSTEUNING KARAKTERCODERING: Zorg ervoor dat content gecodeerd wordt met behulp van een karaktercodering die door het apparaat wordt ondersteuend.
GEBRUIK KARAKTERCODERING : Geef in een respons de karaktercodering aan die wordt gebruikt.
GEBRUIK STYLE SHEETS: Gebruik style sheets om de layout en presentatie te sturen, tenzij bekend is dat het apparaat ze ondersteunt.
STRUCTUUR: Gebruik kenmerken van de opmaaktaal om logische documentstructuur aan te geven.
FOUTMELDINGEN: Geef informatieve foutmeldeingen en een middel om van een foutmelding terug te navigeren naar nuttige inforatie.
Thoughtful design can help reduce usability problems due to small screens and keyboards, and other features of mobile devices.
POP UPS: Do not cause pop ups or other windows to appear and do not change the current window without informing the user.
TABLES NESTED: Do not use nested tables.
TABLES LAYOUT: Do not use tables for layout.
GRAPHICS FOR SPACING: Do not use graphics for spacing.
NO FRAMES: Do not use frames.
IMAGE MAPS: Do not use image maps unless you know the device supports them effectively.
When choosing to use a particular Web technology, consider that mobile devices vary greatly in capability.
COOKIES: Do not rely on cookies being available.
OBJECT OR SCRIPT: Do not rely on embedded objects or script.
TABLES SUPPORT: Do not use tables unless the device is known to support them.
TABLES ALTERNATIVES: Where possible, use an alternative to tabular presentation.
STYLE SHEETS SUPPORT: Organize documents so that if necessary they may be read without style sheets.
FONTS: Do not rely on support of font related styling.
USE OF COLORS: Ensure that information conveyed with color is also available without color.
Images, colors, and style brighten content, but require care: devices may have low-contrast screens or may not support some formats.
IMAGES RESIZING: Resize images at the server, if they have an intrinsic size.
LARGE GRAPHICS: Do not use images that cannot be rendered by the device. Avoid large or high resolution images except where critical information would otherwise be lost.
IMAGES SPECIFY SIZE: Specify the size of images in markup, if they have an intrinsic size.
NON-TEXT ALTERNATIVES: Provide a text equivalent for every non-text element.
COLOR CONTRAST: Ensure that foreground and background color combinations provide sufficient contrast.
BACKGROUND IMAGE READABILITY: When using background images make sure that content remains readable on the device.
MEASURES: Do not use pixel measures and do not use absolute units in markup language attribute values and style sheet property values.
Smaller sites make users happier by costing less in time and money.
MINIMIZE: Use terse, efficient markup.
PAGE SIZE LIMIT: Ensure that the overall size of page is appropriate to the memory limitations of the device.
STYLE SHEETS SIZE: Keep style sheets small.
SCROLLING: Limit scrolling to one direction, unless secondary scrolling cannot be avoided.
Web protocol features can help improve the user experience by reducing the impact of network bottlenecks and latencies.
AUTO REFRESH: Do not create periodically auto refreshing pages, unless you have informed the user and provided a means of stopping it.
REDIRECTION: Do not use markup to redirect pages automatically. Instead, configure the server to perform redirects by means of HTTP 3xx codes.
EXTERNAL RESOURCES: Keep the number of externally linked resources to a minimum.
CACHING: Provide caching information in HTTP responses
Keyboards and other input methods on mobile devices can be tedious to use, so effective designs minimize the need for them.
MINIMIZE KEYSTROKES: Keep the number of keystrokes to a minimum.
AVOID FREE TEXT: Avoid free text entry where possible.
PROVIDE DEFAULTS: Provide pre-selected default values where possible.
DEFAULT INPUT MODE: Specify a default text entry mode, language and/or input format, if the target device is known to support it.
TAB ORDER: Create a logical order through links, form controls and objects.
CONTROL LABELLING: Label all form controls appropriately and explicitly associate labels with form controls.
CONTROL POSITION: Position labels so they lay out properly in relation to the form controls they refer to.
Web users on the go want compact information when time is short and distractions many.
PAGE TITLE: Provide a short but descriptive page title.
CLARITY: Use clear and simple language.
CENTRAL MEANING: Ensure that material that is central to the meaning of the page precedes material that is not.
LIMITED: Limit content to what the user has requested.
SUITABLE: Ensure that content is suitable for use in a mobile context.
PAGE SIZE USABLE: Divide pages into usable but limited size portions.
© 2007 W3C (ERCIM, Keio University, MIT) - Produced by WithYou - Photographs © gettyimages - © corbis
Supported by MobiWeb2.0 FP7 EU Project