Re: [WSG] :: opera mini 5.1 ::

2010-08-18 Thread tee
 
On Aug 6, 2010, at 6:59 PM, David Storey wrote:

 
 On 7 Aug 2010, at 00:44, tee wrote:
 
 
 On Aug 5, 2010, at 4:23 PM, David Storey wrote:
 
 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.
 
 Hi David,
 
 This is interesting but I am not sure I fully understand it. Compression 
 this I understand, but not loading the display none part. Are you saying 
 that Opera Mini able to exclude inline elements in the markup that are 
 declared display none in the style sheet.
 
 Yes that is correct. If a resource is display: none, opera will not load it 
 until you set it as display: block or whatever. Providing I  understand your 
 english correctly.
 
 

Hi David, 

Thanks for the answers! One last question.

p
I am still having a tiny bit of issue to fully understand it, for the reason 
that I view at a html page a non-abstract object, it's real solid. A header, a 
left column, a content block, they are real filled with content (images and 
texts). Taking off the style sheet, we see a un-styled page, look into the 
source code, we see the skeleton of the page (still with content in it except 
the inline object such as image).
/p

p class=no-displayAfter my previous message, I realized that using inline 
image for my question wasn't  a best example, because inline image requires an 
action, a link to call the image, so strictly speaking, the image is not 
exactly part of the content but a standby that gets call in if it's told so  
whereas the link action (img src=image.jpg) is part of the content 
(skeleton of the page ). In this sense I do understand fully that Opera Mini 
able to exclude an inline image that is set to display none. I assume if the 
link action has a wrong command (link path not correct) or the image is not 
presented in the server, then desktop browser will not load the image too thus 
no extra file size. /p

pBut how about the content ? Whether a paragraph of texts is of static HTML 
or get pulled in dynamically, it's loaded into the page and is part of HTML 
structure./p


.no-display {display:none}

Can Opera Mini not load the no-display paragraph?

p/s. If you have difficulty understand my English, I can write in Chinese or 
Malay, and you can use Google translation :-)

tee



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] :: opera mini 5.1 ::

2010-08-10 Thread David Laakso

Duncan Hill wrote:
On Fri, 06 Aug 2010 01:51:17 +0100, David Laakso 
da...@chelseacreekstudio.com wrote:


Hmm. Doubt it is Opera Mini. SanyoMiro okay this end. N80 cache 
issue? AP from sidebar [digits] and/or header metroedition 
display:none; not holding? I will check it out. Thanks for the 
heads-up.


Best,
~d


I've reset Opera Mini on the N80.
Default image quality appears to be 'Medium', which results in a small 
width image but with no side-scroll for the page.

Is max-width 35% correct for the image on the 480px screen ??

Duncan






re: http://chelseacreekstudio.com/site/portfolio/01.php

Doing considerably better on a low-end Sanyo/Mirro on this end. Unable 
to test in N80.
No scrollbar portrait or landscape. Settings at mobile view-off, 
text-size medium and large, everything else at default.
Now feeding a separate set of much smaller images only to the handset. 
This seems to be the answer?


Best,
~d


--
http://chelseacreekstudio.com/



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] :: opera mini 5.1 ::

2010-08-06 Thread David Storey


On 7 Aug 2010, at 00:44, tee wrote:



On Aug 5, 2010, at 4:23 PM, David Storey wrote:


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.


Hi David,

This is interesting but I am not sure I fully understand it.  
Compression this I understand, but not loading the display none  
part. Are you saying that Opera Mini able to exclude inline elements  
in the markup that are declared display none in the style sheet.


Yes that is correct. If a resource is display: none, opera will not  
load it until you set it as display: block or whatever. Providing I   
understand your english correctly.


If so, I would like to learn more the technical aspect how Opera  
Mini does it.


Not much to learn (not that it really matters to you). Basically the  
browser reads the style sheet and doen't load the resource that are  
not displayed.




If David L display none his 170kb inline image, Opera Mini will not  
load that 170kb or whatever reduced size that is after the  
compression?


Not sure I understand but if it is what I think then no it will not  
display.




When I did my final assignment for the Mobile Web Best Practices  
course I mentioned, I needed to make a page  (a WordPress blog) stay  
within 10k file size


I'm a member of that WG but honestly it is complete useless and out of  
date. It was commissioned when 12kb all together was a big deal. Now  
it is trivial. On smart phone no one cares as it is often unlimited  
data. On regular devices it matters cause you often pay per kb, but  
devices like OM have compression  and 12 kb is too small for a  
realistic page. The limit is set brcause many on the WG are browser  
vendors or such from WAP browsers  who have poor quality products  
(only IMHO) , that can't cope with real web sites (unlike Opera Mini  
or webkit browsers_


, it was more than a challenge having to watch over every byte in a  
dynamic page. I first used the media queries, display:none side  
column items (e.g., tags, archives, recent comment and inline image  
etc...) that I wanted to exclude in mobile version. Visually I get  
the result I wanted, but as far as markup and file sizes are  
concerned, they were still there in the source code.


But not loaded unless the browser is very low quality.

I tested the page over MobileOK Checker, the validator picked them  
up too, and that is how I concluded without some sort of content  
negotiation


Don't trust automated systems. They will lead you up blind ally  
without a paddle.


(along with other more aggressive methods), media queries is just a  
very nice idea for mobile version of site without much practical use,


Bull terds.

unless, we don't care at all optimization.


unfounded and incorrect.



tee





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



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: dsto...@opera.com / Twitter:  
dstorey




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



[WSG] :: opera mini 5.1 ::

2010-08-05 Thread David Laakso

markup
http://chelseacreekstudio.com/site/portfolio/01.php
css
around line 669
http://chelseacreekstudio.com/site/css/sisu.css

The image does not fill the width of the window in
Sanyo Mirro scp3810 for BoostMobile running Opera Mini 5.1
nor in the Opera Mini Simulator.
http://www.opera.com/mobile/demo/

What to do?

aside
It does fill the window in Mac OS X 10.4 at 600, 480, and 400.
And it fills the window in the iPhoney Simulator...
/aside

Best,
~d

--
http://chelseacreekstudio.com/



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] :: opera mini 5.1 ::

2010-08-05 Thread tee
Hi David,

Having done 2 full sites+ many exercise mobile sites, I view at Opera Mini 
(including the Mobile 10) the Internet Explorer 6+7, it's a browser one will 
hate it, curse it more than praise it :-(

I think the problem might be this:

body#p #main img {border: 3px solid red;display: block;
max-width : 96% !important;
height : auto !important;
margin : 20px 0 0 0;
}

Should it not be body#p, #main img?

Apart for this, I don't think it's a good idea to declare max-width for any 
mobile browsers, be it container or inline image. This rule you have should 
take care of the width for portrait and landscape view:
@media handheld, screen and (max-width: 480px), screen and (max-device-width: 
480px) 

In my iPod Opera Mobile 10, your site results horizontal scrolling,   you might 
want to overwrite all the EM declared in (max)widths to % in your @media.

A side note , next time you might want to post a tinyURL or bit.ly (I like 
this!) address if ask mobile browser check because typing on a tiny screen 
keypad on a tiny screen for a long url address is no fun :-) Some mobile 
emulators do not allow copy and paste either.

tee
On Aug 5, 2010, at 11:27 AM, David Laakso wrote:

 markup
 http://chelseacreekstudio.com/site/portfolio/01.php
 css
 around line 669
 http://chelseacreekstudio.com/site/css/sisu.css
 
 The image does not fill the width of the window in
 Sanyo Mirro scp3810 for BoostMobile running Opera Mini 5.1
 nor in the Opera Mini Simulator.
 http://www.opera.com/mobile/demo/
 
 What to do?
 
 aside
 It does fill the window in Mac OS X 10.4 at 600, 480, and 400.
 And it fills the window in the iPhoney Simulator...
 /aside
 
 Best,



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] :: opera mini 5.1 ::

2010-08-05 Thread Duncan Hill
On Thu, 05 Aug 2010 19:27:24 +0100, David Laakso  
da...@chelseacreekstudio.com wrote:



