Push products, not pixels. Create production-ready design systems, applications and websites with your team in real-time.


Feedback from Crisp on the Media Queries

March 6, 2019 at 6:02pm

Feedback from Crisp on the Media Queries

March 6, 2019 at 6:02pm
left some feedback in our support chat which I've gotten permission to repost (abridged)here so more people can hop in and give their thoughts.
From him:
So far, your interface seems very well thought out! Although Webflow's way of handling responsive screen sizes is super helpful for quickly ensuring each site page & app screen is professional and readible on most devices. Any way we could have the option of adding different screen sizes to the top toolbar? And then could we link media quieries we've made to each screen size button so that when a screen size is selected from the toolbar, the related media query is automatically selected for linking styles to?
From me:
i like the auto-linking/switching, question: if you have that view selected but a corresponding media query doesn't exist on that element what would you expect behaviour wise?
From him:
I would expect a media query to be automatically added to and selected for that element, and then if no styles are added before unselecting that element, the media query would be removed. Does that anwer your question? Yeah Or just having Shift automatically add media queiries to every element, although only have styles in them if one has selected that device before selecting the element, or is in the default-device mode and specifically selects that media query.
From me:
Yes that makes sense, couple things are tricky so lets talk through them.
1) I design from mobile -> desktop. So all my media queries look like "min-width: " and grow. Meaning if I had a mobile device selected I wouldn't want anything added there.
2) So currently I'd say the device emulator we've made is more of developer tool. (ie. designers aren't concerned with S3/iphone 5, they view it as mobile. It's developers who then say "cool mobile design, how's it look on ALL these different (but still mobile) devices). So tying media queries to the device picker doesn't make sense.
what if: as you added media queries to the media query list, a mediaquery switcher (like webflow has) appeared in the tool bar
From him:
A media-query switcher is a good idea! Ideally, though, I would have a preview of what the applied styles look in that media query I've switched to...
Mobile-up (min-width) - couldn't you just set your own media query specifications ~ just not have any specifications for your smallest mobile screen but have specifications for the larger devices on up? One would just need to remember the direction of their style-flow or move your pinned switcher options in the toolbar into a different, matching order. Does that make sense?
Different mobile screen sizes - Ideally, one could pin as many different media queries / device previews as they need to the toolbar.
In summary, there's a media-query+canvas toolbar switcher, that allows one to select any of the media-queries that they've predefined (mid-width 300, mid-width 500, max-width 2000, etc.) and also order these options in any way they like.
If they have a media query selected and select an element to add a style to, the style is added within that media query (as expected).
If they select a media query that has specific dimensions, then the canvas changes to that size, and the style from that media query are applied as well as styles from media queries who are containing that media query, e.g. min-width - smaller/phone-sized media queries, or max-width - larger/desktop-sized media queries (as expected with CSS)... however the user set their media queries.
If there's a media query switcher option which has no dimensions (e.g. a for print-only condition) tied to it, show its styles in the default canvas size, whether that be mobile or desktop, specified in one's project settings as "default dimensions?"

March 6, 2019 at 9:48pm
Great feedback- i'm going to be starting my first Shift project and will try to remember to comment back here specifically on any UI enhancements regarding Responsive
  • reply
  • like