Frugal Web Development

Frugal Web Development

Tom Cottrill
Development Manager
@TomCottrill


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.


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.


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.


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.


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.


Dropbox

Cloud-based storage available on any computer and many mobile devices


Evernote

Notes that follow you to all your devices. Great for recording to-dos and
capturing ideas.


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.


Elance

Established and respected. Has some fees after you get paid. Great for finding
help. Is highly competitive.


Craigslist

Actually contains some nice job postings. Try not to get murdered. That can be
a downer.


SimplyHired

Tends more toward higher skilled positions, and more competitive markets.


Crafting a Proposal

At some point, you gotta put it all in writing…


ProposalPad

Great tool. Allows you to manage proposals, host a portfolio, and even get
signoff from clients.


QuoteRoller

Great for “plug and play quotes.” Nice templates, and integrates with other
applications in this presentation.


Freshbooks

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


Open Office

Probably the best replacement for the MS Office suite. Lacks a good
replacement for Outlook.


Communicating with the Client

You fill in the
blanks here.


Freedcamp

Excellent for overall project management. Nice alternative to Basecamp.


Comindwork

More features. Probably better for bigger scale projects. Lacks the intuitiveness
of Freedcamp.


Google Docs

Notes


Brainstorming

Sometimes, the start is the hard part…


xMind

Great for organizing thoughts. Useful at the start of projects. Free for
individual use.


Evernote

Any text editor really, but the portability of Evernote gives it an edge.


Freemind

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


Wireframing

Let’s just put this
over there…


Gliffy

Cloud-based collaboration tool for sharing diagrams and interfaces.


Pencil

Amazing Tool. Truly open source, and runs inside of Firefox.


Denim

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


Design

Everyone can do it.

Very few can do it well.

Myself included.


Gimp

Very full-featured alternative to Photoshop. Even works with PSD files.


Colorzilla

Sits in Firefox, allows you to click on any element and extract the color codes.


ZScreen


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?


Google Web Fonts

Great API that allows you to easily use more decorative fonts in your designs
without using images.


Design Feedback

Every parent thinks their child is adorable…

Sometimes, they’re just NOT.


Five Second Test

Great for testing the initial impact and effectiveness of your site.


Usabilla

Heat tracking allows data based on actual use, not impressions.


Userfly

Provides actual video of use, and effective analytics.


Coding the Site

What you see is what you get… unless you’re
using IE.


Notepad++

A good basic text editor is a must.


Aptana Studio

Not a great WYSIWYG, but more powerful than Dreamweaver for “power
coders”


KompoZer

Great beginner WYSIWYG, not great for much besides HTML and CSS


Testing

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


Browser Shots

Great for capturing general look-and-feel issues.


Firebug

Allows for in-browser debugging of CSS and Javascript.


IETester

No better tool for debugging IE, and all seven levels of hell that entails.


Spoon

Allows you to run a lot of browsers locally without an install.


Adobe Browser Lab

Great tool. Will be presumably “Not Free” in April, though.


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.


Wrapping Up

@TomCottrill
tcottrill@fathomseo.com
www.TomCottrill.com
www.fathomdelivers.com

Frugal Web Development

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Frugal Web Development (20)

Recently uploaded (20)

Frugal Web Development