Web design and development has significantly changed over the years, as have the tools and technologies involved. With these advancements come tools to make our lives easier, provide higher quality work and better services for our clients. Communication and collaboration over vast distances is no longer painfully frustrating (or impossible) and project or task management is now easier than ever.
Web designers and developers can also jump on virtually any internet connected computer with a modern browser to get work done without their main desktop applications. Wireframe, design, test, develop, deploy and so much more, straight from the web.
Here are 51 web apps to make web designer’s and developer’s lives easier than ever and crank up their capabilities.
Splashup
With Splashup you have more than basic image editing capabilities at your fingertips, anywhere you go. You can edit multiple images and layers together, use a variety of filters and tools as well as access your stored images just about anywhere (Flickr, Picasa, etc).
Price: Free
Requires: Flash
Link: http://www.splashup.com
Aviary
Aviary is a collection of web apps ranging from image and vector editing to screen capture and audio editing. These editors are capable of some pretty amazing work, yet are simple, free and fast enough for quick, basic editing.
Price: Free – $24.99/yr
Requires: Flash
Link: http://aviary.com
Pixlr
Like Splashup and Aviary, Pixlr brings image editing to the web. Pixlr is more of a Photoshop clone than the other two, with a GUI that will likely be more comfortable for Photoshop users. Pixlr packs some extra features as well such as RAM usage, FPS performance and lots of tools and filters.
Price: Free
Requires: Flash
Link: http://www.pixlr.com
Photoshop.com
Photoshop.com is a very basic online version of the popular desktop application Photoshop. By basic, I really mean basic. It’s intended for photos and video with a very limited set of tools. It does however, include free photo storage, albums and quick access to your photos on sites like Flickr and Picasa.
Price: Free (2GB storage) – $499.99/yr (500GB storage)
Requires: Flash
Link: https://www.photoshop.com
Adobe kuler
Adobe kuler makes it quick and easy to create, share and discover beautiful color schemes to fit your needs. Starting from a base color or an image, you can quickly create all types of color schemes such as analogous, monochromatic, triad, complementary and more.
Price: Free
Requires: Flash
Link: http://kuler.adobe.com
Color Scheme Designer
Color Scheme Designer offers a simpler interface than kuler for color scheme creation while also offering a couple other helpful features. Preview the color scheme and an example light and dark template with the colors. Color scheme types such as complimentary, triad and tetrad are all supported.
Price: Free
Requires: JavaScript, Browser newer than IE6
Link: http://colorschemedesigner.com
Typetester
Typetester is a fast way to test and compare up to three types of fonts with customized settings all side by side. Change the sample text and font options, then when you’re done you can get the custom CSS.
Price: Free
Requires: JavaScript, Firefox, Safari 2.0+, Opera 8+, Camino 0.8+, Omniweb 5.1.1 or IE 5.5+
Link: http://www.typetester.org
PXtoEM.com
With PXtoEM you can get a full set of EM conversions based on a specified body font size. If you’re only in need of one quick PX to EM conversion there’s also a calculator available to do the math for you.
Price: Free
Requires: JavaScript
Link: http://pxtoem.com
WhatTheFont
How often do you see a font somewhere on the web or in a magazine and wonder what it is? Upload an image of the font via URL or locally to WhatTheFont and get a list of possible matches. You’ll also get links to buy the possible font match(es).
Price: Free
Requires: Image of text for font discovery.
Link: http://new.myfonts.com/WhatTheFont/
FontStruct
With FontStruct you can create and share high quality TrueType fonts, which they call FontStructs. The editor provides easy to use tools, an alignment grid, a wide array of shapes (which they call bricks) and more.
Price: Free
Requires: Flash
Link: http://fontstruct.fontshop.com
CSS Sandbox
CSS Sandbox is a simple but helpful tool for experimenting with and learning CSS. The preview is live so as you select different options you’ll see the change immediately, no refresh required.
Price: Free
Requires: JavaScript
Link: http://aurelio.net/css-sandbox/
templatr
templatr is a template generator which gives you the ability to build a website template online and download the finished package. Select your desired layout, upload your graphics and customize every element by clicking it to select, then specifying its settings.
Price: Free
Requires: JavaScript
Link: http://templatr.cc
iPlotz
iPlotz lets you create and collaborate on mockups and wireframes quickly and easily. It provides a huge selection of elements for websites and applications and is very easy to use. It also offers multiple levels of collaboration for clients, co-workers, etc.
Price: Free – $495/year
Requires: Flash
Link: http://iplotz.com
Launch Splash
Launch Splash is a fast way to get a splash page online right away. It’s clean, simple, quick and a great way to satisfy an antsy client or friend while you build the real deal.
Price: Free
Requires: JavaScript (for preview)
Link: http://www.launchsplash.com
Wufoo
Let’s face it, forms aren’t exactly fun to create. Wufoo has managed to change that with their easy to use, drag-n-drop form creator. You get a lot more though like reports, security and payment integration. You can also use it just to create valid HTML/CSS forms for your own development if you’d like.
Price: Free – $199.95/month
Requires: JavaScript
Link: http://wufoo.com
JotForm
Like Wufoo, JotForm lets you create forms using a drag-n-drop interface. JotForm isn’t as pretty as Wufoo but it still has a lot to offer and simplifies the process of creating all sorts of different website forms. Reports, payments and more is also supported.
Price: Free – $9/month
Requires: JavaScript
Link: http://www.jotform.com
BgPatterns
Although BgPatterns’ selection and background creation tools are somewhat limited, it’s a neat and creative idea. You can quickly create and download a background pattern from a selection of options and pattern images.
Price: Free
Requires: Flash, JavaScript
Link: http://bgpatterns.com
Stripe Generator
Quickly create repeating stripes with Stripe Generator. You can customize stripe size, spacing, colors, background style, shadow and orientation. Then download the 18px * 18px repeating image and you’re good to go.
Price: Free
Requires: JavaScript
Link: http://www.stripegenerator.com
Genfavicon
With Genfavicon you can create faivcons of different sizes quickly and easily. Upload your image from HDD or URL, select the desired size option and use the image selection box to select and position the image how you would like. It’s a basic but a useful and nifty app.
Price: Free
Requires: JavaScript
Link: http://www.genfavicon.com
IzzyMenu
Create custom menus and preview them before downloading the final work. IzzyMenu offers an easy to use interface to customize graphics, colors, fonts, etc. You can also find prebuilt menus from their catalog. Signup is required for some of the more advanced features like jQuery effects.
Price: Free
Requires: JavaScript
Link: http://www.IzzyMenu.com
Produle
Create custom flash widgets and applications for your website with stats tracking, sharing and many other options. The editor is drag-n-drop simple and provides lots of customization options.
Price: Free – $39/month
Requires: Flash
Link: http://produle.com
WebbyChat
WebbyChat is a fully featured chat application you can integrate into your current website using JavaScript, then customize to fit your design. It offers a several options for moderation and administration as well as a nice user interface.
Price: Free – $70/month
Requires: JavaScript
Link: http://www.webbychat.com
Ajaxload
Ajaxload is another really basic web app that lets you generate a customized “loading” image commonly used with AJAX applications. It might be basic but it’s come in handy time and time again for many of my projects.
Price: Free
Requires: JavaScript
Link: http://ajaxload.info
Mozilla Labs Bespin
Bespin is an extensible code editor in the clouds. With it you can create, edit and share projects or even connect to other open-source projects and publicly accessible repositories. There’s a tremendous amount more that can be done with it, even theming it if you’d like.
Price: Free
Requires: Firefox 3.x, Webkit Nightly Builds, Google Chromium
Link: https://bespin.mozilla.com
PHPanywhere
Like Bespin, PHPanywhere is an online code editor supporting PHP/HTML (possibly more?). It even includes a fully featured and integrated FTP client. Tabbed editing, graphic file management, unlimited “undo” and “redo” and many more great features are included. There are many more features currently in development as well.
Price: Free
Requires: Opera 9+, Gecko-based browsers (Firefox, Camino, etc.), Support for IE, Safari and Chrome coming soon.
Link: http://phpanywhere.net
Yahoo Pipes
Yahoo Pipes gives you the ability to easily pull content together from around the web into several different forms like widgets, badges, maps, etc. Using the visual editor, you can create all sorts of great things without writing any code.
Price: Free
Requires: JavaScript
Link: http://pipes.yahoo.com/pipes/
Google Code Playground
Google offers a tremendous number of services and API’s. Fortunately they also provide an easy way to test, learn and build virtually anything via their Code Playground. Access API examples, customize, debug, run, save and export your work.
Price: Free
Requires: JavaScript
Link: http://code.google.com/apis/ajax/playground/
serFISH.com SSH Client
serFISH’s SSH client gives you quick access to a full SSH client right from the web. With it you can get around firewall and proxy restrictions, connect anonymously (no IP reporting) and more.
Price: Free
Requires: JavaScript
Link: http://serfish.com/console/
net2ftp
With net2ftp you can get fast, full featured access to your FTP server of choice. You don’t need JavaScript, Flash or even the most recent version of Firefox or Safari. It’s built completely from PHP ensuring easy access anywhere, anytime. You can even host a version of it on your own server!
Price: Free
Requires: N/A (uses PHP)
Link: http://net2ftp.com
Dabble DB
Dabble DB gives you an easy way to create online databases but it does a whole lot more. Take the information in your databases and create reports with charts, maps, etc. or collaborate with others and it’s all done in a easy to use user interface.
Price: Free – $8/month
Requires: JavaScript
Link: http://dabbledb.com
Adobe Browserlab
The thought of cross-browser testing will make many of you cringe. Adobe Browserlab makes this task faster, easier and much less painful. Several additional options are available as well, such as viewing multiple browsers side by side or even overlaid.
Test your website in all the major browsers from IE6+ to Firefox 2+ (Windows and OS X) and Safari 3+ (Windows and OS X).
Price: Free
Requires: Flash
Link: https://browserlab.adobe.com
BrowserCam
Like Browserlab, BrowserCam lets you capture screenshots of websites of your choice but in a much larger selection of browsers, including handheld devices like BlackBerry’s, iPhones and more. If you need to interact, you can also get remote access to testing systems.
Price: $19.95 – $999.95/month (Free trial available)
Requires: N/A
Link: http://www.browsercam.com
ViewLike.us
ViewLike.us is basic but quite useful. Input your web URL of choice and select a browser size to view it including iPhone, Wii and many of the most popular screen resolutions. Testing websites but your screen is too small for testing 1929×1200? No problem, just scroll the viewing window.
Price: Free
Requires: JavaScript
Link: http://viewlike.us
W3C Markup & CSS Validation Services
If you’re not already familiar with W3C’s validation services, now is a good time to do so. Validate your markup and CSS via URI, file upload or direct input. Specify additional options such as document type, clean up markup with HTML tidy and more.
Price: Free
Requires: N/A
Link (Markup Validator): http://validator.w3.org
Link (CSS Validator): http://jigsaw.w3.org/css-validator/
Are My Sites Up?
Monitor your website status and receive alerts via SMS, email, Twitter or more depending on the level of account you choose. Get error codes with your notifications and even get keyword searches.
Price: Free – $95/year
Requires: N/A
Link: http://aremysitesup.com
Google Analytics
Google Analytics gives you easy website tracking and analysis with easy to use tools. Automatically generate reports, grant other’s viewing or control access, view your statistics graphically and much, much more.
Price: Free
Requires: JavaScript, Flash
Link: http://www.google.com/analytics/
Mint
Although Mint is a self hosted website tracking web application, it rivals Google Analytics and offers many of the same features. Graphical statistics and easy break downs of your website information are all included.
Price: $30 per license
Requires: JavaScript, Modern browser, Apache, MySQL and PHP
Link: http://haveamint.com
Pingdom Tools
Pingdom Tools is a collection of tools for testing page load time, ping and traceroute. You’ll get a breakdown of all sorts of information for each test that is very helpful for performance and error testing and more. You can even monitor website performance and uptime for free.
Price: Free
Requires: JavaScript
Link: http://tools.pingdom.com
clickdensity
clickdensity is a different type of website tracking application that lets you analyze visitor clicks, searching and other usability functions. View click heat maps and other reports to help you improve your website interface.
Price: Free – $400/month
Requires: JavaScript
Link: http://www.clickdensity.com
CushyCMS
CushyCMS is a totally different CMS that doesn’t require installation on your web server and is easy enough to use that you won’t have to train your clients how to use it. It’s great for non-programmers and super fast to implement.
Price: Free – $28/month
Requires: JavaScript
Link: http://www.cushycms.com
LightCMS
Like CushyCMS, LightCMS is a simplified content management system that doesn’t require installation and is easy enough for clients or non-programmer web designers to use. It includes hosting and all the tools necessary to manage your sites.
Price: Free – $99/month
Requires:
Link: http://www.speaklight.com
Springloops
Springloops is a code collaboration and management tool for teams to work together more efficiently and prevent overwriting files or code. Easily manage, collaborate and deploy projects as a team.
Price: Free – $96/month
Requires: JavaScript
Link: http://springloops.com
Box.net
Box.net gives you a simple interface with enough tools and features for businesses and teams to share, collaborate and manage files. It’s about more than just files though, it improves workflow and communication unlike many other similar solutions.
Price: Free – $15+ per user per month
Requires: JavaScript
Link: http://box.net
drop.io
Like Box.net, drop.io focuses more on workflow, sharing and collaboration and file management. Real time collaboration, faxing, twitter, phone (voicemail, conferencing, etc.) and much, much more.
Price: Free – $10 per GB per year
Requires: JavaScript, Flash
Link: http://drop.io
Dimdim
Dimdim is a powerful platform for web conferencing that doesn’t require any downloads. I’ve used it for several client (and family) demonstrations and even a few presentations. It works very well and the distance factor for many clients.
Price: Free
Requires: Flash
Link: http://www.dimdim.com
Jumpchart
Jumpchart really takes the pain out of the concept and project approval and workflow between web guru’s and their clients. Collaboration, wireframing and more in a visual and easy interface for both you and your clients.
Price: Free – $50/month
Requires: JavaScript
Link: http://www.jumpchart.com
Remember The Milk
Remember The Milk is an easy to do list and task management application. It works with Google Calendar, Twitter, Gmail, iPhone and Android and much more. It’s easy but also flexible.
Price: Free – $25/year
Requires: JavaScript
Link: http://www.rememberthemilk.com
Domai.nr
Domai.nr is another simple but creative and useful tool. Easily search for domain names by word and get instant availability results and creative suggestions. Then view additional links for registrars, TLD and tools like WHOIS.
Price: Free
Requires: JavaScript (for AJAX)
Link: http://domai.nr
If you’re not familiar with Twitter already, I highly recommend doing so. For designers and developers, it’s one of the best communication tools available. Although there are many Twitter clients for different platforms, Twitter.com is always fast, reliable and easy to use.
Price: Free
Requires: JavaScript (for AJAX)
Link: http://twitter.com
Zoho
Zoho is a competitor to Google Apps (below) and offers a multitude of web applications for just about everything. With Zoho, you can tackle email, document editing, web conferencing, invoicing and a lot more. The link below will take you to a full list of applications.
Price: Free – $3+ /month
Requires: Depends on the application, usually just JavaScript
Link: http://www.zoho.com
Google Apps
Google offers a staggering number of web apps covering email, document editing, RSS, calendar, 3D model builder and a lot more. If you haven’t already, be sure to check out Gmail, Docs, Calendar, Picasa and Reader or just browse their full list of products here.
Price: Free
Requires: Depends on the application, usually just JavaScript
Link: http://www.google.com/apps/
Thank for
Xtech Computer