Frugal Web Development


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Frugal Web Development

  1. 1. Frugal Web Development Tom Cottrill Development Manager @TomCottrill
  2. 2. Frugal Web DevelopmentSo what are we talking about here? Building Web Sites … and Cheaply. This is intended to be a “building of your toolbox” not an in-depth overview of any one tool.
  3. 3. Frugal Web DevelopmentSeriously, who is this guy, and what’s he babblingabout? And does he know what he’s talkingabout? I am the Development Manager at Fathom, an online marketing firm. I’ve been doing the whole Web/software thing for about 14 years. I’ve seen every kind of good or bad code you can imagine, and used a LOT of software over that time.
  4. 4. Frugal Web DevelopmentThese tools are free or “freemium” webdevelopment resources that may help you inyour projects. I anticipate you’ll find a few youlike, and some you don’t.
  5. 5. Frugal Web DevelopmentThe phases of web designWe’ll be looking at all of these areas from a very high level. Finding work. Convincing someone to let you do work. Communicating with your client. Brainstorming your idea. Wireframing your idea. Designing. Gathering feedback. Coding. Deployment and Hosting.
  6. 6. Frugal Web DevelopmentSome EssentialsThese two you really shouldn’t be running withoutthese days. They make you mobile and agile, andtheir uses cross over a lot of the Webdevelopment steps.
  7. 7. Frugal Web DevelopmentDropboxCloud-based storage available on any computer and many mobile devices
  8. 8. Frugal Web DevelopmentEvernote Notes that follow you to all your devices. Great for recording to-dos and capturing ideas.
  9. 9. Frugal Web DevelopmentFinding WorkDrumming up work really hasn’t evolved much inhundreds of years… just the media has. It’s allabout putting yourself out there, and looking forpeople that need your help.
  10. 10. Frugal Web DevelopmentElanceEstablished and respected. Has some fees after you get paid. Great for finding help. Is highly competitive.
  11. 11. Frugal Web Development CraigslistActually contains some nice job postings. Try not to get murdered. That can be a downer.
  12. 12. Frugal Web DevelopmentSimplyHired Tends more toward higher skilled positions, and more competitive markets.
  13. 13. Frugal Web DevelopmentCrafting a ProposalAt some point, you gotta put it all in writing…
  14. 14. Frugal Web DevelopmentProposalPadGreat tool. Allows you to manage proposals, host a portfolio, and even get signoff from clients.
  15. 15. Frugal Web DevelopmentQuoteRoller Great for “plug and play quotes.” Nice templates, and integrates with other applications in this presentation.
  16. 16. Frugal Web DevelopmentFreshbooks Nice Quickbooks alternative. Intended more for time tracking/invoicing.Integrates well with Quoteroller. Has a nice API for the developers out there.
  17. 17. Frugal Web DevelopmentOpen Office Probably the best replacement for the MS Office suite. Lacks a good replacement for Outlook.
  18. 18. Frugal Web DevelopmentCommunicating with the ClientYou fill in theblanks here.
  19. 19. Frugal Web DevelopmentFreedcamp Excellent for overall project management. Nice alternative to Basecamp.
  20. 20. Frugal Web Development ComindworkMore features. Probably better for bigger scale projects. Lacks the intuitiveness of Freedcamp.
  21. 21. Frugal Web DevelopmentGoogle Docs Notes
  22. 22. Frugal Web DevelopmentBrainstormingSometimes, the start is the hard part…
  23. 23. Frugal Web DevelopmentxMind Great for organizing thoughts. Useful at the start of projects. Free for individual use.
  24. 24. Frugal Web DevelopmentEvernote Any text editor really, but the portability of Evernote gives it an edge.
  25. 25. Frugal Web DevelopmentFreemind Freemind is totally free, but not as intuitive as xMind. Has a nice HTML feature, though.
  26. 26. Frugal Web DevelopmentWireframingLet’s just put this over there…
  27. 27. Frugal Web DevelopmentGliffy Cloud-based collaboration tool for sharing diagrams and interfaces.
  28. 28. Frugal Web DevelopmentPencil Amazing Tool. Truly open source, and runs inside of Firefox.
  29. 29. Frugal Web DevelopmentDenim Truly for “rough sketching” but is fully open source, and supports tablet and stylus input. A bit out of date.
  30. 30. Frugal Web DevelopmentDesign Everyone can do it. Very few can do it well. Myself included.
  31. 31. Frugal Web DevelopmentGimp Very full-featured alternative to Photoshop. Even works with PSD files.
  32. 32. Frugal Web DevelopmentColorzillaSits in Firefox, allows you to click on any element and extract the color codes.
  33. 33. Frugal Web DevelopmentZScreen
  34. 34. Frugal Web DevelopmentArt Resources Why is it that all clip art sites are ugly?
  35. 35. Frugal Web DevelopmentGoogle Web FontsGreat API that allows you to easily use more decorative fonts in your designs without using images.
  36. 36. Frugal Web DevelopmentDesign FeedbackEvery parent thinks their child is adorable…Sometimes, they’re just NOT.
  37. 37. Frugal Web DevelopmentFive Second Test Great for testing the initial impact and effectiveness of your site.
  38. 38. Frugal Web DevelopmentUsabilla Heat tracking allows data based on actual use, not impressions.
  39. 39. Frugal Web DevelopmentUserfly Provides actual video of use, and effective analytics.
  40. 40. Frugal Web DevelopmentCoding the SiteWhat you see is what you get… unless you’reusing IE.
  41. 41. Frugal Web DevelopmentNotepad++ A good basic text editor is a must.
  42. 42. Frugal Web DevelopmentAptana Studio Not a great WYSIWYG, but more powerful than Dreamweaver for “power coders”
  43. 43. Frugal Web DevelopmentKompoZer Great beginner WYSIWYG, not great for much besides HTML and CSS
  44. 44. Frugal Web DevelopmentTesting“Because everyone uses everything exactly as weintend it, and it all always works perfectly the firsttime.”
  45. 45. Frugal Web DevelopmentBrowser Shots Great for capturing general look-and-feel issues.
  46. 46. Frugal Web DevelopmentFirebug Allows for in-browser debugging of CSS and Javascript.
  47. 47. Frugal Web DevelopmentIETester No better tool for debugging IE, and all seven levels of hell that entails.
  48. 48. Frugal Web DevelopmentSpoon Allows you to run a lot of browsers locally without an install.
  49. 49. Frugal Web DevelopmentAdobe Browser Lab Great tool. Will be presumably “Not Free” in April, though.
  50. 50. Frugal Web DevelopmentDeployment and HostingWordpress, Drupal, Joomla and Magento are all quality platforms that can meetyour needs. They’re really presentations unto themselves.Free hosting exists. See’t EVER, EVER use it. Seriously. You’ll regret it.
  51. 51. Frugal Web DevelopmentWrapping