[Pro] Responsive Websites

Does anyone know if it is possible to build a responsive website in Freeway?

Thanks,
Richard


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

With a bit of kicking and shoving, sure. One of the tenets of a responsive site is that you build an inline layout, and that’s always been possible with Freeway. Not easy, but possible. Then you will need to specify dimensions for some of your elements in percentages, and use the Extended dialog to add max-width and min-width properties. If you want to use @media queries to specify different layout to items depending on the screen dimensions or other properties, you will need to use another application (text editor, dedicated CSS editor) to create them, and an Action to upload and link them.

So yes, possible, but not easy or user-friendly. As far as I know, there aren’t any truly easy ways to make a responsive site – not yet, anyway.

Walter

On May 10, 2012, at 6:55 AM, pixelart wrote:

Does anyone know if it is possible to build a responsive website in Freeway?

Thanks,
Richard


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

PulsePro offer a responsive template in their package.: http://pulsecms.com/frontend.php

Not answering your question but might be an alternative solution or a means to investigate requirements.

s


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

Thanks for the replies guys. Much appreciated.
Richard


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

Hi Talkers,

outermost interesting thing - by coincidence I today started to do a layout which caused me quite a headache. Not sure if everything is political correct, but as far as I can see it works.

It is, as Walter already said an inline box-model (It could be also declared as div-mania) with all width set in percentage.

The next step in plan is now to add the @media queries but honestly I have not any idea how to tackle this yet. The goal would be to have the sidebar right to the image beyond if the browser window reaches a size of app 960px and not pushing the 3-col grid that much down.

For all that are interested:

http://www.kimmich-dm.de/templates/liquid/index.html

Any pointers and comments appreciated.

Cheers

Thomas


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

Here’s mine: http://lf.walterdavisstudio.com/responsive/ hand-coded for now. The break-point is at 600px width, it fits iPad perfectly in either orientation and presents a taller version for iPhone (especially note the footer navbar).

I started this page trying out a technique I read about called box-sizing – this is what allows me to do completely flexible column widths with fixed padding and a mix of borders – yet still work out perfectly at any page size. From there, it was a short step to an @media query to remove the columns entirely from the top and bottom on narrow page sizes.

There’s also a live search function in JavaScript that live highlights any search matches in the page in real time, and a Safari-style search window in browsers that don’t style the HTML5 search input field (with no images used).

Where I’ve ended up is probably going to form a basis for the next generation of the OLL that I’m building this year. The savings in layout code are extraordinary. The whole page, including large and small header graphics and Prototype.js transfer in 58K when my server gzip-compresses them. Total uncompressed size of this page is 186K. Current OLL is 42K for just the HTML, another 34K for CSS alone, plus another 204K of JavaScript. I won’t compare images, because there’s so many more on the current OLL home page (and more will be added to this layout too).

Walter

On May 10, 2012, at 10:16 AM, Thomas Kimmich wrote:

It is, as Walter already said an inline box-model (It could be also declared as div-mania) with all width set in percentage.


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

Hi Walter,

cool stuff I have to dig deeper in (and to bookmark).

Is there any documentation about the box-sizing? Cause padding, margin, borders is the current death of percentage width (uahh).

On the first view you probably should set the div notes to clear: both cause ob big screens it then sticks to the right of the features or?

Cheers

Thomas


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

I did a bit of musing and built a responsive web page made in Freeway just as a test

http://www.printlineadvertising.co.uk/demo/mobile/

Compare the same URL on an iPhone. On this demo the large photo does not load on the phone to save on load time. And just for fun a different styled heading.

David

On 10 May 2012, at 11:55, “pixelart” email@hidden wrote:

Does anyone know if it is possible to build a responsive website in Freeway?

Thanks,
Richard


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

No, I should put overflow:hidden on div#features. The only reason to add clear to a box is if it is preceded in source order by a floated element. The bug here is that the floated column elements are sticking out of the bottom of their parent.

Walter

On May 10, 2012, at 3:15 PM, Thomas Kimmich wrote:

Hi Walter,

cool stuff I have to dig deeper in (and to bookmark).

Is there any documentation about the box-sizing? Cause padding, margin, borders is the current death of percentage width (uahh).

On the first view you probably should set the div notes to clear: both cause ob big screens it then sticks to the right of the features or?

