OpenCms Days 2013 - A technical approach to OpenCms responsive web design

957 views

Published on

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.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
957
On SlideShare
0
From Embeds
0
Number of Embeds
115
Actions
Shares
0
Downloads
35
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

OpenCms Days 2013 - A technical approach to OpenCms responsive web design

  1. 1. codecentric AG A technical approach to OpenCms responsive web design Henning Treu
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. codecentric AG Agenda • RWD Overview • RWD Image Problem • OpenCms Requirements • OpenCms Implementation • Client Implementation • Demo • Outlook 30.09. - 01.10.2013
  6. 6. 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
  7. 7. codecentric AG Example: mashable.com Desktop 30.09. - 01.10.2013
  8. 8. codecentric AG Example: mashable.com Tablet 30.09. - 01.10.2013
  9. 9. codecentric AG Example: mashable.com Smartphone 30.09. - 01.10.2013
  10. 10. codecentric AG Example: mashable.com Smartphone 30.09. - 01.10.2013
  11. 11. 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
  12. 12. 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
  13. 13. codecentric AG Responsive Web Design Overview Why does it matter? http://www.smartinsights.com/ 30.09. - 01.10.2013
  14. 14. 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
  15. 15. 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
  16. 16. codecentric AG Images in Responsive Web Design Example for Cropped Images 30.09. - 01.10.2013
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. codecentric AG Demo Live Demo... 30.09. - 01.10.2013
  23. 23. 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
  24. 24. codecentric AG The End Thank you very much. 30.09. - 01.10.2013

×