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?
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.
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
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.
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.
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.
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).
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
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.
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).
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.
