search

TypeNetwork / variable-fonts-info-site

A brochure website to demonstrate the benefits of variable fonts
https://variablefonts.typenetwork.com
Apache License 2.0
36 stars 12 forks source link

Deal better with small screens #64

Closed ghost closed 5 years ago

ghost commented 5 years ago

Many of the layouts, particularly the examples, don't work well on smaller screens. @dberlow asked me to post this screenshot: image2

Quick fix could be to set the meta viewport tag to just have the phone zoom out to desktop size and make people zoom in to read it.

ghost commented 5 years ago

For now, I've set the viewport width to 1024 for mobile devices.

dberlow commented 5 years ago

forcing users zoom = Last resort.

To specify portal-specific collapsibility of the type spec is resort one.

... to use vars, A combination of smaller, narrower and lighter.

Which pages do you currently think of the hardest?

On Feb 27, 2019, at 3:36 PM, Chris Lewis notifications@github.com wrote:

Many of the layouts, particularly the examples, don't work well on smaller screens. @dberlow asked me to post this screenshot:

Quick fix could be to set the meta viewport tag to just have the phone zoom out to desktop size and make people zoom in to read it.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

ghost commented 5 years ago

Side-by-side are the hardest, e.g. HEADLINE ONE / TWO / Three, or the Slippery Service newspaper-style layouts.

Yes it would be great to specify the type in a scalable way... which basically requires actually laying it out at various widths because it's all trial and error for the most part.

ghost commented 5 years ago

Difficult ones:

image

image

image

image

image

ghost commented 5 years ago

Wrong button

dberlow commented 5 years ago

It’s not gonna be trial and error by the time I’m finished with it;)

On Feb 27, 2019, at 5:30 PM, Chris Lewis notifications@github.com wrote:

Side-by-side are the hardest, e.g. HEADLINE ONE / TWO / Three, or the Slippery Service newspaper-style layouts.

Yes it would be great to specify the type in a scalable way... which basically requires actually laying it out at various widths because it's all trial and error for the most part.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

ghost commented 5 years ago

I've taken the "artificial" large viewport setting out, so it will properly shrink down with the screen now. Will start work on the problem areas.

ghost commented 5 years ago

Updated the styles grid for narrow screens. It's not super pretty but it does the job. localhost_4000_topics_styles_

ghost commented 5 years ago

Side-by-side editorials also now go vertical when there's not space.

ghost commented 5 years ago

Headlines still need some work but everything else here is done.