SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 46
  1. #1
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy CSS for mobile sites

    HI all,
    Firstly, is there anyway we can get a "CSS for mobile" specific forum? or XHTML CSS for mobile?

    Secondly, has anyone had any experience with UL and LI padding for mobile sites

    Ive specified:
    ul, li, h1, h2, h3 {margin: 0px;padding: 0px;}
    ul{list-style-type: none;}
    yet still - the list item seems to indent a bit to right on certain emulators and openwave browser, yet on web browser its perfect..
    Dont know how else to do this

    And another problem - how do you actually get the link colours to work on openwave? and some older phones?

    Many thanks!
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  2. #2
    Non-Member salahsoft's Avatar
    Join Date
    Feb 2009
    Location
    India
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    let's start with this thread, if it become popular, may be sitepoint can allocate us a css for mobile only forum.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by escapedf View Post
    HI all,
    Firstly, is there anyway we can get a "CSS for mobile" specific forum? or XHTML CSS for mobile?
    If there was enough interest then I guess it would be viable but we rarely see any mobile CSS questions. I could sticky the thread if there was enough interest.

    And another problem - how do you actually get the link colours to work on openwave? and some older phones?

    Many thanks!
    I don't even own a mobile phone so I'm not much use here really

    I did code a site for the iphone a while ago (as its basically safari on a smaller window) and remember that hover styles on links weren't supported.

    You could try looking at the openwave documentation for some hints.

    Sorry I can't be much help here

  4. #4
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks paul!
    Would be great to know if there were any mobile web people out there?

    And i was talking about just the link color, even before you hover over it.. yup that doesnt even work sobb
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  5. #5
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I think it would be worth having a mobile section of the website also (for any of the staff reading). Why? Firstly there are separate specifications for XHTML for mobile devices and a CSS media type (@mobile) for handheld devices, this means that coding for mobile devices does have some slightly different syntax rules (IE: the dotmobi group advise against using positioning and floats to achieve layouts and against using margins and padding – because of the obvious lack of screen space for whitespace and squeezing stuff together).

    Secondly mobile platform development is quickly becoming an important part of web design – especially with the rise in consumer phones like the iPhone and G1 which are getting ever increasing market share. Thirdly supporting mobile phones is spotty at best, Some devices only use the screen media type, some just use mobile, some use both screen and mobile and some require special media selectors to achieve styling – and this can trip up a lot of people new to mobile development to get cross device compatibility, and with accessibility in mind, mobile development is much harder to achieve equal results then any desktop device.

    Finally, there is a lot of up and coming exciting technology and devices for the internet for mobile devices, I am not new to mobile development but I can see it becoming an ever increased need for sites to work for mobile users and there is going to probably be a surge in mobile awareness and questions over this kind of thing.

    • Internet Explorer Mobile – Installed by default on Windows Mobile and Windows CE, works on other devices.
    • Mozilla Fennec / Mozilla Minimo – Firefox team’s mobile browsers, works across a variety of platforms, installed by default on some alpha stage Nokia phones.
    • Opera Mini / Opera Mobile – Installed by default on some netbooks, game consoles, and a wide variety of mobile phones.
    • Safari Mobile / WebKit Mini – Installed by default on the iPhone, the Android G1, and a large number of other devices.
    • Mango – The primary renderer for Blackberry web browsers.
    • NetFront – Installed by default on the PSP, PS3, Amazon Kindle and other mobile devices.
    • OpenWave – An older rendering engine, most used on WAP mobile devices.
    • SkyFire – A new up and coming rendering engine based on the desktop gecko platform, support only a small number of devices.


    And you thought the browser wars for the desktop market were bad

  6. #6
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think there was a mobile skin for joomla

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I'll sticky the thread and if it gets interest I'll let it stay stuck .

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, I actually wrote about this back in 2006. http://www.sitepoint.com/forums/show...74#post3139174

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Thanks for the link Dan

    Perhaps this thread will be useful for gathering information. (If not then it can slide away.)

  10. #10
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Paul, I actually wrote about this back in 2006. http://www.sitepoint.com/forums/show...74#post3139174
    Dan, I noticed the list of browsers you put in the post when I wrote my own earlier statement, but I also made sure to update the list with the ones which have a large market share. Nokia's browser for example has pretty much remained a WML WAP format (so not technically a true graphical web browser - it’s sort of the equivalent of lynx for mobile as WML though supports images, is very restricted) hence why I removed it.

    Hopefully the up-to-date list of graphical browsers I put together will be useful to anyone wanting to do some testing.

  11. #11
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks paul, for sticking this thread..
    No answers to my questions, but just to put a usefull link out there: http://ready.mobi/launch.jsp?locale=en_EN

    This site tests your pages, lets you know what can be improved and has 5 different emulator phones to see what it could look like,

    Unfortunately it doesnt dive deeper to explain to you how different CSS changes can affect different browsers
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Is there even a standard yet for :pseudo elements re a stylus?

    It's not a mouse, and it's almost but not really a pointing device... it's a contact device. Will it get its own versions of hover, focus, active? This would I assume be why things like :hover won't work with phones if they don't even have a mouse in the first place.

  13. #13
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    Dan, I noticed the list of browsers you put in the post when I wrote my own earlier statement, but I also made sure to update the list with the ones which have a large market share. Nokia's browser for example has pretty much remained a WML WAP format (so not technically a true graphical web browser - it’s sort of the equivalent of lynx for mobile as WML though supports images, is very restricted) hence why I removed it.

    Hopefully the up-to-date list of graphical browsers I put together will be useful to anyone wanting to do some testing.
    And on that note I would have left it in the list as a fall-back for accessibility testing. You do bring up a great point - it's like the Lynx browser for mobile devices. Just as we test in Lynx when developing accessible Web sites to be used on desktop browsers, so too should we use Nokia's browser to test when developing accessible Web sites for mobile devices.

    At least that's my take on it anyway.

  14. #14
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    And on that note I would have left it in the list as a fall-back for accessibility testing. You do bring up a great point - it's like the Lynx browser for mobile devices. Just as we test in Lynx when developing accessible Web sites to be used on desktop browsers, so too should we use Nokia's browser to test when developing accessible Web sites for mobile devices.

    At least that's my take on it anyway.
    Perhaps but I can see an immediate flaw with that theory, lynx renders HTML as HTML, it just ignores visual style and relies alone on the document flow. The Nokia browser relies entirely on WML which means that it canít effectively see your website if you render using HTML which basically means you would be required to write a WML version of the website to fall back on (alike to the old days of having 2 separate websites).

  15. #15
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And given that there are still a lot of people using older cell phones (especially in developing countries where pre-paid phones dominate the market), WML is still unfortunately being used.

    You'll also have instances where (again, unfortunately) it'll be better to create a mobile site using WML instead of plain HTML, but that depends on the content. Thankfully though, those days will soon be behind us.

  16. #16
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    And given that there are still a lot of people using older cell phones (especially in developing countries where pre-paid phones dominate the market), WML is still unfortunately being used.

    You'll also have instances where (again, unfortunately) it'll be better to create a mobile site using WML instead of plain HTML, but that depends on the content. Thankfully though, those days will soon be behind us.
    You say that but I just see people using dotmobi domains to split mobile sites away from the natural domain and it makes me cringe of the WML days. lol

  17. #17
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do think it would be worth having a CSS for Mobile forum.

    I'm considering doing a mobile version of the project I'm working on (a WordPress blog) but not sure if it's pointless or not.

    I have a N95 and I use Opera Mobile on there.

  18. #18
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Has anyone designed a site for mobile, tested it on readi.mobi, taken out px (as according to the mobile standards these shouldnt be used)?

    only to realise Openwave browser doesnt render padding using ex, em.. Openwave is the browser which comes standard on all Samsung phones.. so now im back to using px for padding.
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  19. #19
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    escapedf, that very issue is the problem with designing for mobile sites. When you create a mobile version of a website I do side with dotmobi. Using PX as a form of measurement on screens which have a VERY limited width and height (in pixel screen space) means that a small amount of padding may look great on a normal website, but it could push all your content right off the screen.

    I find the best policy is if you are making a mobile StyleSheet for your website firstly remove or override all floats, absolute positioning, fixed positioning, margins and padding (because these will cause issues on small screen sizes) and always size your fonts in EM’s as this particular method will scale properly. For your website in particular, having padding of any kind in a mobile design is a bad thing as screen space is limited and precious. You do not need to apply the rules of whitespace on mobile sites so get rid of all of that padding and help the user have to do as little scrolling as possible (as scrolling on mobile tactile devices can get rather tedious).

  20. #20
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Alex,
    Yes i get your point,

    But at the same time, i dont want everything so squashed,
    and im not using a huge amount of padding,
    just enough so that it doesnt all look on top of each other.

    Getting rid of all the padding makes it look erghhhhh
    I mean really not user friendly ..so ive added a bit

    And yes, its in PX, but youve got to realise there must be a reason why sites facebook, bbc, uses some px padding.. they have obviously considered the users.
    And i am testing on the smallest width phones... we have a bunch of old phones in the office.

    Would be great if openwave would support other alternatives in future.
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,760
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I wouldn't mind designing in px for mobile users. At least the screensize for them wouldn't vary and they'd be using the same 1-2 browsers (maybe 3 but I can't think of a third one).
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  22. #22
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Huh, I just stumbled on something that maybe all of you knew, but I certainly didn't. In Opera, if you reduce the width of the browser window down to around about 100-150px, it seems to jump to its mobile browser format, allowing you to see what the site looks like on a handheld device. Very handy. Does anyone know what % of mobile phones use Opera for browsing?
    Simple is beautiful.

  23. #23
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,760
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Oh Opera? I have no idea .

    PS: I didn't know that-interesting.

    PS#2: Nice to see you on here Aarem.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  24. #24
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Aarem View Post
    Huh, I just stumbled on something that maybe all of you knew, but I certainly didn't. In Opera, if you reduce the width of the browser window down to around about 100-150px, it seems to jump to its mobile browser format, allowing you to see what the site looks like on a handheld device. Does anyone know what % of mobile phones use Opera for browsing?
    In Opera go to View > Small Screen. (You can thank me later.)

    PS: http://marketshare.hitslink.com/repo...rame=Q&qpsp=40

    This contains Opera Mini's browser market share (in comparison against desktop browsers).

  25. #25
    SitePoint Addict Aarem's Avatar
    Join Date
    Aug 2008
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    You can thank me later.
    Thanks! View > Small screen is even easier, and the link to the browser stats is useful (and an eye-opener). I'm amazed at that spread of market share. Is Opera really such a small chunk of the pie? I'm also surprised that Chrome has so little share...

    Hmmm

    @RyanReese: I've been busy lately, but I do prowl this forum a lot, even if I don't post. There are too many great posts, so not much point in me jumping in!
    Simple is beautiful.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •