Opera Mini 4 Released & The Death Of The Handheld Style Sheet

Comments

1. 1November 17th, 2007 at 5:14 pm

   Montoya Says:

   I said this would happen, and nobody believed me! Pretty soon every single mobile browser is going to have a media query of its own and the barrier to entry for handheld stylesheet design is going to be insanely high.

   
   

2. Pingback by User First Web » links for 2007-11-20
   November 20th, 2007 at 7:20 am

3. 2November 20th, 2007 at 9:40 pm

   Phil Says:

   Hi Christian,

   I’d be interested to see how this pans out and I think I will be putting together some more thoughts on this for a longer post soon. However, there must be some positives to media queries, it is part of CSS3, so someone must consider it useful!

   For a start, it occurs to me that you wouldn’t necessarily need to target each individual mobile browser, just come up with a media query that covers all of them and apply mobile styles to that. If tweaking were necessary for one, then a more specific media query could target it.

   Those are just initial thoughts though, I will try get my head around this later this week or next.

   
   

4. Pingback by Povich - Jim Whiteside spouting squit » Bye-bye handheld stylesheets?
   December 10th, 2007 at 4:53 pm

5. Pingback by My Week on the Web | bitful
   January 21st, 2008 at 5:48 am

6. 3January 21st, 2008 at 7:41 am

   philry4n Says:

   actually if you choose ‘mobile view’ it will display the handheld version

   
   

7. 4January 21st, 2008 at 8:33 am

   Phil Says:

   philry4n: That is true, but how many users do you think will get to that setting? I have been using Opera Mini 4 since writing this post and I haven’t even found where to change that setting and if I did, I still wouldn’t change it.

   I remain convinced that the handheld style sheet has been given the kiss of death by the two top mobile browsers.

   
   

8. 5February 20th, 2008 at 12:14 am

   SneakyWho_am_i Says:

   philry4n’s right, as you acknowledge - viewing the handheld stylsheet is as simple as switching to mobile view (it’s like fit to width or something)

   It’s not the easiest thing to find - you’re asked at setup whether you want to view handheld or screen media (at least, I think I was).
   From that point, for the sake of interest, you left-click by pressing numeric keypad key #1 and then select the first item on the list. OR enter the setup (I forget how but it’s not hard) and you should see it in there.

   I DO think you should look at the “mobile view” because Opera IS one of the myriad mobile browsers that supports handheld stylesheets, and some users WILL be using them. In my opinion, although the default “screen” media in Opera Mini complicates things in a big way, it’s still useful to view it both ways. It aids me as a designer to some extent.

   Unfortunately as you point out, the only way to target it when it’s ion Screen/Desktop mode is with a CSS media query. That’s entirely fair though, Opera Mini 4 has a higher level of standards compliance than any publicly available version of Internet Explorer to date - and it’s a mere mobile browser! 128K download or so in Java, LOL versus the world’s most popular browser which needs its own install CD ROM.
   Not that my point is to attack Virus Explorer, I just mean that if Opera displays my pages more accurately for screen than a genuine and highly popular screen-media-browser, then by all means it should be allowed to do so.

   It is, for all intents and purposes, a screen browser, at least as far as my content goes.

   What I recommend you do (as it works well for me) is to target the resolution instead. My mobile has a <418px resolution, so in my “screen” stylesheet I do a media query to reformat certain parts. THE END RESULT is that my pages look exactly the same in “screen” and “handheld” media on Opera Mini. I change view modes and see no difference. I think that is the sort of goal you should be working towards regarding Opera Mini, and to do it you DO need to know how to change to the handheld rendering.

   I STILL HAVE THE HANDHELD STYLESHEET LINKED FROM THE PAGE, partly for Opera users, and partly for any other naughty mobiles that don’t send proper wap headers.

   Opera first caused me a headache because my site is designed to offer alternate content for devices which send HTTP ACCEPT headers which specify wap as an acceptable medium - Opera Mini slips through the cracks because nowhere in the header does it claim to be Wap capable.
   Yes, WAP is my preferred mode of service, I guess.

   That’s pretty much everything I have to say, I suppose. Of course it’s all just opinion, yours may differ and if they do, no doubt will be more effective for you, but this is what works for me and I hope it was at least partly interesting for you to hear what someone else was doing with it.
   Regards,
   Chris (Sneaky)

   
   

9. 6February 20th, 2008 at 8:01 pm

   Phil Says:

   Chris,

   Thanks for the huge comment! I agree with most of your points there, though I think the idea that switching to mobile view is easy is a little out. The fact that you would have to do something to switch views implies that most users wouldn’t do that.

   I hadn’t thought about leaving the handheld style sheet in place as well, you do just write the same code for a handheld sheet as you would for the media query so it can’t hurt. Or can it?

   I think the problem in this topic is that, as you mention, a myriad of browsers for mobiles support handheld style sheets, however the strength of that support does not necessarily match Opera’s, and testing each and every one would take an age. In the modern mobile web, we need some standards to adhere to and Opera Mini and Safari for iPhone allow us top support of standards and CSS3 media query targeting. For other mobile browsers, perhaps, if your HTML is well written enough to afford a good understanding of the page without the layout and other features, no style sheet is the best fallback.

   
   

