-
Notifications
You must be signed in to change notification settings - Fork 192
/
resources.html
1005 lines (972 loc) · 70.2 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
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!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>
<li><a href="https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/">RWD Fundamentals</a>
<li><a href="http://alistapart.com/column/what-we-mean-when-we-say-responsive">What We Mean When We Say "Responsive"</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://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 Characteristic</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>
<li><a href="http://speckyboy.com/2013/09/11/responsive-design-is-not-about-screen-sizes-any-more/">Responsive Design is Not About Screen Sizes Any More</a></li>
<li><a href="http://alistapart.com/article/planning-for-performance">Planning for Performance</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://responsivedesignworkflow.com/">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://www.iaskyouanswer.co.uk/workflow.php">A Matter Of Workflow</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>
<li><a href="https://docs.google.com/folder/d/0B8FCzUsjm57YbkVVTDZwUlJZN0E/edit">RWD Process Docuements</a></li>
<li><a href="http://trentwalton.com/2013/04/10/reorganization/">Reorganization</a></li>
<li><a href="https://medium.com/p/270048a88c70">Great Responsive Web Design is a Matter of Process</a></li>
<li><a href="http://www.elezea.com/2013/09/responsive-design-agency-workflow/">An agency workflow for Responsive Web Design</a></a></li>
<li><a href="http://alistapart.com/article/client-relationships-and-the-multi-device-web">eClient Relationships and the Multi-Device Web</a></li>
<li><a href="http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups">Responsive Comping: Obtaining Signoff without Mockups</a></li>
<li><a href="http://lozworld.com/lozwords/notes-on-a-responsive-guardian-redesign">Notes on a responsive Guardian redesign</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://bradfrostweb.com/blog/post/responsive-design-to-the-rescue-how-homage-grew-mobile-revenue-by-258/">Responsive Design to the Rescue: How HOMAGE Grew Mobile Revenue by 258%</a></li>
<li><a href="http://www.lukew.com/ff/entry.asp?1691">Regent College</a></li>
<li><a href="http://mobile.smashingmagazine.com/2013/06/18/adapting-to-a-responsive-design-case-study/">Adapting To A Responsive Design</a></li>
<li><a href="http://blog.14islands.com/post/52546836134/case-study-betting-on-a-fully-responsive-web/">Betting on a fully responsive web application</a></li>
<li><a href="http://blog.14islands.com/post/60004825885/how-we-built-the-website-for-responsive-io/">How we built the website for responsive.io</a></li>
<li><a href="http://gomakethings.com/adopting-a-dog-from-your-phone/">PAWS New England: Adopting a dog from your phone</a></li>
<li><a href="http://www.edwardrobertson.co.uk/blog/is-responsive-web-design-worth-it">Is Responsive Web Design Worth It?</a></li>
<li><a href="http://econsultancy.com/us/blog/63185-14-brands-that-increased-conversion-rates-via-responsive-design">14 brands that increased conversion rates via responsive design</a></li>
<li><a href="http://www.getelastic.com/how-walmart-cas-responsive-redesign-boost-conversion-by-20/">How Walmart.ca’s Responsive Redesign Boost Conversion by 20%</a></li>
<li><a href="http://www.lukew.com/ff/entry.asp?1939">MTV's Responsive Design Boosts Metrics on Mobile & Beyond</a></li>
</ul>
</section>
</div>
<div id="approach" class="grid">
<section id="retrofitting">
<h3><a href="#retrofitting">Retrofitting</a></h3>
<ul>
<li><a href="http://webstandardssherpa.com/reviews/responsive-retrofitting/">Responsive Retrofitting</a></li>
<li><a href="http://simplebits.com/notebook/2011/08/19/adapted/">Adapted</a></li>
<li><a href="https://github.com/sparkbox/Responsive-Retrofitting">Responsive Retrofitting Bookmarklet</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>
<li><a href="http://responsivecss.net/">Responsive CSS</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>
<li><a href="http://jumpsand.com/devpad.php">DevPad</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://daverupert.com/2013/04/responsive-deliverables/">Responsive Deliverables</a></li>
<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://www.republicofquality.com/style-tiles/">Interactive Style Tiles</a></li>
<li><a href="http://www.justinmind.com">Justinmind Prototyping Platform</a></li>
</ul>
</section>
<section id="pattern-libraries">
<h3><a href="#pattern-libraries">Pattern Libraries</a></h3>
<ul>
<li class="featured"><a href="http://styleguides.io/">Styleguides.io</a></li>
</ul>
</section>
<section id="frameworks">
<h3><a href="#frameworks">Frameworks/Boilerplates/Prototyping</a></h3>
<ul>
<li class="featured"><a href="http://getbootstrap.com/">Bootstrap</a></li>
<li class="featured"><a href="http://foundation.zurb.com/">Foundation ZURB</a></li>
<li class="featured"><a href="http://inuitcss.com/">Inuit CSS</a></li>
<li><a href="http://www.maxmert.com/">Maxmert</a></li>
<li><a href="http://gumbyframework.com/">Gumby</a></li>
<li><a href="http://cardinalcss.com/">Cardinal</a></li>
<li><a href="http://purecss.io/">Pure</a></li>
<li><a href="http://awesomeness.intuio.at/">Awesomeness</a></li>
<li><a href="http://www.cascade-framework.com/">Cascade Framework</a></li>
<li><a href="http://www.layoutit.com/">LayoutIt</a></li>
<li><a href="http://www.amazium.co.uk/">Amazium</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>
<li><a href="http://cferdinandi.github.com/kraken/">Kraken</a></li>
<li><a href="http://www.protoshare.com/">Protoshare</a></li>
<li><a href="http://www.yaml.de">YAML</a></li>
<li><a href="http://responsivebp.com/">Responsive</a></li>
<li><a href="http://www.taigaboilerplate.com/">Taiga Boilerplate</a></li>
<li><a href="http://www.thinkintags.com/">Thinkin' Tags</a></li>
<li><a href="https://www.easel.io">Easel</a></li>
<li><a href="http://semantic-ui.com/">Semantic UI</a></li>
<li><a href="http://dartanian300.github.io/Flex-Grid-System/">Flex Grid System</a></li>
<li><a href="http://www.cutegrids.com/">Cute Grids</a></li>
<li><a href="http://codeply.com/">Codeply</a></li>
<li><a href="http://www.simbla.com/">Simbla</a></li>
<li><a href="http://www.coffeecup.com/responsive-layout-maker-pro/">Responsive Layout Maker Pro</a></li>
<li><a href="http://refills.bourbon.io/">Refills</a></li>
<li><a href="http://getskeleton.com/">Skeleton</a></li>
</ul>
</section>
<section id="visual-editors">
<h3><a href="#visual-editors">Visual Editors</a></h3>
<ul>
<li><a href="http://macaw.co/">Macaw</a></li>
<li><a href="http://jetstrap.com/">Jetstrap</a></li>
<li><a href="http://html.adobe.com/edge/reflow/">Adobe Reflow</a></li>
<li><a href="http://divshot.com/">Divshot</a></li>
<li><a href="http://froont.com/">Froont</a></li>
<li><a href="http://webflow.com/">Webflow</a></li>
<li><a href="http://www.webydo.com/">Webydo</a></li>
<li><a href="http://www.coffeecup.com/designer">Responsive Site Designer</a></li>
<li><a href="https://mobirise.com/">Mobirise</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/2011/06/fluid-grid-calculator/">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>
<li><a href="http://isthisretina.com/">Is This Retina</a></li>
<li><a href="http://rqrwd.com/">RQRWD</a></li>
<li><a href="http://px-em.com/">PX-EM</a></li>
<li><a href="http://rafaelespinoza.com/munity/">Munity</a></li>
<li><a href="http://www.giantfocal.com/pxtoem">PX to EM Converter</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 class="featured"><a href="http://www.gridsetapp.com/">GridSet</a></li>
<li class="featured"><a href="http://lessframework.com/">LESS</a></li>
<li><a href="http://susy.oddbird.net/">Susy for Compass</a></li>
<li><a href="http://unsemantic.com/">Unsemantic</a></li>
<li><a href="http://framelessgrid.com">Frameless</a></li>
<li><a href="http://www.fitgrd.com/">Fitgrd</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://cssgrid.net/">1140 CSS Grid</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://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>
<li><a href="http://www.profoundgrid.com/">Profound Grid</a></li>
<li><a href="https://github.com/Cyber-Duck/hoisin.scss">Hoisin.scss</a></li>
<li><a href="http://www.cssgrid.co/">cssgrid.co</a></li>
<li><a href="https://github.com/webfactory/Raster.gs/">Raster.gs</a></li>
<li><a href="http://www.volumethemes.com/flexgrid">FlexGrid</a></li>
<li><a href="http://muellergridsystem.com/">Mueller Grid System</a></li>
<li><a href="http://jeet.gs/">Jeet</a></li>
<li><a href="https://github.com/AaronRutley/minimal-grid">Minimal Grid</a></li>
<li><a href="http://34grid.com/">34 Grid</a></li>
<li><a href="http://pintsize.io/">Pintsize</a></li>
<li><a href="http://knacss.com/">Knacss</a></li>
<li><a href="https://github.com/superreal/srgrid">sR Grid - Dead Simple Flexbox Grid</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>
<li><a href="http://www.iandevlin.com/blog/2013/06/css/css-stacking-with-display-table">CSS Stacking with display:table</a></li>
<li><a href-"http://www.eightshapes.com/responsive-grid-demo/">Working Vocabulary: Responsive Grid Behaviors</a></li>
<li><a href="http://liquidapsive.com/">Liquidapsive</a></li>
<li><a href="http://alistapart.com/article/content-out-layout">Content Out Layout</a></li>
</ul>
</section>
<section id="large-screens">
<h3><a href="#large-screens">Large Screens</a></h3>
<ul>
<li><a href="http://webdesign.tutsplus.com/articles/general/life-beyond-960px-designing-for-large-screens/">Life Beyond 960px: Designing for Large Screens</a></li>
<li><a href="http://alistapart.com/article/surveying-the-big-screen">Surveying The Big Screen</a></li>
<li><a href="http://trentwalton.com/2012/01/11/vertical-media-queries-wide-sites/">Vertical Media Queries and Wide Sites</a></li>
</ul>
</section>
<section id="js-layout">
<h3><a href="#js-layout">JS Layout Tools</a></h3>
<ul>
<li><a href="http://masonry.desandro.com/">Masonry</a></li>
<li><a href="http://isotope.metafizzy.co/">Isotope</a></li>
<li><a href="http://iraycd.com/brickwork/">Brickwork</a></li>
</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>
<li><a href="https://speakerdeck.com/bencallahan/serving-rwd-styles">Serving RWD Styles</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.creativebloq.com/responsive-web-design/determining-breakpoints-responsive-design-8122871">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>
<li><a href="http://beta.screenqueri.es/">Screenqueri.es - 30 different device presets + custom resolutions.</a></li>
<li><a href="https://github.com/steveblue/res">Res.js</a></li>
<li><a href="https://github.com/zeixcom/Anzeixer">Anzeixer</a></li>
<li><a href="https://github.com/superreal/srbreakpoints">sR Breakpoints - SASS Helpers for Breakpoint Handling</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>
<li><a href="http://cognition.happycog.com/article/fall-back-to-the-cascade">Fall back to the Cascade</a></li>
<li><a href="http://seesparkbox.com/foundry/structuring_and_serving_styles_for_older_browsers" title="sb-media, supporting old IE using module-based partials in SCSS">sb-media, supporting old IE using module-based partials in SCSS</a></li>
</ul>
</section>
<section id="mq-techniques">
<h3><a href="#mq-techniques">Techniques</a></h3>
<ul>
<li><a href="http://css-tricks.com/conditional-media-query-mixins/">Creating Conditional Media Query Mixins with SCSS</a></li>
<li><a href="https://github.com/buildingblocks/grunt-combine-media-queries">Grunt Combine Media Queries</a></li>
<li><a href="https://github.com/RayPatterson/breakpoint-bridge">Breakpoint Bridge</a></li>
</ul>
</section>
<section id="element-queries">
<h3><a href="#element-queries">Element/Container Queries</a></h3>
<ul>
<li><a href="http://ianstormtaylor.com/media-queries-are-a-hack/">Media Queries Are a Hack</a></li>
<li><a href="http://www.xanthir.com/b4PR0">Element Queries</a></li>
<li><a href="http://coding.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/">Media Queries Are Not The Answer: Element Query Polyfill</a></li>
<li><a href="http://filamentgroup.com/lab/element_query_workarounds/">Working Around a Lack of Element Queries</a></li>
<li><a href="http://www.jonathantneal.com/blog/thoughts-on-media-queries-for-elements/">Thoughts on Media Queries for Elements</a></li>
<li><a href="http://www.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/">Media Queries Are Not The Answer: Element Query Polyfill</a></li>
<li><a href="http://responsiveimagescg.github.io/eq-usecases/?utm_source=dlvr.it&utm_medium=twitter">Use Cases and Requirements for Element Queries</a></li>
<li><a href="http://fourword.fourkitchens.com/article/use-element-queries-today-eqjs">Use element queries today with eq.js</a></li>
<li><a href="http://jsbin.com/ramiguzefiji/1/edit">Element query experiment by Scott Jehl</a></li>
<li><a href="http://www.backalleycoder.com/2014/04/18/element-queries-from-the-feet-up/">Element Queries, From the Feet Up</a></li>
<li><a href="http://alistapart.com/article/container-queries-once-more-unto-the-breach">Container Queries: Once More Unto the Breach</a></li>
<li><a href="http://responsiveimagescg.github.io/cq-usecases/">Use Cases and Requirements for Element Queries</a></li>
<li><a href="http://hugogiraudel.com/2014/04/22/why-element-queries-matter/">Why Element Queries Matter</a></li>
<li><a href="https://justmarkup.com/log/2016/02/use-cases-for-container-queries/">Use cases for container queries</a></li>
<li>Tools</li>
<li><a href="https://github.com/snugug/eq.js">eq.js</a></li>
<li><a href="http://marcj.github.io/css-element-queries/">CSS Element Queries</a></li>
<li><a href="https://github.com/tysonmatanich/elementQuery">elementQuery</a></li>
<li><a href="http://boomtownroi.github.io/boomqueries/">Boomqueries</a></li>
<li><a href="https://github.com/ausi/cq-prolyfill">Container Queries Prolyfill</a></li>
<li><a href="https://github.com/filamentgroup/scoped-media-query">Scoped Media Queries</a></li>
<li><a href="http://elementqueries.com/">Element Queries</a></li>
<li><a href="https://ethanmarcotte.com/wrote/on-container-queries/">On Container Queries</a></li>
<li><a href="https://github.com/judas-christ/breaks2000">breaks2000</a></li>
<li><a href="https://au.si/css-conditions-cq-alternative">CSS Conditions – An Alternative To Container Queries</a></li>
<li><a href="https://paulrobertlloyd.com/2017/04/container_queries">Questioning Container Queries</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>
<li><a href="http://tympanus.net/codrops/2013/11/19/techniques-for-responsive-typography">Techniques for Responsive Typography</a></li>
<li><a href="https://github.com/viljamis/Molten-Leading">Molten Leading</a></li>
<li><a href="http://modularscale.com">Modular Scale</a></li>
<li><a href="http://www.gridlover.net/">Gridlover</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>
<li><a href="http://jxnblk.github.io/fitter-happier-text/">Fitter Happier Text</a></li>
<li><a href="http://circletype.labwire.ca/">CircleType.js</a></li>
</ul>
</section>
<section id="line-height">
<h3><a href="#line-height">Line Length and 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>
<li><a href="http://www.smashingmagazine.com/2014/09/29/balancing-line-length-font-size-responsive-web-design/">Balancing Line Length and Font Size in RWD</a></li>
</ul>
</section>
</div>
<div id="images" class="grid">
<h2><a href="#images">Images</a></h2>
<section id="images-overview">
<h3><a href="#images-overview">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://blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/">8 Guidelines and 1 Rule for Responsive Images</a></li>
<li><a href="http://timkadlec.com/2013/06/why-we-need-responsive-images/">Why We Need Responsive Images</a></li>
</ul>
</section>
<section id="image-techniques">
<h3><a href="#image-techniques">Responsive Image Techniques</a></h3>
<ul>
<li class="featured"><a href="https://github.com/scottjehl/picturefill">PictureFill</a></li>
<li class="featured"><a href="http://alistapart.com/article/responsive-images-in-practice">Responsive Images in Practice</a></li>
<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-images-101-definitions/">Responsive Images 101: Definitions</a></li>
<li class="featured"><a href="http://blog.cloudfour.com/responsive-images-101-part-2-img-required/">Responsive Images 101: Img Required</a></li>
<li class="featured"><a href="http://blog.cloudfour.com/responsive-images-101-part-3-srcset-display-density/">Responsive Images 101: Srcset Display Density</a></li>
<li class="featured"><a href="http://blog.cloudfour.com/responsive-images-101-part-4-srcset-width-descriptors/">Responsive Images 101: Srcset Width Descriptors</a></li>
<li class="featured"><a href="http://blog.cloudfour.com/responsive-images-101-part-5-sizes/">Responsive Images 101: Sizes</a></li>
<li class="featured"><a href="http://blog.cloudfour.com/responsive-images-101-part-6-picture-element/">Responsive Images 101: Picture</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="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>
<li><a href="https://hacks.mozilla.org/2013/03/capturing-improving-performance-of-the-adaptive-web/">Capturing – Improving Performance of the Adaptive Web</a></li>
<li><a href="http://coding.smashingmagazine.com/2013/06/02/clown-car-technique-solving-for-adaptive-images-in-responsive-web-design/">Clown Car Technique</a></li>
<li><a href="http://mobile.smashingmagazine.com/2013/09/16/responsive-images-performance-problem-case-study/">Addressing The Responsive Images Performance Problem: A Case Study</a></li>
<li><a href="https://github.com/imazen/slimmage">Slimmage</a></li>
<li><a href="https://github.com/stowball/rwd.images.js">rwd.images.js</a></li>
<li><a href="https://github.com/teleject/hisrc">HiSrc</a></li>
</ul>
</section>
<section id="picture">
<h3><a href="#picture"><picture></a></h3>
<ul>
<li class="featured"><a href="http://blog.cloudfour.com/responsive-images-101-part-6-picture-element/">Responsive Images 101: Picture</a></li>
<li><a href="http://www.w3.org/TR/html-picture-element/">The Picture Element</a></li>
<li><a href="https://github.com/scottjehl/picturefill">PictureFill</a></li>
<li><a href="http://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/">Responsive Images Done Right: A Guide To picture And srcset</a></li>
</ul>
</section>
<section id="srcset">
<h3><a href="#srcset">Srcset</a></h3>
<ul>
<li class="featured"><a href="http://blog.cloudfour.com/responsive-images-101-part-3-srcset-display-density/">Responsive Images 101: Srcset Display Density</a></li>
<li class="featured"><a href="http://blog.cloudfour.com/responsive-images-101-part-4-srcset-width-descriptors/">Responsive Images 101: Srcset Width Descriptors</a></li>
<li><a href="http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#the-picture-element">Srcset</a></li>
<li><a href="https://github.com/scottjehl/picturefill">PictureFill</a></li>
<li><a href="http://ericportis.com/posts/2014/srcset-sizes/">Srcset and Sizes</a></li>
<li><a href="http://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/">Responsive Images Done Right: A Guide To picture And srcset</a></li>
<li><a href="http://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/">Responsive Images: If you’re just changing resolutions, use srcset.</a></li>
<li><a href="http://alistapart.com/article/responsive-images-in-practice">Responsive Images in Practice</a></li>
<li><a href="http://bradfrost.com/blog/post/responsive-images/">Responsive Images</a></li>
</ul>
</section>
<section id="image-compression">
<h3><a href="#image-compression">Compressive Images</a></h3>
<ul>
<li><a href="http://blog.netvlies.nl/design-interactie/retina-revolution/">Retina Revolution</a></li>
<li><a href="http://filamentgroup.com/lab/rwd_img_compression/">Compressive Images</a></li>
<li><a href="http://www.netvlies.nl/blog/design-interactie/retina-revolutie-follow-up">Retina revolutie follow up</a></li>
</ul>
</section>
<section id="image-server">
<h3><a href="#image-server">Server-Side Image Solutions</a></h3>
<ul>
<li><a href="http://adaptive-images.com/">Adaptive Images</a></li>
<li><a href="http://imagefly.io">Imagefly</a></li>
<li><a href="https://www.imgix.com">imgix</a></li>
<li><a href="https://imagekit.io">ImageKit</a></li>
<li><a href="https://www.responsive.io/">responsive.io</a></li>
<li><a href="https://github.com/johnkoht/responsive-images">Responsive Images for Ruby on Rails</a></li>
<li><a href="http://resrc.it/">ReSRC.it</a></li>
<li><a href="http://www.sencha.com/learn/how-to-use-src-sencha-io">Sencha.io Src</a></li>
<li><a href="http://wurfl.io/#wit">WURFL Image Tailor</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>
<li><a href="http://timkadlec.com/2012/04/media-query-asset-downloading-results/">Media Query & Asset Downloading Results</a></li>
</ul>
</section>
<section id="icons">
<h3><a href="#icons">Icon Fonts</a></h3>
<ul>
<li class="featured"><a href="http://icomoon.io">IcoMoon</a></li>
<li class="featured"><a href="http://www.grumpicon.com/">Grumpicon</a></li>
<li><a href="http://fontello.com/">Fontello</a></li>
<li><a href="http://symbolset.com/">Symbolset</a></li>
<li><a href="http://fontastic.me/">Fontastic</a></li>
<li><a href="http://fontawesome.io/">Font Awesome</a></li>
<li><a href="https://www.mapbox.com/maki/">Maki</a></li>
<li><a href="http://typicons.com/">Typicons</a></li>
<li><a href="http://adamwhitcroft.com/batch/">Batch</a></li>
<li><a href="http://www.streamlineicons.com/">Streamline</a></li>
<li><a href="https://nucleoapp.com/">Nucleo</a></li>
<li><a href="http://www.simunity.net/">Simunity</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>
<section id="cms-images">
<h3><a href="#cms-images">CMS Image Solutions</a></h3>
<ul>
<li><a href="https://wordpress.org/plugins/responsify-wp/">Responsify WP</a></li>
<li><a href="http://web-design-weekly.com/2015/01/20/ricg-responsive-images-plugin/">RICG-Responsive-Images Plugin</a></li>
<li><a href="https://github.com/tevko/wp-tevko-responsive-images">Wordpress Tevko Responsive Images</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="https://webdesign.tutsplus.com/articles/a-simple-responsive-mobile-first-navigation--webdesign-6074">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>
<li><a href="http://responsive-nav.com/">Responsive Nav</a></li>
<li><a href="http://responsivenavigation.net/">Adventures in Responsive Navigation</a></li>
<li><a href="http://mobile.smashingmagazine.com/2013/09/11/responsive-navigation-on-complex-websites/">Responsive Navigation for Complex Websites</a></li>
<li><a href="http://www.smartmenus.org/blog/smartmenus/create-advanced-bootstrap-3-navbars-zero-config/">Create advanced Bootstrap 3 navbars with SmartMenus jQuery</a></li>
<li><a href="http://www.smashingmagazine.com/2014/10/13/wayfinding-for-the-mobile-web/">Wayfinding for the Mobile Web</a></li>
<li><a href="https://codyhouse.co/gem/responsive-tabbed-navigation/">Responsive Tabbed Navigation</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/">Responsive Google AdSense Ads</a></li>
<li><a href="https://github.com/madgex/lazy-ads">Lazy Ads</a></li>
<li><a href="http://next.theguardian.com/blog/responsive-takeover/">Introducing theguardian.com responsive takeover</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="https://dollarshaveclub.github.io/reframe.js/">Reframe.js</a></li>
<li><a href="https://github.com/toddmotto/fluidvids">Fluidvids</a></li>
<li><a href="https://gist.github.com/davatron5000/e9ef20f1d2ba4d9099711064c644d155">Vanilla Fitvids</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>
<li><a href="http://www.iandevlin.com/blog/2012/08/html5/responsive-html5-video">Responsive HTML5 video</a></li>
<li><a href="http://www.iandevlin.com/blog/2012/12/html5/html5-video-for-retina-displays">HTML5 video for retina displays</a></li>
</ul>
</section>
<section id="media">
<h3><a href="#media">Media</a></h3>
<ul>
<li><a href="http://embedresponsively.com/">Embed Responsively</a></li>
<li><a href="http://amobil.se/2011/11/responsive-embeds/">Responsive Embeds</a></li>
<li><a href="http://responsivebp.com/">Responsive Media</a></li>
<li><a href="http://iframely.com/oembed2">iFramely</a></li>
<li><a href="http://mobile.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/">Making Embedded Content Work in Responsive Design</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 class="featured"><a href="http://blog.cloudfour.com/picking-responsive-tables-solution/">Picking a Responsive Tables Solution</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>
<li><a href="http://filamentgroup.com/lab/tablesaw.html">Table Saw</a></li>
</ul>
</section>
<section id="charts">
<h3><a href="#charts">Charts & Graphs</a></h3>
<ul>
<li class="featured"><a href="https://github.com/gionkunz/chartist-js">Chartist.js</a></li>
<li class="featured"><a href="http://zurb.com/playground/pizza-amore-charts-and-graphs">Pizza Amore</a></li>
<li><a href="http://www.chartjs.org/">Chart.js</a></li>
<li><a href="http://www.highcharts.com/">Highcharts</a></li>
<li><a href="http://demos.telerik.com/kendo-ui/">Kendo Charts</a></li>
<li><a href="http://c3js.org/">C3js</a></li>
<li><a hef="http://nvd3.org/">NVD3</a></li>
<li><a href="http://www.zingchart.com">Zing Chart</a></li>
<li><a href="http://www.koolchart.com/">Koolchart</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="https://github.com/filamentgroup/Overthrow-Sidescroller">Overthrow Sidescroller</a> <a href="http://filamentgroup.github.io/Overthrow-Sidescroller/">(Demo)</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>
<li><a href="http://www.idangero.us/sliders/swiper/">Swiper</a></li>
<li><a href="https://github.com/jonykrause/fluid-slider">Fluid Slider</a></li>
<li><a href="http://unslider.com/">Unslider</a></li>
<li><a href="http://owlgraphic.com/owlcarousel/">OWL Carousel</a></li>
<li><a href="http://www.coffeecup.com/slider">Responsive Content Slider</a></li>
<li><a href="https://flickity.metafizzy.co/">Flickity</a></li>
<li><a href="https://kenwheeler.github.io/slick/">Slick</a></li>
</ul>
</section>
<section id="carousel">
<h3><a href="#carousel">Lightbox</a></h3>
<ul>
<li><a href="http://bradfrostweb.com/blog/post/conditional-lightbox/">Conditional Lightbox</a></li>
<li><a href="http://coding.smashingmagazine.com/2013/05/02/truly-responsive-lightbox/">Magnific Popup, A Truly Responsive Lightbox</a></li>
<li><a href="http://photoswipe.com/">Photoswipe</a></li>
</ul>
</section>
<section id="media-object">
<h3><a href="#carousel">Media Object</a></h3>
<ul>
<li><a href="http://paul.ie/2013/12/mobile-first-media-objects/">Mobile-First Media Objects</a></li>
</ul>
</section>
</div>
<div id="development" class="grid">
<h2><a href="#development">Development</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>
<li><a href="http://responsivecomments.com/">Responsive Comments</a></li>
<li><a href="http://foundation.zurb.com/docs/components/interchange.html">Interchange</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.creativebloq.com/responsive-web-design/getting-started-ress-5122956">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>
<li><a href="http://mobile.smashingmagazine.com/2013/10/08/responsive-website-design-with-ress/">Lightening Your Responsive Website Design With RESS</a></li>
<li><a href="http://www.creativebloq.com/responsive-web-design/getting-started-ress-5122956">Getting started with RESS</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>
<li><a href="http://speedcurve.com/">SpeedCurve</a></li>
<li><a href="https://speakerdeck.com/davatron5000/rwd-bloat">RWD Bloat</a></li>
<li><a href="http://timkadlec.com/2012/10/blame-the-implementation-not-the-technique/">Blame the Implementation Not the Technique </a></li>
<li><a href="http://www.guypo.com/rwd-2014/">RWD Adoption 2014</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</a></li>
<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>
<li><a href="http://www.iammobile.co.uk/">I Am Mobile</a></li>
<li><a href="http://outof.me/responsive-inspector/">Responsive Inspector</a></li>
<li><a href="http://morganesque.github.io/resphrame/">Resphrame</a></li>
<li><a href="http://resize.11hundred.com/">11h Re-size</a></li>
<li><a href="http://breakpointtester.com/">Breakpoint Tester</a></li>
<li><a href="https://chrome.google.com/webstore/detail/dimensions/hdmihohhdcbejdkidbfijmfehjbnmifk">Dimensions</a></li>
<li><a href="http://quirktools.com/screenfly/">Screenfly</a></li>
<li><a href="http://bbc-sport.github.io/viewporter/">Viewporter</a></li>
<li><a href="http://www.dimensionstoolkit.com/">Dimensions Toolkit</a></li>
<li><a href="http://whatsmybrowsersize.com/">What's My Browser Size?</a></li>
<li><a href="http://nerijusgood.github.io/viewport-resizer/">Viewport-Resizer</a></li>
<li><a href="http://design.google.com/resizer">Resizer</a></li>
<li><a href="https://polypane.rocks/">Polypane</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>
<li><a href="http://vanamco.com/ghostlab/">ghostlab</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><a href="http://galenframework.com/">Galen Framework</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://rwdwp.com/">RWD with Wordpress</a></li>
<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>
<section id="cms-other">
<h3><a href="#cms-other">Other</a></h3>
<ul>
<li><a href="http://moboom.com/">Moboom</a></li>
<li><a href="http://respondcms.com/">Respond CMS</a></li>
</ul>
</section>
</div>
<div id="email" class="grid">
<h2><a href="#email">Email</a></h2>
<section id="email-design">
<h3><a href="#email-design">Email Design</a></h3>
<ul>
<li class="featured"><a href="http://www.responsiveemailresources.com/">Responsive Email Resources</a></li>
<li class="featured"><a href="http://responsiveemailpatterns.com/">Responsive Email Patterns</a></li>
<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>
<li><a href="http://www.webdesignerdepot.com/2013/06/responsive-html-email-design/">How to design a responsive HTML email</a></li>
<li><a href="http://mobile.smashingmagazine.com/2011/08/18/from-monitor-to-mobile-optimizing-email-newsletters-with-css/">From Monitor To Mobile: Optimizing Email Newsletters With CSS</a></li>
<li><a href="http://blog.fogcreek.com/responsive-html-emails-a-different-strategy/">Responsive HTML Emails: a Different Strategy</a></li>
<li><a href="https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic">The How-To Guide to Responsive Email Design</a></li>
<li><a href="http://zurb.com/ink">ZURB Ink</a></li>
<li><a href="http://htmlemailboilerplate.com/">HTML Email Boilerplate</a></li>
<li><a href="http://stylecampaign.com/blog/2013/03/responsive-email-design-red/">Responsive Email Design (RED)</a></li>
<li><a href="http://litmus.com/lp/artifact">Responsive Email Resources</a></li>
<li><a href="http://www.emailmonks.com/mailchimp-master-template.html">MailChimp Master Template</a></li>
<li><a href="https://github.com/leemunroe/responsive-html-email-template">Simple repsonsive email template</a></li>
<li><a href="http://www.coffeecup.com/email-designer">Responsive Email Designer</a></li>
<li><a href="https://mjml.io/">mjml</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/Guides</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="http://www.amazon.com/Responsive-Design-Workflow-Stephen-Hay/dp/0321887867">Responsive Design Workflow</a></li>
<li><a href="http://www.abookapart.com/products/responsible-responsive-design">Responsible Responsive 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>
<li><a href="http://www.manning.com/rotton/">Responsive WordPress Theming</a></li>
<li><a href="http://responsivedesignworkflow.com/">Responsive Design Workflow</a></li>
<li><a href="http://rwdwp.com/">RWD with Wordpress</a></li>
<li><a href="https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/">Google Web Fundamentals</a></li>
<li><a href="http://www.amazon.com/Responsive-Web-Design-Adobe-Photoshop/dp/0134035631/ref=sr_1_1">Responsive Web Design with Adobe Photoshop</a></li>
<li><a href="http://abookapart.com/products/going-responsive">Going Responsive</a></li>
<li><a href="http://abookapart.com/products/responsive-design-patterns-principles">Responsive Design Patterns and Principles</a></li>
<li><a href="https://shop.smashingmagazine.com/products/smashing-book-5-real-life-responsive-web-design">Real Life Responsive Web Design</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://www.creativebloq.com/responsive-design-tools-8134180">The top 25 responsive design tools</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>
<li><a href="http://www.penthouse-magic.com/9-essential-responsive-web-design-best-practices/">9 Essential Responsive Web Design Best Practices</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>
<li><a href="https://speakerdeck.com/bencallahan/build-responsively-2013-converge-se-columbia-sc">Build Responsively</a></li>
<li><a href="http://www.besquare.me/conferences/responsive-day-out/">Responsive Day Out</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.creativebloq.com/css3/build-responsive-site-week-designing-responsively-part-1-4122850">Build a responsive site in a week: designing responsively (part 1)</a></li>
<li><a href="http://www.creativebloq.com/web-design/build-responsive-site-week-typography-and-grids-part-2-9134361">Build a responsive site in a week: typography and grids (part 2)</a></li>
<li><a href="http://www.creativebloq.com/web-design/build-responsive-site-week-images-and-video-part-3-4124358">Build a responsive site in a week: images and video (part 3)</a></li>
<li><a href="http://www.creativebloq.com/netmag/build-responsive-site-week-media-queries-part-4-4122963">Build a responsive site in a week: media queries (part 4)</a></li>
<li><a href="http://www.creativebloq.com/web-design/build-responsive-site-week-going-further-part-5-4124357">Build a responsive site in a week: going further (part 5)</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>
</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);