On 6 Aug 2010, at 00:48, tee wrote:
On Aug 5, 2010, at 1:41 PM, David Laakso wrote:
Whoops. Hit send too soon. Here's the rest of it...
Got the iPod screenshot, thanks -- will look into it.
The image issue has been resloved in the Opera Mini Simulator and
in the Sany Mirro handset [a low-end device] with Duncan's
suggestion of setting Image Quality High. This makes the image from
too narrow to too wide.
I changed the CSS as follows to reduce the image width: /* was 96% */
@media handheld, screen and (max-width: 480px), screen and (max-
device-width: 480px) {
body#p #main img {
max-width : 35% !important;
height : auto !important;
}
} /* for Opera Mini 5.1 on SanyoMirro 4 BoostMobile*/
If you add this in the above @media rule the horizontal scrolling
will go away.
header, #page {
margin : 0 auto;
width: 100%;
}
I was not aware the Opera Mini image rendering differences in image
quality setting with low, medium and high until Duncan pointed out.
From the mobile user point of view, changing image quality to high
might not be a good approach though. In my iPod, the default quality
is medium, and I assume this is the majority will see in their
Opera Mini.
Some thoughts, not related to the issue you are having, but I think
they are valid points for your mobile users.
A side note, I have just completed the W3C Mobile Best Practice
course taught by Phil, and have learned many practical, useful
skills and knowledges. One of the strong emphasizes Phil taught us,
is to "Specify the size of images in markup, if they have an
intrinsic size."
To get a Mobile OK (optimized) site, a page cannot be more than 10K.
That image you have, is 170kb and that you using one style sheet
with media queries to target all devices, if I am a user on the go
who needs to watch over bandwidth and monthly phone bill, I don't
think I would be happy visiting your site.
I was very excited when I first learned how to use media queries
just few months ago, but after the course, I found that just the
media queries will not do if you need to optimized a mobile version
site.
I completed the course with a conclusion that Content negotiation
almost is a must just for one simple reason, using media queries to
"display:none" only makes the content/element you do not want mobile
user to see off the screen, it does not eliminate the sizes that
slow the page load, eat up user's phone bill.
Not strictly true. First of all Opera Mini compresses the content and
images (which is one of the reasons for the image quality setting - it
will compress it less on high setting) to optimise it for low
bandwidth devices. Opera (in general) also doesn't load resources that
are set to display: none; until they are set to show on the page. Your
mileage may vary with other browsers though. Opera Mini is designed
for feature phones with slow networks that cost per kb. This is why it
is hugely popular across Asia, Africa and South/Central America. It of
course has some trade offs in what it can support using the client
server approach, but those trade offs are worth it for the users, as
the alternatives would be no internet at all or one that costs too much.
Ignoring the strengths of Opera Mini, you can easily use Media Queries
without just using it to override screen styles to hide them for
mobile. For example you can provide two stylesheets; one only for
screen and one only for small screen devices. you can set the media
query to be mutually exclusive so the mobile browser never gets the
stylesheet designed for desktop and thus doesn't have to override the
styles. Or otherwise you can use the default stylesheet to style the
mobile page, and use another stylesheet to override those styles for
desktop. The mobile will then never download those styles.
Depending on the context, it is often best to try to keep the images
linked from the style sheet, rather than in the HMTL (especially if
presentational ) so you can specify an optimised one to the device
based on the media query. This doesn't matter for Opera Mini as it
will optimise it anyway (and not load it if display: none;, but will
benefit less bandwidth-smart browsers and devices.
This site may give you a general idea how much it may cost your
mobile user per page.
http://mobiready.com
tee
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
David Storey
Chief Web Opener / Product Manager, Opera Dragonfly
W3C WG: Mobile Web Best Practices / SVG Interest Group
Opera Software ASA, Oslo, Norway
Mobile: +47 94 22 02 32 / E-Mail/XMPP: [email protected] / Twitter:
dstorey
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
