[Pro] Responsive Websites

Freeway
41

Elizabeth,

There’s a lot to understand about RD and the best “tip” I can offer is
start reading and researching the subject. Ernie recently made mention
of Ethan Marcotte’s Responsive Web Designwhich he (David Owen, Walter
and others here) are reading. Also educate yourself on the fundamentals
of CSS and HTML because in my opinion you’ll never fully grasp how to
implement RD effectively without being somewhat code literate. I think
that’s the non-FW aspect Ernie was referring to.

Todd

Ernie Simpson mailto:email@hidden
September 4, 2012 7:25 AM
As Todd pointed out, the main tool of RD is clever manipulation of CSS
and HTML… an education that is sometimes counter to what Freeway users
want.
Elizabeth mailto:email@hidden
September 4, 2012 6:33 AM
Any tips on how you make a responsive website - would be very useful
to know?

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

42

Hi Talkers,

just recognized that there is some action in here after being quiet a longer time. Some questions are probably targeted to me? Please read it as “Thomas`personal notes …”:

  1. I can’t recommend using Freeway for RD at least not the way it is publicised in web these days. Furthermore I have to say honestly, that (if we are talking about my example) it is anyway not built by using Freeway exclusively but with a little bit of help of Espresso (or Coda or similar).

  2. The biggest problem in Freeway is to get rid of the internal (inline) styles stuff (including those within the head-TAG) by externalizing them (using Tim’s a little bit for me tuned Externalized action).

  3. Not really easier: Inline Hardcore BoxModel. Widths of each item need to be set in percentage. This is sometimes confusing cause not the “canvas” is indicating the page-width. For each page instance, I built a new page-version to rearrange the HTML-items ( Skitch | Evernote )

But there are as well good news. Let’s talk about Responsible Design. Would you disagree if I’d say:

All we talked about yet is a little bit of bling-bling? Some CSS which makes the page looking fine?

But what about functions? Pages with carousel, lightbox-images, magic-zoom, some Twitter and Facebook-stuff, a little bit of JQuery here, a little bit of Scriptaculous there? All that stuff that makes “desktop-version” brilliant and a mobile one a nightmare?

What would I do then instead?

iPhone/iPad redirect - making some useful adjustments regarding design and javascript and you’re done. Responsive to me these days is the amphibious craft, but not sure if it can better swim or drive, but the action enables you to show all necessary requirements for a real Respons(ive)able Design.

Cheers

Thomas

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

43

I’m not entirely certain that carousels, lightboxes etc. qualify as
“nightmares” of RD. Such things can be handled elegantly but I agree it
can require more effort to do correctly. I think it depends heavily on
how far you and the client want to travel down the RD road as to how
much work is involved. [Personal opinion here] I’m also not certain that
redirects are in the true “spirit” of well-implemented RD, but that’s
not to say it doesn’t have it’s usefulness. But again, that’s simply my
take on it and I have nothing to back it up other than it being my opinion.

Any way you look at it there’s a lot to consider with RD.

Todd

Thomas Kimmich wrote:

But what about functions? Pages with carousel, lightbox-images, magic-zoom, some Twitter and Facebook-stuff, a little bit of JQuery here, a little bit of Scriptaculous there? All that stuff that makes “desktop-version” brilliant and a mobile one a nightmare?

What would I do then instead?

iPhone/iPad redirect - making some useful adjustments regarding design and javascript and you’re done.

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

44

This all makes interesting reading. Todd thanks for the advice, but I’m just not into the fundamentals of CSS and HTML and I’m not sure if I can “train my brain” into it. Yes, that’s why I love FW. So for now, I’ll stick with my options of offering mobile and web apps which I do via third party. I would have preferred to have this as an all-in-one but until such time as it’s possible…

I’ll keenly keep reading the links on this topic and hope this will happen soon.

Elizabeth

On 05/09/2012, at 12:48 AM, Todd wrote:

I’m not entirely certain that carousels, lightboxes etc. qualify as “nightmares” of RD. Such things can be handled elegantly but I agree it can require more effort to do correctly. I think it depends heavily on how far you and the client want to travel down the RD road as to how much work is involved. [Personal opinion here] I’m also not certain that redirects are in the true “spirit” of well-implemented RD, but that’s not to say it doesn’t have it’s usefulness. But again, that’s simply my take on it and I have nothing to back it up other than it being my opinion.

Any way you look at it there’s a lot to consider with RD.

Todd

Thomas Kimmich wrote:

But what about functions? Pages with carousel, lightbox-images, magic-zoom, some Twitter and Facebook-stuff, a little bit of JQuery here, a little bit of Scriptaculous there? All that stuff that makes “desktop-version” brilliant and a mobile one a nightmare?

What would I do then instead?

iPhone/iPad redirect - making some useful adjustments regarding design and javascript and you’re done.

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

45

On 4 Sep 2012, 3:18 pm, Todd wrote:

I’m not entirely certain that carousels, lightboxes etc. qualify as
“nightmares” of RD. Such things can be handled elegantly

Yes - sure. Using responsive carousels and stuff mostly based on jQuery for example. Or using .htaccess to make sure to load small sized images for mobile, bigger one for desktops.

I’m also not certain that
redirects are in the true “spirit” of well-implemented RD,

Ahmm - probably a philosophic point, yes. I think a redirect is not responsive, but do we really recognize a difference between a “responsive layout” and a redirected “rearranged” page just by calling this page on the iPad for example? The target of both is to ensure that everything works well.

I know Todd - you’re much deeper in that than an average Freeway-User can be, cause you long deal with hand-crafted stuff. I probably follow your route, but as long as I find a solution, I feel much more safe and comfort within Freeway, especially in its solid framework.

It would be of big interest if a hand-coder is wrapping the basic framework (from the very start) quicker than me in BoxModel using Freeway. This would be a nice challenge :slight_smile:

Cheers

Thomas

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

46

On Sep 5, 2012, at 3:37 AM, Thomas Kimmich email@hidden wrote:

I’m also not certain that redirects are in the true “spirit” of well-implemented RD,

Ahmm - probably a philosophic point, yes. I think a redirect is not responsive, but do we really recognize a difference between a “responsive layout” and a redirected “rearranged” page just by calling this page on the iPad for example? The target of both is to ensure that everything works well.

I’ve been reading so much about RD lately that it’s sometimes difficult not to venture off down that philosophical road from time to time. : ) I’m not implying redirects are wrong or bad practice, btw.

I know Todd - you’re much deeper in that than an average Freeway-User can be, cause you long deal with hand-crafted stuff. I probably follow your route, but as long as I find a solution, I feel much more safe and comfort within Freeway, especially in its solid framework.

Sure, I understand. If your workflow and tool(s) serve the end purpose to your (or your client’s) satisfaction then that’s what matters most. I’m not implying hand-coding is the only way to craft a site, but as you implied earlier FW doesn’t help make RD a straightforward process, does it? There are a lot of FW-centric hoops to jump through to do fairly simple things. Not that it can’t be done but it takes longer than it should.

It would be of big interest if a hand-coder is wrapping the basic framework (from the very start) quicker than me in BoxModel using Freeway. This would be a nice challenge :slight_smile:

As most coders do as a matter of efficiency I have a lot of reusable code so with 1-click I can insert a complete basic page structure, CSS reset, js etc. and use that as a jumping-off point to modify it to the design. But faster than code-generating software? Nope. But fast enough for my needs. Speed is good, but for me control is more important. [Laughs] In a speed contest you and FW would beat me every time, no doubt.

Todd

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

47

Hi all,

There’s a nice RD demo here:

http://www.css-101.org/articles/responsive_design/demos/demo.html

/Omar KN

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

48

Here’s a good “humorous” example of a responsive website

If you’re on desktop make the window narrower and narrower. The widest is desktop, narrower is Tablet/Pad, the narrowest Mobile/iPhone

–

David Owen { Freeway Friendly Web hosting and Domains }

On 5 Sep 2012, at 09:37, Thomas Kimmich wrote:

Yes - sure. Using responsive carousels and stuff mostly based on jQuery for example. Or using .htaccess to make sure to load small sized images for mobile, bigger one for desktops.

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

49

As a bit of a fun I’ve converted a responsive website demo page to a freeway file. There’s a Freeway Template file to download if anyone is interested in working out how it’s done.

David

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

50

Very interesting, I don’t quite understand this yet, but glad to see the reaction. I’m very keen to be able to build this in with the websites that I create.

Elizabeth

On 08/09/2012, at 5:13 AM, David Owen wrote:

As a bit of a fun I’ve converted a responsive website demo page to a freeway file. There’s a Freeway Template file to download if anyone is interested in working out how it’s done.

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

51

Hi all,

I’ve read and re-read this thread over and over again. I’ve googled my butt off and watch hours of tutorials and I still don’t get how to create this effect in Freeway.

I desperately want to make a responsive website, I just don’t know how to start. Do I put HTML items within HTML items? How do I write the CSS stuff to match the items? I am a complete NOOB and have only had this software for a few weeks. I received a response from my first enquiry so quickly that I thought I would try again.

Many thanks to David Owen and Thomas Kimmich for posting your code and information for us all to see. I just wish I was smarter in applying it. If anyone could please give me a few “Idiot’s Guide” bullet points on how to achieve a responsive page, I would greatly appreciate it.

Kind regards,
(Insert tears of frustration here)
Jim

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

52

The problem is that a responsive website is not a good place to start for someone with less experience.

You really need to understand the concepts involved and how to implement them before jumping in there.

If you are still stuck even after all the reading etc that you have done then you are going to have to do more work with FW on conventional sites until you understand what is going on with them before moving to the next level.

Bear in mind that there are many many sites out there (the majority) that are not responsive and instead use techniques to send visitors to mobile optimised versions.

The reason there is no ‘idiots guide’ is because you need more knowledge than that.

If you have downloaded David Owen’s template and are still stuck then work something up based on it and get it online and we can try and help you iron out your issues that way.

David

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

53

I found reading the book “Responsive Web Design” Responsive Web Design, A Book Apart was a great help in understanding the basics (like using percentage based layouts and max-width min-width). Freeway does get in the way a little here and there. My main grudge is not allowing percentages to have decimal points in the inspector palette (are you listening Softpress!). You’d have to resort to CSS to set/override the percentages. Buy the book and model the examples in Freeway you’ll learn a lot.

The stats on the sites we work on are still fairly low on mobile traffic. I reckon we’ve all got a bit more time to get a grip on this.

David Owen

On 15 Dec 2012, at 06:11, “Jim Nation” email@hidden wrote:

Hi all,

I’ve read and re-read this thread over and over again. I’ve googled my butt off and watch hours of tutorials and I still don’t get how to create this effect in Freeway.

I desperately want to make a responsive website, I just don’t know how to start. Do I put HTML items within HTML items? How do I write the CSS stuff to match the items? I am a complete NOOB and have only had this software for a few weeks. I received a response from my first enquiry so quickly that I thought I would try again.

Many thanks to David Owen and Thomas Kimmich for posting your code and information for us all to see. I just wish I was smarter in applying it. If anyone could please give me a few “Idiot’s Guide” bullet points on how to achieve a responsive page, I would greatly appreciate it.

Kind regards,
(Insert tears of frustration here)
Jim

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

54

Greetings,

Thank you both, David and David. I appreciate the feedback and will get more research and learning into place. Once I’ve managed to develop something, I’ll post again with a webpage example if I need help.

Many thanks,
Jim

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

55

FW is definitely not friendly when it comes to making responsive pages. Playing around with Pulse CMS peaked my interest and then I started looking at some frameworks and found Skeleton to be a good starting point - http://www.getskeleton.com

Skeleton requires some basic knowledge of html and css though. When I have a bit more time I will see if I can build a FW framework using the Skelton principles.

Cheers
Marcel

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

56

Hmm - probably.

Much to write (so my few cents in short):

Key Feature: Inline - Inflow - BoxModel:

Pretty nice and easy to achieve if you are ready for this kind of page construction.

Resources:

This forum (list) and hundreds of sublists, Softpress or my series of screencast (subscription required):

http://kimmich-dm.de/wordpress/

Note:

Written now, it is only a static construction. I basically planned to add some CMS right now, but probably I’ll turn this into a “dynamic” one first (not sure…).

Responsive is basically just a hook on certain divs and their floats, certain styles and their size(s). Widths are percentage, heights undefined.

Right now (and here I agree to previous post), knowledge about css and html is required. I struggle currently which place is the best to add those hooks. I personal dislike to add them to into the before closing head area and prefer to add them in an external stylesheet.

“Actionized” I only see a concept of:

The action applied to a div would call a “second instance” of inspector which automagic adds the @media queries stuff and would allow to (re)style float or appearance directly in this second inspector. But this is a crazy idea (just a thought).

One of the bigger caveat is, that this isn’t WYSIWYG anymore (at least not within your page construction) cause magic only appears in browser (or pre) view.

So Freeway is probably not friendly - but only in the sense of its basic purpose. I started with nil and nothin’, even didn’t know what an URL or a FTP is - and these days I started to write my first page in SASS.

Strange but true - and all I know is based on Freeway and in the sense of my use of it.

Cheers

Thomas

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

57

How come this has just re started?

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

58

Probably more ‘ongoing’ than restarted.

–
Ernie Simpson

On Mon, Dec 17, 2012 at 7:51 PM, Justin Easthall email@hidden wrote:

How come this has just re started?

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

59

Since this thread seems to be ongoing, I thought I would share. I don’t know much about responsive design or web design for that matter (more of a print man). But just for fun and to see if I could do it, I played with responsive design using Freeway. This is what I came up with:

http://www.templates4freeway.com/rdtest/index.html

I did this with the help of all who responds to FreewayTalk and a bit of trial and error. Probably not all correct or web standard, but it seems to work.

A big thank you to all. This is a great education site for Freeway and web design. I learn something new everyday from FreewayTalk.

Kim

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

60

Responsive is a matter of fact - so this list will be an ongoing for sure (and hundreds of others will follow - promised :-)).

Doing by trial and error (don’t forget google) is in fact the key to win knowledge - so keep this attitude.

Ahmm - your example:

Basically this is far away from the “responsive thought” (whatever this thought is). Sure - it rearranges boxes, but only through resizing browser-window. The basic thought of responsive to me (these days) is simply:

Display pages the best they can look - independent of the device they are loaded on. On what way you ensure this - I feel myself form-free.

The @media stuff is for sure the most popular, but I still believe, that “redirect” is also possible (and to me the one and only current available possibility for an average mortal non-coder).

Cheers

Thomas

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