Web pages on mobile devices (an xHTML template)
Anyone who has gotten the courage to venture on the Internet with a mobile device (usually from your cell phone), as found out immediately that size (screen size) is important with mobile devices. You may have also noticed that some pages looked better than others. The most annoying problem is scroll bars around the display because the page does not fit inside the screen. What makes a page viewable on a mobile device is largely due to the html (or the xHTML) that has been created for that page. The page must be designed to fit on any screen size. The best way to describe the good mobile web pages is that they lack the features available on PC browsers and tend to look a little retro (circa. late 1990′s). The HTML for mobile devices needs to be simplified to be displayable. When I created the MLEX tool (soon to have a screen cast on mobiledot.ning.com with tutorials to get started) I simply created a program that made sure that the pages were kept simple and html elements what would not work on mobile devices were not included. The MLEX software tool keeps you on target but does not prevent you from breaking the page on a mobile device by adding elements and features that are not supported (JavaScript, frames, tables, etc.). A xHTML Template But, you don’t have to use MLEX to create web pages that are viewable on mobile devices (and BTW also viewable on PC browsers). I have added to this blog a template HTML file (using xHTML tags which will work best with mobile browsers). You can take this file and open it in any text editor or HTML Editor and modify it to your requirements. Once saved, you can test it in your PC browser and finally, place it on your HTML server so others can access it. About the template The template is just a text file that has text and xHTML tags. I have placed HTML comment tags (which are ignored by the browser) inside the template to give clues as to what is happening. You may want to access a site on the web that discusses xHTML but anyone who knows a little HTML should be able to handle xHTML without any problems. The template references two css external style sheet files. CSS is a little more complicated and too much for this pos but it is not hard to learn and I have deliberately kept it simple. You can see a sample css file that could be used with this document below. Note: The text in the web page is random letters just used to fill in the document. <?xml version=”1.0″encoding=”UTF-8″?> <!– DOCTYPE STATEMENT – NOTICE THE DTD IS MOBILE –> <!DOCTYPE html PUBLIC”-//WAPFORUM//DTD XHTML Mobile 1.2//EN”"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-us”> <head> <!– TWO CSS EXTENAL FILES ARE REFERENCED. ONE FOR THE PC AND ONE FOR MOBILE DEVICES –> <LINK rel=”stylesheet” type=”text/css” media=”handheld” href=”mobile-0.css”/> <LINK rel=”stylesheet” type=”text/css” media=”screen, print” href=”personalcomputer-0.css”/> <!– TITLE SECTION –> <title>Web Page Title Goes Here!</title> </head> <body> <div class=”header” style=”text-align: left;”> <!– HEADER SECTION OF WEB DOCUMENT –> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque at risus. Pellentesque sapien metus, lobortis at, elementum et, malesuada non, urna. Sed dignissim justo sed urna. Nulla nibh. Suspendisse vestibulum imperdiet est. Aenean enim. Nunc lacus diam, imperdiet eget, consectetuer quis,euismod eget, sem. Morbi attis. Praesent viverra massa vehicula sem. Nunc viverra varius mi. Vestibulumultrices elit quis quam dignissim ermentum. Fusce tristique leo vel lorem. Mauris dictum massa.Integer fringilla. Phasellus vitae tellus vitae elit varius eleifend. Maecenas egestas blandit dolor. Cras sagittis lobortis nunc.</p> </div> <br/> <div class=”pagebody” style=”text-align: left;”> <!– BODY SECTION OF DOCUEMNT –> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed justo non est feugiat porta. Phasellusornare placerat dui. Phasellus lacus mi, vulputate non, semper quis, imperdiet vitae, nulla. Aliquam tinciduntjusto ut purus. Maecenas vitae felis. Vivamus porta nunc sit amet risus. Ut at elit. Phasellus vestibulum.Vestibulum at lectus a nisl ultrices euismod. Proin ornare adipiscing eros. Maecenas convallis ultrices mauris.Sed turpis est, porttitor vitae, luctus et, rhoncus in, leo. Nulla tristique ligula interdum elit. Sed lacinia pulvinar odio.</p> <p>Aenean sodales lectus vel lectus. Suspendisse nibh est, hendrerit sit amet, auctor a, dictum pretium,nisi. Cras suscipit consectetuer eros. Pellentesque mattis augue nec tellus. Vivamus ut leo. Curabiturpretium mattis pede. Sed volutpat egestas diam. Fusce eget nunc non ligula rutrum elementum. Sed erat turpis,placerat ut, tempus et, vulputate ac, dolor. Fusce convallis rhoncus sapien. Phasellus elit. Donec nec risussed nisl viverra adipiscing. Aenean mauris mi, malesuada vel, facilisis id, faucibus nec, velit.</p> <p>Proin bibendum massa a urna bibendum pulvinar. Pellentesque habitant morbi tristique senectus et netuset malesuada fames ac turpis egestas. Pellentesque ultrices scelerisque risus. Sed velit felis, convallis sed,fringilla sit amet, porttitor vel, eros. Aenean mollis, nibh id faucibus fermentum, enim quam facilisis nisi,non convallis enim arcu vitae nulla. Nulla vulputate. Integer imperdiet. Nulla feugiat dui ac sapien. Maecenas pretium.Mauris gravida. Fusce ut metus vitae diam congue vulputate.</p> </div><br/> <div class=”footer” style=”text-align: left;”> <!– FOOTER SECTION OF DOCUMENT –> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum lacus. Suspendisse vel turpis. Sed tempus faucibus elit. Suspendisse et lacus imperdiet nibh semper tempus.</p> </div> <br/> </body> </html>
Mobile.css File
/* pagebody style */.pagebody { background-color: #D1E5D1; font: Segoe UI; color: black; font-size: x-small; text-align: left;}/* header style */.header { font-size: small ; font-weight: bold; color: #00006A; text-align: center;}/* Foot style */.footer { font-size: small; font-weight: bold;}/* Make author info stand out. */.author { font-weight: bold; color: red;}/* link style */A { background-color: transparent; color: green; }A:Hover { background-color: white; color: black; }
on July 26, 2010 at 8:36 am
· Permalink
there would be a great demand for mobile browsers in the coming years that is for sure.;’;