The more I play with Responsive Design the more I dislike it. The concept is superb! But the way to realize that concept is a nightmare! That’s why I’ve deferred thinking about it too deeply until now. And I am only pondering it now because stupid Google is sending me emails about how my existing site is not suited for Mobile.
I hate code. That’s what brought me to Freeway 2 back in 1999. I am a visual designer. I know what I like when I see it. That’s why tools that have no WYSIWYG model remind me of early 1980’s DOS text editors. MacWrite on the Mac changed everything in 1984. Freeway is the MacWrite of “normal web design.” But when it comes to Responsive design, I feel I’m in a DOS text editor. Responsive is like getting my neck broken in a car accident and being able to see but not having my body respond. I mentally know what I want the page to look like every step of the way as the browser window is fully expanded on a Desktop PC and as it collapses. I just cannot for the life of me figure out how it make Freeway do what my mind wants Freeway to do.
I downloaded the BackDraft DEMO to see if that would get me started. It did. I was able to create a basic Responsive web page. But unless I just fall lock-step into the pre-determined copy/paste structures it offers, I run up against problems. Modifying the template parts and then refining the look of my mods is hard.
I see that Thomas has some nice videos available about GridMeister (i.e., how to properly design Responsive sites in Freeway), but I’ve not yet decided if I really am up to it. I need convincing, hence this post. I’ve exchanged one email with Caleb about BackDraft2, but since he’s on vacation now I’ve not had the chance to follow-up with him on the details. But I’m sure there are plenty of BackDraft2 users here and those of you with Responsive experience (like Thomas) who may be able to chime in.
Please know that this post is not a complaint about Freeway or about BackDraft or GridMeister. I am one of Freeway’s biggest fans and I think BackDraft and GridMeister have their importance place. I am just very frustrated, knowing exactly want I want the web page to look like and do but being powerless to design it that way. I can design virtually anything on a site that is NOT responsive, which makes my frustration with Responsive design even worse. I presently hate Responsive Design with a passion because it’s just not intuitive how you go about it in Freeway.
Perhaps you can change my frustration into love. Toward that end, I would appreciate it if you could please look at an example 1-page site I created with the Backdraft DEMO. I consulted Caleb once via email and Thomas helped me a bit here on FreewayTalk. But despite that assistance, I still have a long way to go, as you will soon see…
VIDEO ScreenCast with voiceover:
Cahoots — Ann Arbor Coworking Space
The Freeway 7 Pro document that I am using (exactly what you see in my video):
http://cl.ly/1u3k0x382h3B
Any thoughts, comments and kind assistance you can provide would be greatly appreciated. And when replying, please keep in mind that I am surely not an isolated case. I cannot imagine that I alone am having such trouble with Responsive Design in Freeway. Surely there must be others too who, like me, have been successful in regular web design but not in responsive. Since responsive is clearly “the future” and since the future is now, this is a topic of importance. I look forward to your kind replies.
Thank you,
James Wages
P.S. Please be gentle. Feel free to be verbose and do a lot of hand-holding. The older I get the smaller my poor brain seems to become.
On 6 Apr 2015, 8:23 am, JDW wrote:
I spent several hours this afternoon tweaking the row of 6 pics. The way they collapse is improved over what you see in my opening post, but I now notice that the Japanese text above each picture, which is supposed to be CENTERED, drifts to the LEFT according to browser window (or screen) WIDTH. I made a screencast of that (no sound) here:
Cahoots — Ann Arbor Coworking Space
And here is the updated Freeway 7 Pro document:
http://cl.ly/0b0S3w1U2O1O
Once again, I look forward to hearing your thoughts.
Thank you,
James Wages
On 6 Apr 2015, 8:38 am, JDW wrote:
To supplement my previous post, here is a SCREENSHOT showing the shifted Text:
http://cl.ly/image/3y432d1Y2W3t
(It shows the iOS Simulator running the Retina iPad in Portrait orientation.)
But take note of ONE MORE PROBLEM in that screenshot. The 6 pics are not perfectly centered within their white container box. They all are shifted to the right. (There is a wider gap at left, and narrower gap at right). Why? How does one fix that?
Thanks,
James Wages
On 7 Apr 2015, 8:18 am, Thomas Kimmich wrote:
OK James,
so let me open this honest and polite thread that I expected since 2012/13, when I started doing responsive design using FW 5.5.
####The aha moment:
All depends on framework and construction ( http://freewaytalk.net/thread/view/127420#m_127918 ).
####The development
I recognized, that FW - which isn’t perfect at all, requires a special construction. This is just because Freeway’s workspace is box-sizing: box, while the browser requires box-sizing: border-box. To adjust this, some are used to correct this via action. Me not. My construction doesn’t require any adjustment.
####The downside
No need of box-sizing? Yep. But at the expense of “using some DIVs more” - some would call it DIVitis - I call it construction.
This is the example I did (very raw - but haven’t had more time):
http://backstage.kimmich-digitalmedia.com/testings/kiramek/index.html
####Some general notes:
Responsive design (if it is design) is a mixture of two disciplines:
The technical opportunity to tell a browser: “At a certain browser-window width (breakpoint) - do something” and the designerish decision to do or not. So it’s not really a WYSIWYG - It’s an anticipation of what will happen if …"
All we try to do is presenting our content on every device the best we can - or at least without any side-scrolling which can cause hidden content.
Cheers
Thomas
Footnote:
The method I used is based on GridMeister - or at least my entire knowledge I have. Please bear with me, that I’m not willed to share the file. But a good thing to do is “inspect items” via CTRL-click into the browser window.
On 7 Apr 2015, 8:47 am, JDW wrote:
Thomas, you certainly are the ResponsiveMeister!
I spent hours and hours today too, but my efforts did not come close to what you achieved. You managed to fix the text problem too. The text above your 6 pics never gets shifted to the left. But in my FW document (based on the Backdraft2 DEMO), the text shifts to the Left as I narrow the browser width. And for the life of me, I have no idea why.
The only thing consistently quirky in your design and in my design is the Search field. If you shrink the browser width to the narrowest point and then click inside the Search field, the field gets smaller. It’s odd because the opposite should occur. When you click inside a search field, it should widen (or do nothing at all).
Thomas, the problem I have is that I need to create a site and then be able to edit it quickly. I can do that with my existing Freeway sites. Editing content or adding content is fast and easy. There is no guessing. I know what will work. But Responsive is different. If the editing of a Responsive website takes as much time as the initial creation, I’d be a fool to design anything Responsive! In such a case, I am more than happy to ignore Google’s warnings about my site if it helps me stay sane!
When I click on the smaller breakpoint tabs 720, 570, 480, 320, WYSIWYG is totally dead. Most every box is overflowed and cannot be seen. You can still select items using the Site Panel, but cannot see your changes until you Preview. It slaps me in the face. “Intuitive” is dead.
One thing I see is that whatever you are doing WORKS, Thomas. You have “the magic” that I need. The only way I am going to get my head around this is to buy a Lounge ticket and watch your videos. When I have time, I will do that. But I am skeptical whether I will “enjoy” responsive design after I watch your GridMeister videos. I may learn how to do Responsive but still hate it with a passion. That worries me because I have always enjoyed using Freeway to design my non-responsive websites. Freeway has been my fast-track to web design. I am not eager to jump on the slow-track.
Thank you,
James Wages
On 7 Apr 2015, 9:50 am, Thomas Kimmich wrote:
On 7 Apr 2015, 8:47 am, JDW wrote:
Thomas, you certainly are the ResponsiveMeister!
Sounds excellent :-), thanks - it’s the result of years of trying and doing - fail and success.
I spent hours and hours today too, but my efforts did not come close to what you achieved. You managed to fix the text problem too. The text above your 6 pics never gets shifted to the left. But in my FW document (based on the Backdraft2 DEMO), the text shifts to the Left as I narrow the browser width. And for the life of me, I have no idea why.
Difficult. I first tried to tinker in your fw-doc, but then decided to quick wrap it new. So honestly I can’t tell you what’s wrong! Nor I am allowed or authorized to judge this - apologize.
The only thing consistently quirky in your design and in my design is the Search field. If you shrink the browser width to the narrowest point and then click inside the Search field, the field gets smaller. It’s odd because the opposite should occur. When you click inside a search field, it should widen (or do nothing at all).
This is something that we should be able to fix as well. It’s just that we have to wrap our external code into an external @media query. As well here: At the smallest device, I decided to make the search bar 100% while the focus level is still inherited from the basic css declaration.
The rest I’ll try to answer a lil bit later.
Cheers
Thomas
