mobile web design

[frostymarvelous]

Hi.
I'm looking for really good tutorials in mobile web design. In not talking about those long winded articles about dos and donts, but some which delve into the tutorial with practical examples.

I'd be really glad. Thanks.

[Mysterio]

I am in mobile now but I have some. PM me tomorrow during day so I wont forget.

[arnage]

These are useful for me, if i remember some more will post. Sure the W3Schools.com...

http://csshtmltutorial.com
Download free CSS templates - Free CSS Templates - Nice practic ideas.

[frostymarvelous]

Thanks bro.

[arnage]

You're welcome.
Of specific mobile design have nothing good on the net (fragment informations), at least in the last couple of years when I was looking for. I'm intending to write a short tutorial just for mobile css design for a long time but nothing of that probably...

[arnage]

Here's a few words what is most important.

Regarding the CSS should be 2.1 level, to use JPG and GIF images no larger than 1-2kb or less if its repeat. Should take account of the font, if not exactly define a standard font, then we need to define several with the latest standard.

font-family : Tahoma, Arial, Verdana;

The mobile browser will load the one that can.
There is the case where should be used em propertys and not px.

The most important is the markup, as recommended by the W3C can be XHTML MP or XHTML Basic. Do not use XHTML Transitional, and certainly not html4.01. Markup must be valid and should not use javascript. Check it via validator.w3.org
Icons must be gif or jpg (I use the png regardless of recommendations, PNG - Portable Network Graphics, so ...) and must have defined the attributes width, height and alt, each. By MobileOK sites should not be larger than 24kb. Check the page with it and follow the steps. Avoid using "style" attribut in markup.

If I remember something more will post.

[adex3g]

Thanks you every much

[frostymarvelous]

Thanks bro.
I solved my problem. I kinda forgot div can hold text in xhtml so I reverted to using <p>
I rewrote the markup though. Using <p> in certain select places only.
Thanks arnages.

Problem was p was giving me too much space in between.

[arnage]

Sure. ;)
Yep it doing that by default. It can bee defined in CSS with margin; padding; but than its just like default <div> so no some use of that, just a little bigger the CSS file.
I'm also using <p> if need to spred a little something in murkup and if dont, Im using <div>.
In practic, good example is login form for Lavalair, in XHTML MP must looks like this:

<form method="get" action="http://sajt.tld/login.php" enctype="multipart/form-data">
<p>
Nick:
<input type="text" name="loguid" value=""/>
Pass:
<input type="password" name="logpwd"/>
<input type="submit" value="UDjI" name=""/>
</p>
</form>

Or with <div> if it needed to bee close to other elements. I leave both propertys in default.
There is a lot of details in XHTML MP.
Exaple is <br/> , people leave a white space like <br /> in MP or in image tag... That space is in XHTML Strict for Internet Explorer 6 and it can't open XHTML MP. So, no need for a white space.
And, don't know how can I forget Developer's Home - Tutorials and Articles for SMS, WML, WMLScript, WAP 2.0, XHTML MP, WCSS/WAP CSS , one of the best sites. Probably because I have read it a hundred times two years ago and learn everything about MP and than
forgot about the site. :D