8 replies [Last post]
MalphasWats
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2004-03-22
Posts: 45
Points: 0

Here's a fun one for you!

I've got a SonyEricsson P800, and this has a funky version of the Opera Browser on it (v 6.30). Now, most of my site looks ok if I put the browser into "fit to screen mode", if I don't, all my floating layers sit on top of each other and look horrible.

The horribleness comes back with style when I go to my blog page - it just looks completely rubbish and doesn't even try.

Now, I hate 'browser detection' scripts, they just aren't cricket, however, in this case, I think I need something so I can present the 'mobile device friendly' version of my site.

I know this is a super-specialist subject, but does anyone have any ideas where I can start? Would I be better off creating a sub-domain (like mobile.michael-watts.com for example) or is there a better way to do it?

I really want to try and steer clear from javascript, I want simple and elegant.

Thanks
-Malphas

http//www.michael-watts.com

"Never put your face in a bag of angry squirrels"

vavroom
Offline
Enthusiast
Aotearoa / New Zealand
Last seen: 12 years 33 weeks ago
Aotearoa / New Zealand
Joined: 2003-07-19
Posts: 75
Points: 0

My site and Mobile Devices

One would to approach it would be, I think, to use different stylesheets depending on the media type. You can deliver a stylesheet if they are using regular screen, one for print (no need to recode all your pages for printers...), and you can deliver a stripped page to folks coming to you on mobiles/pda.

Hope this helps and/or does what you want Smile

Nic
"A community that excludes even one of its members is no community at all" - Dan Wilkins

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

My site and Mobile Devices

Hi MalphasWats,
If your device doesn't support media types you could use a script to detect the type of device and send it the correct style.
I have an old PHP script at http://www.appcreator.com/visitorsnif.php which you could modify once you know the useragents of the devices you are targeting.
This method of detection is not really encouraged these days but at the time It was developed it was effective.

Media types would be the preferred method in your case but remember not all devices recognize them.

Hope that helps

MalphasWats
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2004-03-22
Posts: 45
Points: 0

My site and Mobile Devices

Thanks, I wasn't sure if media types went as far as differentiating between small screens and large ones, I'll have a look at that.

I'd like to think that Opera thought of this, the new browser version is only a few months old!

Thanks for that, I'll give it a go and let you know!

-Mal

http//www.michael-watts.com

"Never put your face in a bag of angry squirrels"

MalphasWats
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2004-03-22
Posts: 45
Points: 0

My site and Mobile Devices

I knocked up a quick test http://www.aqpj48.dsl.pipex.com/test/test.html but it doesn't seem to work, my handheld device loads in the screen media type and not the handheld one, which is annoying!

Ah well, back to the drawing board

http//www.michael-watts.com

"Never put your face in a bag of angry squirrels"

vavroom
Offline
Enthusiast
Aotearoa / New Zealand
Last seen: 12 years 33 weeks ago
Aotearoa / New Zealand
Joined: 2003-07-19
Posts: 75
Points: 0

My site and Mobile Devices

Loated a page on my treo 180 that said "test", then three links that appeared to be all xxxxx, and and finally a long Lorem Ipsum test. Was that it?

Nic
"A community that excludes even one of its members is no community at all" - Dan Wilkins

MalphasWats
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2004-03-22
Posts: 45
Points: 0

My site and Mobile Devices

weird, no, it should just have 2 lines "Test Text!" and "this is a test"

on the mobile version, the top line should be smaller than the bottom one (I'm crap at thinging of ways to test stuff like that).

Wonder what page you found...

http//www.michael-watts.com

"Never put your face in a bag of angry squirrels"

MalphasWats
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2004-03-22
Posts: 45
Points: 0

My site and Mobile Devices

Ah ha!

I've had a little fiddle, and I've made it work, I had to do it this way :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Test Page </title>
<style>
@media screen
{
body {font-size:14px;}

h1 {font-size:20px;}
}

@media handheld
{
body {font-size:20px;}

h1 {font-size:14px;}

}

</style>
</head>
<body>
<h1> Test Text </h1>
Testing testing 123
</body>
</html>

rather than trying to load 2 different stylesheets:

<link rel="stylesheet" href="screen.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="handheld.css" type="text/css" media="handheld"/>

I'll just have to put all the media declarations into 1 css file.

http//www.michael-watts.com

"Never put your face in a bag of angry squirrels"

MalphasWats
Offline
Regular
Last seen: 12 years 37 weeks ago
Joined: 2004-03-22
Posts: 45
Points: 0

My site and Mobile Devices

I got it all working on my main site nicely now, the mobile layout isn't great but it works and it's all CSS!

It seems that Opera for UIQ doesnt' like floating divs very much, they all get displayed on top of each other, but since my P800 has such a small screen anyway, all the divs may as well just sit one under the other, doesn't make it look to crap either!

Cheers for the help!

-Mal
http://www.michael-watts.com

http//www.michael-watts.com

"Never put your face in a bag of angry squirrels"