Agenda

Applying Printer Styles

Add media="print" to the <link /> tag to assign printer friendly styles. If you want the printer styles to inherit the style used by screens, use media="all" with the default stylesheet:

<!-- Apply both default and print stylesheets to the printout -->
<link rel="stylesheet" href="default_styles.css" media="all" />
<link rel="stylesheet" href="print_styles.css" media="print" />

To ensure your default screen styles wont also be applied to the printer (usually the best option), add media="screen" to the any stylesheets that are not to be used when printing:

<!-- Apply ONLY the print_styles.css to the printout -->
<link rel="stylesheet" href="default_styles.css" media="screen" />
<link rel="stylesheet" href="print_styles.css" media="print" />

Instead of defining a new link tag, you can alternatively apply a printer styles in an external CSS file, using a media query. Be sure your <link /> tag uses media="all" if you use this technique.

/* styles for screens */
@media screen{ 
	header { color:red;	}
}
/* styles for printers */
@media print { 
	header { display:none;	}
}

Best Practices For Printable Styles

The key to a stylesheet specifically for printing is a matter of planning more than anything.

Prerequisites for printer friendly styling:

Once you have planned your layout and created distinct elements, the next steps are to:

  1. Hide the elements you don't want the printer to see
  2. Re-style the layout
  3. Re-style the visuals
  4. Add textual hyperlink data to fully qualified hyperlinks

Print Styling: Hiding Elements

Hide the elements you don't want printed. This should include any regions of the page that provide no value to a printout. This may or may not include:

Use display:none; to tell the printer to ignore any of the elements listed in the declaration. Be careful to make sure that none of the elements that are ignored have valuable info in them.

/* hide sections of no use to printer */
header, nav, .site_map_link, #search_form{
	display: none;
}

Print Styling: Re-styling Layout

After hiding the content you dont want to be printed, remaining content will either have no style at all, or will inherit the styles of any sheets with "ALL" as the media. For this reason, it is important to explicitly style it.

body, #content, main, footer  {
		
	/* floating is not advised for printers */
	float: none;
	
	/* let the printer set margins */
	width: auto;
	margin: 0;
	padding: 0;
	
	/* dont display background colors or images */
	background: none;
}

Printout Page Control

CSS rules can control where page breaks will or won't appear. At minimum, ensure no pages finish with a heading. Make efforts to ensure paper will not be needlessly wasted, test your print styles in the web browser with CTRL + P. Look to fix pages that are blank or are not fully utilized.

Print Styling: Re-styling Visuals

Ensure a strong contrast for all printed textual content. If you have a light-colored font on a dark-colored background on the screen, or if your anchors are lighter than normal, be sure to set them to a color that is easily seen after printing.

/* black serif text is ideal for printouts */
body, #content, , main, footer {
	color: black;
	background:none;
	font: 16pt Georgia, "Times New Roman", Serif;
}

You won't know if the client is using a color printer,so if you do include color, choose one that will show text well in black and white as well as color printing:

a:link, a:visited {
		
	/* if using color, make it dark! */	
	color: #330099;
	
	/* make link text stand out */
	text-decoration: underline;
	font-weight: bold;	
}

Print Styling: Display Hyperlink Data

One of the most useful things you can do in print format is to provide readable hyperlinks for fully qualified anchor tags. Without this little trick, they will only see <a> tags as they are displayed onscreen - likely a different colour and underlined.

Fully qualified links can be styled like this:

/* add URL info to external links */
a[href^="http"]:after{
   content: " (URL: " attr(href) ") ";   
}

This will append a URL to the end of a link on a page, surrounded in brackets with the acronym URL:. The declaration uses the content property with the :after pseudoclass to append the value of the href attribute after displaying the hyperlink text.

Media Queries

CSS Media Queries are the mechanism used to detect different client characteristics such as device width or orientation. The concept is fairly simple: Use @media declarations to detect the status of the client, then provide a suitably styled layout.

Options

Media Queries: Implementation

When the page is initially rendered, the user agent (browser) will assess the size of the viewport and select CSS based on any media query declarations. This is also true if/as the viewport is resized.

Embedded

Media queries can be specified in the link tag itself:


<link rel="stylesheet" href="smaller.css" media="screen and (max-width: 1025px)" />
<link rel="stylesheet" href="larger.css"  media="screen and (min-width: 1024px)" />
<link rel="stylesheet" href="printer.css" media="print" />

External

Media queries can be defined in the external CSS file, and linked to like any other stylesheet. Remember: If your .css contains media queries for both screen and print, ensure the <link /> tag uses media="all".

/* client is 1024px or less */
@media screen and (max-width: 1024px){ 
	body {	font-size: .8em;	}
}
/* client is wider than 1024px */
@media screen and (min-width: 1024px){ 
	body { 	font-size: 2em;		}
}
/* styles for printers */
@media print { 
	header { display:none;		}
}

