Super resize me

412 views

Published on

Super Resize Me, an introduction to Responsive Web Design.

Slide deck for the talk given at Nearsoft Summer Talks on July 6th, 2013.

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

  • Be the first to like this

No Downloads
Views
Total views
412
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Super resize me

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

×