Mobile-first media query support

I have been finding it hard to work with Webflow when working under the idea of Mobile first, meaning the design anchor is with the mobile experience and the other experiences (tablet, desktop) will flow from there. Anyone have any tips or ideas?

This tool is awesome just wish we could reverse the flow of the styles (I hope that made sense).

Matt G

  • Yes, I really need this feature!
  • No, I feel that this is not as important as other items on the wishlist.

0 voters

1 Like

it does and i agree…

I’ve been able to create websites on every platform so far.

Mobile first hasn’t been an issue for me.

However… the lack of ipad support is frustrating. Several of my clients have questioned me about it.

Prior to Webflow - (and I still use it)… I was developing with Boot Strap… and the ipad was not an issue.

I (mainly) switched over to Webflow because of it’s ease of use for designing (I love being able to use visually)… and I am hoping Webflow addresses the ipad issues soon.

Creating the website isn’t the problem. The issue lies in that Webflow creates from the desktop down to smaller screens. You can’t “easily” start your design with the portrait mobile dimensions and work your way up to the desktop.

You state “mobile first hasn’t been an issue”. How do you manage the styles without having to manually create them separately for each size as you move up from Mobile.

I’m thinking; perhaps, we are on different tracks… and you are trying to do things of a different complexity… beyond what I’ve needed Webflow to do ?

I haven’t had any issues with managing styles across different devices… and I haven’t needed to create device dependent styles in Webflow. Webflow handles it’s for me.

In addition to the visual part… style management is part of what I like about Webflow.

When I use Boot Strap / Foundation / etc… I have to manage everything by myself. And that can be a PIA.

Normally… I use Webflow for prototyping - then I export and rip it apart… as mostly what I do is application / database development via php or coldfusion.

Not sure if my response helps.

This is my biggest gripe with Webflow. The fact that the phone landscape view in Webflow designer is equivalent to the actual iPad portrait mode, thats very frustrating!

I might not be explaining myself clearly :slight_smile:

We use it for prototyping as well and then it goes off to the developers.

The normal flow within Webflow is to design your desktop website and then tweak as you move down through the different devices. Normally that works great and, like I said before, I really enjoy working with this tool.

The problem I am having is when we are working/designing with the mandate that the mobile experience is the primary focus, you can’t start with the mobile design and work up to the desktop with the same ease and efficiency that you can working down from the desktop. It becomes much more manual and cumbersome as the styles you create under the mobile view does not flow up through the chain. I can certainly still work through it but it’s not the same experience.

What would be great would be the ability to state which way you want the CSS to propagate. Either from the desktop down (current format) or from the mobile up.

“the styles you create under the mobile view does not flow up through the chain”

oh. now, I understand. Sometimes, my brainfarts happen uncontrollably.

What you are mentioning… is a huge negative about Webflow that I found right off the bat.

Webflow is not a Mobile First environment… I wish it was. It’s a Mobile Friendly environment.

Better than anything else out there that I’ve seen / used.

Hand-coding (ie: Bootstrap / Foundation / etc) will (currently) get you a much “powerful” interface… but the availability of Webflows UI is (for me) is a willing sacrifice / trade-off that I make. If I need more control over UI/UX… then I turn to the originals… bootstrap / foundation.

What would be extremely cool - is if they allow the designer to select the direction of the flow…

ie: I want a desktop app that flows down to mobile… or a mobile app that flows up.

Once you select the flow - you cannot change it.

Currently… (as you know) you have to create the desktop style - and then manipulate the style on the way down.

With that… i’ve kinda “just dealt with it”. It’s not the way I’d like it be… but maybe Webflow can add that feature.

1 Like

Hi @Matt_g,

I totally understand where you’re coming from and we’re still trying to wrap our heads around mobile first (in terms of the UI/UX around it, not the concept itself). We will definitely have the option in the future, but not sure how long it will take to implement honestly.

Ideally, we’d like for you to be able to specify different ranges in your media queries, change the order of the flow of styles, and other mobile-first design workflows.

Will keep this thread updated as things unfold. :smile:

@Revolution, can you tell me a little more about the ipad support issue? I may be able to help or bring more details to the dev team’s attention. Currently, the iPad media query is set to affect 991px and below. The mobile landscape affects 767px and below. Let me know if you’re experiencing something different. Happy to help!

Cheers,
Will

1 Like

Another thing that I find irritating… is the branding (I know this off topic)

But I wish they would add 2 new fields at the project level in the dashboard.
Project ID, and Project Name.

…that would over-write any and all references to webflows branding in the source code.

ie: if my project id was “rev”… and the name was Revolution
the system would replace webflow.css to rev.css
-and This site was created in Webflow. http://www.webflow.com to This site was created by Revolution

As a developer / designer… I don’t want other people knowing I built it in webflow.

I want clients to think “this was very hard for to build” - and thus… “that’s why we hired you”.

2 Likes

transitions on scroll is huge. currently disabled for ios.

also there’s no landscape tablet.

EDIT: will play with landscape tablet again… maybe I missed something

2 Likes

Sounds Good - I think this should be a key piece to support the responsive design space. Will keep my eye open for your updates.

Thanks,

Any update on this?

If you guys can implement mobile-first CSS generation AND add top-level styling, which I know you’re working on already, then there would be zero reason to hand-code for a lot of different scenarios. Those would be killer features and would be an enormous leap in Webflow’s capability and usage, in my opinion.

Agreed. I’ve just taken on a job where client is specifically asking for a mobile-first build (they have ~80% mobile usage). All I’m thinking is it’s a real shame I can’t use webflow…

The styling issue that I would lie to see fixed is not being able to edit nested styles without re-adding a dummy element, giving it the class name you want to edit then deleting it after.

Hi @matt50 You can edit nested styles.

1 Like

I am no back-end developer, but I would think it wouldn’t be too difficult to essentially reverse the way in which Webflow generates it’s media queries. As it is now, WF uses max-width for it’s queries… I would imagine that switching that to a min-width for a mobile-first approach would be doable. But again, I am sure this is more complicated than it sounds from a backend perspective. Still would be a killer feature, though.

1 Like

:smile: has that always been there?!

great news, thanks @Davidn!

Any update on mobile first design using WF? I mean, mobile first is the wave of the present! If WF can’t be used to create an optimal experience for mobile users, it is (unfortunately) a deal breaker. The upcoming data-driven capabilities sound nice, but if the website experience can’t be optimized for mobile users, it’s an outdated tool.

:frowning:

-Steve

Currently Weblow is just good enough to prepare mobile-only prototype and scale to bigger devices after export by other tools.

Any update on mobile first design using WF?

Currently, after designing mobile first markup we must manually copy all the values to “elder brothers”. It’s doable but is really inconvenient.

Really easy (technically) solution would be unlocking the viewport min-width of the desktop type of markup. We just could make the viewport small enough to look like mobile and design how we want without you making huge changes in your media queries maintenance.

(now 992px is the minimum)