Hiding header text on mobile Luminate donation forms

Ryan Hyde · October 2017

Hi folks,

At BBCON last week, it was implied that header text on a donation form in Luminate could be automatically hidden when the page detects a mobile device screen size. My main web guy hasn't been able to find any documentation on this yet. Have any of you heard of or implemented such a thing? I would love for our mobile forms to be simplified and easier to scroll through without convincing my communications team to just cut out all of the text at the top (we're a little verbose around here...)

Thanks.

Philip Nawrocki · October 2017

Hi Ryan,

I think you are looking for mobile-responsive design.

You can use media queries to show/hide items depedning on screen size.

You don't just 'turn it on' you will need to edit the code in your pagewrappers to account for this.

There are responsive donation forms in Luminate, so all the fields will shift, but your pagewrapper will still need to be edited to account for the mobile portion.'

Send any questions you have.

Phil

Ryan Hyde · October 2017

Yes, we're definitely looking for more mobile friendly design. Our LO forms are mobile responsive, but like you said, that mostly just changes the text placement and alignment of objects.

I'm not very fluent in web design stuff (I'm an RE guy, not an LO guy, when it comes down to it). I'm going to show my web guy what you said here and see if that leads him in the right driection.

Thanks!

Ryan Hyde · October 2017

And yes indeed, I said "media query in pagewrapper" and a lightbub went off. He's taking this idea and running with it as we speak. Thanks again!

Ami Defesche · October 2017

Ryan Hyde:

Yes, we're definitely looking for more mobile friendly design. Our LO forms are mobile responsive, but like you said, that mostly just changes the text placement and alignment of objects.

I'm not very fluent in web design stuff (I'm an RE guy, not an LO guy, when it comes down to it). I'm going to show my web guy what you said here and see if that leads him in the right driection.

Thanks!

Your web guy is likely to already know his stuff, so if he's all set--disregard. But I found this reference pretty useful when I was first digging into responsive email: https://templates.mailchimp.com/development/responsive-email/

Hope it helps!

Ryan Hyde · October 2017

And it's all figured out and we'll be implementing this on all of our forms tomorrow!

And I'll pass this link on to him, Ami. I don't know if he'll know everything on there or not, but I know he won't take offense if he does, so all's well.

Thanks again!!!

Hiding header text on mobile Luminate donation forms

Comments

Categories