Keeping It Simples
This technique gives a possible implementation for a number of the Best Practices.
One way to ensure wide compatibility and usefulness on mobile devices is to keep it simple. Rather than relying on scripting, plugins, and complex styling, use simple XHTML. This helps to ensure your content will work everywhere - on mobile devices, desktops, web-enabled TV, and so on. This will help eaasily meet CategoryBpThematicConsistency
Use HTML for
- Text
Including identifying headings, lists, paragraphs, and other meaningful sections of a text document (see also CategoryBpStructure)
- Links
- This is a basic feature of HTML. Techniques like using javascript to create new windows are often unreliable, and should be avoided.
- Access keys in HTML
The accesskey attribute in HTML is more reliable than alternative methods such as javascript-based methods to provide quick navigation through shortcut keys (although it also has implementation limitations - see AccessKeys)
Do not use javascript to
- generate text content
- This is better done in HTML
- make links
- These should be done using plain HTML
- redirect pages
This should be done via server-based redirections (see also CategoryBpUris) or plain links in most cases
Do not use tables for
- Visual formatting effects
- Many formatting effects can be achieved with CSS1. Others are simply not suitable for all devices, and should in general be avoided
- "image slicing"
- it can reduce bandwith consumption, but because table layout is unreliable on mobile devices, it requires complex fallbacks to avoid messing up layout
Code sample 1
Something like this:
<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Do This</title></head> <body> <h1>Simple page</h1> <p>Welcome to my simple example with <a href="theOtherPage">one link</a></h1> </body> </html>
Is a simpler, more reliable, page than an equivalent reliant on scripting:
<html>
<head><title>Do Not Do This</title>
<script src="gotoPage.js">
</head>
<body>
<script>
document.write('<h1>Simple page</h1>');
<p>Welcome to my simple example with <a href="#" onclick="javascript:gotoPage('theOtherPage')">one link</a></h1>
</body>
</html>