Making a website available on a mobile device

Ye' old general discussion board. Basically, for everything that isn't covered elsewhere. Come here to shoot the breeze, shoot your mouth off, or whatever suits your fancy.
This forum is not for asking programming related questions.

Moderator: General Moderators

User avatar
jaoudestudios
DevNet Resident
Posts: 1483
Joined: Wed Jun 18, 2008 8:32 am
Location: Surrey

Making a website available on a mobile device

Post by jaoudestudios »

Hi all,

I want to make a website available on a mobile device. But as we all know there are many different screen resolutions as there are with laptops & PCs. What is good practice, to make the pages fit to the lowest common denominator? or give various options for the user to choose? Use javascript to make the webpage fit to the screen resolution?

Any feedback would be great.

Btw, it will be on its own subdomain so will not effect the existing website
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Re: Making a website available on a mobile device

Post by jayshields »

Just make the original website degrade nicely is the best idea I think.

Although I have recently developed a Web application that will be used on an iPhone/iPod Touch along with a normal computer and have found that it looks in the HTML meta tags for resolution settings.

If you check http://m.digg.com you can see they use this:

Code: Select all

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
This basically makes it render the same on an iPhone, but doesn't let the user do the multi-touch gestures to zoom in and out.

I used a modified version of that so that my application would display a form full screen rather than really small in the iPhone viewport.
josh
DevNet Master
Posts: 4872
Joined: Wed Feb 11, 2004 3:23 pm
Location: Palm beach, Florida

Re: Making a website available on a mobile device

Post by josh »

If the application is rich in terms of graphics & ajax, you may need to create presentation for the application. If you use MVC this would be a matter of basically having 2 views, in extreme cases like where a controller is coupled to ajax you may need to create separate controllers. Ideally you should be able to re-use your models
User avatar
jaoudestudios
DevNet Resident
Posts: 1483
Joined: Wed Jun 18, 2008 8:32 am
Location: Surrey

Re: Making a website available on a mobile device

Post by jaoudestudios »

Does ajax work on mobile devices? I did not realise they ran javascript? If so that is great news. But i will make it downgrade gracefully just incase.

Yes I am planning to use the Zend Framework, so that is even better news :) - thanks
josh
DevNet Master
Posts: 4872
Joined: Wed Feb 11, 2004 3:23 pm
Location: Palm beach, Florida

Re: Making a website available on a mobile device

Post by josh »

I actually said not use ajax, but yes there is limited java script support on some mobile devices... very limited, some may also support flash
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: Making a website available on a mobile device

Post by John Cartwright »

I've developed a few ajax (jquery) rich web applications that run great on my iphone :)
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Making a website available on a mobile device

Post by Weirdan »

John Cartwright wrote:I've developed a few ajax (jquery) rich web applications that run great on my iphone :)
I bet they won't run as great on my siemens m55 as they do on your iphone :D
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Re: Making a website available on a mobile device

Post by jayshields »

josh wrote:I actually said not use ajax, but yes there is limited java script support on some mobile devices... very limited, some may also support flash
The iPod version of Safari is fine with any Javascript I've used with it. However it doesn't work with Flash. The only proper mobile multimedia centre type devices I know of that supports everything properly are the Archos devices.
User avatar
jaoudestudios
DevNet Resident
Posts: 1483
Joined: Wed Jun 18, 2008 8:32 am
Location: Surrey

Re: Making a website available on a mobile device

Post by jaoudestudios »

I have the full-size blackberry and everything looks awful, I have not tried javascript yet - but I wont hold my breath.

It appears that not all the CSS is being recognised. Like floats for example.

Looks fine in firefox 3 but on my black it blows - any ideas?
josh
DevNet Master
Posts: 4872
Joined: Wed Feb 11, 2004 3:23 pm
Location: Palm beach, Florida

Re: Making a website available on a mobile device

Post by josh »

I have a Dell Axim pocket PC from years ago, it runs basic java script and with 3rd party hack I got IE to run flash, it was able to play some basic flash games at full frame rate + sound, with the benefit of having a touch screen that worked within flash
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Re: Making a website available on a mobile device

Post by Chris Corbyn »

Regardless of what "some" devices can handle and what hacks you can apply to the device, the fact is that if you want to deliver the most widely usable content for mobile devices you have to really strip it down. The majority of devices won't even run javascript and when you think about it, how does JS respond to things like Mouseover events on a mobile device? I know the iPhone has hacks (press and hold the element) to make this work but it's certainly not viable to use such rich content if your target audience is not just iPhone users.

Fortunately the iPhone has had a HUGE adoption. It'd be interesting to see the statistics for the percentages of users using the different mobile platforms. As in, for all the of the mobile users, how many are using an iPhone or a blackberry compared to those using a little Siemen's c55:P
User avatar
jaoudestudios
DevNet Resident
Posts: 1483
Joined: Wed Jun 18, 2008 8:32 am
Location: Surrey

Re: Making a website available on a mobile device

Post by jaoudestudios »

Chris Corbyn is right, we need to make the mobile website available to the lowest common denominator.

Which would be the smallest resolution screen and no javascript - well at least make it downgrade gracefully, so users without javascript can still use the website.

Should the mobile device render CSS is the normal way? i.e. widths, floats etc?
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Making a website available on a mobile device

Post by Weirdan »

jaoudestudios wrote:Should the mobile device render CSS is the normal way? i.e. widths, floats etc?
Not likely. Basically you may consider mobile device (if we're talking about the very least common denominator) to be something like lynx running on 25x10 text terminal. Total page size is also limited, because some devices won't have enough memory available to process anything larger than, say, 2Kbytes.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Re: Making a website available on a mobile device

Post by Chris Corbyn »

Yeah I think you have to set a "sensible" base here. Personally I don't think it would be worth worrying about those old black and white phones that only support WAP/WML for example. Realistically, although those devices offer browsing WAP sites it's not likely your users (I can't be 100%, just saying unlikely) will be heading to your site on such a handset. It's mostly news/weather type sites people would access on those things and I reckon nowhere near as frequently as say an iPhone user might "casually" browse the internet.

What's the minimum handset you want this to work on? Does it have to render HTML or are old WAP-only phones still included here? You've got a massive base to cover.

I'd say to aim for a layout that:

a) Looks good at 240 x 160 pixels (that's half the iPhone resolution)
b) Looks ok with no colors... unlikely many users will use such devices
c) Uses CSS, but doesn't rely on it (i.e. see how it looks without the CSS included)
d) Does not use (or at least require) JavaScript
e) Has very few images

Making the site work with or without CSS is a good excercise anyway. It makes you think about semantic markup and well-structured just as a side-effect (e.g. you have to think about the order in which the elements in your markup appear and whether that correlates to the order they appear on screen).

Effectively you're just looking to write something that works on a tiny screen without CSS.
josh
DevNet Master
Posts: 4872
Joined: Wed Feb 11, 2004 3:23 pm
Location: Palm beach, Florida

Re: Making a website available on a mobile device

Post by josh »

Like everything else its a matter of context, if your target userbase is a company buying into your ERP system then you're in control of the types of devices that are going to be used. For the lowest common denominator I think javascript is fine as long as you understand the technology, rollovers are one counter example. But just like the normal web if you don't need javascript then leave it out, its bad in general ( SEO, etc.. )
Post Reply