SlideShare a Scribd company logo

Making Your Site Printable: Stir Trek 2013

My presentation at Stir Trek 2013 on best practices for making your site printable. Description from the schedule: The push for responsive web design has helped web developers consider how the sites they develop can adapt to different devices, including sizes, screen resolutions, and even contexts. It should now be easier than ever to respond to a format that has existed since the start of the web -- print. I'll walk through the process for making your responsive sites respond to the format we most often forget.

1 of 68
Making Your Site Printable
Presented by Adrian Roselli
May 17, 2013
#StirTrek
About Adrian Roselli
• Co-written four books.
• Technical editor
for two books.
• Written over fifty
articles, most recently
for .net Magazine and
Web Standards Sherpa.
#StirTrek
About Adrian Roselli
• Member of W3C HTML Working Group, W3C
Accessibility Task Force, five W3C Community
Groups.
• Building for the web since 1994.
• Founder, owner at Algonquin Studios
(AlgonquinStudios.com).
• Learn more at AdrianRoselli.com.
• Avoid on Twitter @aardrian.
#StirTrek
What We’ll Cover
#StirTrek
What We’ll Cover
• Background
• Techniques
• Measuring
• Future
#StirTrek
Background
#StirTrek

Recommended

библиотека. взгляд из будущего
библиотека. взгляд из будущегобиблиотека. взгляд из будущего
библиотека. взгляд из будущегоNadezda Bezukladnikova
 
Is your social media ready to go?
Is your social media ready to go?Is your social media ready to go?
Is your social media ready to go?pcgak
 
Политическая карта мира русскMicrosoft power point
Политическая карта мира русскMicrosoft power pointПолитическая карта мира русскMicrosoft power point
Политическая карта мира русскMicrosoft power pointKovpak
 
Lesson 1 basic theory of information
Lesson 1   basic theory of informationLesson 1   basic theory of information
Lesson 1 basic theory of informationRoma Kimberly Erolin
 
The Unwebinar
The UnwebinarThe Unwebinar
The Unwebinarpcgak
 
Телеканал НЛО-ТБ
Телеканал НЛО-ТБТелеканал НЛО-ТБ
Телеканал НЛО-ТБGeorge Barzashvili
 

More Related Content

Viewers also liked

기획회의 롤링다이스
기획회의 롤링다이스기획회의 롤링다이스
기획회의 롤링다이스현주 제
 
Fringe Accessibility: Booster 2016
Fringe Accessibility: Booster 2016Fringe Accessibility: Booster 2016
Fringe Accessibility: Booster 2016Adrian Roselli
 
Taking the toolkit to social media
Taking the toolkit to social mediaTaking the toolkit to social media
Taking the toolkit to social mediapcgak
 
Johnny english
Johnny englishJohnny english
Johnny englishbkxhunter
 
Fringe Accessibility: A11y Camp Toronto 2015
Fringe Accessibility: A11y Camp Toronto 2015Fringe Accessibility: A11y Camp Toronto 2015
Fringe Accessibility: A11y Camp Toronto 2015Adrian Roselli
 
Bringing Staff and Volunteers into Pick.Click.Give.
Bringing Staff and Volunteers into Pick.Click.Give.Bringing Staff and Volunteers into Pick.Click.Give.
Bringing Staff and Volunteers into Pick.Click.Give.pcgak
 
Tijdvoorchampagne Eindejaarsgeschenken 2012
Tijdvoorchampagne Eindejaarsgeschenken 2012Tijdvoorchampagne Eindejaarsgeschenken 2012
Tijdvoorchampagne Eindejaarsgeschenken 2012tijdvoorchampagne
 
Comparsion project
Comparsion projectComparsion project
Comparsion projectkbum72812
 
Storyboard (Draft)
Storyboard (Draft)Storyboard (Draft)
Storyboard (Draft)bkxhunter
 
Mise en-scene - james hunter
Mise en-scene - james hunterMise en-scene - james hunter
Mise en-scene - james hunterbkxhunter
 
