0
TOOLS THAT HELPAND SPEED UP RWD DEV      IN 10 MIN      @matjazkorosec
BOILERPLATES & HELPERS    Don’t repeat already done stuff.    Better focus on project specifics.
HTML5 BOILERPLATE                      MODERNIZRhttp://html5boilerplate.com          http://modernizr.comHTML5 MOBILE BOIL...
320 AND UPhttp://stuffandnonsense.co.uk/projects/320andup
INITIALIZRhttp://www.initializr.com
ZEN CODING      http://code.google.com/p/zen-codinghttp://zen-coding.googlecode.com/files/ZenCodingCheatSheet.pdf
Sample: option to write CSS-like syntax in HTML
Sample: option to write CSS-like syntax in HTML
GRID SYSTEMS & PROTOTYPING    It’s easier adjusting right at the beginning.
LESS FRAMEWORK                                   FOUNDATIONhttp://lessframework.com                    http://foundation.z...
Foundation grid example
MORESKELETON                      GRIDPAKhttp://www.getskeleton.com    http://gridpak.comGOLDEN GRID SYSTEM            THE...
TESTINGwith web apps
RESIZEMYBROWSERhttp://resizemybrowser.com
RESPONSIVE WEBDESIGN TESTING TOOLhttp://mattkersley.com/responsiveSCREENFLYhttp://quirktools.com/screenfly
MORERESPONSINATORhttp://www.responsinator.comSCREENQUERIEShttp://screenqueri.esRESPONSIVEPXhttp://responsivepx.comRESPONSI...
TESTINGwith bookmarklets & extensions
RESPONSIVE DESIGN TEST BOOKMARKLET     http://www.benjaminkeen.com/misc/bricss
RESIZERhttp://codebomber.com/jquery/resizer
CHROME DEVTOOLShttps://developers.google.com/chrome-developer-tools/docs/overview
CHROME DEVTOOLS AUTOSAVEhttps://github.com/NV/chrome-devtools-autosave
MORERESPONSIVE DESIGN TEST BOOKMARKLEThttp://responsive.victorcoulon.frMEDIA QUERY DEBUGGERhttp://johanbrook.com/design/cs...
TESTINGwith desktop apps
LIVERELOADhttp://livereload.com
MacBook Pro, PC & iPad (the same URL)
It’s lime, multi time!http://www.twitvid.com/4PH6F
ADOBE SHADOWhttp://labs.adobe.com/technologies/shadow
SPEED LIMIThttp://mschrag.github.com
TESTINGwith simulators & emulators
XCODE IOS SIMULATORhttps://developer.apple.com/technologies/tools
OPERA MOBILE EMULATOR                                       http://www.opera.com/developer/tools/mobile                   ...
MOBILIZERhttp://www.springbox.com/mobilizer
MOREANDROID EMULATOR                                        ANDROID REMOTE DEBUGINGhttp://developer.android.com/sdk/index....
THE END
Upcoming SlideShare
Loading in...5
×

Tools that help and speed up RWD dev

3,571

Published on

Lots of useful links if you are into responsive web design development.

