the specs behind the sex, mobile-friendly layout beyond the desktop
TRANSCRIPT
![Page 1: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/1.jpg)
The specs behind the sex MOBILE-FRIENDLY LAYOUTS BEYOND THE DESKTOP
![Page 2: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/2.jpg)
Zeldman pic by Tony Quartarolo
![Page 3: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/3.jpg)
![Page 4: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/4.jpg)
Mobile Web philosophy
![Page 5: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/5.jpg)
![Page 6: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/6.jpg)
![Page 7: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/7.jpg)
![Page 8: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/8.jpg)
![Page 9: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/9.jpg)
![Page 10: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/10.jpg)
![Page 11: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/11.jpg)
![Page 12: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/12.jpg)
![Page 13: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/13.jpg)
Three methodologies
![Page 14: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/14.jpg)
1. Special mobile site2. Do nothing at all3. Optimise for mobile
![Page 15: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/15.jpg)
1. Special mobile site2. Do nothing at all3. Optimise for mobile
![Page 16: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/16.jpg)
refactored for small screen,
not dumbed down for mobile
![Page 17: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/17.jpg)
offer users choice:desktop or mobile?
![Page 18: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/18.jpg)
beware browser sniffingphoto: http://www.flickr.com/photos/timdorr/2096272747/
![Page 19: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/19.jpg)
1. Special mobile site2. Do nothing at all3. Optimise for mobile
![Page 20: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/20.jpg)
not WAP or text anymore...
![Page 21: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/21.jpg)
1. Special mobile site2. Do nothing at all3. Optimise for mobile
![Page 22: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/22.jpg)
![Page 23: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/23.jpg)
CSS 2 Media Types
![Page 24: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/24.jpg)
Media types
all brailleembossed handheldprint projectionscreen speechtty tv
![Page 25: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/25.jpg)
CSS 3 Media Queries“...the new hotness” Jeffrey Zeldman
http://www.zeldman.com/2010/04/08/best-aea-yet/
![Page 26: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/26.jpg)
CSS 3 Media Queries
● builds on CSS 2.1 Media Types concept● more granular control (not just screen, print...)
http://www.w3.org/TR/css3-mediaqueries/
![Page 27: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/27.jpg)
Media features
width colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
![Page 28: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/28.jpg)
CSS 3 Media Queries
<link rel="stylesheet" ... media="screen and (max-width:480px)" href="...">
@import url("...") screen and (max-width:480px);
@media screen and (max-width:480px) { // insert CSS rules here}
![Page 29: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/29.jpg)
Multiple expressions – and keyword
@media screen and (min-width:180px) and (max-width:480px) { // screen device and width > 180px // and width < 480px }
![Page 30: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/30.jpg)
Multiple expressions – comma separated
@media screen and (min-width:800px), print and (min-width:20em) { // screen device with width > 800px // or print device with width > 20em }
![Page 31: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/31.jpg)
Negative expressions – not keyword
@media not screen and (min-width:800px) { // not applied to screen device // with width > 800px}
![Page 32: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/32.jpg)
Exclusive expressions – only keyword
@media only screen and (min-width:800px) { // only applied to screen device // with width > 800px}
![Page 33: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/33.jpg)
Multiple media queries/* “The absence of a media query is the first media query” Bryan Rieger */
@media screen and (max-width:480px) { // screen device and width < 480px }@media screen and (max-width:980px) { // screen device and width < 980px }@media screen and (min-width:980px) { // screen device and width > 980px }
![Page 38: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/38.jpg)
www.themaninblue.com/writing/perspective/2004/09/21
![Page 39: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/39.jpg)
unsolved mysteries…
![Page 40: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/40.jpg)
mobile devices lie
![Page 41: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/41.jpg)
viewport metasuggests an initial layout viewport
and zoom
![Page 42: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/42.jpg)
physical vs virtual pixels
![Page 43: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/43.jpg)
![Page 44: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/44.jpg)
![Page 45: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/45.jpg)
viewport meta
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=320, initial-scale=2.3,user-scalable=no">
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
![Page 46: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/46.jpg)
![Page 47: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/47.jpg)
![Page 48: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/48.jpg)
<meta name="viewport" content="width=550">
![Page 49: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/49.jpg)
If you're using Media Queries:
<meta name="viewport" content="width=device-width">
If you have an explicit width:
<meta name="viewport" content="width=550">
![Page 50: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/50.jpg)
Viewport properties
width initial-scaleheight minimum-scaleuser-scalable maximum-scale
![Page 51: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/51.jpg)
high-dpi devices lie twice
![Page 52: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/52.jpg)
<meta name="viewport" content="width=device-width,target-densitydpi=device-dpi">
![Page 53: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/53.jpg)
CSS Device Adaptation@viewport { width: 320px; zoom: 2.3; user-zoom: fixed;}www.w3.org/TR/css-device-adapt
only works in Opera Mobile 11+ at the moment, with -o- prefix dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport
![Page 54: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/54.jpg)
Viewport properties
width / min-width / max-width user-zoom
height / min-height / max-height orientation
zoom / min-zoom / max-zoom resolution
![Page 55: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/55.jpg)
<meta name="viewport" content="width=550">
@-o-viewport { width: 550px;}
![Page 56: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/56.jpg)
<meta name="viewport" content="width=550,maximum-scale=1.0,target-densitydpi=device-dpi">
@-o-viewport { width: 550px; max-zoom: 1; resolution: device;}
![Page 57: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/57.jpg)
/* selective viewport via CSS */
@media … { @-o-viewport { … /* for propellerheads */ }}
![Page 58: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/58.jpg)
<meta name="viewport" content="width=550,maximum-scale=1.0,target-densitydpi=device-dpi">@media screen { @-o-viewport { /* undo meta viewport settings */ width: auto; max-zoom: auto; }}@media screen and (max-device-width: 550px) { @-o-viewport { /* 550px viewport on small screen devices */ width: 550px; }}
![Page 59: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/59.jpg)
![Page 60: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/60.jpg)
![Page 61: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/61.jpg)
![Page 62: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/62.jpg)
<meta name="viewport" content="width=550,maximum-scale=1.0,target-densitydpi=device-dpi">@media screen { @-o-viewport { /* undo meta viewport settings */ width: auto; max-zoom: auto; }}@media screen and (max-device-width: 550px) { @-o-viewport { /* 550px viewport on small screen devices */ width: 550px; }}
![Page 63: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/63.jpg)
@-o-viewport { /* minimum of 550px viewport width */ width: 550px auto; max-zoom: auto;}
![Page 64: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/64.jpg)
The future
![Page 65: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/65.jpg)
matchMedia
if (window.matchMedia("(min-width: 400px)").matches) { /* the view port is at least 400 pixels wide */ } else { /* the view port is less than 400 pixels wide */
}
For IE9+ and Opera, polyfill
github.com/paulirish/matchMedia.js/
![Page 66: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/66.jpg)
![Page 67: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/67.jpg)
lowsrc
<img src=hires.jpg lowsrc=lores.jpg alt="blah">
Both images are download; never in spec
![Page 68: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/68.jpg)
Apple way
<img src=lores.jpg data-src=hires.jpg alt="blah">
Both images are download; requires JS for hires image
![Page 69: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/69.jpg)
adaptive-images.com
Add .htaccess and adaptive-images.php to your document-root folder.
Add one line of JavaScript into the <head> of your site.
Add your CSS Media Query values into $resolutions in the PHP file.
![Page 70: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/70.jpg)
Super WebKit-tastic CSS
selector {background: image-set (url(foo-lowres.png) 1x, url(foo-highres.png) 2x) center;}
selector {background: image-set (url(foo-lowres.png) 1x low-bandwidth, url(foo-highres.png) 2x high-bandwidth);}
http://lists.w3.org/Archives/Public/www-style/2012Feb/1103.html
![Page 71: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/71.jpg)
.. extrapolate to HTML?
<img src=foo-lowres.png set="foo-lowres.png 1x, foo-highres.png 2x" alt="blah">
"I'll post something to the whatwg thread referencing this proposal."
![Page 72: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/72.jpg)
video and Responsive Web Design
<video><source … media="(min-width:1000px)"><source … media="(max-width:1000px)">
</video>
![Page 73: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/73.jpg)
Adaptive Image Element
<picture><source … media="(min-width:1000px)"><source … media="(max-width:1000px)">
</picture>
www.brucelawson.co.uk/2011/notes-on-adaptive-images-yet-again/
http://www.w3.org/community/respimg/
![Page 74: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/74.jpg)
<picture alt=… ><source … media="(min-width:1000px)"><source … media="(max-width:1000px)">
<img src=… alt=…></picture>
![Page 75: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/75.jpg)
“not a magic bullet...”
![Page 76: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/76.jpg)
Good or evil?
Florian Rivoal
![Page 77: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/77.jpg)
Note to people who weren't at the talk: following slides are strawman ideas for the next iteration of Media Queries (CSS 4) and are almost certainly to be completely different if they ever make it into the specification. (CSS 3 MQs became a "Proposed Recommendation", eg a "Standard" week of 23 April 2012, so very early days!)
![Page 78: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/78.jpg)
@media screen and (script) {...}
@media screen and not (script) {…}
http://lists.w3.org/Archives/Public/www-style/2012Jan/0034.html
![Page 79: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/79.jpg)
@media (paged) and (interactive:0) { // I am like a printer }@media (paged) and (interactive) { // I'm a projector, or like a Kindle}@media (paged) and (interactive) and (touch) { // I'm like a touch-screen Kindle}
![Page 80: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/80.jpg)
@media (touch) and (max-width: 480) { // looks like an smart phone} @media (touch) and (keyboard) and (min-width:600) { // looks like a touch-screen laptop}
![Page 81: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/81.jpg)
@media (remote) { // TV or set-top box?} @media (remote) and (hover) { // Wii?}
![Page 82: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/82.jpg)
![Page 83: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/83.jpg)
@media (network: v-slow) {..}Florian: "It has been proposed. Most people agree that it would be cool, nobody has a clue about how to spec it in a way that is useful and implementable. If you find people with a clue, encourage them to submit proposals to me or to [email protected]. Use [css4-mediaqueries] in the subject line, and read lists.w3.org/Archives/Public/www-style/2012Mar/0691.html first."
![Page 84: The specs behind the sex, mobile-friendly layout beyond the desktop](https://reader033.vdocument.in/reader033/viewer/2022060108/554d1f2db4c905c5208b4972/html5/thumbnails/84.jpg)
“embrace the fluidity,don't fight it”