Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Responsive Design
Search
Michael Jovel
November 13, 2013
Design
1
150
Responsive Design
Tips & Tricks talk at Production Club of Baltimore
Michael Jovel
November 13, 2013
Tweet
Share
More Decks by Michael Jovel
See All by Michael Jovel
Building & Maintaining A Living Style Guide for a Post Apocalyptic Web
mjovel
0
68
People Over Process: Turning Assumptions into shared understanding
mjovel
0
91
Iterating Awesomeness: Designing Value Through Shared Understanding
mjovel
1
120
Other Decks in Design
See All in Design
CIRCULAR ECONOMY + SERVICES
jmanooch
0
110
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
280
portfolio_YumiYasuda
yum0418
0
280
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
670
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
1.6k
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
320
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
590
The Golden Whitney
ohtristanart
PRO
0
160
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
510
「デザイン」を信じるには
iflection
0
260
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
minpaku-community-scrum-patterns
norinity1103
1
110
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
Rails Girls Zürich Keynote
gr2m
94
14k
Typedesign – Prime Four
hannesfritz
42
2.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Why Our Code Smells
bkeepers
PRO
337
57k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
KATA
mclloyd
29
14k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Transcript
HELLO
None
The opinions expressed here are those of the Presenter and
do not necessarily reflect the positions of the U.S. Department of Defense. ! Despite his statements to the contrary he does not have the authority or capability to order a drone strike based on the geolocation data of your snarky tweets.
None
None
http://www.comicvine.com/ forums/battles-7/bugs-bunny- vs-popeye-the-sailor- man-757492/
None
None
None
From Page Designs to Design Systems
http://pattern-lab.info/
Performance
Keep Javascript libraries to a minimum or conditionally load them
Instead of Social Media plugins use links
<a class="entypo-facebook share-icon" href="http://www.facebook.com/sharer.php?u=http:// airman.dodlive.mil" title=“">Facebook</a>! ! <a class="entypo-twitter share-icon"
href="http://twitter.com/share?text=An%20Awesome %20Link&url=http://airman.dodlive.mil" title=“">Twitter</a>! ! ! <a class="entypo-gplus share-icon" href="https://plus.google.com/share?url=http%3A%2F %2Fairman.dodlive.mil" title="">Google+</a>
Average website is 1.614 MB 61% are images
http://mobitest.akamai.com/
https://github.com/scottjehl/picturefill
<span data-picture data-alt="A giant stone face at The Bayon temple
in Angkor Thom, Cambodia">! <span data-src="small.jpg"></span>! <span data-src="medium.jpg" data-media="(min-width: 400px)"></span>! <span data-src="large.jpg" data-media="(min-width: 800px)"></span>! <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>! ! <!--[if (lt IE 9) & (!IEMobile)]>! <span data-src="medium.jpg"></span>! <![endif]--> ! ! ! <noscript>! <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">! </noscript>! </span>
https://github.com/estelle/clowncar
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet">! <title>Clown Car
Technique</title>! <style>! svg {! background-size: 100% 100%;! background-repeat: no-repeat;! }! @media screen and (max-width: 400px) {! svg {background-image: url(images/small.png");}! }! @media screen and (min-width: 401px) and (max-width: 700px) {! svg {background-image: url(images/medium.png);}! }! @media screen and (min-width: 701px) and (max-width: 1000px) {! svg {background-image: url(images/big.png);}! }! @media screen and (min-width: 1001px) {! svg {background-image: url(images/huge.png);}! }! </style>! </svg>
None
http://caniuse.com/
http://modernizr.com
None
None
http://dcdevicelab.com/
http://www.browserstack.com/
None
None
Airman DPS Magazine https://itunes.apple.com/us/app/airman-magazine/id566041850
None
None
None
None
None
None
None
It's easier to ask forgiveness than it is to get
permission
None
Questions? Michael Jovel- @mjovel
[email protected]