WordPress Accessibility - WordCamp Buffalo 2016
WordPress Accessibility - WordCamp Buffalo 2016WordPress Accessibility - WordCamp Buffalo 2016
WordPress Accessibility - WordCamp Buffalo 2016Adrian Roselli
 
Selfish Accessibility: HTML5 Developer Conference 2014
Selfish Accessibility: HTML5 Developer Conference 2014Selfish Accessibility: HTML5 Developer Conference 2014
Selfish Accessibility: HTML5 Developer Conference 2014Adrian Roselli
 

Viewers also liked (19)

Elia (februari)
Elia (februari)Elia (februari)
Elia (februari)
 
기획회의 롤링다이스
기획회의 롤링다이스기획회의 롤링다이스
기획회의 롤링다이스
 
Fringe Accessibility: Booster 2016
Fringe Accessibility: Booster 2016Fringe Accessibility: Booster 2016
Fringe Accessibility: Booster 2016
 
Taking the toolkit to social media
Taking the toolkit to social mediaTaking the toolkit to social media
Taking the toolkit to social media
 
Johnny english
Johnny englishJohnny english
Johnny english
 
Fringe Accessibility: A11y Camp Toronto 2015
Fringe Accessibility: A11y Camp Toronto 2015Fringe Accessibility: A11y Camp Toronto 2015
Fringe Accessibility: A11y Camp Toronto 2015
 
Bringing Staff and Volunteers into Pick.Click.Give.
Bringing Staff and Volunteers into Pick.Click.Give.Bringing Staff and Volunteers into Pick.Click.Give.
Bringing Staff and Volunteers into Pick.Click.Give.
 
Tijdvoorchampagne Eindejaarsgeschenken 2012
Tijdvoorchampagne Eindejaarsgeschenken 2012Tijdvoorchampagne Eindejaarsgeschenken 2012
Tijdvoorchampagne Eindejaarsgeschenken 2012
 
Comparsion project
Comparsion projectComparsion project
Comparsion project
 
Prezentacja ogólna2.0
Prezentacja ogólna2.0Prezentacja ogólna2.0
Prezentacja ogólna2.0
 
Todobox
TodoboxTodobox
Todobox
 
Storyboard (Draft)
Storyboard (Draft)Storyboard (Draft)
Storyboard (Draft)
 
Motivation 111010..
Motivation 111010..Motivation 111010..
Motivation 111010..
 
Pyj fim
Pyj fimPyj fim
Pyj fim
 
Mise en-scene - james hunter
Mise en-scene - james hunterMise en-scene - james hunter
Mise en-scene - james hunter
 
WordPress Accessibility - WordCamp Buffalo 2016
WordPress Accessibility - WordCamp Buffalo 2016WordPress Accessibility - WordCamp Buffalo 2016
WordPress Accessibility - WordCamp Buffalo 2016
 
Freddie highmore
Freddie highmoreFreddie highmore
Freddie highmore
 
Zz patterson
Zz pattersonZz patterson
Zz patterson
 
Selfish Accessibility: HTML5 Developer Conference 2014
Selfish Accessibility: HTML5 Developer Conference 2014Selfish Accessibility: HTML5 Developer Conference 2014
Selfish Accessibility: HTML5 Developer Conference 2014
 

More from Adrian Roselli

CSUN 2020: CSS Display Properties Versus HTML Semantics
CSUN 2020: CSS Display Properties Versus HTML SemanticsCSUN 2020: CSS Display Properties Versus HTML Semantics
CSUN 2020: CSS Display Properties Versus HTML SemanticsAdrian Roselli
 
Selfish Accessibility —DevOpsDays Buffalo
Selfish Accessibility —DevOpsDays BuffaloSelfish Accessibility —DevOpsDays Buffalo
Selfish Accessibility —DevOpsDays BuffaloAdrian Roselli
 