10. 7February 20th, 2008 at 11:41 pm

    SneakyWho_am_i Says:

    I think it could hurt to use the same code in th media query as the stylesheet. I don’t know how it could, but I do, to use the same code in the media query as what I do on the actual stylesheet. It IS only there for Opera, and the Opera dev portal thingy pretty much says to not do that. I don’t think it would be safe to let dust gather on it…

    The handheld stylesheet is a full stylesheet, My “screen” stylesheet contains the css3 query for small screens, and that only contains about five lines to UNdo some of the things I’d done earlier in the stylesheet (yay, cascading) -the media query contains only the differences between the screen and handheld stylesheets - for now.

    For now though Opera mini is just another desktop browser to me, all I’m concerned about really is the size of the screen. And that’s really it for me, Opera Mini is a desktop browser on a handheld computer. It probably depends on the context - I am developing pages for it right now which have no animations, no background images, no object or img tags, very few if any layout tables… this is the sort of thing it’s very easy to style, I think. The shape of the pages comes from CSS wherever possible, onto generic elements like div, span and strong.

    I’d say it’s probably be best to make a simple, short and sweet handheld stylesheert, because most mobile browsers don’t have a lot of memory to play with, and are not always terribly fast - and the operator may change by the KiloByte (mine does).

    Basically, if the HTTPACCEPT header contains this:
    application/vnd.wap.xhtml+xml
    then it’s probably a mobile browser. We SHOULD check that this comes before text/html, application/xhtml+xml, or whatever else we have set for our documents. That’s wap2.
    Plain old wap things contain this:
    text/vnd.wap.wml
    Or there’s this other thing called imode which applies to DoCoMo/ and portalmmm/ (from their user agent strings)
    You could probably do it in Apache though…. modrewrite etc….

    I’m not able to write the actual code in here, but I saw it first in SMF (Simple Machines Forum). Opera Mini slips through that kind of content negotiation because it never indicates that it would accept wireless content. At fist this offended me, I was contemplating hardcoding it in “Opera Mini must get wap2″
    After downloading it, using it, feeling my stomach church etc, I’m fine with it, I will accept it as a desktop browser and make some allowances for it in my stylesheet.

    
    

11. 8February 20th, 2008 at 11:44 pm

    SneakyWho_am_i Says:

    Oh yeah I forgot to say, I concede, having to do something to use a feature DOES make it not simple. You’re absolutely right.

    I had been switching view modes through the settings thing - and you only know how to use that probably if you read the great lecture on th installation screen :) .. Only later did I (re?) discover the context menu.

    It’s only two clicks on my phone, so no effort IF you know it’s there.

    
    

12. 9March 19th, 2008 at 11:07 pm

    Simon Tsui Says:

    I fear the rise of handheld devices. This means more work for web developers.

    
    

13. 10March 21st, 2008 at 2:08 pm

    Phil Says:

    Simon, don’t worry! You only really need to concentrate on mobile interfaces if the site you are developing is a mobile centric application. The rest of the time a semantically marked up page will suffice. If you visit this site with a mobile browser they will either use the screen style sheet, as Opera Mini does now, or will not receive a style sheet at all, leaving just the text with formatting from basic HTML styles.

    
    

14. 11April 7th, 2008 at 1:54 pm

    rzrarti Says:

    i’m using a kind of Opera in my phone ; SE K790i , it’s the best browser for mobiles :)

    
    

15. 12April 8th, 2008 at 10:22 pm

    Phil Says:

    Rzrarti: I think my SE K800i had a version of Opera Mini on as the default browser, but it’s nowhere near as good as the latest version. It is definitely worthwhile upgrading!

    
    

