Hi,
Which are the main rules (css xhtml and embedding videos) to follow or to keep
into account to set up a web site who will run also in the mobile
phones ?
Is it time to start with html5 ?
Thanks in advance.
Bye.
If you are layering stylesheets, your first one will be very careful about setting widths and heights. Things won’t be floated. Things intended to be clicked will have a lot more padding (clickable area) and a lot more margin around them (fat fingers for touch screens). If you are specifically thinking of touch screens you might want to read up on some Javascript for them called Touch events (might be webkit-only not sure).
Images called by CSS which aren’t essential don’t get called here. Contrast is possibly more important here than on Desktop, so triple check your colours and text readability. Don’t import fancy fonts. Keep it keyboard-friendly (of course you should do this anyway but many designers have been able to ignore keyboard with their desktop sites): this means leave outline OR have :focus styles that are obvious, have skip links, etc.
Check this basic stylesheet on both phones and/or desktops set to retardedly-small widths (this can work for just checking layout of main boxes but test in a phone/PDA too).
Then layer on a second stylesheet, one that should only be called by devices with enough width to support different layouts. The assumption here (which may be WRONG for your audience) is that the devices with the wider widths are Desktops, have excellent storage capacity, good internet connection, etc. Here you’ll call your background images in this css file; float things; set widths (or min-max widths); call @font-face; reduce padding and margins on clickable items.
So far I’m calling this second stylesheet using @media queries and demanding a min-width. Careful: iPhone4 thinks it’s 960px wide. Internet Explorer I’ve had to just call that same stylesheet inside conditional comments <!–[if lt IE 9]> because it’ll miss the desktop stylesheet… however since it’s just calling the same stylesheet again in a way IE understands, this is NOT an extra HTTP request and there is no extra IE document. However this does not solve FF under 3.5… so far I’m only finding Javascript hacks for that.
Watching someone with a touch-screen device and how they use it on websites, select things, ect is a good idea. On one of our sites I just kept making our menu’s buttons bigger until a colleague could easily choose the correct menu item with his very stubby fingers.
Watching someone on a keyboard-based device is also nice: these may have a virtual cursor they can move around with arrow keys, in addition to plain keyboard navigation.
Does this help?
Thanks just a lot it can be a starting point :).
I think it’s a lot of fun may be 
just a ton to thing to keep into to account
and iphone is still over 
If you are targetting Europe, iPhone and Android is ok, but Nokia is still the most popular throughout the world and lots of “feature phones” who aren’t quite “smart phones”. Those should only be catching and loading your first stylesheet… the one that works ok on mobile sizes. The smarter phones with the browsers who understand @media queries should also check and not load the desktop stylesheet because they’ll see they are not large enough.
I can’t promote this set of slides enough… was really great: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
If you start getting lost, skip ahead til you see simon collison’s website in various mobiles… I think that starts at about slide 63?
So step by step
If you are layering stylesheets, your first one will be very careful about setting widths and heights.
I’m wondering if set widths and heights in em could be help ?
Things won’t be floated
So for the aside section I can only use absolute positioning ?
What about embedding videos and it’s worth
develop a html5 layout at least for the mobile ?
Thanks for the link
I’m wondering if set widths and heights in em could be help ?
No, if something’s set in em’s and that’s wider than the width of the mobile’s screen, you’ve got a problem… scrolling sideways. That’s what you’re avoiding. You leave things to a fluid width. You don’t have boxes side-by-side: for mobile boxes will sit on top of each other.
So for the aside section I can only use absolute positioning ?
No, you’ll save any positioning for the Desktops wide enough to fit two things side by side. No sidebars. Sure, an iPad is likely wide enough for something and a sidebar, but what about a mobile with 100px of width? (heck I can’t even make a site that works at that size just because my form controls are wider than 100px sometimes… can’t change that either)
What about embedding videos and it’s worth
develop a html5 layout at least for the mobile ?
I don’t know anything about video, however I’m guessing you’re thinking of the iWhatevers and their lack of Flash support and hoping the <video> tag will help you.
Since there are all those other user agents who don’t support HTML5 and don’t support <video>, you’ll be using Flash anyway, at least as a backup (set the Flash file inside the <video> tag after the video data… You can have <object> tags inside <video> tags, since <video> tags allow you to list alternatives inside… browsers who don’t support <video> should just see the <object> tag with the Flash in it like normal… browsers who support <video> will try to grab the file you have listed first in the <video> tag).
You might want to read more about <video> tags and <object> tags… there are sites that discuss HTML5 degradation. There are currently accessibility issues with HTML5 (mostly hitting various screen readers right now, even with and sometimes because of ARIA-attributes!), Internet Explorer needs Javascript to understand and let you style HTML5 elements, and older versions of other browsers at least need you to set block HTML5 elements to display: block (this one’s not a big deal unless the browser’s really, really old, but you’ll need to do this even for Firefox under 4).
You could use the HTML5 doctype (<!doctype html>) and just video tags (using the graceful degradation technique I mentioned above for all the non-brand-new browsers out there like IE8) and be okay. Mobiles aren’t any better with HTML5 as a group than anyone else, and I’ll still argue that since the iWhatevers are very low % worldwide and that feature phones and “lower” still strongly outnumber smart phones with uber-modern browsers, I would not expect HTML5 in and of itself to be a huge benefit, just <video> for the iWhatevers.
But beyond that I know little of video embedding. You might want to see if there are apps people can download that do video better than markup, css and javascript. There might be something out there that’s better for mobile users and easier on their bandwidth bills or something.
Example of a page layering stylesheets (not finished):
The HTML has this:
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" media="screen, projection, handheld" href="scooter.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 600px), projection and (min-width: 600px)" href="desktop.css">
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="screen" href="desktop.css">
<![endif]-->
Set viewport to device-width. Not all mobiles will correctly use or recognise this (iPhone 4 cough). Set the first, simple stylesheet (here it’s called “scooter.css”. Set the second one with and (min-width: yourwidth). Not sure what an iPhone4 would do with my 600px. Load the Desktop version?
Then the same thing, but without the queries for IE (IE will ignore the line with the queries because it does not understand them… also older phone browsers don’t which is fine).
Basic mobile styling
Images are gone, hidden text is revealed (since I can’t assume users can :hover over the ? image I have to reveal the text!), stuff is left to spread full width… in a mobile, full-width is still small so that’s ok. Squish your browser if it’s not IE and see.
Desktop styling added on
Background images, CSS hover events, smaller buttons.
It’s an example, and this page is a prototype and very simple. I suppose once I get this stuff really figured out I’ll make real demos with fake content and all that.
If your site simple has to have all the busy junk the desktop version has, you might have to consider redirecting mobile users to a mobile version of the site. This has problems when the back-end cannot accurately tell if the User Agent is a mobile or not.
Thanks again.
It is a very very hard work
I’ll ask for more more money
I’m following the slides than when I start
set up something I post again.
Bye
EDIT
You can go on posting example