I wish to start learning how to build responsive websites with FW6. Earlier I read a comment from Caleb Grove that its about learning css and applying it to a inline site. Can someone give me some deeper insight into what specifics to learn and where I can start finding my learning resources?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thomas’ has some really excellent screencasts here http://kimmich-dm.de/screencasts.php
and Caleb has the “backdraft” responsive template for sale
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Wimdg,
I applaud you for being willing to learn something like this!
I began my responsive venture by grinding through the Web Fundamentals course on Codecademy, where you will learn the basics behind HTML and CSS. It is completely free, highly educational and I would recommend it for any serious Freeway users as Freeway’s odd workflows will “click” when you understand what it is writing. If you want to create responsive website, a working knowledge of writing CSS is essential.
My first responsive page was just a simple little exercise, it would change the font size based on display width in a flexible width layout.
There are really two elements to any good responsive layout:
1. Flexible width. This is done by using percent-based widths on inline elements. In Backdraft, I have the page set to 90% width with a max-width of 1200px, then the child HTML elements are set to 100% width.
2. @media queries. This is what a media query looks like:
@media screen and (max-width:500px) {
/* CSS here */
}
You add this to an external CSS file (or inside <style> tags before </head>). This is what the media query above means: for electronic devices (screen) with a display equal to or lesser than 500px wide ((max-width:500px)), use the CSS inside the { }.
Because of the cascading nature of CSS, you won’t have to duplicate the CSS but rather override the existing styling applied to any element. A good rule of thumb is that the physically closer the CSS is to the element to be styled, the higher priority that styling will get if there is a conflict (sidenote: browsers always read from top to bottom).
For example, this code would set the background color of #box to green, but change it to red when the display is less than 500px wide:
#box { background-color: green }
@media screen and (max-width:500px) {
#box { background-color: red }
}
You will notice that I didn’t use an @media for the first line of CSS. That is because I want the default color of #box to be green.
There is a lot more to know about writing responsive CSS, but that will come with experimentation and google. I must admit that it is one of those thing where it is probably easier to completely hand-code the website than it is to try and make a Freeway website responsive, but it can be done if you are stubborn and are willing to use the !important flag in your CSS from time to time (google it).
If you need any more help, you can find me ghost-riding FreewayTalk.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Wow Caleb, that’s an explaination to start with! Thanks very much, I will keep you posted!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
the start-up of my concept you can watch exclusively free on:
http://kimmich-dm.de/wordpress/?p=804
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thank you Thomas, will certainly look at it this weekend. Cheers
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Why does this happen when I apply a color to my parent div that holds my three images?
http://smartytest.com/Greek/ourwork.php
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Billy,
Make sure that you have applied the Auto Clearfix action to the page.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thank Caleb,
That worked. Is this a bug with Freeway?
Billy
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thank Caleb, That worked. Is this a bug with Freeway?
Nope. It’s just how HTML/CSS and the specification work - depending on how you have things floated/cleared, you occasionally need to “clearfix” them. Just a part of the platform. 
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options