Selfish Accessibility — YGLF Vilnius
Selfish Accessibility — YGLF VilniusSelfish Accessibility — YGLF Vilnius
Selfish Accessibility — YGLF VilniusAdrian Roselli
 
Role of Design in Accessibility — VilniusJS Meet-up
Role of Design in Accessibility — VilniusJS Meet-upRole of Design in Accessibility — VilniusJS Meet-up
Role of Design in Accessibility — VilniusJS Meet-upAdrian Roselli
 
The Role of Design in Accessibility — a11yTO Meet-up
The Role of Design in Accessibility — a11yTO Meet-upThe Role of Design in Accessibility — a11yTO Meet-up
The Role of Design in Accessibility — a11yTO Meet-upAdrian Roselli
 
Prototyping Accessibility: Booster 2019
Prototyping Accessibility: Booster 2019Prototyping Accessibility: Booster 2019
Prototyping Accessibility: Booster 2019Adrian Roselli
 
Selfish Accessibility — Harbour Front HK
Selfish Accessibility — Harbour Front HKSelfish Accessibility — Harbour Front HK
Selfish Accessibility — Harbour Front HKAdrian Roselli
 
Selfish Accessibility — CodeDaze
Selfish Accessibility — CodeDazeSelfish Accessibility — CodeDaze
Selfish Accessibility — CodeDazeAdrian Roselli
 
Prototyping Accessibility - WordCamp Europe 2018
Prototyping Accessibility - WordCamp Europe 2018Prototyping Accessibility - WordCamp Europe 2018
Prototyping Accessibility - WordCamp Europe 2018Adrian Roselli
 
Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...
Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...
Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...Adrian Roselli
 
Fringe Accessibility — Portland UX
Fringe Accessibility — Portland UXFringe Accessibility — Portland UX
Fringe Accessibility — Portland UXAdrian Roselli
 
WCBuf: CSS Display Properties versus HTML Semantics
WCBuf: CSS Display Properties versus HTML SemanticsWCBuf: CSS Display Properties versus HTML Semantics
WCBuf: CSS Display Properties versus HTML SemanticsAdrian Roselli
 
Mind Your Lang — London Web Standards
Mind Your Lang — London Web StandardsMind Your Lang — London Web Standards
Mind Your Lang — London Web StandardsAdrian Roselli
 
Inclusive Usability Testing - WordCamp London
Inclusive Usability Testing - WordCamp LondonInclusive Usability Testing - WordCamp London
Inclusive Usability Testing - WordCamp LondonAdrian Roselli
 
CSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
CSUN 2018: Everything I Know About Accessibility I Learned from Stack OverflowCSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
CSUN 2018: Everything I Know About Accessibility I Learned from Stack OverflowAdrian Roselli
 
Inclusive Usability Testing — a11yTOCamp
Inclusive Usability Testing — a11yTOCampInclusive Usability Testing — a11yTOCamp
Inclusive Usability Testing — a11yTOCampAdrian Roselli
 
Selfish Accessibility - Girl Develop It Buffalo
Selfish Accessibility - Girl Develop It BuffaloSelfish Accessibility - Girl Develop It Buffalo
Selfish Accessibility - Girl Develop It BuffaloAdrian Roselli
 
Everything I Know About Accessibility I Learned from Stack Overflow
Everything I Know About Accessibility I Learned from Stack OverflowEverything I Know About Accessibility I Learned from Stack Overflow
Everything I Know About Accessibility I Learned from Stack OverflowAdrian Roselli
 
Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017Adrian Roselli
 
Inclusive User Testing — Guelph Accessibility Conference
Inclusive User Testing — Guelph Accessibility ConferenceInclusive User Testing — Guelph Accessibility Conference
Inclusive User Testing — Guelph Accessibility ConferenceAdrian Roselli
 

More from Adrian Roselli (20)

