Tools that help speed up responsive web development include HTML5 boilerplates to avoid duplicating code, frameworks like Bootstrap and Foundation that provide grid systems and styles, and tools for testing designs across screen sizes like browser plugins and emulators for simulating mobile devices. Common responsive design testing tools include browser plugins that allow resizing the viewport, online services that emulate different devices, and emulators for iOS, Android and other mobile platforms provided by their respective developers. Frameworks aid development through grid systems and prototyping, while testing tools help ensure responsive designs work well on varied screen sizes.

1. TOOLS THAT HELP
AND SPEED UP RWD DEV
IN 10 MIN
@matjazkorosec

2. BOILERPLATES & HELPERS
Don’t repeat already done stuff.
Better focus on project specifics.

3. HTML5 BOILERPLATE MODERNIZR
http://html5boilerplate.com http://modernizr.com
HTML5 MOBILE BOILERPLATE
http://html5boilerplate.com/mobile

4. 320 AND UP
http://stuffandnonsense.co.uk/projects/320andup

5. INITIALIZR
http://www.initializr.com

6. ZEN CODING
http://code.google.com/p/zen-coding
http://zen-coding.googlecode.com/files/ZenCodingCheatSheet.pdf

7. Sample: option to write CSS-like syntax in HTML

8. Sample: option to write CSS-like syntax in HTML

9. GRID SYSTEMS & PROTOTYPING
It’s easier adjusting right at the beginning.

10. LESS FRAMEWORK FOUNDATION
http://lessframework.com http://foundation.zurb.com
BOOTSTRAP
http://twitter.github.com/bootstrap

11. Foundation grid example

12. MORE
SKELETON GRIDPAK
http://www.getskeleton.com http://gridpak.com
GOLDEN GRID SYSTEM THE RESPONSIVE CALCULATOR
http://goldengridsystem.com http://rwdcalc.com
SIMPLEGRID FLUID GRIDS
http://simplegrid.info http://csswizardry.com/fluid-grids
SEMANTIC GRID SYSTEM
http://semantic.gs
1140 CSS GRID
http://cssgrid.net

13. TESTING
with web apps

14. RESIZEMYBROWSER
http://resizemybrowser.com

15. RESPONSIVE WEB
DESIGN TESTING TOOL
http://mattkersley.com/responsive
SCREENFLY
http://quirktools.com/screenfly

16. MORE
RESPONSINATOR
http://www.responsinator.com
SCREENQUERIES
http://screenqueri.es
RESPONSIVEPX
http://responsivepx.com
RESPONSIVE IS
http://responsive.is

17. TESTING
with bookmarklets & extensions

18. RESPONSIVE DESIGN TEST BOOKMARKLET
http://www.benjaminkeen.com/misc/bricss

19. RESIZER
http://codebomber.com/jquery/resizer

20. CHROME DEVTOOLS
https://developers.google.com/chrome-developer-tools/docs/overview

21. CHROME DEVTOOLS AUTOSAVE
https://github.com/NV/chrome-devtools-autosave

22. MORE
RESPONSIVE DESIGN TEST BOOKMARKLET
http://responsive.victorcoulon.fr
MEDIA QUERY DEBUGGER
http://johanbrook.com/design/css/debugging-css-media-queries
FIRESIZER
https://addons.mozilla.org/sl/firefox/addon/firesizer
MEDIA QUERY BOOKMARKLET
http://seesparkbox.com/foundry/media_query_bookmarklet

23. TESTING
with desktop apps

24. LIVERELOAD
http://livereload.com

25. MacBook Pro, PC & iPad (the same URL)

26. It’s lime, multi time!
http://www.twitvid.com/4PH6F

27. ADOBE SHADOW
http://labs.adobe.com/technologies/shadow

28. SPEED LIMIT
http://mschrag.github.com

29. TESTING
with simulators & emulators

30. XCODE IOS SIMULATOR
https://developer.apple.com/technologies/tools

31. OPERA MOBILE EMULATOR
http://www.opera.com/developer/tools/mobile
MOZILLA FENNEC
http://www.mozilla.org/projects/fennec/1.0a1/releasenotes

32. MOBILIZER
http://www.springbox.com/mobilizer

33. MORE
ANDROID EMULATOR ANDROID REMOTE DEBUGING
http://developer.android.com/sdk/index.html https://developers.google.com/chrome/mobile/
docs/debugging
NOKIA EMULATORS
http://www.developer.nokia.com/Develop/
WINDOWS PHONE EMULATOR
http://msdn.microsoft.com/en-us/library/ff402563(v=vs.92).aspx
HP WEBOS EMULATOR
https://developer.palm.com/content/api/dev-guide/tools/emulator.html
BLACKBERRY SIMULATORS
http://us.blackberry.com/developers/resources/simulators.jsp
OPERA TV EMULATOR GOOGLE TV EMULATOR
http://www.opera.com/business/tv/emulator https://developers.google.com/tv/android/
docs/gtv_emulator

34. THE END