bacdraft responsive issues

Freeway
1

Hi,

I am just finishing up a backdraft site and I checked it out on my iPhone and all the boxes are overlapping and not resizing to my phone…

can anyone please help with this issue?

I have not changed any size settings. I am using FW 7.

http://grwebs.net/carrie http://grwebs.net/carrie

thanks in advance.

Julie

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

2

sorry for the typo in the header… auto correct…

On Sep 22, 2014, at 3:57 PM, Julie Maxwell email@hidden wrote:

Hi,

I am just finishing up a backdraft site and I checked it out on my iPhone and all the boxes are overlapping and not resizing to my phone…

can anyone please help with this issue?

I have not changed any size settings. I am using FW 7.

http://grwebs.net/carrie http://grwebs.net/carrie

thanks in advance.

Julie

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

3

I might be wrong so apologize if so, but as far as I know (which is not much) it’s not the best idea to use FW7 and backdraft currently. I’m not aware of the specific problems - but keeping FW6 would be my recommend right now.

Cheers

Thomas

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

4

The Box Sizing action - which is used extensively in BackDraft - is not currently compatible with FW7 in Responsive mode.

http://www.freewaytalk.net/thread/view/151058#m_151058

David

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

5

Thomas,

Thank you !Ok I will then convert back to 6 for this site… I will also look at making it in 7 are there any tutorials for 7 to help the learning curve?

Thanks

Julie

Sent from my iPad

On Sep 22, 2014, at 4:34 PM, Thomas Kimmich email@hidden wrote:

I might be wrong so apologize if so, but as far as I know (which is not much) it’s not the best idea to use FW7 and backdraft currently. I’m not aware of the specific problems - but keeping FW6 would be my recommend right now.

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

6

I will then convert back to 6 for this site…

You can still make it in 7 but you cant use the Responsive features of 7

D.

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

7

Sorry Dave,

I did not see your response…
I will check that thread out…

Thank you!

Julie
Sent from my iPhone

On Sep 22, 2014, at 6:33 PM, DeltaDave email@hidden wrote:

The Box Sizing action - which is used extensively in BackDraft - is not currently compatible with FW7 in Responsive mode.

http://www.freewaytalk.net/thread/view/151058#m_151058

David

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

8

I know this is answered someplace … But can I turn them off? I never turned them on so I suspect it’s automatic?

Julie

Sent from my iPhone

On Sep 22, 2014, at 8:27 PM, DeltaDave email@hidden wrote:

I will then convert back to 6 for this site…

You can still make it in 7 but you cant use the Responsive features of 7

D.

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

9

So let’s try to answer some stuff here:

I know this is answered someplace … But can I turn them off? I never turned them on so I suspect it’s automatic?

Theoretically, they are turned “on” if you define breakpoints via edit → media types. But this answer is kinda politically incorrect cause as long as you don’t touch the stuff within those tabs for the media types it is not active either (or turned off by simply doing nothing with them). For your own convenience, delete them in the edit → media types - you can re-define them whenever you want or need.

You can still make it in 7 but you cant use the Responsive features of 7

Backdraft depends on the automatic calculation of the widths via action. If this breaks, backdraft doesn’t work as expected. I’m not aware what currently happens on this frontier.

And there we are - learning curve:

… are there any tutorials for 7 to help the learning curve?

Not much - honestly, especially not from my side. I’m currently thinking of a new series of screencasts but whenever I do (explaining the downsides and how to solve them), Softpress comes with the fix (hooray) - and I wasted plenty of time (gosh). So it’s not easy to find the golden mean.

The biggest learning curve is giving it a try. And even if you mumble and grumble having no time, you can’t expect serving a client by an invest of less than nothing these days.

Making responsive sides is for both positioning methods possible. While absolute means push and drag and re-arrange item by item, inline works as expected (nearby).

The biggest effort these days would be having a workspace working box-sizing: border-box - and I pray for a sign each day for this to come (and am fear that this is technically not possible - but who knows).

##Sidenote

Here is my proposal for a proper workflow in front-end developing:

###Design

  1. Content first (Text, Text, Text)
  2. Raw wrapping and structuring content (outline)
  3. Basic appearance decisions (Font, Colors … ) - using any kind of graphic tool for making a raw layout proposal

