Super resize me
1 like530 views
This document introduces responsive web design (RWD). It discusses how early web design copied print and led to separate websites for different devices, which was expensive and impractical. RWD emerged to create designs that change based on screen size using CSS media queries. The key aspects of RWD are designing websites that respond appropriately to different devices through fluid, flexible layouts. It emphasizes designing for all possible screen widths from the start using relative units and media queries. Testing in the browser across screen sizes is important.
Super resize me
- 2. SUPER RESIZE MEAN INTRODUCTION TO RESPONSIVE WEB DESIGN AXEL VALDEZ
- 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)
- 7. OUR SCREENS GOT BIGGER FROM TIME TO TIME AND WE MADE OUR WEBSITES BIGGER, TOO
- 8. BUT THEN, SCREENS ALSO GOT SMALLER WHAT??!?
- 9. WE HAD FLEXIBLE DESIGN ELASTIC, LIQUID, ETC.
- 10. BUT WEBSITES STILL LOOKED AWFUL ON BOTH SMALL AND HUGE SCREENS
- 11. WE STARTED DOING SEPARATE WEBSITES FOR EACH DEVICE :S
- 12. THAT WAS EXPENSIVE AND UNSUSTAINABLE (AND PLAIN STUPID, TO BE HONEST) WE NEEDED SOMETHING BETTER
- 13. 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
- 14. TURNED OUT WE ALREADY HAD WHAT WE NEEDED: CSS MEDIA QUERIES @media screen and (max-width: 640px){ ... }
- 15. WITH MEDIA QUERIES WE CAN LOAD CSS STYLESHEETS SELECTIVELY WE DEFINE A BASE STYLESHEET AND ADD EXTRA STYLING DEPENDING ON THE DEVICE SCREEN SIZE
- 16. 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
- 18. WHEN DONE RIGHT, A RESPONSIVE WEBSITE DESIGN IS FUTURE-PROOF
- 19. HOW DO I RWD?
- 20. THE OLD TRADITIONAL PROCESS
- 21. MOST OF THE DESIGN PROCESS OF RWD HAPPENS IN THE BROWSER
- 22. NOW YOU REALLY NEED TO LEARN HOW TO CODE
- 23. 1. SKETCH 2. DESIGN VISUAL STYLE 3. CODE 4. TEST 5. GOTO 3
- 24. WHEN TESTING YOUR LAYOUT, RESIZE THE BROWSER TO FIND THE SIZE WHERE IT BREAKS. THEN ADD A MEDIA QUERY RIGHT THERE.
- 25. FORGET PREDEFINED DESKTOP, TABLET AND MOBILE SIZES DESIGN FOR EVERY POSSIBLE WIDTH, SO YOUR WEBSITE IS REALLY FUTURE-PROOF.
- 26. I FIND EASIER TO FIRST CODE THE LAYOUT (IN WIREFRAME-LIKE BLOCKS) AND APPLY THE VISUAL STYLE LATER
- 27. TOOLS
- 28. THE BROWSER
- 29. AN AWESOME TEXT EDITOR
- 31. THINGS TO TAKE INTO ACCOUNT
- 35. FONT SIZES EACH DEVICE IS USED AT DIFFERENT DISTANCE FROM OUR EYES. FONT SIZE NEEDS TO BE ADJUSTED ACCORDINGLY.
- 36. CLOSING THOUGHTS
- 37. 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.
- 38. IF YOU'RE A WEB DESIGNER YOU NEED TO LEARN HOW TO CODE OTHERWISE YOU'RE GETTING YOURSELF OUT OF THE GAME.
- 39. THANK YOU I'M @AXEL ON TWITTER, BTW.