Multi screen help authoring

1,148 views
1,050 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,148
On SlideShare
0
From Embeds
0
Number of Embeds
236
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Multi screen help authoring

  1. 1. How to Deal with the Explosion in Device Sizes.Joe Welinske joewe@writersua.com  twitter: jwelinske
  2. 2.  Desktop – a dozen or so variants iPhone/iPad–6 Windows Phone ?? Android 3900+ Automobiles – ?dozens? Televisions – ?dozens?
  3. 3. Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, adipisicing elit, sed do eiusmod tempor consectetur adipisicing elit, sed do Ut incididunt ut labore et dolore magna aliqua. Screen dimensions eiusmod tempor incididunt ut labore enim ad minim veniam, quis nostrud et dolore magna aliqua. Ut enim ad exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in minim veniam, quis nostrud reprehenderit in voluptate velit esse cillum exercitation ullamco laboris nisi ut Screen resolution dolore eu fugiat nulla pariatur. Excepteur sint aliquip ex ea commodo consequat. occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit in reprehenderit Duis aute irure dolor anim id est laborum. Lorem ipsum dolor sit esse cillum dolore in voluptate velit amet, consectetur UI Elements adipisicing elit, sed do eiusmod tempor eu fugiatut labore et dolore magna aliqua. Ut incididunt nulla pariatur. Excepteur sint occaecat cupidatatnostrud enim ad minim veniam, quis non proident, sunt in culpa qui laboris nisi ut aliquip ex exercitation ullamco officia deserunt ea commodo consequat. Duis aute mollit anim id est laborum. irure dolor in Proprietary OS reprehenderit in voluptate velit esse cillum Lorem ipsum dolor sit amet, dolore eu fugiat nulla pariatur. Excepteur sint consectetur adipisicing elit,sunt indo occaecat cupidatat non proident, sed culpa eiusmod deserunt mollit anim idut labore qui officia tempor incididunt est laborum. Components et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Rapid interation  – approx. once a year per device
  4. 4.  Match amount and type of content with a device… …without crafting solutions for each deviceresponsive design  adaptive content  no shrinking from desktop  no expanding from iphone size  no cross-platform handicaps
  5. 5.  HTML5/CSS (DIVs) Tag all objects in source Style sheets for device “types” Media queries match SS with type Result  Single source content file  Looks/works differently on different devices.
  6. 6. Samsung Nokia Galaxy Kindle iPhone Note Lumia Tab Fire cs cs 7” Phone Tablet Source cs cs 10” Desktop Tablet 1080 x 1280 x Galaxy iPad 2 iPad 3 724 720 Tab http://www.w3.org/TR/css3-mediaqueries/#media1
  7. 7. Samsung Nokia Galaxy Kindle iPhone Note Lumia Tab Fire cs cs 7” Phone Tablet Source cs cs 10” Desktop Tablet 1080 x 1280 x Galaxy iPad 2 iPad 3 724 720 Tab
  8. 8. Samsung Nokia Galaxy Kindle iPhone Note Lumia Tab Fire cs cs 7” Phone Tablet Parent CS Source cs cs 10” Desktop Tablet 1080 x 1280 x Galaxy iPad 2 iPad 3 724 720 Tab
  9. 9.  Singlesource to customizable output WYSIWYG HTML5/CSS WYSIWYG conditional text Support for media queries
  10. 10. Dreamweaver and RoboHelp
  11. 11. A graceful adaption using HTML/CSS/Media Query to flow your content automatically and intelligently
  12. 12. How to Deal with the Explosion in Device Sizes.Joe Welinske joewe@writersua.com  twitter: jwelinske

×