maemo.org - Brainstorm: microB - Consider adding support for metatag "viewport"

<pretext>I think I managed to upset moderators in the bug-tracker about this issue here (apologies for that, was not my intention at all). I was not trying to make a support call but rather find a solution for many of my webdesigns and other websites I visited. I was not 100% well-read about this subject (and I am still not) and was very up in trying to start learning this for my joomla templates in my buisness. I understand that the bugtracker is not for these kind of feature requests. I am also sorry if I don't understand the deep technical things around this. I am just a moderate webdesigner with a goal of doing great websites for desktop and handhelds.</pretext>

viewport

Apple Safari Mobile, Opera Mobile 9.5+ and Fennec/Firefox Mobile supports a metatag for mobile/handheld browsers that is called "viewport". With this setting a webdesigner can set the optimal width for their webpage for several reasons below (there are more reasons, Ive listed those I know atm):

This viewport setting can be seen as the browsers windowsize on a desktop computer. On a handheld you can't control the windowsize by any other means than this, if its supported. microB defaults and renders website at a 800x480px "window-size".

It would look like this inside of the <head> tags in an html document: <meta name="viewport" content="width=980" /> . Where the width is 980 pixels wide in this case. There are also other types of values like 1.0 (100%) or 1.5 (150%) and settings for locking zoom etc.

(the examples below shows how this viewport works and is used in fennec/firefox and shows how its not working in microb)

Adding margins outside of the whole webcontent as seen on apple.com:

From a designers view this does alot for the whole look of the page. I have added this to some of my own websites and they now display beautiful i fennec/firefox. Alot of time you line up the logo with the outer edge of a design and its always good to have alittle space on the sides when zoomed out 100%.

microb

fennec

apple.com

apple.com has a viewport setting of 1024 pixels and the content is about 980 so there will be som space on the sides when zoomed out.

Some websites that rely on viewport tag renders incorrectly:

(there could be other resons for this issue. I can't be sure its 100% related to the viewport tag)

microb

fennec

miamiherald.com

microb

fennec

topix.com

A higher default value in microB would help against "chopped backgrounds" seen on ie facebook.com:

microb

fennec

facebook.com

Facebook has no viewport tag so it displays wrong in firefox too. Even firefox mobile should have a higher default setting than 800px, I think. Or facebook should add this meta tag to their login page ( I think they will when more and more mobile phones will surf their desktop website and not the mobile version). I don't think they are aware of this problem yet.

Setting microB to the new portrait mode makes this issue even worse. (it then chops background at 480px, a new default value for this is important for microBs potraitmode)

Here are some more screenshots of this problem I have collected: http://castus.dnsalias.com:8080/n900/ . I think most of these would render good with a value ~980 in fennec.

Flickr.com has a viewport tag of 950px which makes its footer background work in Fennec/firefox:

microb

fennec

flickr.com

There are hacks and workarounds for this background issue but alot of sites don't seeem to care or know how to solve. Question is if webdesigners will adopt and test on microb or if they will rely on the viewport tag. I managed to get it working on two of my sites however and those css backgrounds display very nice now in microB too (email or pm me on talk for help or more info).

Some points:

Apple and Opera use a default viewport value of 980px in their Safari/Opera Mobile browsers, it is supposed to be a good middle value of the web.

The viewport support in Fennec/Mobile Firefox is not perfect and was implented in BETA5. Ive noticed some problems with it but there seems to be alot of work on related stuff on their bugtracker. For me Fennec does crash alot.

A bonus would be that all iphone optimized potraitmode (320px) websites could be zoomed and ready to use in microbs potraitmode. Zooming to 320px on the 480px width of n900 by default after reading this value.

Its probably not a simple implention but a very good and useful one for webdesigners wanting to make their websites display perfect on handhelds browsers.

I believe a default value of 1024px would be ideal. I think most webdesigners still create their webcontent with this resolution in count.

Maybe there are better and more advanced ways to solve these issues. After reading and testing of this viewport tag it would fill my need as a webdesigner though.