search

inboundnow / retired-leads

Track visitor activity, capture and manage incoming leads, and send collected emails to your email service provider for WordPress
http://www.inboundnow.com/leads/
11 stars 3 forks source link

Issue with Lead Profile UI on small screen. #169

Open atwellpub opened 8 years ago

atwellpub commented 8 years ago

@daprela

Will you take a pause on template development to evaluate the Lead Profile UI and make it friendlier to smaller screens (responsive overhaul)?

It's killing me personally, and I know many people have to work on small laptops. We need to step up our presentation on this front immediately now that we are getting a lot of fresh attention.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/31963233-issue-with-lead-profile-ui-on-small-screen?utm_campaign=plugin&utm_content=tracker%2F260752&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F260752&utm_medium=issues&utm_source=github).
daprela commented 8 years ago

Sure, should I work also on the page with the list of leads, or only on the profile page?

daprela commented 8 years ago

@atwellpub it should be done, please give it a look, I've tested the new code up to small phones and haven't found any problems

atwellpub commented 8 years ago

Looking better already.

I'm testing on a 1280 x 1024 monitor (left side monitor for me) and here are a few things:

And maybe on resolutions this size and below we hide the photo all together. It's a cramped resolution and doesn't work well unless I zoom out on my browser. But cause I do it does not mean others will.

One other thing. The quick buttons for the lead listing page do not handle well in the 1280 width either:

Please feel free to make whatever change you feel will improve the experience.

daprela commented 8 years ago

I also noticed that problem in the conversion path tab. The problem is that the elements are inside span tags that don't have any classes, so they are hard to target.

As for the last screencast, are you sure that it is a 1280 width? I've tested it and I start seeing problems starting from a width of 768 where it becomes a mess. But I cannot reproduce your situation in any screen width. Are you sure that you haven't setup your browser to zoom in automatically the pages? I've done that in my Chrome because I work with a full hd screen and some web pages are too small

daprela commented 8 years ago

The buttons in the leads overview should be fixed now, please test them on your end. Bless the new flexbox element that is a real problem solver

atwellpub commented 8 years ago

Incredible!

Thank you Giulio. The buttons on the lead list page are sitting well for a small screen now.

It's late here and my targeting isnt' good, but from my searches maybe around here?: https://github.com/inboundnow/leads/blob/master/classes/class.metaboxes.wp-lead.php#L1466

atwellpub commented 8 years ago

My monitor is whaky, but it's a standardized monitor. I'm not sure what to think. I'm glad your attention shoared it up.

daprela commented 8 years ago

The conversion path tab was hard to convert. I had to change a lot in the html and the css but I think that the final result is worth the effort. Please check it out and let me know if you find any flaws, on my system the behavior is fluid and adapt to any screen size

atwellpub commented 8 years ago

Conversion tab path looks a whole lot better. The UI itself could still use work. For example smaller fonts for smaller resolutions but at least there is no overlapping and that makes it feel a whole lot better.

DavidWells commented 8 years ago

CSS Flexbox will solve a number of these issues

With new flexbox CSS syntax, it can handle these layout issues and automatically keep things in a row or a column.

See: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties and the demo https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

On Fri, Mar 18, 2016 at 11:50 AM, Hudson Atwell notifications@github.com wrote:

Conversion tab path looks a whole lot better. The UI itself could still use work. For example smaller fonts for smaller resolutions but at least there is no overlapping and that makes it feel a whole lot better.

https://camo.githubusercontent.com/1024d65304c13501947405668871a9b272b3effe/687474703a2f2f636f6e74656e742e73637265656e636173742e636f6d2f75736572732f6164626f782f666f6c646572732f4a696e672f6d656469612f63653336643765652d353432642d346561642d393764302d3233313635636665316533362f323031362d30332d31385f313335302e706e67

— You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub https://github.com/inboundnow/leads/issues/169#issuecomment-198492162

atwellpub commented 8 years ago

Used Flexbox to build a landing page template recently. I like it.