Comments on: Help: page size for mobile web/HTML

I'm going to start posting "help wanted" messages. Here's the first one. Let me know if you can help!

Problem:

I need RebDev pages to format properly on mobile devices like my cell phone (iPhone).

Mainly, I'd like to get the page to use the full screen width, and not shrink everything down (otherwise you must constantly zoom to read it.)

For now, in order to get it to work the way I want, I use really large fonts. See: www.rebol.net/cgi-bin/rebdev-web.r

It looks pretty good on the phone w/o zoom. But, that's not really the best solution, is it? Notice that www.google.com/m looks fine (but, it's written in an XML handheld media format, a more complicated way that I don't want to use.)

If you know the solution for this, please let me know.

Solution:

7-Jan-2009:

Added a viewport meta-tag to specify a width. This change works great for the iPhone.

The large fonts have now been removed, and the default font sizes are used. This should also help with other phones and mobile devices where the large fonts were problematic.

Thanks to Martin for this solution.

17 Comments

Comments:

Brian Hawley 5-Jan-2009 18:59:44	Testing with Internet Explorer Mobile, 320x240 screen. It barely works for me, if I zoom to smallest font size and use the default layout mode. Even then the fonts are too large, so I need to scroll a lot. The fonts need to be smaller for this to work well enough on mobile browsers other than the iPhone.
Gary 5-Jan-2009 19:58:26	This is not a solution but I am wondering why style sheets are not being considered.
Gary 5-Jan-2009 20:55:01	OK, sorry, I thought you were trying to find a universal layout that looked good on desktop and mobile devices but after looking at the page I see this is meant for mobile only. But I think any table layout for mobile devices is going to be a problem. I have a Windows Mobile with a tall skinny screen. I don't mind scrolling down but hate having to scroll horizontally as well. Gmail for mobile seems to work well with no tables just headings and numbered lists.
Nick 6-Jan-2009 0:41:55	I typically keep Windows Mobile IE set to display in column view, and in that mode the page above loses all formatting. In default mode, I agree with Gary - it's frustrating to scroll side to side. In addition to headings and lists, you could simply fill empty space with   so that columns line up vertically, and use "|" characters to visually separate columns.
Martin 6-Jan-2009 8:01:07	This is iPhone specific, but there is a viewport meta tag you can use to set the viewport size of Safari on the iPhone. It defaults to a viewport width of 980 pixels. If you set it to either device-width or a numeric value that is the width of your webpage, you should not have to zoom. Viewport meta tag:
Martin 6-Jan-2009 8:02:31	Oops, the example tag was filtered out. Duh! :-) Let's try this again: lessthanmeta name="viewport" content="width=device-width"greaterthan
Sunanda 6-Jan-2009 16:43:19	Use CSS and have separate style sheets for handheld media. See: http://www.w3.org/TR/CSS2/media.html One quick way to preview if something is going to look presentable on a small device is to use Opera on your desktop/laptop machine and switch to View/Small screen -- just two keystrokes.
Carl Sassenrath 6-Jan-2009 20:12:33	Thanks for the suggestions. What I'm basically hearing is: "there is no standard." Is that right? My goal is pretty simple and having a number of mobile devices for many years, I know there are various restrictions on how its done. (Remember we had REBOL on WinCE long ago.) However, the table method seemed like a good bet because properly built tables can expand/contract in width as needed. I don't need more than that. Martin, thanks for that iPhone tag. I'll use that to begin with. Sunanda, yes, I reviewed W3 before posting my note, but those folks can be extremely verbose. Looked at various other sites too, in hope of finding something a bit "more standard". Nothing obvious.
Nick 6-Jan-2009 23:39:07	Carl, I still use that WinCE verion of REBOL on my Windows Mobile phone every day. Couldn't live without it...
Sunanda 7-Jan-2009 1:39:58	The closest thing to a "standard" is to use fluid CSS with media-specific CSS files. The fluid CSS means the pages look okay in a wide range of environments (although, generally that just means the window sizes and screen resolutions of desktop/laptop machines) and okay-ish anywhere else. The media-specific CSS files take care of the usually relatively minor tweaks needed to look great on other media. Some more up-to-date (ie published this week) information on alistapart: http://www.alistapart.com/articles/returnofthemobilestylesheet
Carl Sassenrath 7-Jan-2009 15:15:19	Nick: that's great to know! Guess we should get R3 running on it? Sunanda: yes, I see that media-specific CSS in use for mobile/cell. With my busy/focus on R3, I won't be able to spend much time on that. But... I'll publish the feed code shortly, with the hope that the community can build whatever CSS works for their phones. The main body is about a page of .r code.
Carl Sassenrath 7-Jan-2009 15:30:21	Martin: that viewport width meta tag worked great. As a result, I've removed the large fonts, which should help with other devices. Thanks!
Brian Hawley 7-Jan-2009 20:33:42	With your recent changes and the settings I mentioned in the first comment here, I now find RebDev Mobile to be usable on a 320x240 smartphone screen. Congrats!
Nick 9-Jan-2009 15:02:08	Looks great in both one column and default view modes!
popper 28-Jan-2009 12:08:37	surely the closest thing to a standard for mobile devices is SVG ? SVG Tiny and SVG Basic being the key parts for mobiles and handheld respecively ? http://developer.sonyericsson.com/site/global/newsandevents/latestnews/newsnov04/p_svg_goes_mobile.jsp " HTML and SVG are used side-by-side in web applications, with HTML as the language for text-oriented applications and SVG as the language for graphics-oriented applications. SVG is the open-standard, XML-based graphics that leverages other standards such as CSS (Cascading Style Sheets), Synchronized Multimedia Integration Language (SMIL) and the Document Object Model to provide a powerful common platform able to span everything from desktop web applications to embedded devices as well as mobile phones from Sony Ericsson. As a text format, open-standard SVG is easily scripted and can be authored and dynamically generated using a number of popular design and development tools. The SVG specification itself is regulated by the World Wide Web Consortium (W3C) and includes members from leading companies such as Adobe, Apple, Canon, Ericsson, HP, Nokia, Sun and Ikivo (formally known as ZOOMON). The mobile subset of the SVG specification, called SVGT or SVG Tiny, has been adopted by the 3GPP, OMA (Open Mobile Alliance) and other leading mobile-standardization bodies.
popper 28-Jan-2009 12:16:24	but failing that, dont all LCD displays have a generic internal pixel width/hight that can be used and everything scaled to this default if its not already that size, i know all the large LCDs do and you scale your mobile page to a set pixel width.
popper 6-Feb-2009 19:47:31	in a related subject ,has any thought been given to an R3 cross platform video API to collect around ? such as the http://www.khronos.org/files/openmax_il_spec_1_1_2.pdf that one comes to mind due mainly to the fact genesi have finally started to move on some ARM Cortex-A8 processor and arm have the w.arm.com/products/multimedia/openmax/index.html with its video and audio decoding abilitys , has anyone at least thoought abaout a rebol wrapper to this openmax layer so you could open a simple rebol gui and render any openmac avc/acc video inside that gui window ?

Post a Comment:

You can post a comment here. Keep it on-topic.