Talking with client if she’s happy with it. If not - re-start with P1. If:

###Front-End

  1. Open Freeway - do all required basic settings
  2. Defining the set of styles (body, H1, H2, H3 and paragraph)
  3. In point 3 (Design) you already decided how and where items have to be placed.
  4. Start adding them - keep it static.
  5. Flavor it by dynamic.

You may wonder, how quick you go through the Freeway process.

Cheers

Thomas

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

10

Thanks Thomas I appreciate all.

off to the freeway drawing board to work on this.

J

On Sep 23, 2014, at 4:07 AM, Thomas Kimmich email@hidden wrote:

So let’s try to answer some stuff here:

I know this is answered someplace … But can I turn them off? I never turned them on so I suspect it’s automatic?

Theoretically, they are turned “on” if you define breakpoints via edit → media types. But this answer is kinda politically incorrect cause as long as you don’t touch the stuff within those tabs for the media types it is not active either (or turned off by simply doing nothing with them). For your own convenience, delete them in the edit → media types - you can re-define them whenever you want or need.

You can still make it in 7 but you cant use the Responsive features of 7

Backdraft depends on the automatic calculation of the widths via action. If this breaks, backdraft doesn’t work as expected. I’m not aware what currently happens on this frontier.

And there we are - learning curve:

… are there any tutorials for 7 to help the learning curve?

Not much - honestly, especially not from my side. I’m currently thinking of a new series of screencasts but whenever I do (explaining the downsides and how to solve them), Softpress comes with the fix (hooray) - and I wasted plenty of time (gosh). So it’s not easy to find the golden mean.

The biggest learning curve is giving it a try. And even if you mumble and grumble having no time, you can’t expect serving a client by an invest of less than nothing these days.

Making responsive sides is for both positioning methods possible. While absolute means push and drag and re-arrange item by item, inline works as expected (nearby).

The biggest effort these days would be having a workspace working box-sizing: border-box - and I pray for a sign each day for this to come (and am fear that this is technically not possible - but who knows).

##Sidenote

Here is my proposal for a proper workflow in front-end developing:

###Design

  1. Content first (Text, Text, Text)
  2. Raw wrapping and structuring content (outline)
  3. Basic appearance decisions (Font, Colors … ) - using any kind of graphic tool for making a raw layout proposal

Talking with client if she’s happy with it. If not - re-start with P1. If:

###Front-End

  1. Open Freeway - do all required basic settings
  2. Defining the set of styles (body, H1, H2, H3 and paragraph)
  3. In point 3 (Design) you already decided how and where items have to be placed.
  4. Start adding them - keep it static.
  5. Flavor it by dynamic.

You may wonder, how quick you go through the Freeway process.

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

11

I found this info a while ago but was not yet ready to tackle it (slowly but surely learning all things Freeway and inline simultaneously) and am now trying to apply these techniques to an inline site I am building.

I have had success testing the technique in a blank file and so I know it works! But in my existing site when I apply a style to the html box there is no change to the text styling at all, it only changes when the style is applied directly to the text.

If someone is able to help, I’ll post a link to the file. The temp site is up at www.dontworryhesfriendly.com (ignore the first page, rather click on any of the menu links to get into a mock up of the main site pages). I’ve also created an archive file and stripped out all existing styles to try to start from the beginning but no joy there either. I’m surely missing a simple element in working with the styles but I’ve read as much documentation as I can find and it seems it should “just work” but something in my site (which is pretty simple) seems to be making this functionality impossible.

D

(FW7, Mac OS 10.10.1)

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

12

I have had success testing the technique in a blank file and so I know it works! But in my existing site when I apply a style to the html box there is no change to the text styling at all, it only changes when the style is applied directly to the text.

Not sure I follow exactly what you are trying to do here as the OP is about overlapping boxes and you mention styles applied to html containers.

Can you expand a bit on the issues that you are having and probably at that point a link to your file would be appropriate.

I appreciate that these pages are a mock up just now but the image of the dog IMG_5448%20-%20Version%202.jpg is HUGE at over 2.2Mb and makes that page load crawl.

David

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

13

