Apr 11 2012

39 Web Apps and Tools We Use to Create Websites

WebAppsWeUse

Probably not unlike you, we use a cadre of different tools to help us create websites and products we’re proud of. Every year it seems that this list morphs, evolves, shrinks and grows. So we thought, ‘Hey, it might be valuable to some people to get a look at how we build things and the tools that we use to get the job done.’ We looked at every step of our development process and highlighted our favorite technologies every step of the way. These divisions aren’t meant as hard and fast rules; but rather groupings that can help you if you’re looking for a tool to find efficiencies, process improvements or work product for a particular phase.

39 Web Apps and Tools We Use to Create Websites

Meeting, Brainstorming, Strategy

Our initial planning phases are all about collaboration. Here’s what we use to communicate, ideate and put the plan together.

Skype – Like many of you, our clients are in far-flung places. Jumping on a plane to review every comp or brainstorm every feature just isn’t efficient. Skype is the perfect way to get face-to-face with clients and review mockups in real time. It’s our default mode of communication when we need to screen share something.

Whiteboard – It’s not digital, but there’s nothing more valuable than being able to sketch out quick flows, wire concepts and architectures. We try to put one on every available wall surface. And now that we’ve run out of wall space we’ve taken to sketching on our glass conference room table as well.

Google Docs – Emailing files back and forth, buying Microsoft Office and dealing with version control just isn’t for us. If you’re over it too, we’ve found that Google Docs has come so far so fast that it is now our primary office suite for business docs. Plus docs make for perfect repositories for brainstorming notes, business requirements, to-do lists, timelines, and more.

Google+ – We use Google+ in the office in a number of ways, but it’s a great resource in helping us share and track innovative and interesting projects we find on the Web. It’s a great source of idea fodder to help in this phase of the project.

Basecamp – If your job is to ship, Basecamp is the lightweight tool to help you do that. We use Basecamp to track milestones, to-dos, team availability, project correspondence, files and more. If you’re in an Agile environment you might like JIRA or Pivotal Tracker for software built for that workflow.

Dropbox – Collecting and managing images, client files, presentations, comps and any other project file just works better on Dropbox. The desktop app makes it easy to add and access files stored on Dropbox and features such as folder sharing, public links and photo galleries make it a handy tool for working with clients and team members no matter where they are. Plus it’s great for version control because it saves past instances of uploaded files.

Information Architecture

They’re our go-to tools as we start to determine user flows, information architecture, prototypes, and user experience wireframe concepts.

Axure – A powerful wireframing tool that helps us build wireframes and emulate user experience and flows with interactive linking between wireframed pages. Axure lets us do quick and dirty wires for internal review and then lets us polish them up and annotate them for client delivery. If you’re looking for a less-expensive wireframe solution, we’re also fans of Balsamiq mockups and Mockingbird – especially for lower fidelity wireframe sketches.

Omnigraffle – A great tool for vector-based user flows, site maps, customer experience touchpoints and more. Omnigraffle is a great tool to help show overall user experience and the system interactions or information architecture.

Whiteboard – If we had a nickel for every time we went to a whiteboard in this phase we wouldn’t need to charge for our services. Again, it’s invaluable for ideating, trying out ideas and collaborating on solutions to business requirements.

Design, Presentation, and Iteration

When it’s time to bring the idea to life with design, there are the tools we turn to.

Adobe Photoshop / Adobe Illustrator – This is where the heavy design lifting is done. This isn’t news to any of you in the field; but these are the workhorses of the design phase, noway around it. Sure, there are other programs out there, but Adobe is still the best for everything from page layouts, logo development, custom art and production graphics. If you don’t love Photoshop, Fireworks also gets the job done if you’re doing mostly Web-based work.

Join.me – Why pay for WebEx or GoToMeeting when you can use join.me for easy screen sharing and client presentation. It’s dead-simple, and you can either pay for a recurring username and meeting room, or use a one-time code for free. It’s a great way to walk a client or colleague through a design.

GoToMeeting – If you need more from your screen sharing software, such as passing control of the screen between parties, conference call chat and recording, then paying for GoToMeeting may be a better option for you than Join.me.

Getty Images/iStockPhoto – We try to stay away from stock imagery whenever possible; but sometimes you need it. These libraries are deep and provide a wide range of options for finding that perfect shot of a hand shake for your contact page (I kid!)


Notable – Notable is a collaborative tool for sharing and tracking group feedback on creative comps. The ability to highlight and comment on particular areas of the comp make it easier to focus the conversation and communicate questions and changes even with remote teams.


