frugal web development

Frugal Web Development

Tom CottrillDevelopment 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 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.

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

Brainstorming

Sometimes, the start is the hard part…

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.

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.

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

Why is it that all clip art sites are ugly?

http://www.public-domain-photos.com/

http://www.hasslefreeclipart.com

http://www.freeiconsweb.com/

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.

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

@TomCottrilltcottrill@fathomseo.comwww.TomCottrill.comwww.fathomdelivers.com

frugal web development

Technology

frugal rehabilitation methodology (frm) · 6 frugal...

a pattern-based approach to the development of frugal...

frugal innovation, sustainability, and sustainable frugal

the frugal business owner

frugal grocery shopping

what pathways lead to frugal innovation? - tuhh...define...

the american frugal housewife

delft university of technology frugal innovations and...

frugal video poker

frugal innovation anirudh

cover - frugal hotspot

frugal marketing

frugal paradigm completion

frugal innovation - asialink business

a frugal shunpiker’s guide - frugal rv travel ·...

sumeet kapur - frugal innovation

topic new product development within the bop space on the...

frugal marketing 101

do frugal innovations lead to frugal outcomes? a case study...

frugal patent landscaping