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
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
Museum Heist
allykae
0
140
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
230
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
270
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.8k
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
540
OLTA株式会社/デザイン紹介資料
taxy
0
120
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
480
デザイナーとPMの両ロール_3つのポイント
toy1618
1
190
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
530
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
The Invisible Side of Design
smashingmag
299
50k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Six Lessons from altMBA
skipperchong
27
3.6k
Producing Creativity
orderedlist
PRO
344
40k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Practical Orchestrator
shlominoach
186
10k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
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]