Boxing clever

In trying to replicate my iFrame based site with an FW7 boxed/responsive site, I’ve stumbled at how to manage side-by-side elements and placement in a boxed percentage based site, where the left-hand one is fixed?

(The right-hand element is ‘snapping’ below the left-hand side elements, when re-sizing (diminishing) the window.)

1/ Is the only way to handle this, to make several break points to cater to varying window sizes?

2/ Is there a better way to design this sort of layout?

(You can see how the existing iFrame site works by clicking on the bayview gallery link on the left)


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

1 - It’s not the only way to do this, no. But it is a great and predictable way. You can make changes especially for these breakpoints, which is just great. I’d like a complete fluid design as well, but some things just have to be radically changed for a (or each) breakpoint.

2 - At this moment, no. It’s more how comfortable you are working in such an environment, how skilled you are. When you take a look at http://beta.ontwerpzaam.nl/roukens/, you’ll see that boxes/elements are made fluid, simply because I work with percentages and max-width. But still the breakpoints (here mostly used at 768px and 480px) are necessary.

(The example mentioned contains a single page containing all elements used in the site ‘to-be-build’, this is just a starting point done in Freeway, made for a fellow FW user to finish it himself).


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

I work with the standard breakpoints of FW7, but also try to make text blocks fluid (percentages and max-width) in order to get a good layout even for non-standard sizes of devices. Sometimes it’s tricky, but worthwhile.

Useful is a tool I found here in the forum: Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions - Best developer device testing toolbar
Which is at least a helpful tool in layout-testing and when meeting clients.

Very nice layout Richard. I like the logo as “hamburger menu” in the tablet/mobile version.

Al the best!
Hanna


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

Richard* - The responsive sildeshow is not made with Exhibeo, or? The controls are different…


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

done with

http://amazingslider.com

Fixed items are “out of the flow” of a box-construction and require therefor a “spacer” either by a box underneath the fixed item or a margin of the same amount to the neighbor or parent item.

To me - aside items fixed are generally spoken medium clever cause they require a pretty big space, especially on portrait mode of mobile devices.

Cheers

Thomas


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

looks a lot like WoWslider to me…?
Op 14 nov. 2014 11:22 schreef “Thomas Kimmich” email@hidden:

done with

http://amazingslider.com

Fixed items are “out of the flow” of a box-construction and require
therefor a “spacer” either by a box underneath the fixed item or a margin
of the same amount to the neighbor or parent item.

To me - aside items fixed are generally spoken medium clever cause they
require a pretty big space, especially on portrait mode of mobile devices.

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

… inspect the source-code and you’ll see amazing things.

Cheers

Thomas


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

… and yes, before I forget to note:

I know Richard is loving WOW-slider’s interface from the bottom of his heart :slight_smile:

Cheers

Thomas


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

hahaha i’ve checked it out. Also a good and reliable Avangate product with
clever interface. This was formerly a flash 3D box slider.
Op 14 nov. 2014 11:38 schreef “Thomas Kimmich” email@hidden:

… and yes, before I forget to note:

I know Richard is loving WOW-slider’s interface from the bottom of his
heart :slight_smile:

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

Ufff Amazingslider costs a fortune
See: Pricing |


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

it can save you lots of time Hanna… and time is money. But also take a
look on graphic markets, lots of choice but… not always codefree.
Op 14 nov. 2014 11:47 schreef “sonjanna” email@hidden:

Ufff Amazingslider costs a fortune
See: http://amazingslider.com/order/


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

Your are right, Andries :slight_smile:


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

Sorry for my absence … have been busy doing family things :slight_smile:
Glad to see Thomas has filled in the blancs, tnx buddy!

But indeed, amazing slider it is. I’m using the free version, just added ‘display:none’ somewhere in the produced .js file to ditch the www.amazingslider.com overlay and save myself a few bucks.

Richard


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

Op 14 nov. 2014 11:38 schreef “Thomas Kimmich” :

… and yes, before I forget to note:

I know Richard is loving WOW-slider’s interface from the bottom of his
heart :slight_smile:

True fact. But even though the UI of AmazingSlider can use a few hours of attention, it does a very good job.


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

Thanks for the pointers fellows. :slight_smile:

I have spent a loooong time experimenting/trial and error/learning what works. The percentages is the solution and I find that extra break-points aren’t required.

I have still have a few issues and am slowly working through them. So far, the site works very well on Desktop (on mine anyway) on iPad (non-retina) and okay, but not so well on iPhone4.

I like the Juicebox software here, because it makes it simple to flip to full-screen on iOS and suddenly all those issues disappear and the images are the primary focus (which is what I want).

One irritating issue that I can’t work out, is the bottom of the screen, where I have a footer with text and addThis buttons, is for some reason forced down a few pixels (percent) and I can’t work out how to get it to move up closer to the embedded Juicebox gallery. If anyone has any suggestions, I’d love to hear them! :slight_smile:

http://test-1.grantsymon.com/test/embedtest-14.html


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

Richard…where in the .js file did you add that “display:none” ?


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

Line 5196:

wtextcssdefault: "display:none;font:12px Arial,Tahoma,Helvetica,sans-serif;color:#666;padding:2px 4px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background-color:#fff;opacity:0.9;filter:alpha(opacity=90);",

Richard


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