CSUN 2020: CSS Display Properties Versus HTML Semantics
CSUN 2020: CSS Display Properties Versus HTML SemanticsCSUN 2020: CSS Display Properties Versus HTML Semantics
CSUN 2020: CSS Display Properties Versus HTML Semantics
 
Selfish Accessibility —DevOpsDays Buffalo
Selfish Accessibility —DevOpsDays BuffaloSelfish Accessibility —DevOpsDays Buffalo
Selfish Accessibility —DevOpsDays Buffalo
 
Selfish Accessibility — YGLF Vilnius
Selfish Accessibility — YGLF VilniusSelfish Accessibility — YGLF Vilnius
Selfish Accessibility — YGLF Vilnius
 
Role of Design in Accessibility — VilniusJS Meet-up
Role of Design in Accessibility — VilniusJS Meet-upRole of Design in Accessibility — VilniusJS Meet-up
Role of Design in Accessibility — VilniusJS Meet-up
 
The Role of Design in Accessibility — a11yTO Meet-up
The Role of Design in Accessibility — a11yTO Meet-upThe Role of Design in Accessibility — a11yTO Meet-up
The Role of Design in Accessibility — a11yTO Meet-up
 
Prototyping Accessibility: Booster 2019
Prototyping Accessibility: Booster 2019Prototyping Accessibility: Booster 2019
Prototyping Accessibility: Booster 2019
 
Selfish Accessibility — Harbour Front HK
Selfish Accessibility — Harbour Front HKSelfish Accessibility — Harbour Front HK
Selfish Accessibility — Harbour Front HK
 
Selfish Accessibility — CodeDaze
Selfish Accessibility — CodeDazeSelfish Accessibility — CodeDaze
Selfish Accessibility — CodeDaze
 
Prototyping Accessibility - WordCamp Europe 2018
Prototyping Accessibility - WordCamp Europe 2018Prototyping Accessibility - WordCamp Europe 2018
Prototyping Accessibility - WordCamp Europe 2018
 
Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...
Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...
Guelph A11y Conf: Everything I Know About Accessibility I Learned from Stack ...
 
Fringe Accessibility — Portland UX
Fringe Accessibility — Portland UXFringe Accessibility — Portland UX
Fringe Accessibility — Portland UX
 
WCBuf: CSS Display Properties versus HTML Semantics
WCBuf: CSS Display Properties versus HTML SemanticsWCBuf: CSS Display Properties versus HTML Semantics
WCBuf: CSS Display Properties versus HTML Semantics
 
Mind Your Lang — London Web Standards
Mind Your Lang — London Web StandardsMind Your Lang — London Web Standards
Mind Your Lang — London Web Standards
 
Inclusive Usability Testing - WordCamp London
Inclusive Usability Testing - WordCamp LondonInclusive Usability Testing - WordCamp London
Inclusive Usability Testing - WordCamp London
 
CSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
CSUN 2018: Everything I Know About Accessibility I Learned from Stack OverflowCSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
CSUN 2018: Everything I Know About Accessibility I Learned from Stack Overflow
 
Inclusive Usability Testing — a11yTOCamp
Inclusive Usability Testing — a11yTOCampInclusive Usability Testing — a11yTOCamp
Inclusive Usability Testing — a11yTOCamp
 
Selfish Accessibility - Girl Develop It Buffalo
Selfish Accessibility - Girl Develop It BuffaloSelfish Accessibility - Girl Develop It Buffalo
Selfish Accessibility - Girl Develop It Buffalo
 
Everything I Know About Accessibility I Learned from Stack Overflow
Everything I Know About Accessibility I Learned from Stack OverflowEverything I Know About Accessibility I Learned from Stack Overflow
Everything I Know About Accessibility I Learned from Stack Overflow
 
Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017Selfish Accessibility — WordCamp Europe 2017
Selfish Accessibility — WordCamp Europe 2017
 
Inclusive User Testing — Guelph Accessibility Conference
Inclusive User Testing — Guelph Accessibility ConferenceInclusive User Testing — Guelph Accessibility Conference
Inclusive User Testing — Guelph Accessibility Conference
 

