26. You are not in
control of how
your users
experience your
site
@tpryan
27. 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
30. 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
31. Grid Systems
• A few out there that handle this for you
• Bootstrap
• Responsive Grid System
• CSSGrid
• But know how to do it manually
@tpryan
33. Float
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li class="search"><a href="">Search</a></li>
</ul>
li{ float: left;}
Home About Search
@tpryan
34. Float
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li class="search"><a href="">Search</a></li>
</ul>
li{ float: left;}
.search {float:right}
Home About Search
@tpryan
35. 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
36. 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
37. 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 S
H
b e
o
o ar
m
u c
e
t h
@tpryan
38. 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
39. 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
40. 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
45. Some fonts
don’t look
right at
small sizes.
Especially elegant, thin, fonts
@tpryan
46. The longer the
line
the more line
spacing you
need. Don’t
know why, but
it’s true.
The longer the line the
more line spacing you
need. Don’t know why,
but it’s true.
@tpryan
47. The longer the
line
the more line
spacing you
need. Don’t
know why, but
it’s true.
The longer the line the
more line spacing you
need. Don’t know why,
but it’s true.
@tpryan
68. 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
75. 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