Tools that help and speed up RWD dev
•Download as KEY, PDF•
6 likes•4,784 views
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.
Report
Share
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Tools that help and speed up RWD dev
Similar to Tools that help and speed up RWD dev (20)
Recently uploaded
Recently uploaded (20)
Tools that help and speed up RWD dev
- 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
- 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
- 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
- 15. RESPONSIVE WEB DESIGN TESTING TOOL http://mattkersley.com/responsive SCREENFLY http://quirktools.com/screenfly
- 17. TESTING with bookmarklets & extensions
- 18. RESPONSIVE DESIGN TEST BOOKMARKLET http://www.benjaminkeen.com/misc/bricss
- 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
- 25. MacBook Pro, PC & iPad (the same URL)
- 26. It’s lime, multi time! http://www.twitvid.com/4PH6F
- 29. TESTING with simulators & emulators
- 31. OPERA MOBILE EMULATOR http://www.opera.com/developer/tools/mobile MOZILLA FENNEC http://www.mozilla.org/projects/fennec/1.0a1/releasenotes
- 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
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n