My apologies! Was looking at all appropriate threads and copy/pasted into the wrong one. (Feel free to move if necessary or I can start a new thread.)

In the existing site I am able to apply text styles to the html containers, but the styles have no effect. I can apply the styles directly to the text, and gives the desired results, but if I want to use Caleb’s technique for resizing text at breakpoints, I need to apply the styles to the containers themselves. And from my reading, it seems this is a good practice across the board anyway when possible. I’m not sure if I’ve done something wrong in the creation of styles or if there is something else on my site in conflict with this capability. I have tested it without problems in a blank site.

Folder at the following link: Dropbox - Error - Simplify your life

Thanks for the understanding, images should be fixed now!

D

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

14

So what thread does this actually relate to?

D

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

15

And if you follow the instructions here http://getbackdraft.com/docs/sending-website how to create an archive copy of your site it will make it much easier for us to download and diagnose.

But instead of emailing it to Caleb stuck the archived/zipped folder on DropBox.

D

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

16

I suppose it relates to this thread… http://www.freewaytalk.net/thread/view/152567#m_152567

However at it’s core, it’s a styles issue… applying styles to a container v text. It’s just that I learned about the functionality of doing it the various ways as a result of Caleb’s instructions for responsive text rather than any Freeway documentation.

Archived/zipped file here: Dropbox - Error - Simplify your life

And link emailed to Caleb just in case.

D

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

17

Donna,

Thanks for pinging me about this. What text on your website are you trying to make responsive? From a quick look at the website, the font sizes are already set quite sensibly and you really shouldn’t need to make many (if any) changes to the font sizes for mobile devices.

BTW, lovely typography! It’s always nice to see people using system default fonts (instead of slow-loading web fonts) in ways that make them look really nice.

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

18

Hi, Caleb —

Thanks for the quick response and the compliments! This is all relatively new to me (though I have minimal graphic design experience in the past) but I’m very much enjoying the learning process. On this particular site, I don’t believe there is much that I’m worried about, however I want to make sure this is a tool I can add to the kit, if you know what I mean. And when I ran up against the issue, decided I wanted to work it out as soon as possible. I have a few other sites I’m working on as well and so it might apply more to those in the future.

I’ve found that as I’m learning there’s somewhat of a feedback loop… maybe I’ll stumble upon something that seems interesting but over my head as far as comprehension and technique, but then after I’ve worked through some other things, I’ll again stumble upon the original post and realize “Oh, I get it now… I can do that.” Exciting! I made another site (not perfect by any means) but was so thrilled when I simply made a default inline layout and did not immediately need to make changes at the breakpoints, it mostly just worked! (godamat.com http://godamat.com/)

I’ve been fiddling with settings in the styles (just created a body tag and set font size attribute to small) and have been able to get the container to recognize changes in font color and emphasis, but not font size or alignment. Is there perhaps some other attributes I should have set in the p or body style to create a stronger baseline for changes?

The Freeway documentation basically says “you can do it this way or you can do it that way” but no context for the essentials to make it work or not.

Ha ha… I’m a fan of the classics and find that sometimes the more you try to do, the worse it gets… however it’s reaffirming to hear I’m on the right track!

Thanks again!

D

On Dec 30, 2014, at 12:19 PM, Caleb Grove email@hidden wrote:

Donna,

Thanks for pinging me about this. What text on your website are you trying to make responsive? From a quick look at the website, the font sizes are already set quite sensibly and you really shouldn’t need to make many (if any) changes to the font sizes for mobile devices.

BTW, lovely typography! It’s always nice to see people using system default fonts (instead of slow-loading web fonts) in ways that make them look really nice.

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

19

Setting text-align property on a container only works if the same property is not already set at the text tag level. If your paragraph tag (p) is set to text-align:left then setting the text-align property on the container to something else won’t override it.

You may have to set a more specific CSS selector like #divname p or .classname p. Or forgoe the text-align attribute on the text tags, leave them undefined (though the default is left).

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

20

As always, Ernie is right. Although it’s invisible in Freeway, almost every piece of text on the page is wrapped in paragraph tags (p). The style settings you set for p in the styles editor will override any conflicting styles that you have applied to it’s parent container.

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