markup
http://chelseacreekstudio.com/site/portfolio/01.php
css
around line 669
http://chelseacreekstudio.com/site/css/sisu.css

The image does not fill the width of the window in
Sanyo Mirro scp3810 for BoostMobile running Opera Mini 5.1
nor in the Opera Mini Simulator.
http://www.opera.com/mobile/demo/

What to do?

aside
It does fill the window in Mac OS X 10.4 at 600, 480, and 400.
And it fills the window in the iPhoney Simulator...
/aside

Best,
~d


Only an old Nokia N80 to test on.
Messed with Opera Mini settings and the only way to get the image to  
display at larger than mini size was to set Image Quality to High, but  
then it did not respect the screen width.

Doesn't seem to provide any clues I'm afraid.

Best wishes

Duncan


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] :: opera mini 5.1 ::

2010-08-05 Thread David Laakso

tee wrote:

Hi David,

I think the problem might be this:

body#p #main img {border: 3px solid red;display: block;
max-width : 96% !important;
height : auto !important;
margin : 20px 0 0 0;
}

Should it not be body#p, #main img?


tee

  




#p is the id for the styles specific to the portfolio pages, so I don't 
think your suggestion would work as you've written it -- and, just

#main img {...}
does not work, either.

I have had no difficulty with Opera Mini 5.1 on Sanyo Mirro [ a low-end 
device ] whatsoever, other than the problem I wrote about.


A friend checked it on an iPod prior to the inclusion of the @media 
declarations and reported no issues at that time. I will ask her to 
check it again.


Thanks.

Best,
~d


--
desktop
http://chelseacreekstudio.com/



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] :: opera mini 5.1 ::

2010-08-05 Thread David Laakso

Duncan Hill wrote:
On Thu, 05 Aug 2010 19:27:24 +0100, David Laakso 
da...@chelseacreekstudio.com wrote:



markup
http://chelseacreekstudio.com/site/portfolio/01.php


Best,
~d


Only an old Nokia N80 to test on.
Messed with Opera Mini settings and the only way to get the image to 
display at larger than mini size was to set Image Quality to High, but 
then it did not respect the screen width.

Doesn't seem to provide any clues I'm afraid.

Best wishes

Duncan








Bingo, I bet!!!

Image Quality High with max-width re-set to 40% or a little less ought 
to do it.

If you do not hear back from me in an hour or so it is resolved.

Thanks!

Best,
~d



--
http://chelseacreekstudio.com/



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] :: opera mini 5.1 ::

2010-08-05 Thread tee
I sent you a screenshot taken from Opera Mini directly from iPod using 
landscape view
It might go into your junk box.  I am quite certain the image is the result of 
the max-width declaration in your img and the horizontal scrolling is the 
product of EM width with the combination of max-width.

Opera mobile 10 emulator doesn't has the same issue though, but then I have 
learned to never trust the emulator from day one.

tee
 
 
 A friend checked it on an iPod prior to the inclusion of the @media 
 declarations and reported no issues at that time. I will ask her to check it 
 again.
 
 Thanks.
 
 Best,
 ~d



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] :: opera mini 5.1 ::

2010-08-05 Thread David Laakso

tee wrote:

I sent you a screenshot taken from Opera Mini directly from iPod using 
landscape view
It might go into your junk box.  I am quite certain the image is the result of 
the max-width declaration in your img and the horizontal scrolling is the 
product of EM width with the combination of max-width.

Opera mobile 10 emulator doesn't has the same issue though, but then I have 
learned to never trust the emulator from day one.

tee
  




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% */






http://chelseacreekstudio.com/



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] :: opera mini 5.1 ::

2010-08-05 Thread David Laakso

David Laakso wrote:

tee wrote:
I sent you a screenshot taken from Opera Mini directly from iPod 
using landscape view
It might go into your junk box.  I am quite certain the image is the 
result of the max-width declaration in your img and the horizontal 
scrolling is the product of EM width with the combination of max-width.


Opera mobile 10 emulator doesn't has the same issue though, but then 
I have learned to never trust the emulator from day one.