Cheers

Thomas


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

RapidWeaver which I also use seems to be a bit more ahead in the game than Freeway in regards to responsive websites. Admittedly most of them are templates but the very good FreeStack theme which to all intents and purposes is a versatile blank theme is soon to become a responsive theme/template. I do hope that Softpress will come up with something in the near future like this as at the moment it seems too complex for anyone like me without coding experience to accomplish in Freeway.

Richard


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

On 11/05/2012, at 12:39 AM, Walter Lee Davis wrote:

Here’s mine: http://lf.walterdavisstudio.com/responsive/ hand-coded for now. The break-point is at 600px width, it fits iPad perfectly in either orientation and presents a taller version for iPhone (especially note the footer navbar).

That’s pretty cool!


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

On 10 May 2012, 9:13 pm, pixelart wrote:

RapidWeaver which I also use seems to be a bit more ahead in the game than Freeway in regards to responsive websites.

Hmm - what to say here?

Probably yeah - especially their template/theme-building experts really doing excellent stuff, no doubt.

But I often wonder:

If they (the specialists) can build those themes within RW, why not the average mortal RW user can do this, too? Does it as well recommend slightly deeper knowledge to achieve things like this in RW?

I do hope that Softpress will come up with something in the near future like this as at the moment it seems too complex for anyone like me without coding experience to accomplish in Freeway.

Me too - but currently I try use what I have, and not what I expect to have. The example above (incomplete yet) is actually using Freeway’s tools, extended - yes - and they do exist - but we usually do not use them.

Cheers

Thomas


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

My opinion is that Freeway Pro users should not resist learning about the
underlying code that makes websites work. This experience will enhance what
you do, and what you can do with Freeway. Think about the time and
energy you spend trying to get these applications to “do what you want”.
That same energy could be spent learning a little bit about what you – via
that application – are really trying to do, and how to better do that.

Even at the slowest rate, you can learn a lot over time. This approach has
made me a better Freeway Pro user …in my own estimation, anyway :slight_smile:

I still to this day use simple resources like the w3 schools to work out
what all that gobble-dy-gook means HTML Tutorial

pixelart email@hidden wrote:

… I do hope that Softpress will come up with something in the near future
like this as at the moment it seems too complex for anyone like me without
coding experience to accomplish in Freeway.


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

I found very early on that Freeway was an excellent tutor in how HTML should be written, how a page could be constructed to look precisely the way I wanted it to.

As my earliest Web sites were already trending toward what we would nowadays call a Web App, I had to learn very early on how to cut up my layout code and intermingle it into dynamic server-side code.

Freeway was actually “the hard way” to do that, because it would rewrite the code if I moved anything 1px anywhere. I had to learn two modes of translation: 1) I see this code that my developer wrote, how do I get Freeway to generate that or similar? 2) I see this code that Freeway wrote, how do I find the part that corresponds to only this little corner of the page?

Both of those were lightbulb moments when they finally happened. Having those basic detective skills in my bag have made me better able to build sites of any kind.

Walter

On May 11, 2012, at 9:05 AM, Ernie Simpson wrote:

My opinion is that Freeway Pro users should not resist learning about the
underlying code that makes websites work. This experience will enhance what
you do, and what you can do with Freeway. Think about the time and
energy you spend trying to get these applications to “do what you want”.
That same energy could be spent learning a little bit about what you – via
that application – are really trying to do, and how to better do that.

Even at the slowest rate, you can learn a lot over time. This approach has
made me a better Freeway Pro user …in my own estimation, anyway :slight_smile:

I still to this day use simple resources like the w3 schools to work out
what all that gobble-dy-gook means HTML Tutorial

pixelart email@hidden wrote:

… I do hope that Softpress will come up with something in the near future
like this as at the moment it seems too complex for anyone like me without
coding experience to accomplish in Freeway.


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

Thanks guys for this thread. Looking forward to more development here especially regarding how to handle @media queries in FW.


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

Hi Talkers,

I’d like to spend some further words on this cause I fiddled the last days in my template project. The basic learning curve massively increased, the basic thoughts had been something between “exciting” and “brain-sucking”. I write it mainly down to have a reference and a back-up, cause I often do things and one day later I forgot what I did. Either it’s a question of cluelessness or age.

My example is still:

