Hi, I’ve hit a brick wall and can’t seem to find a work around - it’s become very frustrating.
I have designed a landing page - all works well in desktop with a mouseover effect on a grid I’ve designed.
I have also created a secondary interaction for touch devices.
My issue is that when viewing the test site on ipad in a landscape view it still shows the desktop version - therefore rendering the touch interaction obsolete and making UI bugged!
Is there a work around as those who view the site this way won’t see it as its intended if viewed in landscape on an ipad/small screen.
Can we edit the breakpoints?
Also if anyone has feedback for the design of the site I’d be interested to know your thoughts.
There is currently not a built-in function to alter the breakpoints. If this is a feature you’d like to see, please give it a vote(s) over on the wishlist.
There really isn’t much you can do about it. I actually came upon the same thing myself earlier today. If you’re exporting, you can edit the breakpoints within the CSS file, but if you’re going with Webflow hosting, you’re not going to be able to do that.
We are also talking about Touch vs Non-Touch devices here and not just breakpoints.
This is a pretty complicated thing for websites to achieve. A large company like Apple is only just now starting the exploration process of bringing a handful of iOS touch apps to macOS desktop. Microsoft has been doing this for a while now by forcing Windows to fit both camps simultaneously. This however led to them loosing market share in mobile and fragmented/inconsistent UI on desktop. I mention all of that to say that optimizing for touch and point’n’click is a difficult problem.
My method is to find the happy medium for a website that conforms to standards on both platforms while still trying to surprise and delight whenever possible. In regards to interactions, this is what I’ve found.
Keep Hover effects very simple and minimal. Usually an opacity or underline effect. This way if part of the animation is viewed on a tablet the effect is not jarring or cause the site to appear broken.
Utilize Scroll, Page Load, and Click(for non-links like modals and components) effects since these 3 types are all viewable and optimal for visitors on any device size and type
I’d be interested to hear any other “best practices” in regards to interactions and accommodating both touch and non-touch device without an overload of custom code injection.
Any news?
Is there no way to query for touch-screen or touch device and bulit specific webflow interactions for that?
To just have hover effects on everything that isnt touch no matter the screen size?
