[Pro] converting to a responsive website

(Ive put this at Dinamo forum, but Im thinking perhaps is more for this forum…because the main question is about resposive webs with freeway)

Hello. I have been asked to transform a webyep editable website I did some months ago into a responsive one. But I dont know if this is possible… As example, the web I did is http://www.turdion.com/ and the web they give me as an example is http://elviajedeshila.com/.

The quid is that I heve never made a responsive web with freeway, but now, with this added item (webyep) Im a bit lost. SO, I ask as well: what is the easiest way to make a responsive web with freeway?

Thanks a lot.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

My own opinion would be to use the excellent Backdraft, even better now it is free - http://getbackdraft.com
It also gives instructions how to utilise Webyep within it.
http://getbackdraft.com/docs/webyep


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

is it possible though to add a backdraft page to an existing website ?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Yes - probably easiest to open a new FW Backdraft document, create your page and then copy/paste into your existing document.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Before you start to think about the technical way building a responsive project, make yourself clear, what responsive basically is and why we do this.

Some basic things worth to mention:

  1. A responsive page neither knows width nor height. This is just because a sizes are defined in relative units.

  2. Because you can use 100% of device width, you’re able to bump up font-sizes from 13px to min. 16px. Build grids where some parts perhaps take 2/3 others 1/3 or whatever.

  3. Webdesign is a matter of semantics. It’ll mean that a page preferably starts with an outline which tells a story for maximum UX.

  4. No inner scrolling anymore!!! Yep - it’s redundant at all. Why? A page doesn’t know a height. If you need scrolling - do it, but leave it with the user - and don’t make this a designer’s decision (constraint)

Pull out ol’ Photoshop (or similar) and try to quick setup your page you want to make adaptive in a doc-size of let’s say 320px wide and whatever height). You definitely need to re-arrange and re-size your items, right? Well - something similar you would do in Freeway as well.

But you may recognize that your “design” isn’t really worth to think about making it responsive - this MAY happen.

For best working projects, you anyway need to switch your construction method from “drop&drag” to full inflow (inline aka BoxModel). And there we are:

Wether you choose Backdraft (as a Framework builder) or a template (As Is) - both are helping you getting the gist of the technical requirements.

Review you strategies both way:

Design and Code - literally!

Finally my judge to the OP’s question:

It is NOT possible to convert a project from static to dynamic!!! This judge is from investigating hundreds of Freeway projects.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Perhaps an addition regarding CMS:

It doesn’t matter at all using a CMS or not. All you need to make sure is what “output” a CMS or its module produces. In your case, have a look at the gallery. As far as I’m oriented, the WY gallery outputs a table - and a table is hard to make responsive (in fact I know only one person on this board who tinkered with responsive tables).

But it might be that the current version has a different output.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hello. Thanks for your answers.

Thomas, you are great teacher, but I cant understand some of the ideas because of my poor english…

  • So, I need to build the web from zero. I will do it.
  • I have the idea clear. responsive web is not so “pretty” but its functional in all devices
  • I have understood about the autosizeable items and no inline scrolling, and the gallerys,…

The example I gave elviajedeshila is a really really simple web. SO, to make a web (from zero) like this, do I need to use the backdraft software, or can I do it just with Freway and webyep actions?

And the main qestion: the buttons, must be they be like in elviajedeshila, that are with a clour background? Or can they be floating over the graphic background like in turdion, and if you open the web in a computer browser you can see a version, and if you open it at a mobile, you see the other version?

Thanks again.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Thommas, another thing abput the buttons. In your web kimmich-digitalmedia, if you make the explorer window narrow, the buttons make the same as it elviajedeshila, because they disappear and appears 3 lines to access the menu. You have the buttons over white background, like apart from rest of the page. This is my question about button, if can they be more integrated with the web…?

Thanks a lot


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

So let me teach :slight_smile: a lil bit further:

###Backdraft

