HTML Design for Devices

Designing HTML forDevicesTerry Ryan | Developer EvangelistTwitter: @tpryan #CreateTheWeb

Who are you? @tpryan

THE PROBLEMS @tpryan

Screens are Exploding @tpryan

@tpryan

Source: http://osxdaily.com/2012/02/10/how-ipad-3s-retina-display-resolution-would-compare-to-other-screens/ @tpryan

SOLUTIONS @tpryan

Ignore it @tpryan

Mobile Sites @tpryan

Mobile Apps @tpryan

Responsive Sites @tpryan

I voteresponsive @tpryan

HTML alreadyhandles this @tpryan

Source: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html @tpryan

Everything addedmakes the web less @tpryan

How do we do it? @tpryan

Responsive Web• Get rid of the stuff that your users don’t want. @tpryan

@tpryan

Source: http://xkcd.com/773/ @tpryan

You are not in control of how your usersexperience your site @tpryan

Responsive Web• Develop like your browser is just one big linear display• Enhance for wider screens• Tweak for mobile• Test it on targets• Iterate until it works right @tpryan

RESPONSIVE DESIGNBROKEN DOWN @tpryan

Demo Adobe Camp Site @tpryan

Responsive Layout• Start with a right sized browser• Start designing 1 column• Make it look right• Then start attacking larger screen sizes • tablet • desktop• Then go back and do mobile @tpryan

Grid Systems• A few out there that handle this for you • Bootstrap • Responsive Grid System • CSSGrid• But know how to do it manually @tpryan

Manually• Floats• display: • table • table-row • table-cell• display • inline-block• Flexbox @tpryan

Float<ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li class="search"><a href="">Search</a></li></ul>li{ ﬂoat: left;}Home About Search @tpryan

Float<ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li class="search"><a href="">Search</a></li></ul>li{ ﬂoat: left;}.search {ﬂoat:right}Home About Search @tpryan

Float<ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li class="search"><a href="">Search</a></li></ul>Any mistakes?Home About Search @tpryan

CSS Table<ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li class="search"><a href="">Search</a></li></ul>li{display: table-cell} Home About Search @tpryan

CSS Table<ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li class="search"><a href="">Search</a></li></ul>li{display: table-cell} A SH b eo o arm u ce t h @tpryan

Inline-block<ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li class="search"><a href="">Search</a></li></ul>li{display: inline-block} Home About Search @tpryan

Forget I ever said anything about @tpryan

I reccomendinline-block in most cases @tpryan

RESPONSIVE @tpryan

Some fonts don’t look right atsmall sizes. Especially elegant, thin, fonts @tpryan

The longer thelinethe more linespacing youneed. Don’tknow why, butit’s true.The longer the line themore line spacing youneed. Don’t know why,but it’s true. @tpryan

Someheaderslook too big on @tpryan

Is this enoughIs contrast? this enoughIs contrast? this enoughIs contrast? this enough contrast? @tpryan

RESPONSIVE IMAGES @tpryan

max-width= 100% @tpryan

Adaptive Images @tpryan

Sometimes you need multiple images@tpryan

@tpryan

Nocomprehensi veanswers yet @tpryan

WHAT’S NEXT @tpryan

Not done yet @tpryan

Unless you test on the device,you haven’t tested @tpryan

But I used an emulator @tpryan

Unless you test on the device,you haven’t @tpryan

ADOBE SHADOWMihai Corlan in the next session @tpryan

Responsive Resources• http://www.alistapart.com/articles/responsive-web-design/• http://www.abookapart.com/products/responsive-web-design @tpryan

CONCLUSIONS @tpryan

Source: http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal- computing/ @tpryan

Mobile Engagement• Paypal mobile payments: • 2009 - $141,000,000 • 2011- $4,000,000,000 Text• Fab - 2X more likely to buy on mobile• Financial Times - 2x more likely to subscribe• Flipboard - 3x more likely to engage Source: http://www.lukew.com/ @tpryan

Mobile is not the distant future @tpryan

Mobile is not the future @tpryan

Mobile isthe present @tpryan

Mobile done right canyield higher returns@tpryan

You cannotcontrol your users @tpryan

Meet themwhere they are withResponsive @tpryan

Follow up?• Preso will be up at: - http://slideshare.net/tpryan• Feel free to contact me - terry.ryan@adobe.com Text - http://terrenceryan.com - Twitter: @tpryan #CreateTheWeb

HTML Design for Devices

by Terry Ryan on Aug 23, 2012

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 15

Statistics

HTML Design for Devices Presentation Transcript

https://twitter.com	9
https://si0.twimg.com	4
http://twitter.com	2