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)
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 ontwerpzaam.nl, 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).
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.
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.
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.
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
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:
Sorry for my absence … have been busy doing family things
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.
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!
