| Author |
Topic: How to redesign your old webpage for mobile devices |
|
WebSpider
member
offline  |
| |
| posts: |
147 |
| joined: |
06/29/2006 |
| from: |
Seattle, WA |
|
|
 |
|
|
| How to redesign your old webpage for mobile devices |
HTML is overkilled for mobile device
HTML is a powerful language for authoring Web content, but its design does not take into consideration issues pertinent to small devices, including the implementation cost (in power, memory, etc.) of the full feature set. Consumer devices with limited resources cannot generally afford to implement the full feature set of HTML
XHTML Basic 1.1
The motivation for XHTML Basic is to provide an XHTML document type that can be shared across communities (e.g. desktop, TV, and mobile phones), and that is rich enough to be used for simple content authoring.
What does it look like?
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang=="en">
<head>
<title>Page title</title>
</head>
<body>
</body>
</html>
Supported Modules
Structure Module
body, head, html, title
Text Module
abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var
Hypertext Module
a
List Module
dl, dt, dd, ol, ul, li
Forms Module
button, fieldset, form, input, label, legend, select, optgroup, option, textarea
Basic Tables Module
caption, table, td, th, tr
Image Module
img
Object Module
object, param
Presentation module
b, big, hr, i, small, sub, sup, tt
Metainformation Module
meta
Link Module
link
Base Module
base
Intrinsic Events module
Events attributes
Scripting module
script, noscript
Stylesheet module
style
Style Attribute Module Deprecated
style
Target Module
target
|
|
|
|
|
|
|
WebSpider
member
offline  |
| |
| posts: |
147 |
| joined: |
06/29/2006 |
| from: |
Seattle, WA |
|
|
|
|
|
| Targeting Mobile Device Screens from Webpage |
If you're developing a web application for Android or redesigning one for mobile devices, you should carefully consider how your web pages appear on different kinds of screens. Because Android is available on devices with different types of screens, you should account for some factors that affect the way your web pages appear on Android devices.
When targeting your web pages for Android devices, there are two fundamental factors that you should account for:
1) The size of the viewport and scale of the web page
2) The device's screen density
Here is the example:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang=="en">
<head>
<title>Page title</title>
<meta name="viewport" content=
"width=device-width, target-densitydpi=device-dpi" />
</head>
<body>
</body>
</html>
Here is the syntax:
<meta name="viewport" content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi |
high-dpi | medium-dpi | low-dpi]"
/>
|
|
|
|
|
|
|
|
Email To Friend | 
Set Alert To This Topic
New Topic | 
Post Reply 
posted on: 02/09/2011 02:54:10 PM
Edit
Quote
Report
Profile
Reply