| layout | title | permalink |
|---|---|---|
default |
Viewport Dimensions |
/viewport-dimensions/ |
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.
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.
Make sure that your page content prints appropriately. Test by printing and, if necessary, provide a printable alternative.