Styling For Print From Screen to Paper Print slides by Sean Boyle, with overall content based on http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml accessed 11/3/2010, 3:09 PM Mobile CSS by Tony Jefferson

Printing the Web How many of you have ever printed a web page? What does it usually look like? How about when you print something like a Google map?

Screen vs. Print What are some differences between screen and print? Resolution Legibility (typefaces) Orientation (portrait on paper, landscape on screen) Where is “the fold?” Print is generally higher resolution than screen. Serif fonts are easier to read on paper, sans-serif is easier on screen.

Why Print? Reference “Save this for your records” Use of content (coupons, etc.) Or maybe your resume on a portfolio site…

What to See? When you print a page, do you really want to see all the links and banners and images? NO!

Web vs. Print Let’s look at what we get when we print a couple of websites… http://www.rit.edu/ http://www.tfw2005.com Not so great. How about… http://www.macrumors.com http://people.rit.edu/spbics Let's look at a couple websites. For each, see what it would look like if we printed it (with print preview). Now, let's look at something a bit more complicated: macrumors.com. They actually did some print formatting. The final link (to Sean Boyle’s page) has been print-formatted. While not the most beautiful thing in the world, it does work better on print than all the others. Specifically look at the Projects page.

The Solution: Print CSS! <link rel="stylesheet" type="text/css" href="print.css" media="print" /> In here, only include CONTENT. Eliminate colors, positions, etc., of non-print content. Use display: none; for elements you don't want to print. Note that stylesheets inherit properties; if you don’t declare some attribute in your print CSS, it will display the same as your screen CSS. For this reason, it’s good to separate out the CSS files, and force the browser to use one or the other with media="screen"

Print Guidelines In print, serif is easier to read. Print uses POINTS rather than PIXELS or Ems for measurement, so change your font sizes and measurements to pt. Printers will often be black and white only, so make sure to avoid using color to convey info in print. For bonus usability you could include a footnote on the page listing all the URLs from that page, with each link referencing its URL underneath with a number. It's otherwise impossible to know where a link is pointing to when reading a print out from a web page.

Print CSS Demo Let’s make it!

Styling for Handheld Devices Mobile CSS Styling for Handheld Devices

Why worry about mobile? These are the fastest growing group of web users. Browsing by Device Category Trend. http://www.netmarketshare.com/

Why worry about mobile? Until (relatively) recently, web-capable mobile phones were often text only, with tiny low resolution 160 x 120 pixel LCD screens. Now they are very capable smart phones featuring processors, RAM, and color capabilities equivalent to the desktop computers of about 5 years ago. For many people, smaller handheld devices are becoming their primary computer for email, web browsing, and other computing tasks.

Top mobile web browsers (US) Current leaders:  Safari (iOS): 42.03%  Chrome (Android): 32.68% Others: 25.29% Source: http://www.netmarketshare.com/

Limitations of mobile browsers Smaller screen size and fewer pixels than desktops. Slower processor speed than desktops Usually only one browser window visible at a time Limits on size of resources like images and PDFs Unknown browser environment (bright sun, or checking phone under table?) Slower connection speeds (might be near modem speeds) Longer latency (how long it takes a server to respond to requests)

Other limitations Limited support for plug-ins like Flash No mouse means a:hover is not well supported Some CSS properties like position:fixed often not supported See a table comparing mobile browsers at: http://www.quirksmode.org/m/table.html

As web developers, what can we do to support mobile users? Best practices: Minimize HTML, CSS, and image file size Limit the number of images and other resources Avoid using non-standard plug-ins like Flash Consider a customized CSS stylesheet for your site that is targeted at mobile devices http://www.w3.org/TR/2010/PR-mwabp-20101021/ http://www.w3.org/2010/Talks/phila-mmb/#(1)

Mobile CSS <link rel="stylesheet" type="text/css” href=”mobile.css" media=”handheld" /> As with print CSS, this stylesheet will apply to any “handheld” device. The problem is, most current smartphones and tablets don’t consider themselves “handhelds.” …so this form of media has been deprecated.

Desktop vs. iPhone Same HTML, different CSS

Media Queries Better option for mobile devices More specific to devices, better at catching true “mobile” Media queries are covered next class. Don’t go into too much detail on them now.

Media Queries Rather than relying on the device to report whether it is a “handheld” or not (the iPad, for instance, and even many smartphones prefer to think of themselves as full-fledged screens), media queries run a series of tests to determine various features of the device, then serve up the proper CSS.

Media Queries More information and the full specification: http://www.w3.org/TR/css3-mediaqueries/

ICE/Homework Add print CSS to your page