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
54
People Over Process: Turning Assumptions into shared understanding
mjovel
0
68
Iterating Awesomeness: Designing Value Through Shared Understanding
mjovel
1
120
Other Decks in Design
See All in Design
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
180
The Fight
euralisw
0
110
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
240
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
380
ウェブディレクターを救うBacklog
wattlaa
0
280
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.2k
マスとAIをなめらかにつなぐデザイン
abcmisuzu
0
240
231206_Book-launch-event_kato
hjmkth
2
1.2k
実務のための マイクロ インタラクション入門
shingo2000
0
350
素晴らしき余白の世界
kasumidyaya
1
100
プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
220
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.2k
Featured
See All Featured
Debugging Ruby Performance
tmm1
70
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
154
14k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
Building Applications with DynamoDB
mza
88
5.6k
Building Your Own Lightsaber
phodgson
98
5.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
YesSQL, Process and Tooling at Scale
rocio
163
13k
It's Worth the Effort
3n
180
27k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
What the flash - Photography Introduction
edds
64
11k
Code Reviewing Like a Champion
maltzj
513
39k
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]