Cloud – CloudApp is a simple desktop client for Mac that lets you instantly create hosted files by dragging local files to their app icon. Cloud immediately puts a short-link URL on your clipboard linking to a hosted version of the file. Great for avoiding those nasty 5MB Microsoft Exchange email size limits.


Skitch – A great, fast way to grab screen captures and share them with others via a hosted version of the capture. Their annotation tools make it easy to point to a particular element of the image for discussion. Plus, Skitch’s sets feature lets you put multiple related shots in one place for easy viewing.


Verify – Verify lets you show comps and concepts to an anonymous audience. The audience members have five seconds to review your designs and then answer a question you specify. From A/B tests on which creative they like better, to answering what they think the business does based on the design, it’s a great way to get quick, inexpensive feedback when trying to decide on a direction.

UserTesting – Want a more in-depth user experience review? UserTesting can provide panels of user testers based on information you provide. The sessions are task-based and the user’s screen is recorded. A survey can also be included. If you want to user test your new app or new site, it’s a great way to validate your assumptions or identify hidden usability problems.


Basecamp
 – This phase is all about back and forth, and Basecamp is a great tool to manage the iterations and make sure we’re all on the same page and working from the latest version.

Development

With design locked it’s time to build the engine that is going to get this project up and out to the public. Here’s our list of tools to get ‘er done.


TextMate/Notepad++
 – The best, lightweight desktop code editors. If you’re a Mac you’re probably TextMate. PC? Notepad++. The built-in templates, auto-complete features and overall polish make them the gold standard when it comes to Website development. They’re perfect for coding out a website, or a WordPress install.


FileZilla/Transmit
 – Your go to FTP clients. Not overly sexy but critical to workflow. But you already knew this.


PuTTY/Terminal – Server configuration, crons, software and database setup, maintenance, etc. It’s still the easiest and best way to efficiently manage servers.


Aptana – A robust IDE (Integrated Development Environment), Apatana lets you build applications right on your desktop. Pick your language and get bring your app to life with everything you need to dev and QA your web app right on your desktop.


Coda – Coda bills itself as one-window web development for OSX, and that’s a pretty accurate statement. Coda provides a text editor, FTP, Subversion control and more rolled into one pretty package. Some people swear by Coda, we’re those people.


Beanstalk – Hosted subversion and Git version control. Beanstalk lets you easily manage your deployments by doing the complicated merging, updating and logging changes while providing collaboration and communication tools to help your team more effectively manage deployments. A nice tool if you don’t have a full-blown deployment team for rolling out new builds.


Firebug
 – If you do any front-end Web dev you live with Firebug open on a regular basis. It’s great for identifying styling issues, trying out new CSS in your browser and pushing and nudging items into place with minor CSS tweaks. The copy styles makes it easy to take those tweaks and build them into your primary CSS files.



Border-radius.com
 – Need the CSS for a rounded button? Enter the values and this handy tool cranks out the style information you need to get your rounded button on.

Javascriptcompressor.com – JS can be a resource hog if it’s not properly optimized and managed in the code. You don’t want to kill your load time with bloated Javascript, which is why javascriptcompressor.com comes in handy. You paste in your JS code and you’ll get compressed JS back that will be easier on your user’s Web client.


jshint.com
 – Have a pesky JS bug you’re trying to squash or looking to validate your existing code for any potential issues? Paste your JS into the site and it will spit out a list of errors and potential issues.

Papercut – Email notifications are a way of life with any Web app. But sometimes you don’t want to go through the headache of connecting your app to an SMTP server just to test and see if it can send email. So Papercut lets you set up a simple SMTP server and GUI so you can receive test emails from your app and validate their content and creative.


ColorZilla
 – If you’re using gradients in buttons and other UI elements this handy tool will let you specify gradient settings and then generate the CSS style information you need. Next time don’t skip the gradient because the code is too complicated, use the gradient and get the code with ColorZilla.


CSS Compressor
 – Just like it’s JavaScript counterpart, CSS Compressor optimizes your CSS files to improve website performance and reduce page load time. Code bloat is ugly, even if your user can’t see it. Clean it up with this handy tool.

Visual Event – Need to debug a website or app and are having a hard time tracking back the JS function tied to the event and page element? You’re not alone, which is why Visual Event exists. Visual event makes it easy to debug by displaying the event and corresponding subscribed JS function. Now you can hunt down and squash JS bugs in a fraction of the time. You’re welcome!

Post-Launch

Shipping a product doesn’t mean our work is done. Iteration is key to improving performance and learning from real user feedback and data. Here’s how we collect that data.