16. 13March 11th, 2009 at 3:36 am

    SneakyWho_am_i Says:

    I use the internet a lot on my cell phone now. Web Browser for S60. It uses Webkit so it basically displays everything the same as the iphone (there are exceptions) although I suspect that the interface might not be quite so good.

    Opera Mini, Opera Mobile and WBfS60 all seem to render pages pretty much the same. Because I’m using my phone so much I almost have the hang now of doing just one stylesheet that makes the page look reasonably consistent and still usable (, attractive, pleasant) on all the browsers I’m interested in. I have come to dislike media queries a little bit because the syntax is a pain and they fill your stylesheet (or markup) up with odd clutter.

    Here are some caveats I’ve found and.or read about:
    1) apparently your “click” on an iphone is a 40px square. So don’t put any really tiny controls on your pages. The form on this page is a fantastic example of how to do it right.

    2) With the exception of images, almost everything that you _don’t_ size will have fluid sizing. So stay well away from pixel sizing where you can help it (although there are obvious exceptions if you can use it wisely. You could be let away with setting the page width). A good example of where pixel sizing goes horribly wrong is tables. All the different devices have different fonts, and the sized tables generally wind up horribly distorted or distorting.

    3) Be gentle with images (iff you want mobile devices, dialup users etc to see your site) and be gentle with javascript and CSS. It will all render fine but you’d be surprised how many 1MB+ web pages out there. When you’re downloading at 8KB/s that’s not pleasant. YSlow can help with this.

    4) I always liked to use readonly fom inputs with onclick=”this.focus();this.select();”. To my horror, my phone can’t select text off webpages unless they’re in writable form inputs. I can’t put the text caret into a readonly textarea so I can’t select the text, and no, the javascript doesn’t help. The moral of the story is, make sure you have a strong case for usability before you add any javascript or other novelty to the page. You never know what ridiculous error or failure could occur.
    Of course, now I don’t make the form inputs readonly. The phone likes that.

    5) Flash of course is a big nono. he phone supports enough to display banner ads (dammit), but can’t do youtube embedded in a webpage.

    6) :hover works (not in opera mini) but a lot of the other pseudo-classes don’t. The pseudo-elements do. So don’t assume that your particular “oh, everybody has that” favourite javascript or css fitting will be installed. Make sure that everything degrades gracefully.

    7) Let your XHTML be served as HTML. I think I heard that desktop browsers parsed XHTML _slower_ than HTML. This may be so but the phone seems to just fly through XML and crawl through HTML, I recommend comparing for yourself. Unfortunately I don’t know how to get a page load time on my phone. I will probably write a big javascript test using iframes at some point and see if I can get a real result out of that.

    8) Be very careful with absolute positioning. I just don’t use it. I understand it totally and I know the nuances like how the position is always relative to the nearest positioned ancestor (not the viewport), but that’s not the point. I know enough about it to know that it’s generally too dangerous to rely on for layouts which mobile users might be looking at.

    9) Be very careful with overflow. Some authors use the overflow property to take scrollbars off of form inputs or other elements. Usually these are the same people who make assumptions about the sizes of our screens. I can’t tell you how many times this has result in my leaving the site in frustration and submitting a shower of hateful curses to the author (OK once, but it’s a long story)…

    10) Do not implement a browser within a browser. Mobile browsers are out to get you. Once very specific example of how javascript can fail is keystroke detection. My phone doesn’t have a CTRL key which breaks one or two very obscure javascript toys (some of which I wrote, D’oh!). My phone does report keystrokes…. But I’ve got three letters on each key. If I press the key three times, you get three identical key codes back, which is probably not what you were hoping for.

    11) A bonus. Make sure your page linearizes well. Try looking at it without the stylesheet. This is something we should all do anyway once in a while to make sure that we’re not writing total rubbish and just dressing it up to make it look nice. A page where everything linearizes poorly is a page that won’t look very good on a phone.

    12) Bonus 2: Most phones will add their own anonymous boxes around text so that the text doesn’t overflow the screen and require a lot of horizontal scrolling. This is a real killer for fixed-width layouts because there’s so much unused space. Often I have to srrrrrrolllllllllllllll over to the right to look at a figure, and then srrrrrrrolllllllllllll all the way left back to the text. NewScientist and NationalGeographic are good examples of sites where this is an annoyance (and NatGeo is a good example of a bloated site which takes all day to load)

    Slashdot is pretty nice on my phone (except for the massive filesize and reliance on some interesting javascript effect late in the loading/rendering)..
    The desktop Google front page is not toooo bad although it fills the screen horizontally many times over.
    CNET is generally alright although it’s another example of pages that look pretty darn good if you stop them before they load all the images - maybe they could cut back on some of the scripts and decorations they don’t really /need/.

    Longest post in the world! Sorry Phil. I hope you’re well etc.

    
    

17. 14March 11th, 2009 at 3:40 am

    SneakyWho_am_i Says:

    Graarrrgh! I proofread but I still made errors.
    and/or*
    Let your XHTML be served as XHTML* (in the browser that support it, not HTML

    of course, the XHTML thing is only for people with the discipline to always write well formed markup and who don’t have to accept content from users that might break out of the codepage - and write their own markup. So there are an awful lot of blog authors out there who can’t do XHTML safely, through no fault of their own.

    
    

18. 15December 24th, 2009 at 6:28 am

    naveen Says:

    I use Symbian S60 V3 Edition, Now a days UCWEB symbian and java versions are rocking and most of people preferring it , It has faster as Opera Mini.