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.

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)

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

30. RELATIVE UNITS
EMs
REMs
PERCENTAGES
VMIN
VMAX
VW
VH
BE CAREFUL WITH PX

31. THINGS TO TAKE INTO ACCOUNT

32. IMAGES
THE AWKWARD SUBJECT

33. MOUSE POINTER
VERSUS
FAT FINGERS

34. THERE'S NO
:HOVER
ON TOUCHSCREENS

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.