forked from bradfrost/this-is-responsive
-
Notifications
You must be signed in to change notification settings - Fork 0
/
resources.html
649 lines (621 loc) · 41.4 KB
/
resources.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" media="all" href="styles.css">
<title>Responsive Web Design Resources | This Is Responsive</title>
<script type="text/javascript" src="js/modernizr.js"></script>
</head>
<body>
<div class="container">
<div role="main">
<h1>Responsive Resources</h1>
<p class="intro">A collection of resources about the various aspects of responsive web design.</p>
<div id="strategy" class="grid">
<h2><a href="#strategy">Strategy</a></h2>
<section id="getting-started">
<h3><a href="#getting-started">Getting Started</a></a></h3>
<ul>
<li class="featured"><a href="http://www.alistapart.com/articles/responsive-web-design">Responsive Web Design</a></li>
<li class="featured"><a href="http://www.abookapart.com/products/responsive-web-design">Responsive Web Design Book</a></li>
<li><a href="http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/">RWD: What It Is and How to Use It</a></li>
<li><a href="http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design">Beginner's Guide to Responsive Web Design</a></li>
<li><a href="http://en.wikipedia.org/wiki/Responsive_Web_Design">Responsive Web Design on Wikipedia</a></li>
<li><a href="http://johnpolacek.github.com/scrolldeck.js/decks/responsive/">What the Heck Is Responsive Web Design?</a></li>
</ul>
</section>
<section id="concepts">
<h3><a href="#concepts">Broader Concepts</a></h3>
<ul>
<li class="featured"><a href="http://www.w3.org/TR/mobile-bp/#OneWeb">One Web</a></li>
<li class="featured"><a href="http://www.alistapart.com/articles/dao/">The Dao of Web Design</a></li>
<li class="featured"><a href="http://futurefriend.ly">Future Friendly</a></li>
<li class="featured"><a href="http://www.lukew.com/ff/entry.asp?933">Mobile First</a></li>
<li class="featured"><a href="http://adactio.com/journal/4523/">Content First</a></li>
<li><a href="http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/">Mobile-First Responsive Web Design</a></li>
<li><a href="http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/">RWD: Missing the Point</a></li>
<li><a href="http://blog.responsivenews.co.uk/post/12642980168/axes-of-responsive-design">Axes of responsive design</a></li>
<li><a href="http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere/">COPE: Create Once, Publish Everywhere</a></li>
</ul>
</section>
<section id="approach">
<h3><a href="#approach">Approach</a></h3>
<ul>
<li class="featured"><a href="http://responsive.rga.com/tagged/strategy">This Is Responsive Tagged 'Strategy'</a></li>
<li class="featured"><a href="http://www.lukew.com/ff/entry.asp?1509">Which One: Responsive Design, Device Experiences, or RESS?</a></li>
<li class="featured"><a href="http://mobiforge.com/starting/story/mobile-web-content-adaptation-techniques">Mobile web content adaptation techniques</a></li>
<li class="featured"><a href="http://stephanierieger.com/responsiveness-is-a-characteristic/">Responsiveness Is a Charactersic</a></li>
<li><a href="http://developers.facebook.com/html5/blog/post/6/">Device Experiences & Responsive Design</a></li>
<li><a href="http://dev.opera.com/articles/view/responsive-web-design-a-project-management-perspective/">Responsive web design: a project-management perspective</a></li>
<li><a href="http://uxmag.com/articles/a-primer-on-responsive-design">A Primer on Responsive Design</a></li>
<li><a href="http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/">Separate Mobile Website Vs. Responsive Website: Presidential Smackdown Edition</a></li>
</ul>
</section>
<section id="process">
<h3><a href="#process">Process</a></h3>
<ul>
<li class="featured"><a href="http://www.slideshare.net/pkattera/design-process-for-responsive-web-design">Design Process in the Responsive Age</a></li>
<li class="featured"><a href="http://www.slideshare.net/stephenhay/mobilism2012">Responsive Design Workflow</a></li>
<li class="featured"><a href="http://www.markboulton.co.uk/journal/comments/responsive-summit-workflow">Responsive Summit: Workflow</a></li>
<li class="featured"><a href="http://www.slideshare.net/yiibu/pragmatic-responsive-design">Pragmatic Responsive Design</a></li>
<li class="featured"><a href="http://responsive.rga.com/tagged/process">This Is Responsive Tagged 'Process'</a></li>
<li><a href="http://viljamis.com/blog/2012/responsive-workflow/">Responsive Workflow</a></li>
<li><a href="http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/">Design Process in the Responsive Age</a></li>
<li><a href="http://mobile.smashingmagazine.com/2012/06/07/sketching-a-new-mobile-web/">Sketching A New Mobile Web</a></li>
</ul>
</section>
<section id="budget">
<h3><a href="#budget">Budget</a></h3>
<ul>
<li class="featured"><a href="http://bradfrostweb.com/blog/web/how-much-does-a-responsive-web-design-cost/">How Much Does A Responsive Web Design Cost?</a></li>
</ul>
</section>
<section id="case-studies">
<h3><a href="#case-studies">Case Studies</a></h3>
<ul>
<li class="featured"><a href="http://www.lukew.com/ff/entry.asp?1691">Impact of Responsive Designs</a></li>
<li><a href="http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brand">Time Magazine</a></li>
<li><a href="http://electricpulp.com/notes/you-like-apples/">O'Neill Clothing</a></li>
<li><a href="http://gravitydept.com/blog/skinny-ties-and-responsive-ecommerce/">Skinny Ties</a></li>
<li><a href="http://www.lukew.com/ff/entry.asp?1691">Regent College</a></li>
</ul>
</section>
</div>
<div id="design-tools" class="grid">
<h2><a href="#design-tools">Design Tools</a></h2>
<section id="galleries">
<h3><a href="#galleries">Inspiration</a></h3>
<ul>
<li class="featured"><a href="http://mediaqueri.es/">Mediaqueri.es</a></li>
<li class="featured"><a href="http://twitter.com/rwd">@RWD</a></li>
<li class="featured"><a href="http://responsive.rga.com/tagged/inspiration">This Is Responsive tagged 'Inspiration'</a></li>
<li><a href="http://weedygarden.net/highered-rwd-directory/">HigherEd RWD Directory</a></li>
<li><a href="http://responsivedeck.com/">Responsive Deck</a></li>
<li><a href="http://www.zurb.com/responsive">Zurb Responsive Gallery</a></li>
</ul>
</section>
<section id="sketch">
<h3><a href="#sketch">Sketching</a></h3>
<ul>
<li><a href="http://appsketchbook.com/products/responsive-design-sketchbook">Responsive Design Sketchbook</a></li>
<li><a href="http://www.mightymeta.co.uk/responsive-web-design-sketch-sheets/">Responsive Web Design Sketch Sheets</a></li>
<li><a href="http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets">Responsive Design Sketch Sheets</a></li>
<li><a href="http://interfacesketch.tumblr.com/">Interface Sketch</a></li>
<li><a href="http://www.zurb.com/playground/responsive-sketchsheets">Responsive Sketch Sheets</a></li>
</ul>
</section>
<section id="psd">
<h3><a href="#psd">PSDs</a></h3>
<ul>
<li class="featured"><a href="http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/">A better Photoshop grid for responsive web design</a></li>
<li class="featured"><a href="http://www.blazrobar.com/2012/free-psd-files-and-ui-kits/stripes-responsive-web-design-psd/">Stripes - Responsive Web Design PSD</a></li>
</ul>
</section>
<section id="post-psd-tools">
<h3><a href="#post-psd-tools">Post-PSD Tools</a></h3>
<ul>
<li class="featured"><a href="http://styletil.es/">Style Tiles</a></li>
<li class="featured"><a href="http://danielmall.com/articles/rif-element-collages/">Element Collages</a></li>
<li><a href="http://seesparkbox.com/foundry/our_new_responsive_design_deliverable_the_style_prototype">Style Prototype</a></li>
<li><a href="http://webstiles.namanyayg.com/">Webstile</a></li>
<li><a href="http://republicofquality.com/projects/interactive-style-tiles/">Interactive Style Tiles</a></li>
</ul>
</section>
<section id="pattern-libraries">
<h3><a href="#pattern-libraries">Pattern Libraries</a></h3>
<ul>
<li class="featured"><a href="https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides">Front-end Style Guide Roundup</a></li>
<li class="featured"><a href="http://pea.rs/">Pears</a></li>
<li><a href="http://speakerdeck.com/u/lukebrooker/p/future-friendly-style-guides">Future-Friendly Style Guides</a></li>
<li><a href="http://www.starbucks.com/static/reference/styleguide/">Starbucks Style Guide</a></li>
</ul>
</section>
<section id="frameworks">
<h3><a href="#frameworks">Frameworks/Boilerplates/Prototyping</a></h3>
<ul>
<li class="featured"><a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a></li>
<li class="featured"><a href="http://stuffandnonsense.co.uk/projects/320andup/">320 And Up</a></li>
<li class="featured"><a href="http://foundation.zurb.com/">Foundation ZURB</a></li>
<li class="featured"><a href="http://lessframework.com/">LESS</a></li>
<li class="featured"><a href="http://jetstrap.com/">Jetstrap</a></li>
<li><a href="http://divshot.com/">Divshot</a></li>
<li><a href="http://framelessgrid.com">Frameless</a></li>
<li><a href="http://html5boilerplate.com/mobile">Mobile Boilerplate</a></li>
<li><a href="http://getwirefy.com/">Wirefy</a></li>
<li><a href="https://github.com/taupecat/sass-responsive">Sass Responsive</a></li>
</ul>
</section>
<section id="calculators">
<h3><a href="#calculators">Calculators</a></h3>
<ul>
<li><a href="http://www.rwdcalc.com/">RWD Calc</a></li>
<li><a href="http://csswizardry.com/fluid-grids/">Fluid Grids</a></li>
<li><a href="http://ratiostrong.com/">RatioStrong</a></li>
<li><a href="http://pixelperc.com/">PixelPerc</a></li>
<li><a href="http://pxtoem.com/">PixeltoEm</a></li>
<li><a href="http://riddle.pl/emcalc/">Em Calculator</a></li>
</ul>
</section>
</div>
<div id="layout" class="grid">
<h2><a href="#layout">Layout</a></h2>
<section id="fluid-grids">
<h3><a href="#fluid-grids">Fluid Grids</a></h3>
<ul>
<li class="featured"><a href="http://www.alistapart.com/articles/fluidgrids/">Fluid Grids</a></li>
<li class="featured"><a href="http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-5">Five simple steps to designing grid systems — Part 5</a></li>
<li class="featured"><a href="http://www.flexiblewebbook.com/">Flexible Web Design — Creating Liquid and Elastic Layouts with CSS</a></li>
<li><a href="http://builtbyboon.com/blog/proportional-grids">Proportional Grids</a></li>
<li><a href="https://github.com/elefontpress/rwd-grid-example">Bearded's Responsive Grid</a></li>
<li><a href="http://palantir.net/blog/responsive-design-s-dirty-little-secret">Responsive Design's Dirty Little Secret</a></li>
</ul>
</section>
<section id="grid-tools">
<h3><a href="#grid-tools">Grid Tools</a></h3>
<ul>
<li><a href="http://www.gridsetapp.com/">GridSet</a></li>
<li><a href="http://thatcoolguy.github.com/gridless-boilerplate/">Gridless Boilerplate</a></li>
<li><a href="http://goldengridsystem.com/">Golden Grid System</a></li>
<li><a href="http://gridpak.com/">Gridpak</a></li>
<li><a href="http://responsive.gs/">Responsive Grid System</a></li>
<li><a href="http://fluidbaselinegrid.com/">Fluid Baseline Grid</a></li>
<li><a href="http://responsify.it/">Responsify</a></li>
<li><a href="http://www.columnal.com/">Columnal</a></li>
<li><a href="http://semantic.gs/">Semantic Grid System</a></li>
<li><a href="http://susy.oddbird.net/">Susy, Responsive grids for Compass</a></li>
<li><a href="http://www.gumbyframework.com/">Gumby</a></li>
<li><a href="http://cssgrid.net/">1140 CSS Grid</a></li>
<li><a href="http://www.amazium.co.uk/">Amazium</a></li>
<li><a href="http://csswizardry.com/inuitcss/">Inuit CSS</a></li>
<li><a href="http://designlunatic.com/projects/blucss/">BluCSS</a></li>
<li><a href="http://singularity.gs/">Singularity</a></li>
<li><a href="http://unit.gs/">Unit Grid System</a></li>
<li><a href="http://thoughtbot.com/neat/">Bourbon Neat</a></li>
<li><a href="http://unit.gs/">Unit Grid System</a></li>
<li><a href="http://dfcb.github.com/Bedrock/">Bedrock Responsive Grid</a></li>
<li><a href="https://github.com/davatron5000/Foldy960">Foldy960</a></li>
<li><a href="http://www.responsivegridsystem.com/">Responsive Grid System</a></li>
</ul>
</section>
<section id="adjusting-layout">
<h3><a href="#adjusting-layout">Adjusting Layout</a></h3>
<ul>
<li class="featured"><a href="http://www.lukew.com/ff/entry.asp?1514">Multi-Device Layout Patterns</a></li>
<li class="featured"><a href="http://trentwalton.com/2011/07/14/content-choreography/">Content Choreography</a></li>
<li><a href="http://sarawb.com/2012/03/07/content-strategy-responsive-design/">Content Strategy for Responsive Design</a></li>
</ul>
</section>
</div>
<div id="media-queries" class="grid">
<h2><a href="#media-queries">Media Queries</a></h2>
<section id="mq-overview">
<h3><a href="#">Overview</a></h3>
<ul>
<li class="featured"><a href="http://responsive.rga.com/tagged/mediaqueries">This Is Responsive Tagged 'Media Queries'</a></li>
<li class="featured"><a href="http://www.w3.org/TR/css3-mediaqueries/">Media Queries</a></li>
</ul>
</section>
<section id="mq-determining">
<h3><a href="#mq-determining">Determining Breakpoints</a></h3>
<ul>
<li class="featured"><a href="http://www.netmagazine.com/tutorials/determining-breakpoints-responsive-design">Determining breakpoints for a responsive design</a></li>
<li class="featured"><a href="http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/">The EMs have it: Proportional Media Queries FTW!</a></li>
<li class="featured"><a href="http://adactio.com/journal/5425/">Fanfare for the common breakpoint</a></li>
<li class="featured"><a href="http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/">Essential considerations for crafting quality media queries</a></li>
<li><a href="http://www.slideshare.net/yiibu/pragmatic-responsive-design">Pragmatic Responsive Design</a></li>
<li><a href="http://www.markboulton.co.uk/journal/theinbetween">The In-Between</a></li>
<li><a href="http://seesparkbox.com/foundry/there_is_no_breakpoint">There Is No Breakpoint</a></li>
<li><a href="http://mattwilcox.net/archive/entry/id/1075/">Choosing device sizes to support for your responsive designs</a></li>
<li><a href="http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning">A Simple Device Diagram for Responsive Design Planning</a></li>
<li><a href="http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/">Device-Agnostic Approach To Responsive Web Design</a></li>
<li><a href="http://adactio.com/journal/6044/">Tweakpoints</a></li>
</ul>
</section>
<section id="mq-vertical">
<h3><a href="#mq-vertical">Vertical Media Queries</a></h3>
<ul>
<li><a href="http://trentwalton.com/2012/01/11/vertical-media-queries-wide-sites/">Vertical Media Queries & Wide Sites</a></li>
<li><a href="http://css-tricks.com/responsive-web-above-the-fold/">Responsive Web Above The Fold</a></li>
<li><a href="http://blog.bearded.com/post/31535600872/whats-your-vertical">What’s Your Vertical?</a></li>
</ul>
</section>
<section id="mq-tools">
<h3><a href="#mq-tools">Tools</a></h3>
<ul>
<li><a href="https://github.com/scottjehl/Respond">Respond.js</a></li>
<li><a href="http://wicky.nillia.ms/enquire.js">enquire.js - Awesome Media Queries in JavaScript</a></li>
<li><a href="http://techtime.getharvest.com/blog/harvey-a-second-face-for-your-javascript">Harvy JS-based media queries</a></li>
<li><a href="http://edenspiekermann.com/en/blog/responsive-javascript-helpers">Relocate DOM Elements and call functions on breakpoints</a></li>
<li><a href="http://www.springload.co.nz/love-the-web/responsive-javascript">OnMediaQuery - Responsive Javascript</a></li>
<li><a href="http://www.jordanm.co.uk/palmreader">Palm Reader media query detector</a></li>
<li><a href="http://nicewebtype.com/notes/2012/01/27/breakpoints-and-range-rules/">Breakpoints and range rules</a></li>
<li><a href="http://mqtest.io">MQtest.io - Tests what dimensions a browser will respond to</a></li>
</ul>
</section>
<section id="mq-support">
<h3><a href="#mq-support">For Unsupported Browsers</a></h3>
<ul>
<li><a href="https://github.com/scottjehl/Respond">Respond.js</a></li>
<li><a href="http://jakearchibald.github.com/sass-ie/">Sass IE</a></li>
<li><a href="“http://nicolasgallagher.com/mobile-first-css-sass-and-ie/">“Mobile first” CSS and getting Sass to help with legacy IE</a></li>
<li><a href="http://www.alwaystwisted.com/post.php?s=2011-12-01-a-less-approach-to-mobile-first-css-supporting-older-ie-browsers">A LESS approach to "Mobile First" CSS & supporting older IE browsers</a></li>
</ul>
</section>
</div>
<div id="type" class="grid">
<h2><a href="#type">Typography</a></h2>
<section id="typography">
<h3><a href="#typography">Typography</a></h3>
<ul>
<li><a href="http://kupferschrift.de/cms/2012/05/responsive-typography/">RWD Typography</a></li>
<li><a href="http://informationarchitects.net/blog/responsive-typography-the-basics/">Responsive Typography: The Basics</a></li>
<li><a href="http://informationarchitects.net/blog/responsive-typography/">Responsive Typography</a></li>
<li><a href="http://trentwalton.com/2012/06/19/fluid-type/">Fluid Type</a></li>
<li><a href="http://viljamis.com/blog/2013/prototyping-responsive-typography/">Prototyping Responsive Typography</a></li>
<li><a href="http://jordanm.co.uk/tinytype">Default Mobile OS fonts</a></li>
</ul>
</section>
<section id="typography-units">
<h3><a href="#typography-units">Units</a></h3>
<ul>
<li><a href="http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/">Type study: Sizing the legible letter</a></li>
<li><a href="http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/">How we learned to leave default font-size alone and embrace the em</a></li>
<li><a href="http://filamentgroup.com/lab/on_ems_and_rems">On Ems and Rems</a></li>
</ul>
</section>
<section id="lettering">
<h3><a href="#lettering">Lettering</a></h3>
<ul>
<li><a href="http://fittextjs.com/">FitText</a></li>
<li><a href="http://www.frequency-decoder.com/demo/slabText/">SlabText</a></li>
</ul>
</section>
<section id="line-height">
<h3><a href="#line-height">Line Height</a></h3>
<ul>
<li><a href="http://www.netmagazine.com/tutorials/preserving-vertical-rhythm-css-and-jquery">Preserving vertical rhythm with CSS and jQuery</a></li>
<li><a href="http://viljamis.com/blog/2012/typography/">On Typography</a></li>
</ul>
</section>
</div>
<div id="images" class="grid">
<h2><a href="#images">Images</a></h2>
<section id="images-in-rwd">
<h3><a href="#images-in-rwd">Overview</a></h3>
<ul>
<li><a href="http://unstoppablerobotninja.com/entry/fluid-images">Fluid Images</a></li>
<li><a href="http://blog.cloudfour.com/a-framework-for-discussing-responsive-images-solutions/">A framework for discussing responsive images solutions</a></li>
<li><a href="http://christopherschmitt.com/2012/01/31/adaptive-images-in-responsive-web-design/">Adaptive Images in Responsive Web Design</a></li>
<li><a href="http://www.sitepoint.com/html5-responsive-design-image-dimensions/">HTML5 Responsive Design: How to Determine the Real Dimensions of an Image in JavaScript</a></li>
</ul>
</section>
<section id="image-techniques">
<h3><a href="#image-techniques">Responsive Image Techniques</a></h3>
<ul>
<li class="featured"><a href="http://css-tricks.com/which-responsive-images-solution-should-you-use/">Which Responsive Image Technique Should You Use?</a></li>
<li class="featured"><a href="http://blog.cloudfour.com/responsive-imgs-part-2/">Responsive Images - In Depth Look at Techniques</a></li>
<li><a href="http://adaptive-images.com/">Adaptive Images</a></li>
<li><a href="http://www.sencha.com/learn/how-to-use-src-sencha-io">Sencha.io Src</a></li>
<li><a href="https://github.com/teleject/hisrc">HiSrc</a></li>
<li><a href="https://github.com/joshje/Responsive-Enhance">Responsive Enhance</a></li>
<li><a href="http://www.jordanm.co.uk/post/22964442013/source-shuffling-responsive-images-based-on-media">Source shuffling - responsive images based on media queries</a></li>
<li><a href="https://github.com/adamdbradley/focal-point">Focal Point</a></li>
<li><a href="http://imageresizing.net">ImageResizer</a></li>
<li><a href="https://github.com/mindrevolution/ImageResizer-ResponsivePresets">ResponsivePresets</a></li>
<li><a href="http://riapi.org">RESTful Imaging API Specification</a></li>
</ul>
</section>
<section id="image-picture">
<h3><a href="#image-picture">New Elements</a></h3>
<ul>
<li><a href="http://www.w3.org/community/respimg/">Responsive Images Community Group</a></li>
<li><a href="http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/">Responsive Images: How they Almost Worked and What We Need</a></li>
<li><a href="http://dev.opera.com/articles/view/responsive-images-problem/">Responsive images: what's the problem, and how do we fix it?</a></li>
<li><a href="https://github.com/scottjehl/picturefill">PictureFill element Polyfill</a></li>
</ul>
</section>
<section id="background-images">
<h3><a href="#background-images">Background Images</a></h3>
<ul>
<li><a href="http://elliotjaystocks.com/blog/better-background-images-for-responsive-web-design/">Better background images for responsive web design</a></li>
</ul>
</section>
<section id="hires-images">
<h3><a href="#hires-images">High Resolution</a></h3>
<ul>
<li><a href="http://www.netmagazine.com/features/tips-and-tricks-retina-images-responsive-web-design">Tips and tricks for Retina images in responsive web design</a></li>
<li><a href="http://www.alistapart.com/articles/mo-pixels-mo-problems/">Mo Pixels, Mo Problems</a></li>
<li><a href="http://bradfrostweb.com/blog/mobile/hi-res-optimization/">Optimizing Web Experiences for High Resolution Screens</a></li>
</ul>
</section>
<section id="bandwidth-images">
<h3><a href="#bandwidth-images">Bandwidth Detection</a></h3>
<ul>
<li><a href="https://github.com/adamdbradley/foresight.js">Foresight.js</a></li>
<li><a href="https://github.com/nathanford/pngy">Pngy</a></li>
<li><a href="http://yahoo.github.com/boomerang/doc/">Boomerang JS</a></li>
<li><a href="http://www.w3.org/TR/netinfo-api/">Network Connection Spec</a></li>
</ul>
</section>
</div>
<div id="components" class="grid">
<h2><a href="#components">Components</a></h2>
<section id="navigation">
<h3><a href="#navigation">Navigation</a></h3>
<ul>
<li><a href="http://bradfrostweb.com/blog/web/responsive-nav-patterns/">Responsive Navigation Patterns</a></li>
<li><a href="http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/">Complex Navigation Patterns for Responsive Design</a></li>
<li><a href="http://www.netmagazine.com/features/master-mobile-navigation">Master Mobile Navigation</a></li>
<li><a href="http://www.lukew.com/ff/entry.asp?1649">Responsive Navigation: Optimizing for Touch Across Devices</a></li>
<li><a href="http://www.netmagazine.com/tutorials/build-smart-mobile-navigation-without-hacks">Build a smart mobile navigation without hacks</a></li>
<li><a href="http://filamentgroup.com/lab/responsive_design_approach_for_navigation/">A Responsive Design Approach for Navigation, Part 1</a></li>
<li><a href="http://www.456bereastreet.com/archive/201206/an_alternative_to_select_elements_as_navigation_in_narrow_viewports/">An alternative to select elements as navigation in narrow viewports</a></li>
<li><a href="http://www.palantir.net/blog/scalable-navigation-patterns-responsive-web-design">Scalable Navigation Patterns in Responsive Web Design</a></li>
<li><a href="http://www.stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design">We need a standard show navigation icon for responsive web design</a></li>
<li><a href="http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-simple-responsive-mobile-first-navigation/">A Simple, Responsive, Mobile First Navigation</a></li>
<li><a href="http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/">Pull Down for Navigation</a></li>
<li><a href="http://www.welcomebrand.co.uk/thoughts/a-simple-responsive-navigation/">A Simple Responsive Navigation</a></li>
<li><a href="http://azadcreative.com/2012/07/responsive-mobile-first-navigation-menu/">Building a Responsive, Mobile-First Navigation Menu</a></li>
<li><a href="http://alwaystwisted.com/post.php?s=2012-05-14-create-a-responsive-mobile-first-menu">Create a Responsive, Mobile First Menu</a></li>
<li><a href="http://css-tricks.com/responsive-menu-concepts/">Responsive Menu Concepts</a></li>
<li><a href="http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/">Implementing Off-Canvas Navigation For A Responsive Website</a></li>
<li><a href="https://marketplace.firefox.com/developers/docs/patterns">Responsive Navigation Patterns for Firefox OS apps</a></li>
</ul>
</section>
<section id="advertising">
<h3><a href="#advertising">Advertising</a></h3>
<ul>
<li><a href="http://mobile.smashingmagazine.com/2012/11/29/making-advertising-work-in-a-responsive-world/">Making Advertising Work In A Responsive World</a></li>
<li><a href="http://www.markboulton.co.uk/journal/comments/responsive-advertising">Responsive Advertising</a></li>
<li><a href="http://www.vanseodesign.com/web-design/responsive-advertising/">Where Does Advertising Fit In A Responsive World?</a></li>
<li><a href="http://blog.buysellads.com/2012/01/adaptive-web-design-advertising/">Adaptive Web-Design & Advertising</a></li>
<li><a href="http://www.impressivewebs.com/link-dump-on-responsive-ads/">Link Dump on Responsive Ads</a></li>
<li><a href="http://www.labnol.org/internet/google-adsense-responsive-design/25252/"></a></li>
</ul>
</section>
<section id="video">
<h3><a href="#video">Video</a></h3>
<ul>
<li><a href="http://fitvidsjs.com/">Fitvids.js</a></li>
<li><a href="http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/">Creating Intrinsic Ratios for Video</a></li>
<li><a href="http://webdesignerwall.com/tutorials/css-elastic-videos">CSS: Elastic Videos</a></li>
<li><a href="http://www.netmagazine.com/tutorials/create-fluid-width-videos">Create fluid width videos</a></li>
</ul>
</section>
<section id="tables">
<h3><a href="#tables">Tables</a></h3>
<ul>
<li class="featured"><a href="http://css-tricks.com/responsive-data-table-roundup/">Responsive Data Tables </a></li>
<li><a href="http://www.zurb.com/playground/responsive-tables">Responsive Tables</a></li>
<li><a href="http://filamentgroup.com/lab/responsive_design_approach_for_complex_multicolumn_data_tables/">A Responsive Design Approach for Complex, Multicolumn Data Tables</a></li>
<li><a href="http://dyn.com/responsive-css-table-design-in-practice-web-development/">Responsive CSS Table Design In Practice & Execution</a></li>
<li><a href="http://johnpolacek.github.com/stacktable.js/">Stacktable.js</a></li>
</ul>
</section>
<section id="calendar">
<h3><a href="#calendar">Calendar</a></h3>
<ul>
<li><a href="http://dbushell.com/2012/01/04/responsive-calendar-demo/">Responsive Tables (and a calendar demo)</a></li>
</ul>
</section>
<section id="carousel">
<h3><a href="#carousel">Carousel</a></h3>
<ul>
<li><a href="http://bradfrostweb.com/blog/post/the-overflow-pattern/">The Overflow Pattern</a></li>
<li><a href="http://www.uxde.net/blog/2012/09/08/responsive-jquery-image-slider-plugins/">Best of:Responsive jQuery Image Slider Plugins</a></li>
<li><a href="http://dimsemenov.com/plugins/royal-slider/">Royal Slider</a></li>
<li><a href="http://responsive-slides.viljamis.com/">Responsive Slides</a></li>
</ul>
</section>
</div>
<div id="development" class="grid">
<h2><a href="#development">Development Techniques</a></h2>
<section id="conditional-loading">
<h3><a href="#conditional-loading">Conditional Loading</a></h3>
<ul>
<li><a href="http://filamentgroup.com/lab/ajax_includes_modular_content/">An Ajax-Include Pattern for Modular Content</a></li>
<li><a href="http://24ways.org/2011/conditional-loading-for-responsive-designs">Conditional Loading for Responsive Designs</a></li>
<li><a href="http://adactio.com/journal/5042/">Clean Conditional Loading</a></li>
<li><a href="http://adactio.com/journal/5414/">Conditionally loading content</a></li>
<li><a href="http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/">Conditional loading of resources with mediaqueries</a></li>
</ul>
</section>
<section id="ress">
<h3><a href="#ress">RESS</a></h3>
<ul>
<li><a href="http://www.lukew.com/ff/entry.asp?1392">RESS: Responsive Design + Server Side Components</a></li>
<li><a href="http://www.netmagazine.com/tutorials/getting-started-ress">Getting Started with RESS Tutorial</a></li>
<li><a href="http://www.dmolsen.com/mobile-in-higher-ed/2012/02/21/ress-and-the-evolution-of-responsive-web-design/">RESS: An Evolution of Responsive Web Design</a></li>
<li><a href="http://detector.dmolsen.com/demo/mustache/">Templating with Detector & Mustache for RESS</a></li>
<li><a href="http://weedygarden.net/2012/05/a-case-for-ress/">A Case for RESS</a></li>
<li><a href="http://www.mstoner.com/index.php/blog/comments/956/reinventing_the_wheel_the_innovation_behind_notre_dames_unique_new_homepage/">The Innovation Behind Notre Dame's Homepage</a></li>
<li><a href="http://www.mstoner.com/index.php/blog/comments/956/reinventing_the_wheel_the_innovation_behind_notre_dames_unique_new_homepage/">A Responsive Experience Begins on the Server</a></li>
</ul>
</section>
<section id="performance">
<h3><a href="#performance">Performance</a></h3>
<ul>
<li><a href="http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/">Performance Implications of Responsive Design</a></li>
<li><a href="https://speakerdeck.com/nebraskajs/performance-and-responsive-web-design">Performance and Responsive Web Design</a></li>
<li><a href="https://speakerdeck.com/grigs/performance-implications-of-responsive-design">Performance Implications of Repsonsive Design Pre
<li><a href="http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/">Debunking Responsive CSS Performance Myths</a></li>
</ul>
</section>
</div>
<div id="testing" class="grid">
<h2><a href="#testing">Testing</a></h2>
<section id="viewport-testing">
<h3><a href="#viewport-testing">Viewport Testing</a></h3>
<ul>
<li><a href="http://www.responsinator.com/">Responsinator</a></li>
<li><a href="http://dfcb.github.com/Responsivator/">Responsivator</a></li>
<li><a href="http://responsive.is/">Responsive.is</a></li>
<li><a href="http://mattkersley.com/responsive/">Responsive Web Design Testing Tool</a></li>
<li><a href="http://responsivepx.com/">Responsivepx</a></li>
<li><a href="http://screenqueri.es/">Screenqueri.es</a></li>
<li><a href="http://itunes.apple.com/gb/app/aptus/id510487565?mt=12">Aptus</a></li>
<li><a href="http://responsive.victorcoulon.fr/">Responsive Design Bookmarklet</a></li>
<li><a href="http://www.benjaminkeen.com/misc/bricss/">Bricss</a></li>
<li><a href="https://github.com/izilla/Izilla-Media-Query-Debugger">Izilla Media Query Debugger</a></li>
<li><a href="http://quirktools.com/screenfly/">Screenfly</a></li>
<li><a href="http://www.jordanm.co.uk/lab/responsiveroulette">Responsive Roulette</a></li>
<li><a href="http://chrome.google.com/webstore/detail/fontier/dkbamaalakfhckcidgiigdinhcncaeae">Fontier for Chrome</a></li>
<li><a href="https://chrome.google.com/webstore/detail/resolution-test/idhfcdbheobinplaamokffboaccidbal">Resolution Test</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View">Firefox Developer Tools (shortcut CTRL + SHIFT + M) </a></li>
<li><a href="http://lab.maltewassermann.com/viewport-resizer/">Viewport Resizer</a></li>
<li><a href="http://www.toddmotto.com/jresize-plugin-for-one-window-responsive-development">jResize</a></li>
<li><a href="http://resizemybrowser.com/">Resize My Browser</a></li>
<li><a href="http://juicecreative.co.uk/juicer/">Juicer</a></li>
<li><a href="https://chrome.google.com/webstore/detail/rwddy/gkhnhkakdgogajfjmenpdeakhofjadhe">RWD
<li><a href="http://bradfrostweb.com/demo/ish/">ish.</a></li>
<li><a href="http://responsivetools.com/">Responsive Tools</a></li>
<li><a href="http://ami.responsivedesign.is/">Am I Responsive</a></li>
</ul>
</section>
<section id="device-testing">
<h3><a href="#device-testing">Device Testing</a></h3>
<ul>
<li><a href="http://mobilewebbestpractices.com/resources/#r-testing">Mobile Web Best Practices Testing Resources</a></li>
<li><a href="http://html.adobe.com/edge/inspect/">Adobe Edge Inspect</a></li>
<li><a href="http://www.opera.com/developer/tools/mobile/">Opera Mobile Testing Tools</a></li>
<li><a href="https://github.com/viljamis/Remote-Preview">Remote Preview</a></li>
</ul>
</section>
<section id="testing-writing">
<h3><a href="#testing-writing">Testing Resources</a></h3>
<ul>
<li><a href="http://mobiletestingfordummies.tumblr.com/post/20056227958/testing">Testing for Dummies</a></li>
<li><a href="http://stephanierieger.com/strategies-for-choosing-test-devices/">Strategies for Choosing Testing Devices</a></li>
<li><a href="http://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/">Test on Real Mobile Devices without Breaking the Bank</a></li>
<li></li>
</ul>
</section>
</div>
</div>
<div id="cms" class="grid">
<h2><a href="#cms">Content Management Systems</a></h2>
<section id="wordpress">
<h3><a href="#wordpress">Wordpress</a></h3>
<ul>
<li><a href="http://mobile.smashingmagazine.com/2012/05/24/creating-mobile-optimized-websites-using-wordpress/">Creating Mobile Optimized Websites Using Wordpress</a></li>
<li><a href="http://www.webdesignerdepot.com/2012/09/creating-a-responsive-header-in-wordpress-3-4/">Creating a responsive header in WordPress 3.4</a></li>
<li><a href="http://themble.com/bones/">Bones – A Responsive Wordpress Theme Template by Eddie Machado</a></li>
</ul>
</section>
<section id="drupal">
<h3><a href="#drupal">Drupal</a></h3>
<ul>
<li><a href="http://groups.drupal.org/mobile/drupal-8">Drupal 8 Mobile Initiative</a></li>
<li><a href="http://drupal.org/project/adaptivetheme">AdaptiveTheme</a></li>
<li><a href="http://drupal.org/project/aurora">Aurora: Sass+Compass base theme using Susy or Singularity</a></li>
<li><a href="http://drupal.org/project/zen">Zen: Sass+Compass base theme using Zen Grids</a></li>
<li><a href="http://drupal.org/project/omega">Omega Drupal 7 Base Theme</a></li>
<li><a href="http://mydrupalblog.lhmdesign.com/my-drupal-blog-case-study-upgrade-redesign-html5-responsive">My Drupal Blog - Case Study (Upgrade, Redesign, HTML5, Responsive)</a></li>
<li><a href="http://www.zivtech.com/blog/responsive-drupal-theme-50-lines-code-or-less">A Responsive Drupal Theme in 50 Lines of Code or Less</a></li>
</ul>
</section>
<section id="ee">
<h3><a href="#ee">Expression Engine</a></h3>
<ul>
<li><a href="http://couchable.co/blog/post/responsive-images-in-expressionengine">Responsive Images in ExpressionEngine</a></li>
</ul>
</section>
</div>
<div id="cms" class="grid">
<h2><a href="#email">Email</a></h2>
<section id="email-design">
<h3><a href="#email-design">Email Design</a></h3>
<ul>
<li><a href="http://www.campaignmonitor.com/guides/mobile/">Responsive Email Design</a></li>
<li><a href="http://www.zurb.com/article/1075/taking-our-email-campaigns-to-a-responsiv">Taking Email Campaigns to a Responsive Level</a></li>
<li><a href="http://mailchimp.com/resources/guides/email-on-mobile-devices/">Email on Mobile Devices</a></li>
</ul>
</section>
</div>
<div id="further-resources" class="grid">
<h2><a href="#further-resources">Further Resources</a></h2>
<section id="books">
<h3><a href="#books">Books</a></h3>
<ul>
<li><a href="http://www.abookapart.com/products/responsive-web-design">Responsive Web Design</a></li>
<li><a href="http://www.implementingresponsivedesign.com/">Implementing Responsive Design</a></li>
<li><a href="http://easy-readers.net/books/adaptive-web-design/">Adaptive Web Design</a></li>
<li><a href="https://shop.smashingmagazine.com/responsive-design.html">Responsive Design (eBook)</a></li>
<li><a href="http://www.packtpub.com/responsive-web-design-with-html-5-and-css3/book">Responsive Web Design with HTML5 and CSS3</a></li>
<li><a href="https://shop.smashingmagazine.com/smashing-book-3.html">Redesign The Web - The Smashing Book 3</a></li>
<li><a href-"https://shop.smashingmagazine.com/the-mobile-book-deluxe-bundle.html">The Mobile Book</a></li>
<li><a href="http://www.manning.com/carver/">The Responsive Web</a></li>
<li><a href="http://www.amazon.com/dp/0321858549/ref=cm_sw_su_dp">Designing Web and Mobile Graphics</a></li>
</ul>
</section>
<section id="roundup">
<h3><a href="#roundup">Roundups</a></h3>
<ul>
<li><a href="http://www.webdesignerdepot.com/2011/09/the-ultimate-responsive-web-design-roundup/">The ultimate responsive web design roundup</a></li>
<li><a href="http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design">50 fantastic tools for responsive web design</a></li>
<li><a href="http://zomigi.com/blog/responsive-layouts-presentation/">Building Responsive Layouts presentation at Responsive Web Design Summit</a></li>
<li><a href="http://mobile.bazaarvoice.com/uxdd/handbook.php?article=web-related-reading">Bazaarvoice Handbook for Mobile Design</a></li>
</ul>
</section>
<section id="presentations">
<h3><a href="#presentations">Presentations</a></h3>
<ul>
<li><a href="http://www.slideshare.net/yiibu/pragmatic-responsive-design">Pragmatic Responsive Design</a></li>
<li><a href="https://speakerdeck.com/u/malarkey/p/fashionably-flexible-responsive-web-design-full-day-workshop-1">Fashionably flexible responsive web design</a></li>
</ul>
</section>
<section id="tutorials">
<h3><a href="#tutorials">Tutorials</a></h3>
<ul>
<li><a href="http://www.html5rocks.com/en/mobile/responsivedesign/">Creating a Mobile-First Responsive Web Design</a></li>
<li><a href="http://www.netmagazine.com/tutorials/build-responsive-site-week-designing-responsively-part-1">Build a Responsive Site in a Week</a></li>
</ul>
</section>
</div>
<small>* Recommended Resource</small>
<footer role="contentinfo">
<div>
<nav id="menu">
<ul role="navigation" class="nav">
<li><a href="index.html" class="nav-home">This Is <strong>Responsive.</strong></a></li>
<li><a href="patterns.html">Patterns</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="http://responsive.rga.com">News</a></li>
</ul>
</nav>
</div>
</footer>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-2687475-23']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>