frugal web development
DESCRIPTION
TRANSCRIPT
![Page 1: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/1.jpg)
Frugal Web Development
Tom CottrillDevelopment Manager
@TomCottrill
![Page 2: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/2.jpg)
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
![Page 3: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/3.jpg)
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
![Page 4: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/4.jpg)
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
![Page 5: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/5.jpg)
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
![Page 6: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/6.jpg)
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
![Page 7: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/7.jpg)
Dropbox
Frugal Web Development
Cloud-based storage available on any computer and many mobile devices
![Page 8: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/8.jpg)
Evernote
Frugal Web Development
Notes that follow you to all your devices. Great for recording to-dos and capturing ideas.
![Page 9: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/9.jpg)
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
![Page 10: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/10.jpg)
Elance
Frugal Web Development
Established and respected. Has some fees after you get paid. Great for finding help. Is highly competitive.
![Page 11: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/11.jpg)
Craigslist
Frugal Web Development
Actually contains some nice job postings. Try not to get murdered. That can be a downer.
![Page 12: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/12.jpg)
SimplyHired
Frugal Web Development
Tends more toward higher skilled positions, and more competitive markets.
![Page 13: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/13.jpg)
Crafting a Proposal
At some point, you gotta put it all in writing…
Frugal Web Development
![Page 14: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/14.jpg)
ProposalPad
Frugal Web Development
Great tool. Allows you to manage proposals, host a portfolio, and even get signoff from clients.
![Page 15: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/15.jpg)
QuoteRoller
Frugal Web Development
Great for “plug and play quotes.” Nice templates, and integrates with other applications in this presentation.
![Page 16: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/16.jpg)
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.
![Page 17: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/17.jpg)
Open Office
Frugal Web Development
Probably the best replacement for the MS Office suite. Lacks a good replacement for Outlook.
![Page 18: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/18.jpg)
Communicating with the Client
You fill in the blanks here.
Frugal Web Development
![Page 19: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/19.jpg)
Freedcamp
Frugal Web Development
Excellent for overall project management. Nice alternative to Basecamp.
![Page 20: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/20.jpg)
Comindwork
Frugal Web Development
More features. Probably better for bigger scale projects. Lacks the intuitiveness of Freedcamp.
![Page 22: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/22.jpg)
Brainstorming
Sometimes, the start is the hard part…
Frugal Web Development
![Page 23: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/23.jpg)
xMind
Frugal Web Development
Great for organizing thoughts. Useful at the start of projects. Free for individual use.
![Page 24: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/24.jpg)
Evernote
Frugal Web Development
Any text editor really, but the portability of Evernote gives it an edge.
![Page 25: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/25.jpg)
Freemind
Frugal Web Development
Freemind is totally free, but not as intuitive as xMind. Has a nice HTML feature, though.
![Page 26: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/26.jpg)
Wireframing
Let’s just put this over there…
Frugal Web Development
![Page 27: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/27.jpg)
Gliffy
Frugal Web Development
Cloud-based collaboration tool for sharing diagrams and interfaces.
![Page 28: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/28.jpg)
Pencil
Frugal Web Development
Amazing Tool. Truly open source, and runs inside of Firefox.
![Page 29: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/29.jpg)
Denim
Frugal Web Development
Truly for “rough sketching” but is fully open source, and supports tablet and stylus input. A bit out of date.
![Page 30: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/30.jpg)
Design
Everyone can do it.
Very few can do it well.
Myself included.
Frugal Web Development
![Page 31: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/31.jpg)
Gimp
Frugal Web Development
Very full-featured alternative to Photoshop. Even works with PSD files.
![Page 32: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/32.jpg)
Colorzilla
Frugal Web Development
Sits in Firefox, allows you to click on any element and extract the color codes.
![Page 34: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/34.jpg)
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/
![Page 35: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/35.jpg)
Google Web Fonts
Frugal Web Development
Great API that allows you to easily use more decorative fonts in your designs without using images.
![Page 36: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/36.jpg)
Design Feedback
Every parent thinks their child is adorable…
Sometimes, they’re just NOT.
Frugal Web Development
![Page 37: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/37.jpg)
Five Second Test
Frugal Web Development
Great for testing the initial impact and effectiveness of your site.
![Page 38: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/38.jpg)
Usabilla
Frugal Web Development
Heat tracking allows data based on actual use, not impressions.
![Page 39: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/39.jpg)
Userfly
Frugal Web Development
Provides actual video of use, and effective analytics.
![Page 40: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/40.jpg)
Coding the Site
What you see is what you get… unless you’re using IE.
Frugal Web Development
![Page 42: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/42.jpg)
Aptana Studio
Frugal Web Development
Not a great WYSIWYG, but more powerful than Dreamweaver for “power coders”
![Page 43: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/43.jpg)
KompoZer
Frugal Web Development
Great beginner WYSIWYG, not great for much besides HTML and CSS
![Page 44: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/44.jpg)
Testing
“Because everyone uses everything exactly as we intend it, and it all always works perfectly the first time.”
Frugal Web Development
![Page 45: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/45.jpg)
Browser Shots
Frugal Web Development
Great for capturing general look-and-feel issues.
![Page 46: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/46.jpg)
Firebug
Frugal Web Development
Allows for in-browser debugging of CSS and Javascript.
![Page 47: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/47.jpg)
IETester
Frugal Web Development
No better tool for debugging IE, and all seven levels of hell that entails.
![Page 48: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/48.jpg)
Spoon
Frugal Web Development
Allows you to run a lot of browsers locally without an install.
![Page 49: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/49.jpg)
Adobe Browser Lab
Frugal Web Development
Great tool. Will be presumably “Not Free” in April, though.
![Page 50: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/50.jpg)
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
![Page 51: Frugal Web Development](https://reader035.vdocuments.site/reader035/viewer/2022081413/549cc076b47959d9318b4844/html5/thumbnails/51.jpg)
Wrapping Up
@TomCottrilltcottrill@fathomseo.comwww.TomCottrill.comwww.fathomdelivers.com
Frugal Web Development