Recently uploaded

2024 February Patch Tuesday
2024 February Patch Tuesday2024 February Patch Tuesday
2024 February Patch TuesdayIvanti
 
H3 Platform CXL Solution_Memory Fabric Forum.pptx
H3 Platform CXL Solution_Memory Fabric Forum.pptxH3 Platform CXL Solution_Memory Fabric Forum.pptx
H3 Platform CXL Solution_Memory Fabric Forum.pptxMemory Fabric Forum
 
Traffic Signboard Classification with Voice alert to the driver.pptx
Traffic Signboard Classification with Voice alert to the driver.pptxTraffic Signboard Classification with Voice alert to the driver.pptx
Traffic Signboard Classification with Voice alert to the driver.pptxharimaxwell0712
 
Artificial-Intelligence-in-Marketing-Data.pdf
Artificial-Intelligence-in-Marketing-Data.pdfArtificial-Intelligence-in-Marketing-Data.pdf
Artificial-Intelligence-in-Marketing-Data.pdfIsidro Navarro
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVARobert McDermott
 
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docxLeveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docxVotarikari Shravan
 
"Platform Engineering with Development Containers", Igor Fesenko
"Platform Engineering with Development Containers", Igor Fesenko"Platform Engineering with Development Containers", Igor Fesenko
"Platform Engineering with Development Containers", Igor FesenkoFwdays
 
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsFrom Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsInflectra
 
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfIntroducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfSafe Software
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1Inbay UK
 
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?GleecusTechlabs1
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIEDanBrown980551
 
Battle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsBattle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsEvangelia Mitsopoulou
 
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17Ana-Maria Mihalceanu
 
The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolProduct School
 
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24Umar Saif
 
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Adrian Sanabria
 
My sample product research idea for you!
My sample product research idea for you!My sample product research idea for you!
My sample product research idea for you!KivenRaySarsaba
 
Breaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI TechnologyBreaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI TechnologySafe Software
 
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdfLLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdfThomas Poetter
 

Recently uploaded (20)

2024 February Patch Tuesday
2024 February Patch Tuesday2024 February Patch Tuesday
2024 February Patch Tuesday
 
H3 Platform CXL Solution_Memory Fabric Forum.pptx
H3 Platform CXL Solution_Memory Fabric Forum.pptxH3 Platform CXL Solution_Memory Fabric Forum.pptx
H3 Platform CXL Solution_Memory Fabric Forum.pptx
 
Traffic Signboard Classification with Voice alert to the driver.pptx
Traffic Signboard Classification with Voice alert to the driver.pptxTraffic Signboard Classification with Voice alert to the driver.pptx
Traffic Signboard Classification with Voice alert to the driver.pptx
 
Artificial-Intelligence-in-Marketing-Data.pdf
Artificial-Intelligence-in-Marketing-Data.pdfArtificial-Intelligence-in-Marketing-Data.pdf
Artificial-Intelligence-in-Marketing-Data.pdf
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVA
 
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docxLeveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
 
"Platform Engineering with Development Containers", Igor Fesenko
"Platform Engineering with Development Containers", Igor Fesenko"Platform Engineering with Development Containers", Igor Fesenko
"Platform Engineering with Development Containers", Igor Fesenko
 
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsFrom Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
 
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfIntroducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1
 
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIE
 
Battle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsBattle of React State Managers in frontend applications
Battle of React State Managers in frontend applications
 
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
 
The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product School
 
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
 
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
 
My sample product research idea for you!
My sample product research idea for you!My sample product research idea for you!
My sample product research idea for you!
 
Breaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI TechnologyBreaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI Technology
 
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdfLLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
 

