Home › Forums › Webmastery › HTML and CSS ›

Designing For Devices

Barry_G's picture
Submitted by Barry_G on Mon, 07/14/2008 - 22:28.

Hi

Is there a basic format, separate style sheet, whatever, one should use to make a site look uniform in a mobile device?

After playing around with background images and what not, I notice they don't show up on mobile units. At least they don't appear to when checking in Dreamweaver.

I'm figuring that by using background images in certain areas, I can achieve the look I'm after and place search friendly text on top, which I believe to be of importance regarding page, and over all site relevance.

While I can get a look I'm after in a desktop browser, well, it sort'a looks like crap on the mobile units.

The background images disappear in mobile units, and seem to not allow a background color to show up either.

While I'm not overly concerned about this, thought I would ask.

Thanks in advance.

Barry

‹ Adding mp3 Files To A Site Creating A Background ›
webclay's picture
Submitted by webclay on Mon, 07/14/2008 - 23:05.

Hey Barry, its me again ;)

If you try to design a mobile website only, you can use such code:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titel des Dokumentes</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta http-equiv="Cache-Control" content="max-age=3000" />
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<style type="text/css">
* {margin: 0;padding: 0;}
body {font-family: sans-serif;}
</style>
</head>
<body>
<h1>Headline H1</h1>
<p>Lorem ipsum ...</p>
</body>
</html>

You can link the stylesheet like for screens but because of the bad caching of mobile devices you might include it with PHP:


<?php include('css/styles.php'); ?>

XHTML-MP 1.0 (MP = Mobile Profile) based on basic xhtml and some more

Structure elements:
body, head, html, title

Text and Hypertextelements:
a, abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var

List elements:
dl, dt, dd, ol, ul, li

Forms:
form, input, label, select, option, textarea

Tables:
caption, table, td, th, tr

Misc elements:
img, object, param, meta, link, base

Zusätzlich (zu basic), teilweise legacy:

fieldset, optgroup,
das Attribut “start” bei ol,
das Attribut “value” bei li,
b, big, hr, i, small,das Element “style”, sowie das Attribut style (style=”…”)

For some additional and really indepth documentation, have a look at XHTML Mobile Profile and CSS Reference

Hope this helps, good luck.

Barry_G's picture
Submitted by Barry_G on Tue, 07/15/2008 - 00:24.

Hi Webclay

Thanks again for the reply.

Will try to get my head around all this info.

Am leaning more towards not giving a rats ass 'bout how a site looks on a mobile. LOL

Appreciate your time trying to clear this up for me!

Take care.

Barry

rayd8's picture
Submitted by rayd8 on Tue, 07/15/2008 - 02:40.

You can get an iPhone simulator for your web browser to help visualize what your web page will look like on the device. It's free...

http://marketcircle.com/iphoney/

-Michael

Syndicate content