Mobile Viewport

Mobile devices have three viewport models to consider:

  1. Layout viewport is how mobile devices render full-sized, non-responsive desktop styled layouts. It might 'fake' the actual width, eg (a mobile brower that is actually 640px wide might act as 950px wide to show more of the page). It is advisable to over-ride this behavior using the META tag described below.
  2. Visual viewport is what the user can currently see (eg, if they zoom in or out, the visual viewport is changed).
  3. Ideal viewport is the optimal layout that should require no zooming to be usable. The particular width and height of the ideal viewport is different across the several mobile device on the market. Portrait vs. landscape orientation will also change the ideal viewport.

META Viewport Tag

Add this META tag to .html files to ensure your responsive designs use the ideal viewport, not the layout viewport. Place the following in the head section, before you apply your stylesheets:

<!-- ensure ideal device width detection... -->
<meta name="viewport" content="initial-scale=1.0, width=device-width" />

<!-- ...before you add your stylesheets -->
<link rel="stylesheet" href="responsive_styles.css" media="all" /> />

Windows Mobile IE user agents require a CSS rule to ensure the ideal viewport is targeted.

/* add this to .css for Windows Mobile IE */
@-ms-viewport {
	width:device-width;
}

Responsive Design

The ability to target specific device widths and orientations has made it possible to create "Responsive" web designs. Ethan Marcotte wrote one of the very first articles on Responsive Web Design in 2010, and the idea has taken off since then.

Using media queries to deliver client specific styles opens up serveral possibilities for the web developer. Some guidelines for taking advantage of the abilities and limitations of client devices:

For small mobile devices:

Responsive Images

The picture tag can provide multiple images for a client to choose from. This can be useful for reduced bandwidth (no need to send a hugh high res image to a handheld device) and allows for better art direction (you can provide a differently framed image more suitable for small clients). Each picture tag requires one or more source tags and its last child must be an img.

Attributes for the source tag.

<picture>
	
  <-- source tags provide options for client -->		  
  <source srcset="images/medium_res.jpg"
	  media="(min-width: 400px) AND (max-width:800px)">
  <source srcset="images/low_res.jpg"
	  media="(min-width: 0px) AND (max-width:399px)">
		  
  <-- img tag defines default -->		  
  <img src="images/high_res_default.jpeg" alt="" >
  
</picture>

When building different size images for a client to choose from, dont simply scale them down. If the subject of the image is a small part of the entire image, consider whether the image should be re-framed when displayed in small clients.

Scalable Images

Images will show actual size by default. To scale images according to the parent container and maintain the aspect ratio, use max-width:100%; and height:auto;

img{
	/* apply to scale images with the parent */
	max-width: 100%;
	height:auto;
}

Fluid Design

Fixed width layouts are easy to control as you know the widths and don't have to worry about overflowing elements. You can apply media query breakpoints to alter a fixed layout whenever client widths demand, but it is ideal to make the fixed layout more fluid.

Fluid designs use relative widths for measurements that allow you to build a style that can scale to ANY size of user agent

Fluid Layouts

Fluid layout page elements will resize as the viewport resizes. The key to fluid elements is to maintain the same ratio of space relative to other page elements.

target / context = result

This calculation relates to your measurements for widths, margins, padding etc when building a fluid design.

/* initial fixed pixel layout */
main{
	width:300px;
}
main > section{
	width:200px;
	float:left;
}
main > aside{
	width:100px;
	float:right;
}
/* converted to fluid layout */ 
main{
	/* 
	set a variable width baseline context for the child tags 
	remember the original context is 300px!
	*/
	width:100%;
}
main > section{
	/* 
	target / context = result
	200 / 300 = 0.666666666667
	0.666666666667 = 66.6666666667%
	*/
	width:66.6666666667%;
	float:left;
}
main > aside{
	/* 
	target / context = result
	100 / 300 = 0.33333333333
	0.33333333333 = 33.333333333%
	*/
	width:33.333333333%
	float:right;
}

Fluid Fonts

Using viewport related measurements can allow for real-time scaled font sizing. Note: If you use this technique, use media queries to stop fonts from scaling too small or too large. Always test at various client widths!

vw
1/100th of the width of the viewport
vh
1/100th of the height of the viewport
body{
	/* font sizes 2% of viewport width */
	font-size: 2vw;
}

Flexbox and Grid Layout

Flexbox and Grid layouts are particularly well suited for responsive designs.

Responsive Flexbox Layouts

Some flex properties that are especially useful for responsive effects:

Use flex-direction to display flex items in a single column stack instead of in rows.

Use the order property on flex items to sort content from most important to least

Responsive Grid Layouts

Some grid properties that are often helpful for responsive layouts:

Use grid-template-columns and grid-template-rows to change the dimensions of the grid

Use grid-template-areas and grid-area to reposition grid items

To Do

The session 6 quiz will be closed book, written.