Pushing Pixels to Cranking Code

2e0312c825c0338b1d29b4d3cfb087ae?s=47 Philip Zastrow
October 09, 2012

Pushing Pixels to Cranking Code

The web browser as a design medium is truly coming into its own. For years we web designers have created our designs in fixed widths, much like our paper-bound cousins. Wonderful methods like the 960 grid system have helped us refine our designs and communicate with developers. The rampant use of mobile devices, especially amongst our primary audience, no longer allows us a common window width to have as our standard. Our medium is now an unpredictable behemoth with screen sizes ranging from phones to HDTVs and beyond. Designers must begin modifying their work methods and incorporating newer tools into the design process.

At Notre Dame, Photoshop has increasingly become a single tool, as opposed to the primary, in the process of creating a web design. For years our team has had a silo approach of design and development: a designer is entrenched in Photoshop creating a web design, then the PSD is given to a developer to cut into a website. However, as we have furthered our reach into Responsive Web Design the line between designer and developer is blurring. It is the designer who needs to take on the most and encroach into what is perceived as the developer's territory.

2e0312c825c0338b1d29b4d3cfb087ae?s=128

Philip Zastrow

October 09, 2012
Tweet

Transcript

  1. PUSHING PIXELS TO CRANKING CODE Designing responsively from mobile to

    HD
  2. HIGH ED RESPONSIVE WEB CONFERENCE

  3. WE GET IT RESPONSIVE IS IMPORTANT

  4. 404 SLIDES NOT FOUND

  5. MAKING A CASE FOR RESPONSIVE IS IRRELEVANT

  6. THE AFTEREFFECTS OF RESPONSIVE

  7. RESPONSIVE IS NOT A FEATURE

  8. RESPONSIVE IS A METHOD

  9. RESPONSIVE IS DISRUPTIVE

  10. PHILIP ZASTROW @zastrow #aim10

  11. RESPONSIVE IS A PARADIGM SHIFT

  12. RESPONSIVE CHANGES OUR APPROACH

  13. RESPONSIVE CHANGES PLANNING

  14. RESPONSIVE CHANGES PROBLEM SOLVING

  15. RESPONSIVE CHANGES THE DESIGN PROCESS

  16. RESPONSIVE CHANGES THE DESIGNER

  17. CHANGE ISN’T BAD

  18. RESPONSIVE IS A MATURING LEAP IN THE WEB INDUSTRY

  19. RESPONSIVE FOCUSES DESIGNERS’ ATTENTION

  20. DESIGN CONTENT INSTEAD OF PLACES FOR CONTENT TO LIVE

  21. A TYPICAL PROCESS

  22. PLANNING DESIGN DEVELOPMENT

  23. THE SILO APPROACH

  24. WE NEED A BETTER PROCESS

  25. RESPONSIVE AT NOTRE DAME

  26. DEVELOPERS WERE MAKING DESIGN DECISIONS

  27. CLIENTS WITH A PSD IS A HEADACHE

  28. “IT DOESN’T LOOK LIKE THE DESIGN”

  29. CONCEPTS CAN’T BE FIXED WIDTHS

  30. LAYOUT IS A DESIGN DECISION

  31. TYPOGRAPHY IS A DESIGN DECISION

  32. RESPONSIVE REQUIRES REDEFINING DESIGNER

  33. DEFINING WEB DESIGNER

  34. OUR MEDIUM IS THE BROWSER

  35. RELATIVE UNITS OF MEASURE

  36. px

  37. px ×

  38. %

  39. em

  40. CSS IS THE TRUE WEB DESIGNER TOOL

  41. Think Print

  42. SPECIAL TOOLS FOR PARTICULAR USES

  43. CSS = InDesign

  44. CSS IS FOR LAYOUT

  45. CSS IS FOR TYPOGRAPHY

  46. PHOTOSHOP IS NOT A LAYOUT TOOL

  47. PHOTOSHOP IS FOR PHOTO EDITING

  48. PHOTOSHOP IS FOR GRAPHICS CREATION

  49. A RESPONSIVE PROCESS

  50. PLANNING DESIGN DEVELOPMENT

  51. PLANNING DEVELOPMENT DESIGN

  52. PLANNING DEVELOPMENT DESIGN DESIGNpreparation implementation

  53. PLANNING DEVELOPMENT DESIGN DESIGNpreparation implementation

  54. CONTENT PROTOTYPE BEN CALLAHAN @bencallahan http://bit.ly/LJHVfv

  55. hierarchal

  56. hierarchal content first

  57. A RWD PROCESS FIRST REQUIRES CONTENT

  58. hierarchal content first educates client

  59. hierarchal content first educates clients user centric

  60. hierarchal content first educates clients user centric small screen up

  61. None
  62. PLANNING DEVELOPMENT DESIGN DESIGNpreparation implementation

  63. STYLE TILE SAMANTHA WARREN @samanthatoy http://styletil.es

  64. PSD

  65. None
  66. STYLE PROTOTYPE JEREMY LOYD @jeremyloyd http://bit.ly/Tb7HPr

  67. HTML+CSS

  68. THIS PUTS THE STYLES IN THE CLIENT’S CONTEXT

  69. Demo

  70. PLANNING DEVELOPMENT DESIGN DESIGNpreparation implementation

  71. DEVELOPERS GET TO FOCUS ON CODE

  72. PLANNING DEVELOPMENT DESIGN DESIGNpreparation implementation

  73. RESPONSIVE LAYOUT

  74. DESIGNERS LAYOUT FOR INFINITE SIZES

  75. A COLLABORATIVE PROCESS

  76. RESPONSIVE IS DISRUPTIVE

  77. RESPONSIVE CHANGES THE DESIGNER

  78. RESPONSIVE IS A MATURING LEAP IN THE WEB INDUSTRY

  79. IT IS THE MOST EXCITING TIME TO BE A WEB

    DESIGNER
  80. PHILIP ZASTROW @zastrow