Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Winning Website Development with Today’s Best Practices

Winning Website Development with Today’s Best Practices

Talk for Portland Community College on May 11, 2012. The subject is modern, best-practice web development, using our team's process at Needmore Designs as a model.

225614451dc9aee33be11e0f6876c18b?s=128

Raymond Brigleb

May 29, 2012
Tweet

Other Decks in Business

Transcript

  1. Winning Website Development with Today’s Best Practices Raymond @Brigleb @Needmore

    Designs
  2. Act I The Big Picture

  3. Needmore Designs

  4. “Advocates of Obsession”

  5. None
  6. None
  7. None
  8. None
  9. None
  10. Goals

  11. Freedom to work anywhere, anytime, online or offline

  12. Work without fear of breaking things

  13. Embracing the latest best practices of the industry

  14. Easiest collaboration, least friction

  15. Work/Life Balance!

  16. Our process ensures that things don’t break so we can

    focus on the fun parts
  17. Project Management

  18. Simplest possible tools

  19. Basecamp

  20. Email, not so fun

  21. Act II Pre-Production

  22. “Give me six hours to chop down a tree and

    I will spend the first four sharpening the axe.”
  23. 1 Mission Statement

  24. Why are we building a website?

  25. “Never delegate understanding.”

  26. 2 Content Inventory

  27. Spreadsheet

  28. Understand the Analytics

  29. 3 Site Mapping

  30. Sticky notes

  31. OmniGraffle

  32. 4 Wireframes

  33. Pen and Paper

  34. OmniGraffle (or similar)

  35. 5 Design Guide (“style tiles”) Good intermediate step Helpful for

    responsive sites especially Can be general or specific Do not think of it as a mockup, however!
  36. 6 Mockups

  37. Using Photoshop (or whatever) is almost inevitable, but...

  38. Remember: Photoshop documents are just pictures of websites

  39. The only thing that matters is what you build in

    the browser
  40. Prototype in HTML?!?

  41. 7 Iterating

  42. Notable

  43. Heck, show them the work in progress

  44. Tip: Present your work in person

  45. Act III Production

  46. 1. Tools

  47. Dreamweaver?

  48. <body onload=”MM_preloadImages(‘http:// image.link/sample.jpg’)”>

  49. “Real web designers write code. Always have, always will.” @zeldman

  50. Terminal

  51. Coda

  52. 1password

  53. None
  54. LiveReload

  55. ImageOptim

  56. Web Inspector

  57. xScope

  58. MAMP

  59. Photoshop & Co.

  60. 2. Frameworks

  61. 960 Grid System & HTML5 Boilerplate (“extends” HTML5)

  62. jQuery (“extends” JavaScript)

  63. LESS (extends CSS)

  64. Twitter’s Bootstrap uses all of these

  65. 3. Content Management Systems

  66. WordPress (our default choice)

  67. You can’t always use your favorite

  68. 4. Developing, Staging, Production

  69. Development (laptop) Staging (any web host) Production (client’s host)

  70. How do we keep track of what code is where?

  71. Act IV Mr. Version Control

  72. 1. What is Version Control?

  73. “Version control is a system that records changes to a

    file or set of files over time so that you can recall specific versions later.”
  74. Huh?

  75. It’s a safety net for your website process.

  76. 2.

  77. It’s free, solid, becoming popular...

  78. ...and it’s distributed.

  79. Use the command line!

  80. (there are apps, too)

  81. 3. Branching

  82. A “branch” is just a timeline... and projects have many

    timelines
  83. Branches may or may not get “merged” into other branches

  84. 4. Local & Remote

  85. We may have the same branch... you would call mine

    a “remote” branch
  86. Pushing your changes

  87. Pulling down changes

  88. Confused?

  89. Developer Laptop Git Server Developer Laptop Developer Laptop Web Server

  90. 5. Git Hosting

  91. GitHub, etc.

  92. Git Deployment with Beanstalk

  93. 6. Our Git Workflow

  94. Pull (get in sync) Git on Your Laptop Git Server

  95. Open in browser, editor, inspector

  96. New branch from staging staging new_feature

  97. Make changes, commit with notes staging new_feature (your checkin)

  98. Happy? Merge. new_feature (your checkin) (your changes merged back into

    staging)
  99. Pull, then push your branch to remote Git on Your

    Laptop Git Server
  100. Deploy your changes

  101. 7. Future of Version Control

  102. Integrated hosting & development

  103. Pantheon does this for Drupal, WordPress (etc.) not there yet

  104. Conclusion

  105. Read all of the “A Book Apart” books

  106. Yay, The Future!

  107. “Web design is responsive design.” Responsive design?

  108. Not just mobile, also “retina” displays

  109. “If you can’t draw as well as someone, or use

    the software as well, or if you do not have as much money to buy supplies, or if you do not have access to the tools they have, beat them by being more thoughtful.” -Frank Chimero
  110. Raymond Brigleb @brigleb on Twitter, Instagram, etc. ray@needmoredesigns.com