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
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.2k
クライアントワークにおける UXリサーチの実践
kozotaira
0
670
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
340
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
460
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.5k
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
830
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
200
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
270
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
990
Starry | Storyboards | Scene 1-21
giofortuna_story
0
260
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Site-Speed That Sticks
csswizardry
10
630
Designing Experiences People Love
moore
142
24k
Designing for humans not robots
tammielis
253
25k
Raft: Consensus for Rubyists
vanstee
139
7k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Six Lessons from altMBA
skipperchong
28
3.8k
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]