tee
  









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*/



Best,
~d














http://chelseacreekstudio.com/



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***





--
desktop
http://chelseacreekstudio.com/



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] :: opera mini 5.1 ::

2010-08-05 Thread David Storey


On 5 Aug 2010, at 21:12, tee wrote:


Hi David,

Having done 2 full sites+ many exercise mobile sites, I view at  
Opera Mini (including the Mobile 10) the Internet Explorer 6+7, it's  
a browser one will hate it, curse it more than praise it :-(


What are your issues with Opera Mobile (Opera Mini has known  
restrictions as it is designed for low-end devices which can't power a  
full browser; which are the majority of the worlds devices people use  
to access the web. Smart phones are only big in the West).


Are you mixing up Mini and Mobile, as you state In my iPod Opera  
Mobile 10. Opera Mobile doesn't exist for iPod as Apple do not allow  
full browsers on iOS as JavaScript engines bar their own pre-installed  
one are banned.




I think the problem might be this:

body#p #main img {border: 3px solid red;display: block;
max-width : 96% !important;
height : auto !important;
margin : 20px 0 0 0;
}

Should it not be body#p, #main img?

Apart for this, I don't think it's a good idea to declare max-width  
for any mobile browsers, be it container or inline image. This rule  
you have should take care of the width for portrait and landscape  
view:
@media handheld, screen and (max-width: 480px), screen and (max- 
device-width: 480px)


In my iPod Opera Mobile 10, your site results horizontal  
scrolling,   you might want to overwrite all the EM declared in  
(max)widths to % in your @media.


A side note , next time you might want to post a tinyURL or bit.ly  
(I like this!) address if ask mobile browser check because typing on  
a tiny screen keypad on a tiny screen for a long url address is no  
fun :-) Some mobile emulators do not allow copy and paste either.


tee
On Aug 5, 2010, at 11:27 AM, David Laakso wrote:


markup
http://chelseacreekstudio.com/site/portfolio/01.php
css
around line 669
http://chelseacreekstudio.com/site/css/sisu.css

The image does not fill the width of the window in
Sanyo Mirro scp3810 for BoostMobile running Opera Mini 5.1
nor in the Opera Mini Simulator.
http://www.opera.com/mobile/demo/

What to do?

aside
It does fill the window in Mac OS X 10.4 at 600, 480, and 400.
And it fills the window in the iPhoney Simulator...
/aside

Best,




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



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: dsto...@opera.com / Twitter:  
dstorey




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] :: opera mini 5.1 ::

2010-08-05 Thread tee
 
On Aug 5, 2010, at 2:05 PM, David Storey wrote:

 
 On 5 Aug 2010, at 21:12, tee wrote:
 
 Hi David,
 
 Having done 2 full sites+ many exercise mobile sites, I view at Opera Mini 
 (including the Mobile 10) the Internet Explorer 6+7, it's a browser one will 
 hate it, curse it more than praise it :-(
 
 What are your issues with Opera Mobile (Opera Mini has known restrictions as 
 it is designed for low-end devices which can't power a full browser; .


 
 Are you mixing up Mini and Mobile, 

Oops, I must be. Mini and Mobile sounded very much the same browser to me, and 
I got an impression that  Opera had consolidated the two name from Mini to 
Mobile 10 since the version 5.

So the one I been using is Opera Mini 5 in my iPod (should this be called a 
smart phone equivalent?) , but it does look to me like a full browser (and with 
many quirks).

I have experienced many issues in Opera Mini 5 which took quite a bit of time 
to get rid of, some were fixed, but these two are quite stubborn.

1. Pre tag - in portrait view if a line of content is longer than the device 
width, it doesn't wrap.
2. padding issue (I think) in the input. If I add a background image like so 
and the image has a width of, say, 12px

input {
background: url(search-icon.png) no-repeat left top; 
padding: 1px 2px 1px 16px
}

The input has  a value of search site, the text should be pushed 16px to the 
right. Andriod and Safari obeyed the rule, but Opera Mini ignores the padding 
rule which resulting the text and background image overlapped.

I am sure I will find more issues in this browser as I get more opportunities 
to work on Mobile version of websites.

I often think Opera desktop has paddings/margins/line-height bug related to EM 
and % which seems never fixed, but then it might be Opera way of handling them, 
and they are carried over to Mini. A browser that has only 5+% usage (based 
from many stats of the sites I did) and offers no browser specific option for 
developer to tackle a slight difference that maybe required at time, does make 
a web developer hard to love it and embrace it :-)

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] :: opera mini 5.1 ::

