I was trying different online services to build mobile pages and came to the conclusion they are all fairly bad. I've tried http://www.swiftmob.com/ and http://mobisitegalore.com/index.html

I'm real comfortable with Dreamweaver, css and etc. and was wondering if SiteSpinner will help with building mobile sites. The bigest problem I've had is adding redirects to go to the correct site...depending on the device being used...

Thanks for any feedback

SiteSpinner Pro has built-in mobile support.

OK. I've downloaded the SiteSpinner Pro demo applications. My main use is for mobile sites. I've built one page within my mobile boundries, added an image banner and some text, and finally a background color for the page. I published the site to a folder which now contains and index.html file, a folder for css, a folder for geometry, and a folder for images.

I uploaded the the whole thing to my host server and linked to it but only can see a blank page with the designated page color.

Any enlightenment will be much appreciated.

Thanks in advance

Well, I see the page when viewed through the Opera Mini online emulator, though the formatting is very different from the SiteSpinner Preview. My top graphic banner has a huge space below it before the text appears.

When viewed via another emulator (http://mtld.mobi/emulator.php) things really lookd goofy.

Have a look at site

I'm trying to eval to see if this will work and was hoping for any feedback...thanks very much in advance.

This message has been edited. Last edited by: torweb,

Hi torweb,

I am just taking a look at this. I'll get back to you soon.

Do you happened to have the project file for this test on your web site or somewhere that I could download it?

You can go to this site: http://www.consultyou.net/mb/ft2.php
and login with the following and get the files:

user:admin
password: user2080

Thanks

PS. I really want to use this application but can't get it to display properly on different emulators like iphone. I hate using the online solutions.

Thanks again

Ok thanks I got it.

A couple of things I see:

1. The reason you see a blank on regular browsers is because there is no desktop layout designed. Click on the Desktop tab and you'll see that it's empty.

You can 'select all' on the mobile tab, right click on the selection and choose 'sync on all layouts'. That will copy your mobile layout to desktop.

Another way to do it is to design in single layout mode, then when that is done switch to dual layout and adjust for the two layouts from there. It depends what you want desktop browsers to display.

2. It looks like the mtld.mobi emulator is not tolerating the separate css files. If you go to the project options and turn off 'Separate CSS Files' that will help there.

3. I am not sure what is going on with the Opera mini page. I will look into to that a bit more. They are always tweeking their software (as are we) and sometimes the two don't mix (but only ever briefly).

The iphone should be working well but there is one bug we have found in its browser (but not in desktop safari) that causing some text to be too large in specific cases. We are still trying to sort that out. That shouldn't show up n your example.

Thanks for the reply Harpo. I'll dig in and integrate your suggestions...I'm determined to get this to work...

Thanks again

One more small item, when I click on the "Project Options - General" it doesn't give me an choice of Publish Option other than "Combined." Documentation looks like there should be a "Mobile" option.

Thanks again

torweb,

I see choices of "Combined", "Desktop Only", and "Mobile Only". What version are you using?

It's the Trial Version 2.90 c

I've been trying to test it with the emulator located at: iPhone Emulator and my page link of http://www.consultyou.net/mobile/

Thanks

Here is a summary: My site is at http://www.consultyou.net/mobile/

The emulators I'm using are at:
http://mtld.mobi/emulator.php
http://iphonetester.com/
http://www.operamini.com/demo/

Rendering of my test site are quite different...expected I guess.

I'm using the trial version of SiteSpinner Pro and am guessing that may be the problem.

Problems I'm trying to work out are:

1. No site seen with iPhone
2. Space added between image banner and text box with the OperaMini emulator

The http://mtld.mobi/emulator.php is doing the most accurate job of rendering my site however I would like it to look best in iPhone and Blackberry devices as most of my client have them...

Thanks in advance for all the great feedback !!

[QUOTE]Originally posted by torweb:
Here is a summary: My site is at http://www.consultyou.net/mobile/

The emulators I'm using are at:
http://mtld.mobi/emulator.php
http://iphonetester.com/
http://www.operamini.com/demo/

Rendering of my test site are quite different...expected I guess.

I'm using the trial version of SiteSpinner Pro and am guessing that may be the problem.

So far, if I build for mobile dimensions and synchronize to desktop, the site shows up fine in iPhone and the "mtld.mobi/emulator" link below. It's the most accurate in those devices. The MiniOpera seems to be putting a large space between the top banner image and the text box below.

I'm almost there thanks to some great feedback. The MiniOpera is my last issue.

Thanks in advance for all the great feedback

You should see choices of ‘Combined’, ‘Desktop Only’, and ‘Mobile Only’ in the General tab under ‘Publish Format’. I am not aware of anything that could change that. The trail versions work exactly like he regular versions except for the time limit. So that should not matter. By the way, the 15 trail days are 15 individual 24 hour periods. So if you don’t use it for a week, you days are still there.

I am still looking at the Opera mini issue. If I do other tests they seems to work but there is some weirdness going on with mini. I will look more tomorrow. One thing to keep in mind is that the ‘mobile view’ check box should be set, in the settings.


A note on the iphone: The iphone considers itself a 'screen' device so normally uses the desktop layout but will use the mobile layout if the SiteSpinner mobile target width is set to 320 pixels. It does this because it sees that its’ device width is in the defined mobile range (see below for an explanation).

Unfortunately, many iphone emulators use the PC's screen size as the device width so they don’t kick in to mobile mode. You can often fudge this for tests by changing the 'max-device-width' (the physical screen size), in the project option's CSS media type definition, to 'max-width' (the window size) and then reducing the window that contains the emulator to 320 px in width.

This may be more information than you want but here is a brief description of the CSS media type definition used in the advanced options:

Desktop: screen, print
This means the desktop layout will be used by any device that considers itself a screen or a print device (unless overruled by the mobile settings) So this means most desktop browsers and printers

Mobile: handheld, only screen and (max-device-width: [%MOBILE_TARGET_WIDTH+1%]px)
This means the mobile layout will be used by any device that considers itself a handheld device
OR any screen device with a screen size up to a maximum of the mobile target width.
Note: [%MOBILE_TARGET_WIDTH+1%] is converted to your mobile target width number + 1.

Thanks Harpo,

I'll "digest" your comments and start to work in the AM (tomorrow).

Thanks again,

As near as I can tell (so far), the extra space between the image and the text is a mini quirk. If I make a similar page but keep the text and title within the screen width (say less than 178 px) there is no extra space.

Note that Opera mini defaults to 'desktop' mode with a zoom option. So if you include a desktop layout, viewers will have a choice between desktop and layout.

Ok, I am getting closer to a solution for the gap between image and text in opera mini.

The gap is apparently caused when mini shortens an image to fit on the screen. It is making the image shorter (left to right) but also narrower (top to bottom) to keep the aspect ratio. The problem is it is allotting screen space for the image as if it had only been shortened.

You can see that if you make the image quite narrow, say 100px wide so mini has no reason to resize it, and leave the text width as it is, there is no gap.

So now, we just need to find out how to prevent that from happening. But it is odd that mini feels the need to resize an image at all since it has scroll bars and a zoom feature. Anyway, hopefully, we can find a way to fix it by changing the HTML or CSS that SSP produces rather than with a mini setting.

If anyone comes across the solution before I do, please let me know.

I thought this site may be of interest re: suggestions from Opera for mobile authoring:
http://dev.opera.com/articles/view/making-small-devices-look-great/

Also, I noticed that when I look at my page in code mode, the images don't have their size included as part of the image src. This was cautioned by the above link article.

Yes Opera has some good stuff there. Regarding the image size (that is putting the width and height in the HTML not just in the CSS), we are looking at including that in a mobile only output. Of course it can’t really be done in combined mode because the two layouts may size the images differently. Btw we have tested with images sizes to see if that solves the gap problem in opera mini but it doesn’t seem to.

If you do happen find out anything over at the opera forums that helps with the gap problem, be sure to let us know.

Hello,

Here is my latest test for a "Mobile Only" site at a screen size of 240x320. I unchecked the "No Separate CSS Files" which I assume puts the CSS data within the page (which I've attached below).

Quite a few differences. I can see this isn't going to be a fun adventure before being able to build a mobile site.


iPhone Emulator
http://iphonetester.com/?url=http%3A%2F%2Fconsultyou.net%2Fmobi_c

Opera Mini Emulator
[URL=http://www.operamini.com/demo/ ]http://www.operamini.com/demo/ [/URL] then enter consultyou.net/mobi_c

Nokia N70 Emulator
http://mtld.mobi/emulator.php?emulator=nokiaN70&webaddr...mobi_c&Submit=Update


Page code for the index.html page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<title>index</title>
<meta name="GENERATOR" content="Virtual Mechanics SiteSpinner Pro V2 290c - Trial Only">
<meta http-equiv="imagetoolbar" content="false">

<style type="text/css">
<!--
.dfltt {
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;
color: #800000;
}
.lalign {
position: relative;
text-align: left;
}
.ralign {
position: relative;
text-align: right;
}
.calign {
position: relative;
text-align: center;
}
.jalign {
position: relative;
text-align: justify;
}

a:link {color: #0000ff;}
a:visited {color: #800080;}
a:active {color: #ff0000;}

body {
margin: 0;
height: 100%;
width: 100%;
text-align: center;
background-color: #ecf9fd;
}
img { border-width: 0;}


#centered {
position: relative;
width: 240px;
height: 100%;
margin: 0px auto 0 auto;
text-align: left;
padding-left: 1px;
cursor: default;
}
#Oobj1 {
position: absolute;
font-size: 10px;
z-index: 1;
left: 0.00em;
top: 0.00em;
width: 23.70em;
height: 5.00em;
}
img#Ggeo1 {
width: 100%;
height: 100%;
}
#Oobj2 {
position: absolute;
font-size: 10px;
z-index: 2;
text-align: left;
left: 0.50em;
top: 6.00em;
width: 22.10em;
height: 2.10em;
}
.txt0 {
font-size: 11px;
color: #000000;
}
#Oobj50 {
position: absolute;
font-size: 10px;
z-index: 4;
text-align: left;
left: 0.90em;
top: 8.00em;
width: 22.10em;
height: 14.00em;
}
.txt1 {color: #000000;}

-->
</style>
</head>

<body>

<div id="centered">
<div id="Oobj1">
<img id="Ggeo1" src="file://C:/Documents and Settings/Administrator/Desktop/mobi1/BANNER1.png" alt="">
</div>

<div id="Oobj2">
<div id="Grtf3" class="dfltt">
<span class ="txt0"><a href="index.html">HOME</a>  |  <a href="about.html">ABOUT</a>  |  <a href="services.html">SERVICES</a>  |  <a href="contact.html">CONTACT</a><br>
</span></div>
</div>

<div id="Oobj50">
<div id="Grtf49" class="dfltt">
<span class ="txt1">Welcome to Consultyou.net, web design and consulting services. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam.<br>
</span></div>
</div>


</div>
</body>
</html>