Does anybody have some good documentation for building a mobile website in Freeway? I’ve looked around the site and downloaded the documentation they have here, but there’s no step-by-step instruction manual.
For example, can I simply create a mobile site by doing a URL that looks like this: www.m.MySite.com?
Also, what are the basic steps? I’m pretty well-versed in Freeway, so I know my way around. But I need some simple thoughts on “first you do this, then you do that…”
You would need to “sniff” for the mobile browsers, and redirect the
visitors appropriately. There was a good article about this on A List
Apart a few months ago, I think. Basically the nut was, “Sniff and
redirect automatically, but allow the user to set a preference if they
don’t want to use the mobile version.” Amazon’s iPhone version of
their store is a good example of this in practice.
As far as designing the page goes, you make your page a particular
width (Freeway will set the iPhone meta tags for you automatically)
and then you just need to style everything a lot larger and taller
than you might otherwise do. If you look at http://isepta.org in
Safari, you’ll see an example of a really well-done pure Web app. Of
course if you view it on an iPhone, it looks perfectly normal and is
phenomenally usable.
Walter
On Jun 12, 2010, at 7:25 AM, Jamie Turner wrote:
Hi, Folks –
Does anybody have some good documentation for building a mobile
website in Freeway? I’ve looked around the site and downloaded the
documentation they have here, but there’s no step-by-step
instruction manual.
For example, can I simply create a mobile site by doing a URL that
looks like this: www.m.MySite.com?
Also, what are the basic steps? I’m pretty well-versed in Freeway,
so I know my way around. But I need some simple thoughts on “first
you do this, then you do that…”
It depends a lot on your site and its content. If you’re building an app-like site, similar to the iSepta site, then you can follow the design cues set by native iPhone apps. And in that case you would want a completely separate experience, and thus a separate site. If you’re making a news site, you might want to have a more simplified site (1 column) served for iPhone, and a wider multi-column version for regular browsers. That said, you don’t see the NYTimes doing that, yet their site is fairly usable in MobileSafari. But CNN has a different site for iPhone than regular browsers, and the differences are fairly instructive.
As far as the sniffing goes, you have two or three basic choices. One would be to use either JavaScript in the browser or PHP/Perl/Ruby/whatever on the server to read the browser’s user-agent string and decide if it’s a mobile browser. If so, then you can redirect. If your design will work with just a simple substitution of CSS styles, then you can use some clever tricks to make one stylesheet appear when the browser appears to be a small screen:
So you could use that to make your single-column style appear and disappear. It might even make the columns change when you rotated the device.
Then there’s the good old link – “Click here for our iPhone site” – and the reverse on the iPhone site for those who don’t want the simplified version and are willing to do some pinching and unpinching to read it.
Hi, Walt. Thanks so much for your follow-up on this.
As it stands, I’m going to do a .mobi site and create it so that it looks/functions well on the iPhone platform.
Question: If I create a separate .mobi site, does the user’s iPhone automatically default to the .mobi site? In other words, if they type in “60SecondMarketer.com” from their mobile phone, does it automatically go to the .mobi site?
You mentioned something about “Java Script on the browser” or “PHP/whatever on the server” in your response above, but I’m still not clear on what to do.
If it’s not too much trouble, could you let me know in 3 or 4 simple steps how I do this?
For example:
Create your .mobi site using Freeway Pro
Install XYZ action on the home page of the .mobi site
Upload to your hosting account
Thank Walt for walking you through this in a step-by-step fashion.
Unless you just wanted the same redirect on all pages to the mobi index page.
The way I would do it would be to do a Save As of my normal site (if I wanted a completely seperate site) to make a mobi version changing the upload details to that of the mobi site and then go through that site making sure that I changed any undisplayable pages with Flash etc to a suitable format and resize the pages and layout for mobile browsers.
The disadvantage to this is that you then have 2 sites to update!
You could just simplify the original site so that it works with all browsers.
Question about the iPhone/iPad re-direct action. It looks as though if I put that action on my home page, I can re-direct to an iPhone page on my regular site.
If so, then I don’t really need a .mobi site (per your email). I just need iPhone pages on my regular .com site and the iPhone re-direct action on any pages people might visit via mobile.
and the iPhone re-direct action on any pages people might visit via mobile
You really only need the redirect if there is content that can NOT be viewed on an iPhone/iPad - like Flash
Walters point was really if you were to have a mobile version of your site then you might/would want to change the layout to be more mobile friendly ie a single column.
And yes - if you had iPhone specific content you might want to redirect from the home page to that. But equally you could have a normal link.
Yes that is fine - but if they come to any other page on your site ie via a Google search then they will NOT be redirected to the iPhone site unless you have the redirect action on every page.
My point was that do you want to redo your entire site (and subsequently maintain a complete second site) in a single column layout. Would it not be a lot less work to do specific pages that contained content that is not iPhone friendly.
Or are you going to advertise your mobi site to attract specifically mobile visitors?
I think what I’ll do is take the top 20 pages on the site (which get 99% of the Google visits) and do a re-direct to specific iPhone-friendly versions of those pages.
Thanks for all your help on this. You, Walt and a few of the other guys on the Forum make this one of the most helpful Forums on the internet.
Re: Mobile Site
I’ve followed DeltaDave’s suggestions above and created an iPhone friendly version of my website using the iPhone Re-Direct action. It’s working out perfectly. Thanks.
Question – Is there a similar action for other mobile platforms like Blackberry or Droid? This one worked so well, it’d be awesome if there was a similar action for the other mobile platforms.
I believe that Android and the very latest Blackberry both use the
WebKit browser to one extent or another, so they should be adaptable
to your iDevice site as well. To answer your question, no, I don’t
know of any Actions to make this work.
If you can locate some references to the sorts of tags you need to add
to your page, or the browser signature that identifies these browsers,
it shouldn’t be too difficult to cobble together an Action that could
write tags targeting those browsers.
The prevailing wisdom that I have seen is to use browser capability
testing rather than overt browser signature sniffing (the User Agent
test) to determine what the browser is up for.
Freeway currently just writes some Apple-specific Meta tags into the
page, and that gets the job done there. But there are some CSS rules
that specifically target these browsers, and that might be a good way
to do a more browser-agnostic targeting job.
Walter
On Dec 1, 2010, at 11:45 AM, Jamie Turner wrote:
Hi, Friends –
Re: Mobile Site
I’ve followed DeltaDave’s suggestions above and created an iPhone
friendly version of my website using the iPhone Re-Direct action.
It’s working out perfectly. Thanks.
Question – Is there a similar action for other mobile platforms
like Blackberry or Droid? This one worked so well, it’d be awesome
if there was a similar action for the other mobile platforms.