http://www.kimmich-dm.de/templates/liquid/index.html

First:

I do hope that Softpress will come up with something in the near future like this as at the moment it seems too complex for anyone like me without coding experience to accomplish in Freeway.

The basic solution of Softpress in this is simple (and not new). Build your page, duplicate it, throw things in or out and set the iPhone/iPad redirect to the basic page. So you covered the step between desktop and devices quite easy and in a visual way which is Freeway’s strength.

The “hey resize your browser window and see what happens!!!” is interesting but not important or do you sit in front of your screen and “make browser bigger, make browser smaller…make browser bigger, make browser smaller…???” It’s pretty much the same with “parallax”.

Thanks guys for this thread. Looking forward to more development here especially regarding how to handle @media queries in FW.

That’s a point I’m afraid I can’t really cover with my limited amount of proper language (english, css, html the whole range you know) but the most points Walter already covered. But I really try to write a few things into my “template” as a reference for later use and back-up.

As I said - just a collecting thoughts to not let die (or dig under) this fascinating part of webdesign.

Cheers

Thomas


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

Very clever! Nicely done Thomas :slight_smile:


Ernie Simpson

On Wed, May 30, 2012 at 3:24 AM, Thomas Kimmich email@hidden wrote:

Hi Talkers,

I’d like to spend some further words on this cause I fiddled the last days
in my template project. The basic learning curve massively increased, the
basic thoughts had been something between “exciting” and “brain-sucking”. I
write it mainly down to have a reference and a back-up, cause I often do
things and one day later I forgot what I did. Either it’s a question of
cluelessness or age.

My example is still:

http://www.kimmich-dm.de/templates/liquid/index.html

First:

I do hope that Softpress will come up with something in the near future
like this as at the moment it seems too complex for anyone like me without
coding experience to accomplish in Freeway.

The basic solution of Softpress in this is simple (and not new). Build
your page, duplicate it, throw things in or out and set the iPhone/iPad
redirect to the basic page. So you covered the step between desktop and
devices quite easy and in a visual way which is Freeway’s strength.

The “hey resize your browser window and see what happens!!!” is
interesting but not important or do you sit in front of your screen and
“make browser bigger, make browser smaller…make browser bigger, make
browser smaller…???” It’s pretty much the same with “parallax”.

Thanks guys for this thread. Looking forward to more development here
especially regarding how to handle @media queries in FW.

That’s a point I’m afraid I can’t really cover with my limited amount of
proper language (english, css, html the whole range you know) but the most
points Walter already covered. But I really try to write a few things into
my “template” as a reference for later use and back-up.

As I said - just a collecting thoughts to not let die (or dig under) this
fascinating part of webdesign.

Cheers


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

Thomas

The problem with your page is that is does not resize to a mobile devices browser. I have side scroll all over the place to read it on an iPad or iphone.

http://www.kimmich-dm.de/templates/liquid/index.html

David

On 30 May 2012, at 16:26, Ernie Simpson email@hidden wrote:

My example is still:

http://www.kimmich-dm.de/templates/liquid/index.html


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

Thomas, add this to your page in the iPhone section:

  • Width: Device-Width
  • Initial Scale: 100%

That will force the initial view to trigger your various clever responsive triggers. Otherwise, great job on the design – love the way the “correct” device appears at the top, that’s an excellent idea!

Walter

On May 30, 2012, at 3:32 PM, David Owen wrote:

Thomas

The problem with your page is that is does not resize to a mobile devices browser. I have side scroll all over the place to read it on an iPad or iphone.

http://www.kimmich-dm.de/templates/liquid/index.html

David

On 30 May 2012, at 16:26, Ernie Simpson email@hidden wrote:

My example is still:

http://www.kimmich-dm.de/templates/liquid/index.html


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

There’s no zooming either, which is important for mobile user experience.… rotating the device after page load does not resize it.

Sent from my iPad

On May 30, 2012, at 3:32 PM, David Owen email@hidden wrote:

Thomas

The problem with your page is that is does not resize to a mobile devices browser. I have side scroll all over the place to read it on an iPad or iphone.

http://www.kimmich-dm.de/templates/liquid/index.html

David

On 30 May 2012, at 16:26, Ernie Simpson email@hidden wrote:

My example is still:

http://www.kimmich-dm.de/templates/liquid/index.html


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