opencms days 2013 - a technical approach to opencms responsive web design
DESCRIPTION
Responsive web design (RWD) is a key technique to reach a wide range of users on mobile and desktop machines with just a single HTML design. When done right it will make your users happy and boost conversion rate. On the other hand RWD has an impact on your whole workflow. Editors, graphics designers and content creators must adopt the principles of RWD to make it work. One great part of RWD is fluid and adaptive images. On a broadband desktop internet connection you can afford to deliver high resolution images even suitable for ‘retina’ displays. On low bandwidth mobile connections you will serve lower resolutions and retain snappy site responses. In his talk Henning will describe an approach for managing differently scaled images without affecting designers and editors (too much). With the help of OpenCms, customized JSP tags and JavaScript the creation and delivery of adaptive images can be made almost transparent in the whole workflow.TRANSCRIPT
codecentric AG
A technical approach to OpenCms responsive web design
Henning Treu
codecentric AG
„I’m wondering:
Is there a built-in way to automatically downscale large images on upload (or perhaps upon “create image resource”)? (For example, if the image exceeds a 1000x1000 px bounding box.)
If not, can I avoid touching core classes in OpenCms if I was to create such functionality myself? (Or: Can I add-on a custom “create image resource” handler class? How do I make OpenCms use it?)“
Recently in the opencms-dev list...
30.09. - 01.10.2013
Paul-Inge Flakstad, opencms-dev mailing list
codecentric AG
Henning Treu
IT Consultant
§ With codecentric since 2012§ M. Sc. Computer Science, 2007 University Düsseldorf§ 34 years§ Married, 2 kids
About me
30.09. - 01.10.2013
codecentric AG
Software and IT Consulting
§ Java Experts – Technologie Leadership– Agile Software Factory
– Enterprise Software Development
§ Java Performance Solutions– AppDynamics
§ IT Consulting– Continuous Delivery
– Big Data
– Agile Coaching
§ Technologie Partners– Atlassian
– AppDynamics
– NeoTechnologies (neo4j)
– Vaadin
– VMWare (springframework)
About codecentric AG
30.09. - 01.10.2013
codecentric AG
Agenda
• RWD Overview
• RWD Image Problem
• OpenCms Requirements
• OpenCms Implementation
• Client Implementation
• Demo
• Outlook
30.09. - 01.10.2013
codecentric AG
Responsive Web Design Overview
What´s it all about?
§ Deliver the same HTML to every client§ No server side device detection§ Looks good for every viewport width (after heavy browser optimization)
– Adds huge complexity to CSS– CSS media queries to request device capabilities
● width● height● resolution● orientation
§ Tons of responsive frameworks
– Twitter Bootstrap– ZURB foundation
§ Example: mashable.com
30.09. - 01.10.2013
codecentric AG
Example: mashable.com
Desktop
30.09. - 01.10.2013
codecentric AG
Example: mashable.com
Tablet
30.09. - 01.10.2013
codecentric AG
Example: mashable.com
Smartphone
30.09. - 01.10.2013
codecentric AG
Example: mashable.com
Smartphone
30.09. - 01.10.2013
codecentric AG
Responsive Web Design Overview
What´s it all about?
Facts!§ On average, 60% of data of a Website is images§ 72% of websites send the same data to both desktop and mobile users
Mat Marquis, RICG, Sep. 10th 2013
30.09. - 01.10.2013
codecentric AG
Responsive Web Design Overview
What´s it all about?
Facts!
http://httparchive.org/interesting.php?a=All&l=Sep%2015%202013
30.09. - 01.10.2013
codecentric AG
Responsive Web Design Overview
Why does it matter?
http://www.smartinsights.com/
30.09. - 01.10.2013
codecentric AG
Images in Responsive Web Design
It´s not one-size-fits-all
§ deliver different images according to screen width/resolution and bandwidth– bandwidth: not feasible right now
§ deliver different images for smaller screens
– scaled versions– cropped versions (art direction)
§ deliver higher resolution for high density displays
30.09. - 01.10.2013
codecentric AG
Images in Responsive Web Design
Example for Scaled Images
(cc) http://www.ormsconnect.co.za/2012/10/the-skyline-of-shanghai-by-black-station/
30.09. - 01.10.2013
codecentric AG
Images in Responsive Web Design
Example for Cropped Images
30.09. - 01.10.2013
codecentric AG
Images in Responsive Web Design
What's the problem after all?
§ No native HTML or browser support§ Specs for proposed <picture> tag not ready for production (draft 24)§ Easy for CSS background images: media queries
– but no easy integration with OpenCms
30.09. - 01.10.2013
codecentric AG
OpenCms Requirements
no-frills
§ Don´t affect editors workflow too much§ Don´t affect designers workflow too much§ Seamless integration in OpenCms: like „normal“ images§ Auto scale images on upload§ Link scaled versions to original
– Publish in publish– Delete in delete– Move on Move (+rename)
30.09. - 01.10.2013
codecentric AG
OpenCms Implementation
Action class and listeners
§ Register listeners in module action class– Listen for content creation, publishing, deleting, moving
§ Create a set of scaled images on image upload
– Always upload the best resolution available– auto-scale image to predefined widths
● OpenCms image scaler● Fixed .scaledImages folder with naming schema
30.09. - 01.10.2013
codecentric AG
Client Implementation
<span data-picture data-alt="alternative text for responsive images"> <span data-src="small.jpg"></span> <span data-src="medium.jpg" data-media="(min-width: 401px)"></span> <span data-src="large.jpg" data-media="(min-width: 800px)"></span> <span data-src="xlarge.jpg" data-media="(min-width: 1000px)"></span>
<!-- Fallback content for non-JS browsers. --> <noscript> <img src="small.jpg" alt="alternative text for fallback"> </noscript></span>
HTML and JavaScript polyfill
§ picturefill by Scott Jehl © 2012 – mimics the proposed <picture> element§ https://github.com/scottjehl/picturefill
30.09. - 01.10.2013
codecentric AG
OpenCms – Client Connection
Responsive image JSP tag
§ Custom tag to replace <img>§ Takes the same src parameter§ Writes the picturefill to the page
– Breakpoints for media queries hard coded at the moment§ Looks up scaled images in the .scaledImage folder
– Naming schema based lookup
30.09. - 01.10.2013
codecentric AG
Demo
Live Demo...
30.09. - 01.10.2013
codecentric AG
Outlook
What's to come?
§ picturefill with caching support§ Better sync of resources§ Configurable breakpoints§ More robust JavaScript§ Open source release?
30.09. - 01.10.2013
codecentric AG
The End
Thank you very much.
30.09. - 01.10.2013