2010-08-05 Thread tee
 
 1. Pre tag - in portrait view if a line of content is longer than the device 
 width, it doesn't wrap.

Correction! Not that it doesn't wrap (can pre tag wrap? I thought not), I think 
it's the font size (even in % and EM) does not re-adjust like other two do when 
you switch from Landscape to Portrait and this creates issue with certain html 
tags.

tee



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] :: opera mini 5.1 ::

2010-08-05 Thread Duncan Hill
On Thu, 05 Aug 2010 21:41:33 +0100, David Laakso  
da...@chelseacreekstudio.com 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*/



Best,
~d

I've tried just about every combination of settings on the N80
screen size is 352x416
tried portrait and landscape, it lands in an awkward patch of your @media  
values.


Having checked in Opera desktop, which does respond to the @media queries,  
and the N80, I have a suspicion that there may be something in your header  
that is maintaining a side scroll on the handheld.

Could that be an overflow failure in Mini or a minimum size setting.
Best settings for Portrait or Landscape:
Images: On
Image Quality: High
Font: Medium
Mobile View: Off
Fullscreen: On or Off


Best wishes

Duncan


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] :: opera mini 5.1 ::

2010-08-05 Thread David Storey


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: memberh...@webstandardsgroup.org
***



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: dsto...@opera.com / Twitter:  
dstorey





Re: [WSG] :: opera mini 5.1 ::

2010-08-05 Thread David Storey


On 5 Aug 2010, at 23:51, tee wrote:



On Aug 5, 2010, at 2:05 PM, David Storey wrote:



On 5 Aug 2010, at 21:12, tee wrote:


Hi David,

Having done 2 full sites+ many exercise mobile sites, I view at  
Opera Mini (including the Mobile 10) the Internet Explorer 6+7,  
it's a browser one will hate it, curse it more than praise it :-(


