Making a site Mobile

Does anyone know of an easy way to turn a site make with freeway into a site suitable for mobile phones?

Will just changing it to xhtml, getting rid of graphic items and rearranging things a bit work?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you write it in XHTML strict, keep the order logical, use header tags to structure the content and don’t use any fancy tricks (javascript and the like), the chances are already good that it will work OK on a mobile phone. Most mobile phones can display graphics as well: just make sure that you only use small images (most smartphones have screens that are 240 pixels wide, but there are smaller phones that can display web content on screens that are only 160 or 128 pixels wide). A mobile phone browser will probably re-size larger images to display them, but this leads to unnecessary waste of bandwidth.

Get hold of a copy of the free Opera browser from http://www.opera.com/. There is a view setting called “Small Screen” which will give you an idea of how a site could look on a mobile browser.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for the information Michael. Could you also tell me if I can use tables to easily format my information? What about using styles? Also, should I use a smaller font size and smaller page width?

Alex


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Dear Alex, I’m not expert web designer but I’m learning very much from this forum. They talked about web sites for smart phones other time. You can see the post: www.freewaytalk.net/thread/view/12316#m_13064 and maybe others too. You can look for: smatphones, PDA etc. in this forum. I’m enteresting on this subject too.

Only a little thing, not interesting: in that post I annouced a link to my little examples but the address is changed in www.fmstorage.eu/freeway/indexa.html

fernando


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I would stay away from tables: they could easily break up in a small phone browser. It’s better to make a flexible page using CSS. If you don’t know how to do that, check up the reference manual and look at the great examples from The Big Erns.

Don’t try to use a tiny font size. The best bet is to use relative font sizes: in the options given by Freeway, choose percentages or the named sizes such as “Medium”, “Large”, etc. That way the browser will use it’s own default for “medium”, and make characters bigger or smaller in proportion.

Keep the styling simple: you don’t know what fonts will be available on the mobile browser. For the font, it’s probably best to simply choose between serif and non-serif. Otherwise you can certainly use bold and italic (best done with the “strong” and “em” styles that will already exist in the list of styles), and different colours, although you must be prepared for the fact that the colours will not look the same on all phones. If you do the styling with standard tags (“em”, “strong”, “h1”, etc.), any browser should be able to make sense of it.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

To view how sites perform in limited cases (as with cellphones) I use
Firefox and Web Developer Plugins. There is also a Google link that
does pretty much the same thing:
http://www.google.com/gwt/n

Enter your url and see if your site still makes sense when it’s
stripped of its fancy trimmings. Narrow your window width to see how
well it keeps performing under those contsraints. Mobile viewers care
less about decoration than they do about access to content. Make a
site work well under these circumstances, and you will be a mobile
success.

Thanks for the compliment Michael :slight_smile:

On Sun, Jun 8, 2008 at 10:34 AM, Michael wrote:

I would stay away from tables: they could easily break up in a small phone browser. It’s better to make a flexible page using CSS. If you don’t know how to do that, check up the reference manual and look at the great examples from The Big Erns.


Ernie Simpson – Freeway 5 Pro User – thebigerns.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

For iPhone specific checking try iPhoney <http://marketcircle.com/iphoney/>. It’s a free app that you might find useful.

Todd

On Jun 10, 2008, at 1:05 PM, Ernie Simpson wrote:

To view how sites perform in limited cases (as with cellphones) I use

Firefox and Web Developer Plugins.

Michael,

What do you mean by “It’s better to make a flexible page using CSS”?

Are you suggesting using a CSS text box to contain all the information on a page, including a menu, rather than using a table or an html box?

By the way, thanks for the help. It’s a real headache doing this in Japan, where each phone company has slightly different standards.

As for page width, is there a safe measurement? 200px, 300px?

And thanks Big Erns for the tip.

Alex


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

When you put content on a Freeway page, you always put it in an “HTML item”. If the blue CSS layout button is on, the item you draw will be called a “layer” in Freeway, and will be positioned using CSS techniques. If the button is not blue, any item you draw will be positioned using tables.

You should not imagine that table-based positioning is “simple” and CSS positioning is “complicated”. In fact the code produced by CSS positioning will normally be much simpler that that produced by table-base positioning. You can start learning about this by reading “Creating CSS layouts” in the Freeway reference manual.

