Streaming live at 10am (PST)

Tips for designing mobile first


#1

So if I am designing a sign that is mobile first, that is, most of its usage will be mobile, and most of the design will happen on the mobile portrait veiw, is there any tips or reccomendations regarding the work flow?

I know the styles won't cascade up to desktop, so does that mean I'll essentially have to redesign the site in desktop view, and if I do that, will those changes cascade down and over-write the already created mobile changes?

Thanks


#2

One you set a property for a device, it cascades down to the other devices unset properties. But it doesn't override an already set property.

As you can't invert the cascade, it's preferable to do as much as you can in Desktop.

Now you could also only mind about the mobile and later disable any display for Desktop, and create another project for the desktop version.


#3

Ok, so if I understand correctly, If I design the entire site in mobile-portrait. Then design the site again in desktop, it will affect only the desktop/tablet/mobile-landscape settings?

I know you can't invert the cascade (feature request) but is it possible to simply copy the mobile-portrait design and settings to the mobile-landscape?

Webflow should really think about getting ahead of the mobile-first movement.


#4

Just thinking of a possible way to hack the cascade so you don't lose definitions at desktop... may be worth experimenting. If you think you may possibly use assets at desktop sizes and want the styles to be defined in the cascade you could create a div to act as a page wrapper / container for width and design for mobile-portrait on the desktop size using:

max-width:
margins: auto

and set it to your target width.

I think the benefit would be that it will allow you to design at that width, constraining content and can be adjusted at a later time. It was frustrating to me recently when I defined a bunch of new page content on vertical tablet only to later realize that none of it was styled at desktop. It was even more frustrating to manually transfer all of those style definitions one by one in the designer.

That is a workaround I use to create wider media queries than 992px for desktop (1200+)


#5

@vlogic I'm going on a bit of a soap box here and it's not at you or your post. The "mobile first" thing is in my opinion a web design term that is just wrong. It begs the question of which mobile, a phablet, tiny smart phone, an 8inch tablet, a 10 inch tablet, iPhone 5c, iPhone 6+, etc. I do 90% of my "mobile" usage on an iPad Air. Whew...all that said....I do understand your goal:)

I think any good design starts with planning either a desktop or phone version and then working either direction. Personally, I plan my sites from desktop down as I like work with the graphics and images and then scale down. But you could start a mobile plan and build up then start your Webflow design in Desktop and work down. Webflow makes adjusting margins, padding, image sizes, hiding/showing parts, and scaling text all super easy!


#6

I understand what you are saying and agree with you completely @jdesign - soapbox and all wink The original poster was asking about workflow, since Webflow cascades down from desktop. I get that the whole point of mobile is a hotbed array of constantly changing devices and completely agree that webflow does a beautiful job of fluidly covering those through responsive design. (quick window height preview and fluid or custom breakpoints or range previews being the only add I would love to have as this evolves). Being able to rapidly fluidly design for anything is my favorite core feature of webflow.

My point was that you can preserve the top down styling and work from their plan with a simple page wrap hack even if the emphasis is not desktop. It also allows you to push up beyond 992 and easily adapt / future proof, add additional queries and benefit from preview, capture and export custom styles, etc.

How would you plan ahead and pragmatically approach the cascade if a client's primary goal and referenced design / layout is tablet and phone? Beyond, educating the client, how would you approach that scenario?

Responsive design is somewhat new to me (I guess it is relatively new to all of us). Just posting a tip and looking for any feedback or better methodology myself. Not trying to put you on the spot, but would love additional insight and info if you can give me some tips as well.


#7

Thanks for the tip vlogic!

You know, a few months ago I would have totally agreed with you. But I've done a lot of reading by Luke Wroblewski and I am a convert to a mobile first approach. This certainly doesn't mean ignore tablet or desktop at all, it just means start with your most limited view, and if you can make something truly effective there, its much easier to expand that to larger sizes. Vs making something in desktop, then cramming everything behind a hamburger menu on mobile.

This is a good video by Luke, https://vimeo.com/38187066 and I encourage you to see out his other stuff. He is incredibly smart and has helped me immensely in my design thinking. That video is from 3 years ago and is even more relevant today.


#8

@vlogic The clients I've worked with that are primarily concerned with mobile are few. I occasionally still have to educate clients on the importance of a responsive design and having a site that looks good on mobile persevere However, the clients that have been concerned primarily with mobile already had existing sites that needed redesigned.

As far as how I approached the projects, I simply worked backwards from the mobile idea. Instead of sketching down, I sketched up and used basically the same content – hiding a few pieces of content and images on mobile.

Several years ago, I designed...for a client "alternate" layouts for desktop, tablet, and phones using Adobe Muse. One issue that came up was my client, had her clients telling her the mobile site made them wonder if they were on the correct site. Although the mobile site was fast, had all the same branding (prominently displayed Re/Max logo and Agent Name) and a link to the full site, a handful of her clients mentioned it. From there I started watching how more "alternate" or highly condensed responsive sites converted users compared to responsive sites with full content or limited reductions. From my experience the responsive sites preformed much better so I've stayed with basically just scaling down or up, depending.

Your idea for pushing beyond 992 I'll have to try seems like a good idea. The Wordpress frameworks I've been using allow that to be customized but I found I was still using around 960. Getting off target now but for all the larger screen sizes, I'd love to find a study if people view the web at full screen size or only use a portion. I've found a couple threads/articles on stackexchange but nothing conclusive.


#9