Standardized Responsive Design

DIGIT-PSB / DIGIT

repo to support website development for the DIGIT program at Penn State Erie, The Behrend College.

https://digit-psb.github.io/DIGIT/

GNU General Public License v3.0

2 stars 0 forks source link

Standardized Responsive Design #8

Closed WillStill closed 1 year ago

WillStill commented 2 years ago

Finding best practices for consistency on the site.

What to find:

At what view width should all pages change from a mobile view to a desktop view (media query)
Should desktop or mobile view be used for tablets
What units are used for text/images/other

Here's the site I've been using to get a general idea of screen sizing.

WillStill commented 2 years ago

My preferences are

Mobile should break off at 455px, any changes needed for monitors are made at 960px (max-width: 455px; min-width: 456px; min-width: 960px;)
Tablets align with desktop view of a site
Images typically have width set to 100% and are held inside a container
Text needs to have have a set font size in the .body of the css. From there we can use em units as needed. 15px font is fine to put on the body, but should we need to change all sizing we can change just the body's font size.

Please send recommendations if this doesn't sound good, or if there should be more rules or exceptions!

WillStill commented 2 years ago

Layout of elements are difficult to judge, so we could probably change them if we ever run into issues.

WillStill commented 2 years ago

Current plan:

max-width: 455px; For mobile. Should change responsiveness depending on a relative size. min-width: 456px; For Tablets/Laptop. Should change responsiveness depending on a relative size. min-width: 960px; For Laptops/Desktop. Overrides min-width: 456px;. Should be a constant size.

This plan is not set in stone and can be changed, but this goes as a general rule for screens.