Published in: Technology, Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,571
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
30
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • \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
  • Transcript of "Tools that help and speed up RWD dev"

    1. 1. TOOLS THAT HELPAND SPEED UP RWD DEV IN 10 MIN @matjazkorosec
    2. 2. BOILERPLATES & HELPERS Don’t repeat already done stuff. Better focus on project specifics.
    3. 3. HTML5 BOILERPLATE MODERNIZRhttp://html5boilerplate.com http://modernizr.comHTML5 MOBILE BOILERPLATEhttp://html5boilerplate.com/mobile
    4. 4. 320 AND UPhttp://stuffandnonsense.co.uk/projects/320andup
    5. 5. INITIALIZRhttp://www.initializr.com
    6. 6. ZEN CODING http://code.google.com/p/zen-codinghttp://zen-coding.googlecode.com/files/ZenCodingCheatSheet.pdf
    7. 7. Sample: option to write CSS-like syntax in HTML
    8. 8. Sample: option to write CSS-like syntax in HTML
    9. 9. GRID SYSTEMS & PROTOTYPING It’s easier adjusting right at the beginning.
    10. 10. LESS FRAMEWORK FOUNDATIONhttp://lessframework.com http://foundation.zurb.com BOOTSTRAP http://twitter.github.com/bootstrap
    11. 11. Foundation grid example
    12. 12. MORESKELETON GRIDPAKhttp://www.getskeleton.com http://gridpak.comGOLDEN GRID SYSTEM THE RESPONSIVE CALCULATORhttp://goldengridsystem.com http://rwdcalc.comSIMPLEGRID FLUID GRIDShttp://simplegrid.info http://csswizardry.com/fluid-gridsSEMANTIC GRID SYSTEMhttp://semantic.gs1140 CSS GRIDhttp://cssgrid.net
    13. 13. TESTINGwith web apps
    14. 14. RESIZEMYBROWSERhttp://resizemybrowser.com
    15. 15. RESPONSIVE WEBDESIGN TESTING TOOLhttp://mattkersley.com/responsiveSCREENFLYhttp://quirktools.com/screenfly
    16. 16. MORERESPONSINATORhttp://www.responsinator.comSCREENQUERIEShttp://screenqueri.esRESPONSIVEPXhttp://responsivepx.comRESPONSIVE IShttp://responsive.is
    17. 17. TESTINGwith bookmarklets & extensions
    18. 18. RESPONSIVE DESIGN TEST BOOKMARKLET http://www.benjaminkeen.com/misc/bricss
    19. 19. RESIZERhttp://codebomber.com/jquery/resizer
    20. 20. CHROME DEVTOOLShttps://developers.google.com/chrome-developer-tools/docs/overview
    21. 21. CHROME DEVTOOLS AUTOSAVEhttps://github.com/NV/chrome-devtools-autosave
    22. 22. MORERESPONSIVE DESIGN TEST BOOKMARKLEThttp://responsive.victorcoulon.frMEDIA QUERY DEBUGGERhttp://johanbrook.com/design/css/debugging-css-media-queriesFIRESIZERhttps://addons.mozilla.org/sl/firefox/addon/firesizerMEDIA QUERY BOOKMARKLEThttp://seesparkbox.com/foundry/media_query_bookmarklet
    23. 23. TESTINGwith desktop apps
    24. 24. LIVERELOADhttp://livereload.com
    25. 25. MacBook Pro, PC & iPad (the same URL)
    26. 26. It’s lime, multi time!http://www.twitvid.com/4PH6F
    27. 27. ADOBE SHADOWhttp://labs.adobe.com/technologies/shadow
    28. 28. SPEED LIMIThttp://mschrag.github.com
    29. 29. TESTINGwith simulators & emulators
    30. 30. XCODE IOS SIMULATORhttps://developer.apple.com/technologies/tools
    31. 31. OPERA MOBILE EMULATOR http://www.opera.com/developer/tools/mobile MOZILLA FENNEChttp://www.mozilla.org/projects/fennec/1.0a1/releasenotes
    32. 32. MOBILIZERhttp://www.springbox.com/mobilizer
    33. 33. MOREANDROID EMULATOR ANDROID REMOTE DEBUGINGhttp://developer.android.com/sdk/index.html https://developers.google.com/chrome/mobile/ docs/debuggingNOKIA EMULATORShttp://www.developer.nokia.com/Develop/WINDOWS PHONE EMULATORhttp://msdn.microsoft.com/en-us/library/ff402563(v=vs.92).aspxHP WEBOS EMULATORhttps://developer.palm.com/content/api/dev-guide/tools/emulator.htmlBLACKBERRY SIMULATORShttp://us.blackberry.com/developers/resources/simulators.jspOPERA TV EMULATOR GOOGLE TV EMULATORhttp://www.opera.com/business/tv/emulator https://developers.google.com/tv/android/ docs/gtv_emulator
    34. 34. THE END
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×