1. How to Deal with the
Explosion in Device Sizes.
Joe Welinske joewe@writersua.com  twitter: jwelinske

2.  Desktop – a dozen or so variants
 iPhone/iPad–6
 Windows Phone ??
 Android 3900+
 Automobiles – ?dozens?
 Televisions – ?dozens?

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.  Match amount and type of content
with a device…
 …without crafting solutions for each
device
responsive design  adaptive content
 no shrinking from desktop
 no expanding from iphone size
 no cross-platform handicaps

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.

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
http://www.w3.org/TR/css3-mediaqueries/#media1

8. 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

9. 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

10.  Singlesource to customizable output
 WYSIWYG HTML5/CSS
 WYSIWYG conditional text
 Support for media queries

11. Dreamweaver and RoboHelp

12. A graceful adaption
 using HTML/CSS/Media Query
 to flow your content
 automatically and intelligently

13. How to Deal with the
Explosion in Device Sizes.
Joe Welinske joewe@writersua.com  twitter: jwelinske