Making Your Site Printable: Stir Trek 2013

  • 1. Making Your Site Printable Presented by Adrian Roselli May 17, 2013 #StirTrek
  • 2. About Adrian Roselli • Co-written four books. • Technical editor for two books. • Written over fifty articles, most recently for .net Magazine and Web Standards Sherpa. #StirTrek
  • 3. About Adrian Roselli • Member of W3C HTML Working Group, W3C Accessibility Task Force, five W3C Community Groups. • Building for the web since 1994. • Founder, owner at Algonquin Studios (AlgonquinStudios.com). • Learn more at AdrianRoselli.com. • Avoid on Twitter @aardrian. #StirTrek
  • 5. What We’ll Cover • Background • Techniques • Measuring • Future #StirTrek
  • 7. Responsive Web Design (RWD) • Responsive design (or adaptive design) is about supporting any device: • Desktop computer • Smartphone • Tablet • Television • Printer? #StirTrekPhoto of printed page from http://elliotjaystocks.com/blog/has-adaptive-design-failed-of-course-it-bloody-hasnt/
  • 8. PrintShame.com • As developers tout their responsive designs, they often forget the printed page. • Support for print styles goes back more than a decade, before RWD. • Used MediaQueri.es as initial seed, then picked up from articles, awards, etc. • Hoped shaming might improve state of print styles. • http://PrintShame.com #StirTrek
  • 11. Maturing (a bit) • Decided the best approach would be teaching. • Used lessons, common issues from PrintShame to develop tutorial(s). • Pitched this very talk. #StirTrek
  • 12. Print Services • Add a third-party “print” button to your site. • You have no control over layout. • You have no control over ads. • You have no control. #StirTrek
  • 13. Print Services #StirTrekhttp://rosel.li/040612 “More Evidence of the Need for Print Styles”
  • 15. Screen versus Print Screen • Continuous • Visual, audible, tactile • Vector and bitmap • Interactive • Online Print • Paged • Visual • Bitmap • Static • Offline #StirTrek
  • 16. Planning • Is your site built mobile-first? • Things I want the user to see. • Things the user may not want to see. • Things that probably won’t print anyway. #StirTrek
  • 17. Planning • Is your site built mobile-first? • Sometimes your mobile-first styles will get you nearly all the way there. • If you built desktop-first, you may be able to re- use your smaller viewport styles. #StirTrek
  • 18. Planning • Things I want the user to see: • Branding • Cross-branding • Page address • Copyright • Link addresses (?) #StirTrek
  • 19. Planning • Things the user may not want to see: • Primary navigation • Secondary navigation • Site search • Social media icons • Ad banners • Fat footers #StirTrek
  • 20. Planning • Things that probably won’t print anyway: • Colors • Backgrounds (images and colors) • Bits of timed / interactive elements • White elements (logos, text, effects) #StirTrek
  • 30. Embedding Print Styles Make a home for your print styles: @media print { /* insert your style declarations here */ } Or: <link rel="stylesheet" type="text/css" href="/css/print.css" media="print"> #StirTrek
  • 31. Page Rules The @page rule allows you to specify page margins (CSS 2.1), size and orientation (CSS3). I recommend you do not use it and defer to user preferences. @page { margin: 20cm; size: A4 landscape; } #StirTrek
  • 32. Banner Change the banner text to print units, adjust the color so the printer doesn’t replace it with gray. #Banner p#Title { font-size: 24pt; } #Banner p#Title a, #Banner p#Title a:link, #Banner p#Title a:visited { color: #000; } #StirTrek
  • 33. Navigation Get rid of the primary, secondary, tertiary navigation, remove the search box, social media links, and other bits that won’t make sense when printed. #Nav, #FlyOutNav, #SubNav, .NoPrint, p.CodeAlert, #SMLinks, #SearchForm { display: none; } #StirTrek
  • 34. Breadcrumb Keep the breadcrumb as a wayfinding method, but reduce its size and remove any links. #Bread a:link, #Bread a:visited { text-decoration: underline; color: #000; } #Bread { color: #000; font-size: 6pt; } #Bread > a:after { content: ""; } #StirTrek
  • 35. Footer Shrink the text, keep the search box, handle my cross-branding. #Footer { font-size: 6pt; color: #000; } #SearchForm { display: none; } #Footer img { float: right; } #StirTrek
  • 36. In-Page Links Select links in content container(s) and then display the href value as text after the link. #Content a[href]:after { content: " [" attr(href) "] "; word-wrap: break-word; } #Content a[href^="#"]:after, #Content a[href^="tel"]:after, #Content a[href^="mailto"]:after, #Content a[href^="javascript"]:after { content: ""; } #StirTrek
  • 37. General Styles • Clear whitespace around the content. • User’s print settings will handle page margins. • You shouldn’t need to worry about portrait vs. landscape, A4 vs. 8.5×11, etc. #StirTrek
  • 38. General Styles • Reset type sizes to points, set text to black. • Your neat, light grey text won’t trigger browser overrides to convert text to black when printing. • Not all users have color printers. It might be worth setting your bold red to black so it doesn’t come out as a medium gray. #StirTrek
  • 39. General Styles body { background: #fff; color: #000; font-size: 8pt; line-height: 150%; margin: 0; } hr { color: #ccc; background-color: #ccc; } h1, h2, h3, h4, h5, h6, code, pre { color: #000; text-transform: none; page-break-after: avoid; } #StirTrek
  • 40. General Styles h1 { font-size: 11pt; margin-top: 1em; } h2 { font-size: 10pt; } h3 { font-size: 9pt; } h4, h5, h6 { font-size: 8pt; } img { max-width: 100%; } #StirTrek
  • 41. General Styles code, pre { font-size: 8pt; background-color: transparent; } blockquote { background-image: none; } a:link, a:visited { text-decoration: underline; color: #000; } abbr:after, acronym:after { content: " (" attr(title) ") "; } ol, ul, img, table { page-break-inside: avoid; } #StirTrek
  • 42. General Styles • Write values of title (or alt, or data-*, etc) attributes into the page. • You can do this with most attributes on most elements, although it might not be a good fit. • Perhaps a data-shortURL attribute to display a minified link address to make it easier for users to type URLs. • A novel way to promote longdesc. #StirTrek
  • 43. Page Breaks The CSS properties page-break-before, page- break-after and page-break-inside have the following values: • auto: default value, no specified behavior. • avoid: tries to avoid a page-break. • always: invokes a page-break (not for page-break- inside). • left | right: Tries to place element on the start of a page on the left or right, for when you are printing bound material (books, magazines, etc.) (not for page-break-inside). #StirTrek
  • 44. Widows and Orphans Use these to control how many lines must be at the end of a page (orphans) or how many at the start of a page (widows). p { orphans: 3; /* 3 consecutive lines at end of page */ widows: 2; /* 2 lines at start of new page */ } #StirTrek
  • 45. Invert Logos For those rare cases with a white logo where you can’t load an alternate image (Chrome & Safari only): Img#Logo { -webkit-filter: invert(100%); filter: invert(100%); } If you can load an alternate, a quick tutorial: http://www.456bereastreet.com/archive/201305/replacing_images_when_printing/ #StirTrek
  • 46. Further Consideration • Hide videos. • Hide Flash movies. • Hide canvas elements. • Don’t scale images to 100% width. #StirTrek
  • 47. QR Codes • They’re a personal choice. • Allows more savvy users to get directly to the source of the printed page. • Easy to implement without burdening mobile users, users who do not print. #StirTrek
  • 48. Call the QR Code <html> <head> <style> @media print { header::before { content: url(http://chart.apis.google.com/chart?chs=120x120&cht=qr& chl=http%3A%2F%2Falgonquinstudios.com/Engage/Careers); } } </style> </head> #StirTrek
  • 49. QR Code in Use #StirTrek
  • 50. Outliers • Sadly, not every device behaves. • Samsung Galaxy S4, default Android browser. #StirTrek
  • 52. TEST! • Print to PDF for your first round (or many). • Use every browser you can. • Change paper size. • Change paper orientation. • Scale the content in the print dialog. #StirTrek
  • 54. Google Analytics • Call the GA tracking image, but only when the print styles get used. • Attach a custom event to that image. • View custom events in Google Analytics. • Make sure that at least those pages print well. #StirTrek
  • 55. Query String Parameters #StirTrek Variable Description utmac Account String. Appears on all requests. This is your UA-#######-# ID. utmwv Tracking code version. While my standard GA requests use 5.4.0, I opted to use 4.3 for reasons I no longer recall. utmn Unique ID generated for each GIF request to prevent caching of the GIF image. I just concatenate the current year, month, day, hour, minute and second. utmhn Host Name of your site, which is a URL-encoded string. utmr Referral, complete URL. In this case I just insert a dash so it is not blank. utmp Page request of the current page. utmt Indicates the type of request, which is one of: event, transaction, item, or a custom variable. If you leave it blank, it defaults to page. Because I am tracking events, I use event. utme Extensible parameter. This is where you write your event. I use 5(Print*{page address}). utmcc Cookie values. This request parameter sends all the cookies requested from the page. It can get pretty long. It must be URL encoded. It must include __utma and __utmz values.
  • 57. Call the Image <html> <head> <style> @media print { header::after { content: url(http://www.google- analytics.com/__utm.gif?utmac=UA-1464893- 3&utmwv=4.3&utmn=2013326124551&utmhn=algonquinstudios.com& utmr=&utmp=/Engage/Careers&utmt=event&utme=5%28Print*/Enga ge/Careers%29&utmcc=__utma%3D267504222.1477743002.13643147 22.1364314722.1364314722.1%3B%2B__utmb%3D267504222.17.7.13 64314901604%3B%2B__utmz%3D267504222.1364314722.1.1.utmcsr% 3D%28direct%29|utmccn%3D%28direct%29|utmcmd%3D%28none%29); } } </style> </head> #StirTrek
  • 61. Here or on Its Way • Browser support for existing features • Electronic Books • HTML5 as a publishing platform • CSS3, CSS4 #StirTrek
  • 62. Left, Right, First Pages • Use @page rule with pseudo classes to specify right, left, first: • :right will affect the page on the right. • :left will affect the page on the left. • :first will affect the first page. • :blank will affect the blank pages resulting from forced break. • An @page rule with no pseudo classes applies to all pages. #StirTrek
  • 63. Bleed and Crops • The bleed property relies on the crops property having a value. • Bleed specifies how much the page can extend outside the page box: • <length> units, referring to width of page box. • Crop draws marks outside page box: • crop: shows where a page should be cut. • cross: used to align sheets. #StirTrek
  • 64. Boxes across Pages • The box-decoration-break specifies how a box’s background, margin and border behave when broken across pages: • slice: chops the box in two. • clone: duplicates the styles onto each box. #StirTrek
  • 65. Page Margin Boxes @page { @bottom-left { content: "Copyright me." } @bottom-right { counter-increment: page; content: "Page " counter(page); } } #StirTrek
  • 67. Further Reading • Make your website printable with CSS: http://netm.ag/WA93Xg • Calling QR in Print CSS Only When Needed: http://rosel.li/030813 • Tracking When Users Print Pages: http://rosel.li/032613 • Tips And Tricks For Print Style Sheets: http://coding.smashingmagazine.com/2013/03/08/tips-tricks-print-style-sheets/ • Printing The Web: http://drublic.de/blog/printing-the-web/ • CSS Paged Media Level 2: http://www.w3.org/TR/CSS2/page.html • CSS Paged Media Module Level 3: http://www.w3.org/TR/css3-page/ • Proposals for the future of CSS Paged Media: http://dev.w3.org/csswg/css-page-4/ #StirTrek
  • 68. Making Your Site Printable Presented by Adrian Roselli May 17, 2013 #StirTrek You have just survived…