Responsive Site Test tool

http://dfcb.github.com/Responsivator/

See how your site may appear in all the various browser dimensions. Note that some device-specific things, like the font resizing in MobileSafari on iPhone and iPod touch, will not happen here, so it’s not a perfect representation. But it can show how your page will re-flow when you use different @media queries to serve alternate stylesheets.

Walter


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

Walt,

This makes me very aware of how limited my current abilities are – based on how my own site appears…
Has anything been written that would help me with the very basics of putting a site together with the basics in place – preferably written in words of 3 syllables or less?!

Cheers.


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

I believe Thomas Kimmich is working on something along those lines, not sure how far along he is.

Walter

On Oct 15, 2012, at 4:51 PM, Nik Andrew wrote:

Walt,

This makes me very aware of how limited my current abilities are – based on how my own site appears…
Has anything been written that would help me with the very basics of putting a site together with the basics in place – preferably written in words of 3 syllables or less?!

Cheers.


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


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

You’re right, I do recall that Thomas mentioned he was working on a screencast or two dealing with this.

Thanks


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

Hi guys,

there are currently so much concerns on how to tackle the “responsive thought” in Freeway that I, let’s say “stopped the development”.

I started to write a page in sass using sublime text 2 with LiveReload (SnowLeo) to tackle a WordPress Template. All this knowledge I try to transport into the Freeway-world but all this new stuff is nearby letting my head explode (cause basically I’m dumb).

But the fundamental start for responsive design is the “design” and not the “programming”. So if you want to have a page-layout that works clever on all devices, you need to make sure, that you have an imagination how the page shall look like after the breakpoints. Build all “three pages” visually in Freeway (that’s what I did in my example page) using BoxModel and percentage width of your DIVs.

The rest is (currently not recommended) externalizing styles, collect them on separate style-sheets for to set the @media-queries. I haven’t found out yet, if it would work as well without throwing stuff out, cause Freeway is placing styles in three different areas (inline, head, css) which is a lil’ bit of confusing.

The “Screencasts” I do at the moment do not contain any plans on responsive. It simply starts with the design in Photoshop, go on with the idea of “ideal page width”, setting the BoxModel properly, and always some sidesteps such as:

  1. How to set proper styles
  2. How to set proper links styles
  3. and many themes more

so it should be seen as a “memoirs of an average webdesigner”. The subscription levels do have in total two main reasons:

  1. It allows me to keep maintenance high
  2. Support the community (as a pay back) to realize the ActionsForge TNG as high as I can.

And just to complete my plans and ideas I plan a stand-alone page (based on the above mentioned WP) to collect my stuff and probably flavor it with co-authors stuff to round up the Freeway-universe. So honestly I’m missing time anyway - uuuahhhh.

Cheers

Thomas


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

As usual Thomas, a very thorough response.
The process is obviously very difficult if its causing your head to explode! However, maybe I don’t need to take this process as far as you have…
So in the first instance – how do I set percentage widths of my DIVs?

Cheers,

Nik


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

Hi Nik,

as long as you have entirely inflow items (BoxModel) you can type in percentage within inspectors width field (e.g 80%) for a DIV.

Cheers

Thomas


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

Ahh, got that.

thanks!


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

They don’t even have to be inline layout elements. Any element can be set to a percentage width as long as you leave the Align picker set to None. The problem with a centered layout and percentage widths can only be solved with an inline layout, though.

Walter

On Oct 16, 2012, at 5:19 PM, Thomas Kimmich wrote:

Hi Nik,

as long as you have entirely inflow items (BoxModel) you can type in percentage within inspectors width field (e.g 80%) for a DIV.

Cheers

Thomas


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


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