1. Frugal Web Development
Tom Cottrill
Development Manager
@TomCottrill

2. Frugal Web Development
So 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. Frugal Web Development
Seriously, who is this guy, and what’s he babbling
about? And does he know what he’s talking
about?
 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. Frugal Web Development
These tools are free or “freemium” web
development resources that may help you in
your projects. I anticipate you’ll find a few you
like, and some you don’t.

5. Frugal Web Development
The phases of web design
We’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. Frugal Web Development
Some Essentials
These two you really shouldn’t be running without
these days. They make you mobile and agile, and
their uses cross over a lot of the Web
development steps.

7. Frugal Web Development
Dropbox
Cloud-based storage available on any computer and many mobile devices

8. Frugal Web Development
Evernote
Notes that follow you to all your devices. Great for recording to-dos and
capturing ideas.

9. Frugal Web Development
Finding Work
Drumming up work really hasn’t evolved much in
hundreds of years… just the media has. It’s all
about putting yourself out there, and looking for
people that need your help.

10. Frugal Web Development
Elance
Established and respected. Has some fees after you get paid. Great for finding
help. Is highly competitive.

11. Frugal Web Development
Craigslist
Actually contains some nice job postings. Try not to get murdered. That can be
a downer.

12. Frugal Web Development
SimplyHired
Tends more toward higher skilled positions, and more competitive markets.

13. Frugal Web Development
Crafting a Proposal
At some point, you gotta put it all in writing…

14. Frugal Web Development
ProposalPad
Great tool. Allows you to manage proposals, host a portfolio, and even get
signoff from clients.

15. Frugal Web Development
QuoteRoller
Great for “plug and play quotes.” Nice templates, and integrates with other
applications in this presentation.

16. Frugal Web Development
Freshbooks
Nice Quickbooks alternative. Intended more for time tracking/invoicing.
Integrates well with Quoteroller. Has a nice API for the developers out there.

17. Frugal Web Development
Open Office
Probably the best replacement for the MS Office suite. Lacks a good
replacement for Outlook.

18. Frugal Web Development
Communicating with the Client
You fill in the
blanks here.

19. Frugal Web Development
Freedcamp
Excellent for overall project management. Nice alternative to Basecamp.

20. Frugal Web Development
Comindwork
More features. Probably better for bigger scale projects. Lacks the intuitiveness
of Freedcamp.

21. Frugal Web Development
Google Docs
Notes

22. Frugal Web Development
Brainstorming
Sometimes, the start is the hard part…

23. Frugal Web Development
xMind
Great for organizing thoughts. Useful at the start of projects. Free for
individual use.

24. Frugal Web Development
Evernote
Any text editor really, but the portability of Evernote gives it an edge.

25. Frugal Web Development
Freemind
Freemind is totally free, but not as intuitive as xMind. Has a nice HTML
feature, though.

26. Frugal Web Development
Wireframing
Let’s just put this
over there…

27. Frugal Web Development
Gliffy
Cloud-based collaboration tool for sharing diagrams and interfaces.

28. Frugal Web Development
Pencil
Amazing Tool. Truly open source, and runs inside of Firefox.

29. Frugal Web Development
Denim
Truly for “rough sketching” but is fully open source, and supports tablet and
stylus input. A bit out of date.

30. Frugal Web Development
Design
Everyone can do it.
Very few can do it well.
Myself included.

31. Frugal Web Development
Gimp
Very full-featured alternative to Photoshop. Even works with PSD files.

32. Frugal Web Development
Colorzilla
Sits in Firefox, allows you to click on any element and extract the color codes.

33. Frugal Web Development
ZScreen

34. Frugal Web Development
Art Resources
http://www.public-domain-photos.com/
http://www.hasslefreeclipart.com
http://www.freeiconsweb.com/
Why is it that all clip art sites are ugly?

35. Frugal Web Development
Google Web Fonts
Great API that allows you to easily use more decorative fonts in your designs
without using images.

36. Frugal Web Development
Design Feedback
Every parent thinks their child is adorable…
Sometimes, they’re just NOT.

37. Frugal Web Development
Five Second Test
Great for testing the initial impact and effectiveness of your site.

38. Frugal Web Development
Usabilla
Heat tracking allows data based on actual use, not impressions.

39. Frugal Web Development
Userfly
Provides actual video of use, and effective analytics.

40. Frugal Web Development
Coding the Site
What you see is what you get… unless you’re
using IE.

41. Frugal Web Development
Notepad++
A good basic text editor is a must.

42. Frugal Web Development
Aptana Studio
Not a great WYSIWYG, but more powerful than Dreamweaver for “power
coders”

43. Frugal Web Development
KompoZer
Great beginner WYSIWYG, not great for much besides HTML and CSS

44. Frugal Web Development
Testing
“Because everyone uses everything exactly as we
intend it, and it all always works perfectly the first
time.”

45. Frugal Web Development
Browser Shots
Great for capturing general look-and-feel issues.

46. Frugal Web Development
Firebug
Allows for in-browser debugging of CSS and Javascript.

47. Frugal Web Development
IETester
No better tool for debugging IE, and all seven levels of hell that entails.

48. Frugal Web Development
Spoon
Allows you to run a lot of browsers locally without an install.

49. Frugal Web Development
Adobe Browser Lab
Great tool. Will be presumably “Not Free” in April, though.

50. Frugal Web Development
Deployment and Hosting
Wordpress, Drupal, Joomla and Magento are all quality platforms that can meet
your needs. They’re really presentations unto themselves.
Free hosting exists. See http://www.x90x.net/.
Don’t EVER, EVER use it. Seriously. You’ll regret it.

51. Frugal Web Development
Wrapping Up
@TomCottrill
tcottrill@fathomseo.com
www.TomCottrill.com
www.fathomdelivers.com