Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Coding for smart phones

Discussion in 'Website Design Forum:' started by Jazajay, Dec 14, 2009.

  1. Jazajay

    Jazajay Active Member

    Hay up peeps now this is a new area to me i'll be honest. So what devices do i need to worry about?

    Opera mini, which i've noticed displays the css and re sizes images strangely is the one i currently use. But whats are the main ones and how do i code for them, any ideas will do, i've decided i need to improve my skill set in this area and on-line resources seem scarse n i'm not sure how much of the w3c to follow due to 1 i don't know the browsers n 2 how to implant code for them.

    So any 1 want to give me some lessons?

    Jaz
     
  2. tim

    tim Senior Member

    safari ;)
     
  3. Jazajay

    Jazajay Active Member

    Cool i take it thats the iphone's one. Is that just normal safari or is it like opera mini, safari mini? Is chrome used on googles? What about an ms mobile browser, or a firefox version? I did hear firefox were realeasing 1 n that ms planned to n i imagine google would push chrome. How do i code for them, as opera mini is not the same as opera in displaying code?

    Cheers tim bob. :)
     
  4. tim

    tim Senior Member

    yepo.

    im not sure of the name, but obvs it's quite popular now as in 2 years ipod touches/iphones have sold like hot cakes

    (nearly the population of the UK altogether - 60mill)
     
  5. Levi

    Levi Moderator Staff Member

    ok off the top of my head...
    mobile safari - webkit
    fennec - firefox mobile
    (there was also minimo)
    pocket internet explorer
    opera mobile
    opera mini

    skyfire
    thunderhawk
    s60 web browser
    maemo browser
    palm blazer
    android browser - webkit iirc
    palm webos browser - webkit iirc


    All of them support basic image and text, the ones in italic to the best of my knowledge support full website (ie safari) and can also support javascript styling etc.
     
  6. Jazajay

    Jazajay Active Member

    Aww cheers peeps.
    Any idea on how to code for them?
    Is there a universal way ot testing them as well, a bit like IE tester where you can load it up and see ie 5,6,7,and 8 all at once.

    I was reading in the W3C spec that the css for it should be based on 2.5 with some css3 and that they should display the same due to such a diverse amount of platforms.

    So if we ignore all the non italic ones, I may add that's a very impressive list off the top of your head Levi, and just consontrate on ones that display web pages. Is there any variation in CSS or do they all follow their big brothers?

    How do I code for Opera mini though as I have noticed some discerpancies that are not in Opera?
    Is there any -mob- specfic code like -omob- for Opera browsers -webkitmob- for webkit mobile browsers that sort of thing.
     
  7. Levi

    Levi Moderator Staff Member

    opera mini, skyfire and an option on opera mobile sends the data via servers which compress the data first, this could be the cause of the issue.

    I've used opera mobile since uiq 2.0 and the latest version on windows mobile is pretty good, still has a few quirks in it's layout of text in some cases but its pretty much equal to safari in every other respect in my opinion.

    Pocket IE, basically it was rubbish (hence opera being used by most people :)) but the version with windows mobile 6.5 (and zune) is meant to be pretty good.

    As to code - opera, safari and I assume PIE and webkit just have a different stylesheet as far as I know if you want to have custom mobile sites (think iphone optimised site), normal sites are just left as is.

    edit: quick google brings this up
     
  8. Harry

    Harry Senior Member

    Linearise all content and use percentage widths and voilà. That should work over any mobile devices. View the bottom of http://csswizardry.com/css/style.css to see what I mean.
     
  9. Jazajay

    Jazajay Active Member

    Levi do u just aim to make me depressed?

    Right thats a good article, very good in fact, in fact too good. It provides some tests to test your phone to see how advanced it is. Those tests where created in 05 so i'm thinking this will be a breeze, opera mini failed on at least half of them n doesn't even recognize type=handheld. Past more advanced technquies though which i find slightly odd, cant tell the differance between a h1-h3 but can pass some of the more advanced ones. Yeah thats not backwards.

    5 FLAMING YEARS!!! IE UPDATES FASTER THAN THAT N ON MORE AREAS, how can mobile devices still after 5 years be that bad when phones are getting so much better?
     
  10. Jazajay

    Jazajay Active Member

    @harry
    O okay so you set seperate rules for the iphone. Is there a tool to see what a page looks like in different mobile versions from a desktop?
     
  11. Harry

    Harry Senior Member

    Well that's iPhone only, and as I have and iPhone I just sit at my machine, edit my CSS, hit refresh on the phone and see what happens.

    If you look at http://m.twitter.com/login and http://m.flickr.com/#/home you can pretty easily see what needs done though :)
     
  12. Levi

    Levi Moderator Staff Member

    Didn't you know I'm the scrooge of the forum :D

    Jaz, I have a win mo device (a little pda with qvga res) if you want things testing in pocket ie and opera mobile :) Also got a uiq 2.0 using opera mobile (older setup) too if needed

    I will have an android device in the new year (waiting on new phone releases - not long) and 90% of the forum have iPhones :)
     
  13. Jazajay

    Jazajay Active Member

    Hay right what is the average screen width of a smart phone out of curiosity?

    I just bought a £350 Nokia N something or other, wishing I had got a windows phone now because you can get all the mobile browsers for a windows phone then testing becomes easy. Nokia phones on the otherhand well......

    Have found Fennec for the PC desktop which I will try out tomoz.
    http://www.mozilla.org/projects/fennec/1.0b1/releasenotes/#install

    Maybe also Pocket PC for a PC desktop as well ~
    http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=20686a1d-97a8-4f80-bc6a-ae010e085a6e

    Safari mobile however is currently aluding me, why cant they develop just the browsers to be downloaded on to a desktop for testing purposes to me that makes perfect sense and I appualde the Firefox team for thinking ahead of the game.

    O Harry not sure you know but the lastest version of Opera mobile should support box-shadow etc... before the desktop version from what I was reading.

    Mobile Opera 10 also is aluding me but I have that 1 for my phone at least, but I would prefer it for the desktop TBH. :)
     
  14. Levi

    Levi Moderator Staff Member

    depends on the phone, but generally speaking you have qvga, hvga, wqvga, vga, wvga, whatever the iphone is and then there are some random ones too.

    you can get a win mo pda fairly cheap these days - the fujitsu siemens n560 (I have the n520) can be bought for £115 now and it has gps etc too. Not the latest os but it will run all the browsers afaik.

    - I wouldn't not the best software out there.

    iirc there is a developer mobile safari in the iphone dev kit (mac only).

    Now I'm not sure if the software here is of any use to you, Ive not tried them though
    android 2.0
    andoid 1.5
    iphone and palm web os
     
  15. Jazajay

    Jazajay Active Member

    Following links from your links I finally got to Android SDK | Android Developers for Andriod 2.0 yeah a windows version at last. Happy days. :clap:

    Safari and Mobile IE6 are the ones that are buging me and I'm all spent out with xmas and all and don't think I could justify the cost of another phone esp at £115 to test a few sites out in minimal if none existant traffic from those browsers anyway.

    But cheers for letting me know any way you up to date phone info freak. :D

    I'm sooooo jealous. :cry:
     
  16. Harry

    Harry Senior Member

    You don't need to know screen widths if you work in %ages. You set images to be (max-)with:100%; and all divs etc to width:auto; clear:both; and you're away—you don't need to see it in action, it just works.
     
  17. Jazajay

    Jazajay Active Member

    I read this over at the Opera dev site so assumed pixels, it was 2 am. :D
    Opera Mobile 10 beta 2 developer?s introduction - Opera Developer Community

    But I suppose that makes sense. :)
     
  18. Levi

    Levi Moderator Staff Member

    Jaz, like I said, I can test on win mo if you want, I've got an app called my mobile that allows me to see my pda screen on a pc so can do screen captures easily for you :)
     
  19. Jazajay

    Jazajay Active Member

    Levi you are a star, but I wouldn't want to keep you bugging you.
    Cheers though mate very much appreciated. :)
     
  20. Jazajay

    Jazajay Active Member

    So why don't you think much to the IE emulate download?
     

Share This Page