search

ucsb / webguide

Repository for the UCSB WSG Webguide hosted on Github using Jekyll.
https://webguide.ucsb.edu
BSD 3-Clause "New" or "Revised" License
7 stars 7 forks source link

Migrate "Viewport Dimensions" Page #412

Closed loganfranken closed 3 years ago

loganfranken commented 3 years ago

384

Legacy Page https://webguide.ucsb.edu/viewport-dimensions/

Location in New Hierarchy ???

All of this still seems relevant, although the overall assertion to "do responsive web design" might be redundant nowadays.

There might also be disagreement over whether or not you should focus on a set of breakpoints; I would argue best practice is still to take the iterative approach, adding them as you need them, but this is in contrast to the approach of most frameworks (e.g. https://getbootstrap.com/docs/5.0/layout/breakpoints/).

At the very least, it looks like 320px is no longer the smallest size (it's 360px now: https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide)

Responsive Web Design

The Web Standards Group recommends that campus websites do not target a specific screen resolution in their designs. Instead, campus websites should employ responsive web design (RWD) to support a range of resolutions and devices.

Within RWD, media queries, a flexible grid, and flexible media (including images and video) are combined to create website designs that transform depending on the capabilities of the user's browser, most prominently the browser's width.

Using Media Queries

Since you are not targeting specific screen resolutions in your designs, there is also no specific recommended set of media query sizes or "breakpoints".

Instead, you should begin with a "mobile first" approach: start designing with the narrowest reasonable screen width (320px is the smallest width with any significant use) and then slowly increase the width of the browser, altering the design and adding breakpoints appropriately to accommodate the increasing width.

Printable Alternatives

Make sure that your page content prints appropriately. Test by printing and, if necessary, provide a printable alternative.

rvizena commented 3 years ago

@loganfranken I agree that there is stuff here worth preserving. Where do you think something like this can live within our revised site architecture? Maybe we don't need this to be it's own page, just an add-on to a particular section.

loganfranken commented 3 years ago

@rvizena @tenken Would it make sense for this content to go here? https://webguide.ucsb.edu/development/mobile-first

rvizena commented 3 years ago

@loganfranken I think that page is a good one to add this mobile-first content to. If you have the bandwidth - can you migrate it over?

loganfranken commented 3 years ago

I migrated the content to the following pages: https://webguide.ucsb.edu/development/mobile-first https://webguide.ucsb.edu/accessibility/guidelines

I'll go ahead and close out this ticket!