diff --git a/index.html b/index.html new file mode 100644 index 0000000..f4146e3 --- /dev/null +++ b/index.html @@ -0,0 +1,299 @@ + + + + + + The guide for special layouts and styling + + + + + + +
+
+

+ The guide for special layouts and styling +

+

+ Recommendations for how to build reusable and responsive websites and + stories for The Michigan Daily. +

+

+ Written by + +

+
+
+

+ This guide primarily focuses on setting up page layout and styling. + For best practices with regards to development and deployment, refer + to the + special website checklist. +

+

+ This guide is also self-referential in that I will be describing + concepts that are reflected in how this page is laid out. It will be + useful to have the code for this page open as you read. +

+
+
+

Layout

+

+ Most websites include a CSS reset, a set of stylings that remove style + inconsistencies between browsers. This page has a rather minimal reset + to remove margin and padding from the body, and to remove margin from + headings and paragraphs. While the default margins for text elements + are useful to provide spacing, it is preferable to manually control + the spacing through grid layout gaps. +

+

+ As a news organization, many of our special websites will require + large amounts of prose. People tend to have a hard time reading when a + text container is wide. This is particularly an issue for some people + with disabilities. +

+
+ For people with some reading or vision disabilities, long lines of + text can become a significant barrier. They have trouble keeping their + place and following the flow of text. Having a narrow block of text + makes it easier for them to continue on to the next line in a block. + Lines should not exceed 80 characters or glyphs (40 if [Chinese, + Japanese and Korean]), where glyphs are the element of writing in the + writing system for the text. + +
+

+ Therefore, I start most prose-heavy layouts with a section that is 60 + to 80 characters wide. CSS includes a + ch unit to work with the width of a single + character glyph. Note that setting a maximum width is naturally + responsive, even on mobile devices. +

+

+ In most cases, text should be centered on the screen. Centering can be + accomplished with horizontal margin set to auto. It is also important for a section of text to take up all allotted + space within the maximum width constraint by setting the width to + 100%. +

+

+ Some padding should also be added around the text container to ensure + that the text does not touch the screen edges. This is especially + important for mobile devices. Note that padding will add to the width + of the container by default, making mobile screens horizontally + scrollable. To prevent this, set + box-sizing: border-box on the text container. +

+

+ With all that we've described in terms of grid layout, maximum + character width, text centering and mobile responsiveness, we arrive + at the following set of styles for prose layout. +

+ 
section {
+  display: grid;
+  gap: 0.5rem;
+
+  max-width: 80ch;
+  width: 100%;
+
+  margin: 0 auto;
+  padding: 0.25rem 0.75rem;
+  box-sizing: border-box;
+}
+

+ Although I describe this as "prose layout," all of the ideas are + pertinent to any good responsive layout, regardless of the amount of + text content. +

+
+ +
+

Scroll layout

+

Use scrollama. View examples

+
+ +
+
+

Breaking out

+

+ Although this default width is useful for prose, there are also + situations when you might want more width to work with. In those + cases, you will want to create "breakout" sections. +

+
+
+
+

+ In a breakout section, remove the maximum width associated with a + section. Then, you will have the full width of the screen to work + with. +

+
+
+
+

+ If there are parts of the breakout section that you want to retain + the prose width, you'll want to re-apply the styles that set the + maximum character width. Furthermore, the maximum width can be + customized to be more than the prose width but less than the full + width, as demonstrated in the blue rectangle above. +

+
+
+

Grid layout

+

Grids are powerful

+

No media queries, automatically responsive

+

We make grid layouts a lot for stories or other websites

+
+ +
+
    +
  • A
    • +
  • B
    • +
  • C
    • +
  • D
    • +
  • E
    • +
+
+
+ +
+

Prose

+

Font families and sizes

+

16px;

+

rem multiples;

+

responsive width;

+

balanced text, Chrome, progressive enhancement

+
+ +
+

Images

+

+ Figures Figcaption source sets Modern image formats Alternative text +

+
+
+ +