frugal web development
DESCRIPTION
TRANSCRIPT
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.
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.
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.
Frugal Web Development
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.
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.
Frugal Web Development
Dropbox
Frugal Web Development
Cloud-based storage available on any computer and many mobile devices
Evernote
Frugal Web Development
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.
Frugal Web Development
Elance
Frugal Web Development
Established and respected. Has some fees after you get paid. Great for finding help. Is highly competitive.
Craigslist
Frugal Web Development
Actually contains some nice job postings. Try not to get murdered. That can be a downer.
SimplyHired
Frugal Web Development
Tends more toward higher skilled positions, and more competitive markets.
Crafting a Proposal
At some point, you gotta put it all in writing…
Frugal Web Development
ProposalPad
Frugal Web Development
Great tool. Allows you to manage proposals, host a portfolio, and even get signoff from clients.
QuoteRoller
Frugal Web Development
Great for “plug and play quotes.” Nice templates, and integrates with other applications in this presentation.
Freshbooks
Frugal Web Development
Nice Quickbooks alternative. Intended more for time tracking/invoicing. Integrates well with Quoteroller. Has a nice API for the developers out there.
Open Office
Frugal Web Development
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.
Frugal Web Development
Freedcamp
Frugal Web Development
Excellent for overall project management. Nice alternative to Basecamp.
Comindwork
Frugal Web Development
More features. Probably better for bigger scale projects. Lacks the intuitiveness of Freedcamp.
Brainstorming
Sometimes, the start is the hard part…
Frugal Web Development
xMind
Frugal Web Development
Great for organizing thoughts. Useful at the start of projects. Free for individual use.
Evernote
Frugal Web Development
Any text editor really, but the portability of Evernote gives it an edge.
Freemind
Frugal Web Development
Freemind is totally free, but not as intuitive as xMind. Has a nice HTML feature, though.
Wireframing
Let’s just put this over there…
Frugal Web Development
Gliffy
Frugal Web Development
Cloud-based collaboration tool for sharing diagrams and interfaces.
Pencil
Frugal Web Development
Amazing Tool. Truly open source, and runs inside of Firefox.
Denim
Frugal Web Development
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.
Frugal Web Development
Gimp
Frugal Web Development
Very full-featured alternative to Photoshop. Even works with PSD files.
Colorzilla
Frugal Web Development
Sits in Firefox, allows you to click on any element and extract the color codes.
Art Resources
Frugal Web Development
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
Frugal Web Development
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.
Frugal Web Development
Five Second Test
Frugal Web Development
Great for testing the initial impact and effectiveness of your site.
Usabilla
Frugal Web Development
Heat tracking allows data based on actual use, not impressions.
Userfly
Frugal Web Development
Provides actual video of use, and effective analytics.
Coding the Site
What you see is what you get… unless you’re using IE.
Frugal Web Development
Aptana Studio
Frugal Web Development
Not a great WYSIWYG, but more powerful than Dreamweaver for “power coders”
KompoZer
Frugal Web Development
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.”
Frugal Web Development
Browser Shots
Frugal Web Development
Great for capturing general look-and-feel issues.
Firebug
Frugal Web Development
Allows for in-browser debugging of CSS and Javascript.
IETester
Frugal Web Development
No better tool for debugging IE, and all seven levels of hell that entails.
Spoon
Frugal Web Development
Allows you to run a lot of browsers locally without an install.
Adobe Browser Lab
Frugal Web Development
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.
Frugal Web Development
Wrapping Up
@TomCottrilltcottrill@fathomseo.comwww.TomCottrill.comwww.fathomdelivers.com
Frugal Web Development