mobile style sheet working but if it is heavy then how we can optimize CSS for mobile sites.. is there any technique for optimization mobile website… I want to make mobile website
Your article was really good, thanks would implement for http://www.awoof.org, I viewed this site using BOLT and it showed the entire page (using the screen css), hopefully I should make the site shed some ‘mobile weight’ after implementing your css ideas.
Opera Mini seems to have trouble with the “only” keyword in the media declaration. If you look at David Story’s example here: http://my.opera.com/dstorey/blog/media-queries-and-handheld-stylesheets
He’s using media=“handheld and (max-device-width: 480px), screen and (max-device-width: 480px)”
Technically he’s using the @media{} inside the stylesheet, but I found it was actually the “only” keyword that was stopping opera mini from reading my stylesheets and you can use <link> if you’re more comfortable with that method.
Copy & paste the code below to embed this comment.
ralat
I wonder how this works for the iPhone 4, which has a 960 × 640 resolution. You could use the only-rule with width:960px, but that means that all screens with a lower width will use this stylesheet. What is the best way to handle this?
To convert an existing website into its mobile version is a different task than the PC version designing. Different resolutions, different OS, different browsers will make it tough for a designer/developer. Â Different style sheets for PC and Hand Held devices are a nice idea. Â We need to take extra effort to make the website visually appealing and user friendly in hand held devices. Mainly we need to focus on the following things.
1. Fix the website to the smaller resolution
2. User friendly Structure
3. Easy Navigation
36 Reader Comments
Back to the Article22websitedesign
Hi,
mobile style sheet working but if it is heavy then how we can optimize CSS for mobile sites.. is there any technique for optimization mobile website… I want to make mobile website
bennee
Your article was really good, thanks would implement for http://www.awoof.org, I viewed this site using BOLT and it showed the entire page (using the screen css), hopefully I should make the site shed some ‘mobile weight’ after implementing your css ideas.
Cheers
nickw108
It seems that the “only” does not work.
Instead of
<link rel=“stylesheet” href=“handheld.css”
media=“only screen and (max-device width:480px)”/>
it needs to be
<link rel=“stylesheet” href=“handheld.css”
media=“screen and (max-device width:480px)”/>
to apply the stylesheet correctly on my iPod.
Tim Sookram
Opera Mini seems to have trouble with the “only” keyword in the media declaration. If you look at David Story’s example here: http://my.opera.com/dstorey/blog/media-queries-and-handheld-stylesheets
He’s using media=“handheld and (max-device-width: 480px), screen and (max-device-width: 480px)”
Technically he’s using the @media{} inside the stylesheet, but I found it was actually the “only” keyword that was stopping opera mini from reading my stylesheets and you can use <link> if you’re more comfortable with that method.
ralat
I wonder how this works for the iPhone 4, which has a 960 × 640 resolution. You could use the only-rule with width:960px, but that means that all screens with a lower width will use this stylesheet. What is the best way to handle this?
webtimal
To convert an existing website into its mobile version is a different task than the PC version designing. Different resolutions, different OS, different browsers will make it tough for a designer/developer. Â Different style sheets for PC and Hand Held devices are a nice idea. Â We need to take extra effort to make the website visually appealing and user friendly in hand held devices. Mainly we need to focus on the following things.
1. Fix the website to the smaller resolution
2. User friendly Structure
3. Easy Navigation