is NOT!! a software, it’s a FreewayFile with pre-built modules, stuff and functionalities. So it’s always a good place to start - especially if you are not aware of the different positioning disciplines.

###Navigation

So if you talk about “buttons”, you preferably should talk about a navigation-menu. It is important to know, that a so called is a necessarily part of any website - having none, it may happen that google stops loving you - literally. Basic spoken, it’s a decorated list like so:

http://www.kimmich-digitalmedia.com/articles/css-menu-challenge#more-321

###Start from scratch?

This is just my personal opinion (which doesn’t matter at all):

Yes - you’d do good. Try to first figure out the story and write the storyboard.

###Responsive is not pretty???

Well - we’re doing web design which is anyway a different discipline than being pretty. We are talking about content not its decoration. So what is pretty?

I think this is:

alt text

Don’t take me wrong here, but it’s a matter of fact, that the ability of creating dynamic content is the biggest move within the last decade and the one people really need - Yes - it’s needed by your audience and clients. You’re part of the service industry.

I elsewhere mentioned it so far:

A lot of FreewayPro designers will escape from the landscape just by refusing the modern times. And it’s not the fault of any app, circumstances or any bad luck.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Thanks a lot… again… Iwill try with Backdraft, Webyep and Freeway. Thanks for your link , and your advices.

So, if a navigation menu is a decorated list, can you style it with no bakground? Imagine that in elviajedeshila, the navigation menu is over the drawing. Is it posible? mmm, I will try…

Thanks again


about pretty…

Dont misunderstand me, but when I see a responsive web I have the sensation we are getting back 15 years, speaking about design. I started making webs at flash and director, with action script, and didnt need to know what a html tag was… (exagerating) before than cálico Electrónico and youtube appeared… and with the years I renewed my knolwledge, but Im slow…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

You’ll find it out for sure. The CSS Menu Action is standard for several years now - daily routine if to say so.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hello. I thought I posted this question 2 days ago, but it is not…

Well, my question: Ive been having a look at Backdraft, and reading about responsive sites with Freeway in the forum and manuals, and at this point, …

…whats is really Backdraft for?

Because it seems that you can perfectly make a responsive web with Freeway at all… and the webyep items will performance in the way you set them, adjustable sizes and things like this. Isnt it?

Thanks again


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

On 28 Jul 2015, 7:44 am, rakeljuice wrote:
… it seems that you can perfectly make a responsive web with Freeway at all… and the webyep items will performance in the way you set them, adjustable sizes and things like this. Isnt it?

It is.

Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

ok, thanks a lot.
I prefer to work on a main tool…
:slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Ive found a responsive website with the buttons over transparent background in it big version. When you rezise the window explorer, or open at a mobile, the opaque menu appears. Is doersdf (dot com). So its possible… now I need to manage with FW


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

And yours, Richard… I like it more, because at mobiles the buttons are still over the background, not with the boxes…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Well, you should take a look at my site in beta, which I try to complete … if only I could find the time: http://beta.ontwerpzaam.nl/ontwerpzaam/index.html

It’s just a javascript that adds and removes a class to my existing nav bar, that class applies a different background (rgba color, background image, etc.). Although the implementation is pretty straightforward, you will have to add all necessary styles to your stylesheet via the tag field in order to force Freeway to add these ‘unused styles’ to the published stylesheet. After all, you won’t apply the styles within Freeway at all, the javascript will call for the styles.

Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Try scrolling up and down while your cursor has activated a submenu, you’ll like the animated transition of the background-colour which turns into the opposite color scheme.

Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

On 28 Jul 2015, 10:02 am, rakeljuice wrote:

Ive found a responsive website with the buttons over transparent background in it big version. When you rezise the window explorer, or open at a mobile, the opaque menu appears. Is doersdf (dot com). So its possible… now I need to manage with FW

http://www.doersdf.com is actually a very nice web site design as well … I love the clean set-up :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

thanks for your comments


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options