What are your issues with Opera Mobile (Opera Mini has known  
restrictions as it is designed for low-end devices which can't  
power a full browser; .





Are you mixing up Mini and Mobile,


Oops, I must be. Mini and Mobile sounded very much the same browser  
to me, and I got an impression that  Opera had consolidated the two  
name from Mini to Mobile 10 since the version 5.


No. Opera Mini is for JavaME enabled feature phones and restrictive  
devices (such as iOS), but does work on Smart Phones as it works  
anywhere (and there are special versions for a number of smart phone  
platforms to take advantage of features they offer such as being able  
to be set as the default browser, which Java often can't offer)


Opera Mobile is for Smartphone platforms: Symbian, Windows Mobile,  
Maemo and Android.





So the one I been using is Opera Mini 5 in my iPod (should this be  
called a smart phone equivalent?)


No, iOS doesn't allow Opera Mobile due to its licensing terms and  
conditions. It is capable of running  browser such as Opera Mobile  
technically, but not politically.



, but it does look to me like a full browser (and with many quirks).


We have a shared UI layer across our mobile (and a number of other  
devices such as TV) products. On the surface the UI is the same  
between Mini and Mobile, but the engine is different. Mobile is a full  
Opera Presto rendering engine under the hood. Mini is a thin client  
(you could almost think of it as something like a PDF viewer) which  
renders on a server and sends the transcoded content to the Opera Mini  
client. Mobile runs on more advanced platforms so it will allow for  
more things in the UI like higher DPI rendering and such. Mini can  
also cope with those things if running on smart phones.


I have experienced many issues in Opera Mini 5 which took quite a  
bit of time to get rid of, some were fixed, but these two are quite  
stubborn.


1. Pre tag - in portrait view if a line of content is longer than  
the device width, it doesn't wrap.


Pre is special in that it doesn't suppose to wrap.

2. padding issue (I think) in the input. If I add a background image  
like so and the image has a width of, say, 12px


input {
background: url(search-icon.png) no-repeat left top;
padding: 1px 2px 1px 16px
}

The input has  a value of search site, the text should be pushed  
16px to the right. Andriod and Safari obeyed the rule, but Opera  
Mini ignores the padding rule which resulting the text and  
background image overlapped.


I'd need to see an example, but Mini makes a number of trade-offs to  
fit on basic devices, such as the transcoding I mentioned earlier.  
This does some reformatting to wrap content to a page width so no  
horizontal scrolling of text and such is needed when zooming in  
(horizontal scrolling is often difficult on feature phones, and  
generally isn't a good experience in general to have to scroll left  
and right to read text). This transcoding and line length wrapping  
could be causing issues, especially if it works on desktop. The engine  
on desktop and the engine run by the Opera Mini server is basically  
the same. Some advanced graphical features are not supported (eg.  
transforms, border-radius etc.) as they require our Vega graphics  
engine to render, which isn't available in the device as it is a thin  
client. We could transcode such things technically to images, but that  
would be too costly in terms of bandwidth.


I am sure I will find more issues in this browser as I get more  
opportunities to work on Mobile version of websites.


Sure. Remember to file bugs: bugs.opera.com/wizard/ . That way we will  
fix them if it is possible, as we can't fix issues we don't know  
about. Of course there is always trade offs in making a browser for  
such limited devices, so we can't promise we will be able to fix  
everything.


I often think Opera desktop has paddings/margins/line-height bug  
related to EM and % which seems never fixed, but then it might be  
Opera way of handling them, and they are carried over to Mini.


Opera has some rounding issues with large values of em's and % yes.  
They are on the roadmap to be fixed but it takes time as browsers are  
complex and there are always lots of things to fix, and lots of new  
HTML5 or CSS3 or SVG features to support which are used by many  
popular services and need to be supported. There are trade offs to be  
made to support the rounding correctly, but we will fix it sooner  
rather than later.


A browser that has only 5+% usage (based from many stats of the  
sites I did)


Depends which market you 

Re: [WSG] :: opera mini 5.1 ::

2010-08-05 Thread David Laakso

Duncan Hill wrote:
On Thu, 05 Aug 2010 21:41:33 +0100, David Laakso 
da...@chelseacreekstudio.com wrote:




Having checked in Opera desktop, which does respond to the @media 
queries, and the N80, I have a suspicion that there may be something 
in your header that is maintaining a side scroll on the handheld.

Could that be an overflow failure in Mini or a minimum size setting.

Best wishes

Duncan






Hmm. Doubt it is Opera Mini. SanyoMiro okay this end. N80 cache issue? 
AP from sidebar [digits] and/or header metroedition display:none; not 
holding? I will check it out. Thanks for the heads-up.


Best,
~d


--
desktop
http://chelseacreekstudio.com/



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] :: opera mini 5.1 ::

2010-08-05 Thread David Laakso

tee wrote:



This site may give you a general idea how much it may cost your mobile user per 
page.
http://mobiready.com


tee




  






Granted all 7 images in the portfolio section are heavy, Nevertheless, 
the mobile device is SanyoMirro [ a low-end handset-- it is not a 
smart-phone ] for BoostMobile [ the carrier charge is a flat-fee of  
50 dollars per month for /unlimited/ phone and internet use -- there is 
no mobile user per page charge ]. Unlike my former iPhone I do not need 
to constantly re-charge the battery; I can make  audible phone calls to 
a friend who lives in the same apartment building as me; I can also make 
audible phone calls to downtown Boston [4 miles away]; I am able make 
frequent audible phone calls to California,
Tennessee, and Michigan. And it sure is a lot /easier and cheaper/ to 
read the New York Times on a daily basis on my SanyoMirro than it ever 
was on my iPhone...


Rock-on Opera Mini/BoostMobile.

End of ATT/smart-phone rant :-) .

Best,
~d

--
http://chelseacreekstudio.com/



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] :: opera mini 5.1 ::

2010-08-05 Thread tee
Checked one of a mobile sites I did that has inline image larger than 480px and 
 no width/height attributes were declared in the CSS and markup, but Opera Mini 
is able to resize the image fits in the screen.

I think I have a fine guess what has gone wrong with your inline image-it's 
simply too long, and Opera Mini resizing the whole image to fit in the screen 
propotionally using Height, though I suspect the way you have your img declared 
 (auto height and max-width) might have attributed to it but I didn't test it 
more thoroughly.

your vision - orignial image
image sie: 620 x 2254px
http://bit.ly/mwdd  

I thought maybe html5 be contributed too it too so I made a XHTML version to 
compare just in case. 

image sie: 620 x 861px
image trimmed - xhtml version
http://bit.ly/mwddd2

trimmed image - html5 version
http://bit.ly/mwddd3  

Screen shots taken from Opera Mini and Safari
http://greensho.nexcess.net/mweb/s1.png  - landscape, note that it resized the 
image to fit in 320 height thus making the image rendered smaller than the 
portrait view below.

http://greensho.nexcess.net/mweb/s3.png  - portrait.

I guess David from Opera has a good explanation for it.

A note for Safari and Andriod, the trimmed image is still too wide and part of 
it got cut off, but this can be compensated with reduced percentage in both 
width and height.
http://greensho.nexcess.net/mweb/d4.html

David, FYI re input padding bug
http://greensho.nexcess.net/mweb/s2.png  
http://greensho.nexcess.net/mweb/s3-safari.png

tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] :: opera mini 5.1 ::

2010-08-05 Thread tee
I forgot to mention, when switching between  portrait and landscape, Opera Mini 
dosen't auto re-adjust and refresh the layout, you need to refresh it manually 
if you try to see the examples from the O browser. This bug gave  a false 
impression the first time I used Opera Mini, that the media rule doesn't get 
picked up, and took me days to realize the quirk (guess I am a slow learner :-) 
). 

tee
On Aug 5, 2010, at 7:55 PM, tee wrote:

 Checked one of a mobile sites I did that has inline image larger than 480px 
 and  no width/height attributes were declared in the CSS and markup, but 
 Opera Mini is able to resize the image fits in the screen.
 
 I think I have a fine guess what has gone wrong with your inline image-it's 
 simply too long, and Opera Mini resizing the whole image to fit in the screen 
 propotionally using Height, though I suspect the way you have your img 
 declared  (auto height and max-width) might have attributed to it but I 
 didn't test it more thoroughly.
 
 your vision - orignial image
 image sie: 620 x 2254px
 http://bit.ly/mwdd  
 
 I thought maybe html5 be contributed too it too so I made a XHTML version to 
 compare just in case. 
 
 image sie: 620 x 861px
 image trimmed - xhtml version
 http://bit.ly/mwddd2
 
 trimmed image - html5 version
 http://bit.ly/mwddd3  
 
 Screen shots taken from Opera Mini and Safari
 http://greensho.nexcess.net/mweb/s1.png  - landscape, note that it resized 
 the image to fit in 320 height thus making the image rendered smaller than 
 the portrait view below.
 
 http://greensho.nexcess.net/mweb/s3.png  - portrait.
 
 I guess David from Opera has a good explanation for it.
 
 A note for Safari and Andriod, the trimmed image is still too wide and part 
 of it got cut off, but this can be compensated with reduced percentage in 
 both width and height.
 http://greensho.nexcess.net/mweb/d4.html
 
 David, FYI re input padding bug
 http://greensho.nexcess.net/mweb/s2.png  
 http://greensho.nexcess.net/mweb/s3-safari.png
 



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***



Re: [WSG] :: opera mini 5.1 ::

2010-08-05 Thread David Laakso

tee wrote:

Checked one of a mobile sites I did that has inline image larger than 480px 
...trimmed, thanks [I think  :-) ].







Oh, easy for Leonardo.
-- Dylan Thomas




--
http://chelseacreekstudio.com/



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***