Transcript Designing a Site - RIT

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?”
Why Print?
 Reference
 “Save this for your records”
 Use of content (coupons, etc.)
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
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!
Why worry about mobile?
 These are the fastest growing group of web users.
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%
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
 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