[Pro] Responsive Woes

Hi guys,

honestly, haven’t had the best night ever, not sure what happens and what to answer - so I’m deeply grateful for your words. Sometimes I do hard playing the:

<main id="proFreeway" role="badass">

I still am not a hundred percent sure what you mean by “it should be easier”, James.

My understanding of it is, that we have in total two “gestures” available.

Insert → whatever Element available in the context menu

or double-click into the workspace (or any other already placed element) so you see the flashing cursor and choosing then:

Insert → whatever Element available in the context menu, tables included.

I instantly hope, that you agree that this has nothing to do with any further knowledge - except of knowing that both gestures are available in your app and that they are even combinable.

So far so good: Without knowing anything more, you’ll recognize some differences in behavior of them both and you furthermore recognize different settings within inspector. The one element can be placed on whatever position within your black rectangle while the other behaves kind of unreachable and undraggable. Even more - it is tacked to the top left.

Obviously, it is gesture number one which does make much more sense. Because you can now arrange it whatever you like - up to overlapping it with other items placed the same way. This is excellent. You can even make them fixed in position.

The other one is weird. You can’t drag it around - and there is no chance to position it from top, left, right or bottom. This element must be broken somehow. All I can do is set a width and height. And there even appears a funny, not understandable expression called margin within the inspector.

Interestingly enough - the other funny expression called padding is available for both. So far so good (or bad depending on the point of view).

Let’s have a look into other applications available:

All of them somehow don’t give you a real choice. By default you’d place your item by gesture method number two. So you place them somehow static. As far as I understood “Stacks” in RW are ready prepared (pre-combined) elements - covering specific need. A gallery element, a 3-Column grid, a Table-Element, Cards …

Back to Freeway, Backdraft is the most comparable product to this approach. It has those basic elements (1-grid, 2-grid …). It is still the most used Framework for some good reasons. It’s not as static as a template. It allows decisions. Decisions which requires only two things:

Using the required gesture - and a plan.

The plan is the biggest difference between yesterday and now:

If you choose the 3-grid module, you decided to wrap existing content into three parts. The decision doesn’t happen in Freeway, it already happened before. So it is (to my understanding) the design ruling the framework.

But whatever it is:

Both gestures are reachable, reasonable and doable without knowing any line of code. It is just knowing your application. And this is making me still sure, that you can create content without knowing any line of code - such as our manufacturer promises.

Point is, that WYSIWYG is coming from “static”. DTP is static, cause you create a leaflet where you place text and images straight to the point. And it won’t change because Input (QXP, InDesign …) won’t differ to Output (the leaflet). An image placed 5mm from top and 5mm from left with a specific dimension will be reproduced exactly the same way. So for many years we tried to transfer this 1:1 to a webpage.

But this transfer required a lot of assumptions. We assumed the width of devices. We even assumed heights. We assumed that 12px is the best readable FONT-size - or we assumed that it is the “nicest” design. We assumed, that even graphic-text is the better choice - because it’s the best match to clients CI. Short said: We transferred a leaflet to the web. I remember our all-time discussion about ideal page-widths.

Today we know that there are masses of different devices out there, and masses of different user-expectations and behavior. Our leaflet should be presented an all of them. One thing helped me a lot to understand this issue:

Say, there is a medium that can be pulled and pushed however you want. It would be clever to print it as small as possible, and if it is in need to have a bigger one - simply stitch it to the required size. One problem left: Making things bigger can blur its content - and it can even break design. So a leaflet is rarely useable as a poster. And there we are - we have to make decisions. It will be a dynamic decision.

In Freeway terms spoken:

All the things we defined in absolute values - we have in a very first step to define in relative values. Content wrapped in an item of 100% width will fit on every device available on this planet - no matter how tiny or big it is. More complicated is the situation of a 3-grid. Each single width is 33.33%. Keeping this up down to the smallest device-width may break your design. So we would re-arrange the columns to 100% width - one below the other. This is a design decision - perfectly supported by Freeway - because you can discuss design.

Take all the discussions around the theme: “ScriptyAccordion” and “ScriptyCarousel” - how do I create the things in Freeway? Book filling stuff. Mystery for years. The one requires some inflow-construction (Huh - EVIL), the other kind of. Years of discussions because things get suddenly more complicated? No - things are as they are.

My personal summary:

I used two terms so far: Gesture and Design. Placing items and arranging them is not a matter of application in use - it’s a matter of what your Media requires. The media is Web - and its requirements rules the way our app behaves.

Before I follow Ernie in holiday let me quick give you note what I basically planned:

This is my current project:

https://dl.dropboxusercontent.com/u/8231701/cdn-digitalmedia-themes/theGridMaterialz/index.html#/

My plan was, to prepare this and make it available for the community. It’s a huge bunch of work and it is based on the idea, to create all content and basic prettifying within Freeway. All the resources are placed somewhere CDN like - available for everyone and free. If you need a special function, it’s just one class away. Even actionable to some degree. Only one real requirement left: Gesture. All you see on this page is NATIVELY created - no markup, no source code snooping or other scary stuff. PURELY gesture. And I even currently using it for live projects. And it works (mostly).

Furthermore, I prepared a huge screencast showing you guys how I develop things. Just for fun and for your interest. It’s 60% done (35 minutes long so far). Cool plan meets no interest - so I have indeed to review my strategy.

Not to explain you the world - just to show you, that Freeway can be used in a highly professional way. Even without taking away the basic idea: Having fun creating content for web.

That’s where I’m coming from and that’s the things I’ve learned since entering this audience in 2009.

Well - my longest list ever. And enough stuff for minding on. Wish you all the best.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at: