1. SUPER RESIZE ME

2. SUPER RESIZE MEAN INTRODUCTION TO RESPONSIVE WEB DESIGN AXEL VALDEZ 3. RESPONSIVE WEB DESIGN WHAT? 4. A LITTLE BIT OF BACKGROUND 5. WHEN WE STARTED DESIGNING FOR THE WEB WE PRETTY MUCH COPIED WHAT THE PRINT WORLD WAS DOING. (BUT WAY MORE SHITTY) 6. OUR SCREENS GOT BIGGER FROM TIME TO TIME AND WE MADE OUR WEBSITES BIGGER, TOO 7. BUT THEN, SCREENS ALSO GOT SMALLER WHAT??!? 8. WE HAD FLEXIBLE DESIGN ELASTIC, LIQUID, ETC. 9. BUT WEBSITES STILL LOOKED AWFUL ON BOTH SMALL AND HUGE SCREENS 10. WE STARTED DOING SEPARATE WEBSITES FOR EACH DEVICE :S 11. THAT WAS EXPENSIVE AND UNSUSTAINABLE (AND PLAIN STUPID, TO BE HONEST) WE NEEDED SOMETHING BETTER 12. WHAT DID WE NEED? A (UNIQUE) DESIGN THAT CHANGED IN RESPONSE TO THE DEVICE A DESIGN THAT LOOKED GOOD IN BOTH A HUGE AND A TINY SCREEN (AND EVERYTHING IN-BETWEEN) SOMETHING ACHIEVABLE IMMEDIATELY 13. TURNED OUT WE ALREADY HAD WHAT WE NEEDED: CSS MEDIA QUERIES @media screen and (max-width: 640px){ ... } 14. WITH MEDIA QUERIES WE CAN LOAD CSS STYLESHEETS SELECTIVELY WE DEFINE A BASE STYLESHEET AND ADD EXTRA STYLING DEPENDING ON THE DEVICE SCREEN SIZE 15. YES, YES, BLAH BLAH BLAH BUT WHAT IS RESPONSIVE WEB DESIGN, THEN? RWD IS THE DESIGN OF WEBSITES THAT RESPOND TO THE DEVICE ACCESSING THEM AND DELIVER AN APPROPRIATE OUTPUT. THE TERM "RESPONSIVE WEB DESIGN" WAS COINED BY ETHAN MARCOTTE IN 2010 AT AN ARTICLE ON A LIST APART 16. WHEN DONE RIGHT, A RESPONSIVE WEBSITE DESIGN IS FUTURE-PROOF 17. HOW DO I RWD? 18. THE OLD TRADITIONAL PROCESS 19. MOST OF THE DESIGN PROCESS OF RWD HAPPENS IN THE BROWSER 20. NOW YOU REALLY NEED TO LEARN HOW TO CODE 21. 1. SKETCH 2. DESIGN VISUAL STYLE 3. CODE 4. TEST 5. GOTO 3 22. WHEN TESTING YOUR LAYOUT, RESIZE THE BROWSER TO FIND THE SIZE WHERE IT BREAKS. THEN ADD A MEDIA QUERY RIGHT THERE. 23. FORGET PREDEFINED DESKTOP, TABLET AND MOBILE SIZES DESIGN FOR EVERY POSSIBLE WIDTH, SO YOUR WEBSITE IS REALLY FUTURE-PROOF. 24. I FIND EASIER TO FIRST CODE THE LAYOUT (IN WIREFRAME-LIKE BLOCKS) AND APPLY THE VISUAL STYLE LATER 25. TOOLS 26. THE BROWSER 27. AN AWESOME TEXT EDITOR 28. RELATIVE UNITS EMs REMs PERCENTAGES VMIN VMAX VW VH BE CAREFUL WITH PX 29. THINGS TO TAKE INTO ACCOUNT 30. IMAGES THE AWKWARD SUBJECT 31. MOUSE POINTER VERSUS FAT FINGERS 32. THERE'S NO :HOVER ON TOUCHSCREENS 33. FONT SIZES EACH DEVICE IS USED AT DIFFERENT DISTANCE FROM OUR EYES. FONT SIZE NEEDS TO BE ADJUSTED ACCORDINGLY. 34. CLOSING THOUGHTS 35. RESPONSIVE SHOULD NOT BE AN "EXTRA" FEATURE WITH RWD WE'RE, AT LAST, DESIGNING FOR THE WEB AS AN UNIQUE MEDIUM EVERY NEW WEB PROJECT SHOULD BE APPROACHED WITH RWD. 36. IF YOU'RE A WEB DESIGNER YOU NEED TO LEARN HOW TO CODE OTHERWISE YOU'RE GETTING YOURSELF OUT OF THE GAME. 37. THANK YOU I'M @AXEL ON TWITTER, BTW.