Converting existing sites into responsive only might work when it’s a small/simple site to begin with. Otherwise you’d have to start from scratch. So I do get your point completely James.
Without being contemptuous, setting up a responsive site with Freeway7 (or 6) ain’t that hard though. One thing I am absolutely convinced about however, is that you will have to work with a boxed model layout/inline layout/hybrid layout … Note - it would be nice if we’d use one name for this.
It would be nice if Freeway was able to use today’s measurements like 'vw, vh, etc. or incorporated flexbox, but it still doesn’t. So every now and then we just have to dive into ‘extended’ in order to do some screwdriver work ‘under the hood’. Not necessary, but being able to do this can become handy at times. Learn to work with CSS and how to overwrite settings.
Setting up your document is the place to start; so determine the maximum width of your flexible website (let’s say 1200px), use HTML5, external stylesheets, select your language/encoding, common Resource folder, readable HTML code output and -at mobile settings- set ViewPort Width to ‘Device Width’ (leave ViewPort Height alone), check ‘Page can be scaled on mobiles’ and ‘Initial scale’ and set Initial scale to ‘100%’. Yes, there are more settings available, but these are the main ones.
Rename your master page appropriately and start setting up the basics; check the setting in the Inspector palette. Set the page width to 100% (dimensions) and the width of 1200px you’ve set up in the document setup will appear as width in ‘measurements’. That’s just for your display purposes; it’s the 100% (flexible) width that will count at the end.
Double click in the page and a blinking cursor will appear, now insert your first HTML item. Remember … you’re working inline, so all inserted HTML items (or rather ‘div’s’) will initially lock at the top left corner. You’ll need to position these divs using margin.
With his first div selected go to your inspector and set the width to 100% (fixed (%)), give it a max-width of 1200px and center it horizontally (which will accomplished by giving it a margin-left and -right of ‘auto’). Insert a reasonable amount of lorem-ipsum into this div, and remove the fixed height (flexible). Now preview this in a browser and drag your browser window narrower and wider. Notice how the width of the div will grow and shrink according to the browser window (the viewport). It won’t grow as much as 1200px wide, just like we told it to.
When you get this … the rest is just around the corner.
freewaytalk mailing list
email@hidden
Update your subscriptions at: