Hello Caleb. . . I am not a website developer by profession but rather a company founder who at times needs to pick the tools up to get things done efficiently. Freeway and this community has been invaluable to me since mid 2000.
Yesterday I purchased your Backdraft 2.0 resource to get a better understanding of best practices and such as it relates to responsive architecture in Freeway Pro 7. To anyone else considering it, it is well worth the $50, a small price to pay for such a thoughtfully laid out resource. Thank you for providing this to the Freeway community.
I have a couple quick questions and asking them here so others can benefit as well. Apologies in advance if they are overly simple or I am missing something obvious.
QUESTIONS
What is the difference between the “Framework Modules” and the “Alt Modules” in Backdraft 2.0? Did some looking around and noticed a few values were different and the Alt has a background applied to the wrapper.
I realize the overall idea is to have things stretch and expand but what if I was to want the objects on the page to remain fixed in there width and only change when the break point is hit?
Is there a way to offer different image content at different break points so they can be optimized for both efficiency and image quality?
Applying top margin to a module nested inside of a “fullWidthWrapper” causes the parent “fullWidthWrapper” to move down not the “Framework Module”. Applying padding to the “fullWidthWrapper” does create the desired affect though. Is this an expected behavior when working with this type of a page structure, if so could you elaborate?
Currently the responsive video action does not support Wistia, any plans to incorporate this or what is the best way to manually integrate a Wistia video and not disrupt things going on with the Backdraft layout?
The difference between the “normal” module and the “alt” modules is mostly styling. The “alt” modules have transparent columns on a solid background color, while the normal modules have a transparent background, and colored columns. The main reason why there are even two different sets is because I’ve found that it serves as a good example to new users as to how the modules can be customized.
I can’t imagine why you would not want the website to be flexible, but it could be done. First, you’d need to remove the Box Sizing action from the column. Then, you’d have to convert any percent width to pixel widths, and repeat this for any breakpoint where things change. It would be time consuming to have to redo many modules. Why do you ask?
Unfortunately, at this point, no. This is simply a shortcoming in the HTML spec. The standards bodies and browser vendors have been working on a solution, and I believe it may even be implemented in prerelease builds of Chrome for desktop, but it will probably be a few years before it can really be used. Also, unless you felt like hand-coding, you’ll need to wait for Freeway to implement it.
The explanation for what you are experiencing is a little (read: lot) complicated (google “clearfix” for a full explanation), but the fix is to set the full width wrapper’s float setting to “left”. Or, you can use padding a padding on the fullWidthWrapper element instead of margins on the child elements, which is what I do. When you do it this way, you keep the vertical spacing even if you remove the content which can be useful.
You’ll need to reach out to Tim Plumb about this, as that action is his. If you need a solution right away, send me the embed code and I’ll try and give you a manual solution.
Hello Caleb. . . Thank you for the response, most helpful.
Question 2 may have more to do with the fact that I am a little new to being hands on with responsive architecture. I see you have a lot of break points built in, my main concern is that my child items keep their intended positioning, e.g. a box of text doesn’t spread out over the entire page or some such thing. I am in the process transferring my new corporate site design (simple single page) into your framework. I look forward to seeing how it all works and looks at different screen sizes.
As for Question 5 I will get back to you on this but I would be more then comfortable manually entering any markup and styling needed to implement Wistia in a manner that it plays well with your very thought out structure.