Style Sheets for Print and Mobile Media Types Supplemental Material

Sources Printing and Mobile: Murach’s HTML, XHTML,and CSS; Anne Boehm, Chapter 12: How to work with print media and mobile devices. Printing: Printing: 10-tips-for-better-print-style-sheets/ 10-tips-for-better-print-style-sheets/ Mobile: mobile-stylesheethttp:// mobile-stylesheet

Media-Based Style Sheets Up until now we have used CSS style sheets to display Web pages on a computer screen Style sheets can also be created and used for printing a Web page Mobile devices can also recognize style sheets

Identifying Media Type Use the HTML element and the media attribute to provide media type Some values for media types: all – All device types screen – computer screen print- printed pages and print preview handheld- mobile phones and PDAs projection- projection devices

Example of for Printing The print.css style sheet should contain print-friendly styling for the page

Media type within Style Sheet If you want to use a style sheet for more than one media type, can create rule sets/groups within the CSS Define rule set symbol } } Any style rules within the set apply only for that media type

Working with Print Media If a Web page contains info a user may want to print, consider special formatting with a print style sheet The default printing function just prints as the page is on the screen May contain info not needed such as navigation Some page elements may not be prime for printing

Suggestions for Print Formatting Change the color of text to be black Change background color to be white Non-heading text change to serif for readability Set a default font that is readable when printed Remove site navigation Remove unneeded images or animations Remove floating, fixed margins and padding

Widows and Orphans A widow is a stray line from a previous page appears at the top of a page An orphan is a stray line or heading is left at the bottom of a page Web pages on the screen don’t have these issues because the user can just scroll On the printed page, widows and orphans should be prevented Example of a Widow

CSS Properties for Printing CSS PropertyDescription and Values displayDetermines how to display an element, values: block, inline and none. visibilityDetermines if an element is visible, values: visible and hidden. page-break-beforePage break allowed before element’s box, values: always, auto, avoid page-break-afterPage break allowed after element’s box, values: always, auto and avoid page-break-inside*Page break allowed inside element’s box: values: auto and avoid widows*Integer value, minimum number of lines of element that can be printed at the top of page orphans*Integer value, minimum number of lines of element that can be printed at the bottom of page * Not supported by most browsers

Page Layout and Printing If layout has one column, printing the page is not a problem For two or three column layout, need to decide if you want column printed Navigation column usually not printed, use display:none for id selector Printed columns: remove float property and set width: 100% Set body margin as in margin:.25in

Printing Links and Link URLs Make links more visible For links in the content areas, include the actual href attribute after the link #content a:link:after, #content a:visited:after { content: " (" attr(href) ") "; font-size: 90%; } a:link, a:visited { color: red; background: transparent; font-weight: bold; text-decoration: underline; } Stronger Styling of Links Show Link URLs After

Printing your Web Page When you think you have your print style sheet finished, view the page in Print Preview to make sure: Run your page, choose File->Print Preview command from the browser menu To actually print a page: choose File ->Print from the browser menu Can also use JavaScript to print the page when a button is clicked: onclick=“window.print();return false;”

Working with Mobile Devices Many mobile devices are in use today Because their screen sizes are much smaller, Web pages designed to display on full computer screen can be difficulty on mobile devices Web developers can provide pages specifically for mobile devices

5 Methods to Provide Web Pages for Mobile Devices 1. Define CSS style sheets for mobile devices  Many new mobile browsers don’t recognize handheld media type CSS3 media queries give more control in style sheet for media types, not widely supported yet 2. Include link to mobile version of site Most large commercial sites do this 3. Use JavaScript to detect mobile devices and redirect to mobile site Not all phones recognize JavaScript

5 Methods to Provide Web Pages for Mobile Devices (cont.) 4. Use server-side scripting language to detect mobile device and redirect  PHP, ASP.Net or other server-side language used to detect mobile device  So many types of mobile browsers, hard to detect all types 5. Use Wireless Universal Resource File (WURFL) to detect mobile device An XML configuration file contains info on mobile devices and features, must be updated frequently Needs an Application Programming Interface (API) and appropriate language to interact

Designing Web Pages Specifically for Mobile Devices Keep layout simple, one column layouts are best Include only essential content, divide content into smaller pages Keep images small and few Avoid the use of Flash animations Include only essential navigation at top of page Make links and other form elements large enough to easily manipulate Use relative measurements so page looks good no matter the scale of the device Eliminate large background images

Using Mobile Style Sheets Option Most new mobile browsers as part of their “full web” focus ignore handheld style sheets and read only screen style sheet Older mobile browsers read only handheld style sheets Some mobile browsers read handheld if there is one, but will default to screen style sheet Some read both handheld and screen style sheets

CSS3 Media Queries These can be used in the tag to target a specific class of mobile device The media query contains two parts: a media type The actual query enclosed in ( ), containing a particular media feature to inspect, followed by the target value

Media Queries in CSS file Can also include CSS3 media queries in the CSS style sheet Use rule As part of screen and (max-device-width: 480px) {.column { float: none; } url(“handheld.css") only screen and (max-device-width: 480px);

Best Mobile Coverage ??? Define a style sheet screen.css for PC use Define a style sheet antiscreen.css to cancel any non-mobile friendly effects set in the screen.css Tie these two style sheets together into a core.css style url("antiscreen.css") url("antiscreen.css") only screen and (max-device-width:480px);

Best Mobile Coverage (cont.) Next, create a special mobile-friendly handheld.css style sheet specifically designed for mobile Finally, link the suggested style sheets in your document as follows:

How Mobile Devices will Respond Mobile browsers that can read handheld style sheets will never see the problem CSS properties in the screen.css Mobile devices that read screen and handheld style sheets or media queries will not be affected by problem CSS in the screen.css because the antiscreen.css will cancel these Finally, PC browsers will ignore both antiscreen.css and handheld.css and use screen.css.

The antiscreen.css Begin with your screen.css Set widths to be 100% which allows for fluid content wrapping within the window Remove unnecessary margins Remove floated columns to help prevent horizontal scrolling Eliminate non-necessary content with display:none Remove large background images a:hover not supported on mobile, add an a:active pseudo-class to achieve this

Clickable Phone Numbers If phone numbers appear in your content, it would be user-friendly to allow clicked phone number Modify you page content to allow for this: On screen style sheet set phone-link class to disable the link in the screen.css, then enable it again in mobile style sheets (503)

Enable/Disable Phone Links a.phone-link { pointer-events: none; cursor: default; } a.phone-link{ pointer-events: auto !important; cursor: auto !important; } Disable Clickable Phone # Enable Clickable Phone #

Using Mobile Device Emulators Nokia and Sony Emulator hp hp Enter the URL Iphone Simulator Enter the URL on the simulated phone

CSS for Media Types Summary Use the media type in the tag to include media specific style sheets Creating a print-friendly style sheet is relatively painless with media=“print” Mobile devices are so varied, not one solution can be used to present Web pages Combination of mobile style sheets and CSS3 media queries can target most mobile devices Test with Print Preview and Mobile Emulators