Take a look at the page that Ernie made at http://www.thebigerns.com/freeway/stretchilina/

This page uses a flexible layout made with CSS positioning. First look at how it reacts when you change the size of a normal browser window. Now look at it with the Opera browser set to View > Small Screen, or using the Google service at http://www.google.com/gwt/n

See how the page is transformed: instead of the three columns being placed side by side, they are displayed in one long column. So a “normal” page with no actual defined page width (the page width changes to fit the width of the browser window) can look fine on a tiny screen as well. Not all mobile phone browsers use this technique: some, like the iPhone, prefer to try to keep to the original layout but give the possibility of zooming in and out.

There’s not much point in setting a fixed pixel width for your page: the tiniest screens are only 100 or 128 pixels wide, but it you make your page this narrow it’ll look stupid on screens that have a width of 320px or more. It’s best to make a simple, flexible layout that will work on a great variety of screens, even if it may look very different on different sized screens.

Here’s an article with some useful information: http://dev.opera.com/articles/view/making-small-devices-look-great/

On 11 Jun 2008, 2:27 am, tokyo wrote:

Michael,

What do you mean by “It’s better to make a flexible page using CSS”?

Are you suggesting using a CSS text box to contain all the information on a page, including a menu, rather than using a table or an html box?

By the way, thanks for the help. It’s a real headache doing this in Japan, where each phone company has slightly different standards.

As for page width, is there a safe measurement? 200px, 300px?

And thanks Big Erns for the tip.

Alex


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Michael,

Thanks for your detailed explanation. I have made a site using a mix of html, tables and CSS for my university so I have a some idea of what you are saying. (http://users.dcu.ac.jp/~gakusei/)

But when I look at it with the Google link Big Erns gave, it’s a mess so I need to follow your advice and make the width flexible and get rid of unnecessary elements such as tables and menus and of course graphics.

Again, thanks so much :}

Alex


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

One thing that can really clean up your layered page with respect to
low-brow browsers is paying careful attention to the order that
elements are published in the final code.

Freeway will make it simple for you to have something on the top of
your page followed by something on the bottom of your page, followed
by something from the middle-left of your page – without even trying.

If you expand your Site pane to show the Page contents, you will see
a hierarchical list of every element on the page. When you click on
an element, it will highlight in that list. Experiment with the order
of these elements in the Page pane. You can click and drag them up
and down the list to change their order, and (with a few exceptions)
you will not see much of anything change on the document layout itself.

So if it’s important that your headline be nearly the first thing
that a screen reader or Google bot reads in your page, you can
usually get the source code to read that way.

Walter

On Jun 11, 2008, at 7:17 AM, tokyo wrote:

Michael,

Thanks for your detailed explanation. I have made a site using a
mix of html, tables and CSS for my university so I have a some idea
of what you are saying. (田園調布学園大学・Student Life(キャンパスライフ・学生生活・学生会・イベント・学園祭・DCU祭・部活・サークル・クラブ活動)(神奈川・川崎))

But when I look at it with the Google link Big Erns gave, it’s a
mess so I need to follow your advice and make the width flexible
and get rid of unnecessary elements such as tables and menus and of
course graphics.

Again, thanks so much :}

Alex


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Amen. Beautifully said, Walter.

Another example of anticipating how Freeway will write the output of a
certain page, and using that knowledge to sort out a measure of
control over that process from within the application itself.

I like to add that once you get the hang of it, it’s quite easy. I
think of a page in an outline form, h1, h2, h3… If you’re not paying
attention to the hierarchy of your content presentation (Page content
order) you can end up presenting your content in h2, h1, h3 order.
This can cause some confusion not only when the page is displayed by a
cellphone-like browser, but also when it comes to making sense of your
site for search engine ranking.

Walter Lee Davis wrote:

One thing that can really clean up your layered page with respect to
low-brow browsers is paying careful attention to the order that
elements are published in the final code.

If you expand your Site pane to show the Page contents, you will see
a hierarchical list of every element on the page.


Ernie Simpson – Freeway 5 Pro User – thebigerns.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options