Google Analytics – The gold standard of free data. With properly configured goals, user segments and ecommerce tracking, Google Analytics will give you every Web metric you need to see how your site is performing.


KISS Metrics – Want to see individual-level performance? Google Analytics can’t do that. Want cohort analysis? Google Analytics misses again. But KISS Metrics gives you both, plus detailed funnel analysis that help you identify weak spots in your conversion funnels that you can prioritize in your product iterations.

KISS Insights – Hard data is great, but it can’t tell you what the user was looking for or if they enjoy using your website or app. KISS Insights lets you deploy a simple, single-question survey widget to your website. It’s a great way to solicit qualitative feedback that can uncover insights about your user experience that can’t be gleaned from analytic packages.


Optimizely
 – On the Web there’s no excuse not to always be testing. Optimizely lets you test page elements quickly and easily. A/B tests or multi-variate, Optimizely’s visual editor and test setup makes it easy to run new experiments and collect data for continuous conversion improvement. Visual Website Optimizer or Google Website Optimizer are also good options for on-site A/B testing.


CrazyEgg
 – Get detailed click maps and scroll maps that help you understand where your user attention is going and where it wains. It’s a great way to visualize what page elements are being seen and capturing attention. You may find that a design element is getting all the user attention, while your call to action is missed by the majority of users who give up scrolling before they get there.


Survey Monkey – Surveys are a great way to get detailed feedback from your users. From their overall satisfaction, net promoter score, demographic insight and feedback on features and functionality, you can’t beat a detailed survey. Survey Monkey makes it easy to create surveys with different questions types, branching based on previous responses and deployment via web, email or social channels.

That’s our list. Have a favorite that we didn’t cover? We’d love to hear about it in the comments. We hope this list of tools and apps introduced you to a resource or two that will make your web development efforts easier and more efficient. We’re constantly evaluating new technologies and tools to help us do our job better. We’ll do our best to report back in a year’s time with our latest list of development technologies. Until then, be sure to share with us any new gems you find that help you do more quality work.

About the Author:

Morgan heads up marketing at digital-telepathy. Find me online at Google+.

Leave a Response

8 Responses

  1. Apr 13 2012
    Robert

    nice list, but i would never buy from getty or istockphoto (which belongs to getty) they sue webmasters and clients for breaking copyright law, customers with a bought licence will also be sued.. nobody should trust getty images. dont belive me? search google for “getty sued” .. they are making money by suing and not ßelling the licenses.

  2. Apr 15 2012
    damon

    I agree with Robert. I have had several clients have this happen.

    Thank for the usability testing URLs. I have been testing several but these two look promising. Always be testing… and stop guessing is my motto

  3. Apr 16 2012
    Jamie Hamel-Smith

    Thanks for sharing the info about your experience with getty & istockphoto guys. It’s always good to know what’s going on out there. Could you guys recommend an alternative to the aforementioned sources?

  4. Apr 17 2012
    Kelly H-D

    They are the best. There are dozens of other stock photo sites out there like crestock.com, dreamstime.com and bigstock.com but you won’t find any as robust as istock.They just have time behind them, that’s a powerful currency. Although of late they have been waning and we’re beginning to shop elsewhere.
    We were sent a being sued letter several years back. Had a new developer on board and couldn’t find his paperwork that we had paid so just paid the requested $600 rather than fight it. In hindsight maybe not the smartest business move.
    Although I do believe they should protect their product and unless they follow up on infringement rights, they will be trampled.
    Thanks for the web app tips. We use many of them but there are a few there we will definitely investigate!

  5. Apr 18 2012
    Cyphas

    The quality of a man’s work is attributed to the tools he uses, his passion for the project, knowledge and experience poured in.

    Now I know how you achieve so much stunning designs and help clients to succeed online. Great works guys, great set of tools too. Some design agencies could learn a lot from you guys. For me Information Architecture is the core of it all.

    I would add Podio to your list of project management tools. It also has the team sharing capabilities too of Google+ and some of the other tools you mentioned. I work on project using the Agile approach.

  6. May 08 2012
    Kate

    I love Billings.

    It handles all my time tracking estimating and invoicing. It keeps records of projects with notes and links to associated emails and urls.

    It has a good recording system to show you how you are progressing with budgets etc.

    It has a good reporting function and a great little recurring invoice setup that I have all my domain and hosting invoices for clients, so I never miss one.

    Thanks for the post…

  7. Sep 24 2013
    byod

    This is really useful to me. Thanks for sharing this article.

  8. Nov 03 2013
    Michiel

    For project management we use bambam from springloops.io. You can determine your own workflows which is very useful. Realy one of the best tools we’ve tried.