Making blogs display better on mobile devices
2010-Nov-28, Sunday 21:55![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
matgbI'm trying to fix some issues with my and Jennie's layout for display on mobile devices, if anyone knows enough about either the DW style system or CSS media types to help, the question is over at ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png)
style_system
Using @media commands to print separate stylesheets?
Essentially, it's considered good practice to have a different stylesheet for different sorts of browsers. For example, on my computer, the browser needs to be told that I want the sidebar to the right, how wide the boxes should be, etc. But on my phone browser, that information is actually worse than useless, as it can't make use of it, I pay for the bandwidth to download it anyway, and some mobile browsers will try and display it if told to even though it can't work properly.
I've had reports from some readers, here and on friends journals, that most DW layouts are unreadable in certain devices (a Palm Pre being a specific example--I can't check). I think this is both a good thing to learn to do, and will be useful overall for the site.
Wondering around cvarious places, wordpress.com hosted blogs do it by not giving any style information to a mobile device, so you just get default browser stuff, which looks ugly, wordpress self-hosted blogs use a variety of tools--some good & some bad, LJ and DW styles don't do anything specific, but seem to degrade gracefully, and Blogger hosted blogs are almost impossible to navigate using Opera Mobile and I still can't figure out what it is in the code they're doing that borks it that badly.
If anyone can spot it, I can code a fix for friends using Blogger. Because that'd make my life much happier.
style_systemUsing @media commands to print separate stylesheets?
Essentially, it's considered good practice to have a different stylesheet for different sorts of browsers. For example, on my computer, the browser needs to be told that I want the sidebar to the right, how wide the boxes should be, etc. But on my phone browser, that information is actually worse than useless, as it can't make use of it, I pay for the bandwidth to download it anyway, and some mobile browsers will try and display it if told to even though it can't work properly.
I've had reports from some readers, here and on friends journals, that most DW layouts are unreadable in certain devices (a Palm Pre being a specific example--I can't check). I think this is both a good thing to learn to do, and will be useful overall for the site.
Wondering around cvarious places, wordpress.com hosted blogs do it by not giving any style information to a mobile device, so you just get default browser stuff, which looks ugly, wordpress self-hosted blogs use a variety of tools--some good & some bad, LJ and DW styles don't do anything specific, but seem to degrade gracefully, and Blogger hosted blogs are almost impossible to navigate using Opera Mobile and I still can't figure out what it is in the code they're doing that borks it that badly.
If anyone can spot it, I can code a fix for friends using Blogger. Because that'd make my life much happier.
