Site Design Notes

Posted on January 28, 2020

Just a few personal notes about the site design. We’ll start with how each of the header tags are currently being rendered. The list below is really not for discussion but rather a design aid as we work on cleaning up the tags and underlying CSS that go with them.

H1 Tag Rendering

text after H1…..

H2 Tag Rendering

text after H2…..

H3 Tag Rendering

text after H3….

H4 Tag Rendering

text after H4….

H5 Tag Rendering

text after H5….

H6 Tag Rendering

text after H6….

Image Guidelines

The intent here is to document some standard image sizes we use on the Teachers Network site. My image sizes we mean primarily image WIDTH as this is the metric that most often will break rendering as we move between viewport sizes. What follows below shows representative images in each width, a description of when and where to use, and the appropriate CSS class to label the image width with.

Note: additional css class: tn-image-sm – (shrink margin) will assign -20px to both top and bottom margins. Useful for first graphics on page types where the paragraph style inserts unwanted space.

		300 Pixel Width Used for large section header graphics. This will take up most of the screen width on smaller devices such as most cellphones however is large enough to look reasonable on larger screens. Normally right justified in a section. Note: it could be argued that a larger size image should be specified here that displays better on desktop monitors and that could be used as more of a banner. To do: floats need to be added for small screen sizes to force other content below. CSS: tn-image-300
		200 Pixel Width Standard side graphics for use in articles. Early articles used 150 and in some cases 100 pixel wide images but they looked out of place on larger displays. The 200 pixel width should be used instead for most articles. Note: currently 200 pixels does look a bit large and out of place on the smallest of devices (small cellphones with a 320 pixel viewport). This will be eventually corrected in the mobile responsive CSS definitions to resize when appropriate. CSS: tn-image-200
		150 Pixel Width This is the old standard side graphics image size. Probably should not be used anymore in preference to the 200 pixel option. CSS: tn-image-150
		100 Pixel Width Small image size that occasionally comes in handy when used with lists or tables. CSS: tn-image-100