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
140
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
64
People Over Process: Turning Assumptions into shared understanding
mjovel
0
89
Iterating Awesomeness: Designing Value Through Shared Understanding
mjovel
1
120
Other Decks in Design
See All in Design
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
490
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
280
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
210
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
240
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
220
Personal Story Sequence - Vendetta(WIP)
elrns88
0
420
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
390
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
1
150
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
810
OLTA株式会社/デザイン紹介資料
taxy
0
120
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
150
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
340
Featured
See All Featured
Visualization
eitanlees
146
15k
Faster Mobile Websites
deanohume
306
31k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Rails Girls Zürich Keynote
gr2m
94
13k
We Have a Design System, Now What?
morganepeng
51
7.4k
GitHub's CSS Performance
jonrohan
1030
460k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Designing for Performance
lara
605
68k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
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 mjovel@gmail.com