[Pro] Redesign for mobile

I am not a pro at this but I need to redesign a site for mobile devices. Basically, I think I should duplicate each page in the site then rearrange to fit the device preview, store them separately and use the redirect action. In general, does that make sense?

Thanks in advance.


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

With Freeway 7 you can adjust the dimensions and positions of objects when the page is viewed in a narrow browser window – such as the 480px width of a landscape iPhone. If you are not also trying to create pages that pull in content from external sources (such as a content management system), then this can work reasonably well. According to an announcement made by Softpress a few days ago, Freeway 7.1 will also have responsive text styling in addition to object scaling & positioning.

The benefit of this is that you don’t need to maintain two different copies of each page, you just reposition things at the appropriate narrower browser window widths, after you’ve made your ‘regular’ designs. Behind the scenes, browsers will use different CSS layout instructions when your web pages are viewed in mobiles (i.e. small screens) than when viewed in desktop browsers (with windows at typical large widths).

If you DO want to create pages that pull in content from external sources then, to avoid problems when there’s more content than expected (enlarging a box with extra text, for example), you’ll need to explore the pleasures and pains involved with inline layout in Freeway. Personally, I avoid that at all costs, as I find it deeply uncreative and painfully quirky.

Try the Responsive layout options in Freeway 7. There’s a lot that can be done with a little experimentation without having to step across to the inline process. See http://panoramaphotographer.com/ for example.


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

Ahh, I forgot: I still haven’t reduced the browser load in that layout. FYI, Ihere are four HTML5 virtual reality panoramas in that, and it can be a little heavy-duty for mobile phone use. Sometimes the browser will quit. But that’s nothing to do with Freeway.


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

Thanks, thatkeith. The site is quite simple so should be easy enough. I didn’t want to duplicate all the pages and it didn’t seem like that should be necessary. I will check your page with an iPad. Appreciate the quick response.


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

Hi thatkeith,

I was hoping you could help me! I’ve designed a website to be responsive to all devices like your panorama photographer site. But unlike yours, mine isn’t resizing properly.

When I view yours, it all moves around nicely but doesn’t shrink as you narrow the browser frame then jumps to the breakpoint layouts as you’ve set them, when it reaches them. In mine, all the images/colour boxes shrink as you scale the browser down, the text overlays its boxes until it then snaps when it reaches the breakpoint. I’ve set all my images and coloured boxes as ‘pass-through’ and to fixed % on width so they scale to look best on each platform.

In your file, are there areas that expand outside the breakpoint width or is it all fitted into the new width? I’ve been using the ‘fixed %’ for width (100% to the edges) which then means you cannot adjust the height, even when the text overruns the coloured box. Also, the graphic text cannot be resized for smaller breakpoints as it then changes in the default and tablet breakpoints.

Hope this makes sense - you can see what I mean at www.planetcoco.co.uk

It’s driving me nuts - do you have any tips or ideas of where I’m going wrong?

Thanks, Jess


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

That green box is just behind the white text. Try putting the white text inside the green box, using just the green box and padding to get that text inset, instead of having lots of different items.

You could also try setting the box so it doesn’t flex dynamically as the page is resized. Instead, at the wider sizes at least, try just making it jump to different sizes. Get it working as a simpler structure first before you try the Responsive tweaks.

Judging by the announcement from Softpress four days ago you’ll soon be able to resize the text as part of the standard Freeway 7 features for building Responsive pages: “Freeway 7.1 is coming very soon and will feature responsive text styling and some responsive templates, so now’s the time to upgrade!”

If you’d like to take a look at a cut-down copy of my Freeway site document you can grab a copy from http://panoramaphotographer.com/freeway/
There’s one image (the banner background) and one custom font (used by a Freeway font set). In the page the large plain box is a markup item that displays a panorama from my site. That should work even if you preview the Freeway output locally. The lower portions of the site are basically just repeats of what’s in this example document.

k


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

Hi thatkeith,

Thank you so much for letting me download your file and for your advice - very kind and helpful of you.

Made some progress with it today, it now jumps between breakpoints which is a step in the right direction!

Best, Jess


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