1. Styling For Print From Screen to Paper
Print slides by Sean Boyle, with overall content based on
accessed 11/3/2010, 3:09 PM
Mobile CSS by Tony Jefferson

2. 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?

3. 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.

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

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

6. Web vs. Print
Let’s look at what we get when we print a couple of websites…
Not so great. How about…
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.

7. 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"

8. 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.

9. Print CSS Demo
Let’s make it!

10. Styling for Handheld Devices
Mobile CSS
Styling for Handheld Devices

11. Why worry about mobile?
These are the fastest growing group of web users.
Browsing by Device Category Trend.

12. 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 , web browsing, and other computing tasks.

13. Top mobile web browsers (US)
Current leaders:
 Safari (iOS): 42.03%
 Chrome (Android): 32.68%
Others: 25.29%
Source:

14. 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)

15. 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:

16. 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

17. 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.

18. Desktop vs. iPhone Same HTML, different CSS

19. 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.

20. 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.

21. Media Queries More information and the full specification:

22. ICE/Homework
Add print CSS to your page