As web designers and developers, we’re all aware that some of the simplest of tools can make a huge impact on our day to day workflow and productivity. Using a simple browser plugin or lightweight Adobe AIR application to automate or simplify basic tasks that would otherwise be unnecessarily time consuming and redundant can reduce tasks to a split second click or drag and drop action.
Using Adobe AIR apps and browser add-ons or plugins, you’ll be able to tackle everything from image editing and color scheme management to batch processing images, wireframing, debugging and browser testing.
We’ve selected and listed 50 fantastic Adobe AIR applications, Firefox add-ons and Safari plugins for simplifying tasks and boosting productivity for web designers and developers.
[AIR] Splashup Light
Splashup Light brings the online image editor to the desktop for quick image editing. It’s great for low power systems like tablet PC’s, netbooks or laptops but is also quite useful in regular desktop workflows.
[AIR] Livebrush
Livebrush is a motion-based drawing app which allows exporting your creations as vector files to be used in other applications. With a plethora of options and tools, you’ll be able to create some pretty great graphics with this app.
[AIR] ImageSizer
Quickly resize, rotate, optimize and rename a batch of images. You can then output the batch as a single zip file. Drag and drop the images you want to edit, customize the settings and you’re done.
[AIR] JustResizeIt!
With JustResizeIt! you can drag and drop images to quickly resize them. Use it to create widgets for specific uses like e-mail, web galleries, web designs, templates and lots more.
[AIR] kuler desktop
kuler desktop brings Adobe’s fantastic color scheme creation and management application Kuler, to the desktop. It integrates wonderfully with Photoshop, Illustrator and InDesign for easy color scheme management and more.
[AIR] colorbrowser
Store and manage sets of color palettes with colorbrowser. Open or drag and drop ASE files from Kuler or ColourLovers into colorbrowser to add the color palettes to your collection.
[AIR] COLOURlovers Desktop Color Finder
Search the COLOURlovers entire database from your desktop to find fantastic new color creations and collections. It’s a basic app but very useful when you’re looking for new and creative color schemes for designs and other ideas.
[Add-on] ColorZilla
ColorZilla is an advanced eyedropper or colorpicker for Firefox to quickly find RGB color values. It also includes several other features such as full page zoom integration in Firefox 3.5+, viewing, bookmarking and sharing color palettes and much more.
[AIR] Contrast-A
Interact with a 3-dimensional RGB color space, experiment with color combinations and check the contrast according to WCAG 1.0 and 2.0. Create custom color palettes, print, save and more with Contrast-A.
[AIR] Flickr Desktop Search
One of the best resources available for free images from around the web is Flickr. Flickr Desktop Search brings fast searching capabilities to your desktop. If you search for images on Flickr frequently, this could be a quite helpful app.
[AIR] Picasa Image Browser
Like Flickr Desktop Search, Picasa Image Browser lets you browse public images from Picasa Web, also via username, and then download images to your computer.
[AIR] Websnapshot
Although taking snapshots of websites isn’t very difficult, it does become a painfully redundant task. Websnapshot makes it fast and super easy to save a thumbnail, browser size or full page screenshot in an instant. Customize the default settings and enter the URL or drag it from your browser.
[Add-on] FireShot
FireShot is a web page screenshot add-on but, oh–so much more. FireShot includes editing and annotation tools to modify screenshots with text and graphics. You can even upload the final image to free public screenshot hosting or sent to your external editor of choice.
[Add-on] Screengrab
Save the browser window, full website, a selection of the website as or just a particular frame as an image. You can optionally copy the image data to the clipboard instead of saving a file.
[AIR] Snippely
Save lots of text files of snippets like code, quick notes, to-do’s, etc. all over your computer? I know I used to. Snippely takes care of that by providing a quick place to drop and retrieve those snippets. It offers organization, syntax highlighting and more.
[AIR] Snippage
With Snippage you can create widgets from parts of websites, which are basically just mini web browsers cropped down called “snips”. If you frequently monitor sections of websites, this would be a great way make them easily accessible without the viewing the full site.
[AIR] PixelWindow
PixelWindow is a very simple application focused on measuring things on your screen. Drag and resize the transparent windows with pixel measurements in the middle. You can adjust opacity, open multiple rulers and much more.
[Add-on] MeasureIt
Quickly measure website elements in pixels with the MeasureIt rulers. Use keyboard shortcuts to move the rulers for pixel perfect measurements, change measurement units, measure multiple elements at once, snap to page objects and much more.
[Add-on] Pixel Perfect
With Pixel Perfect you can overlay a web composition over the developed HTML/CSS website to ensure quality and accuracy in the final product. This is also a great tool for checking your development progress to make sure you’re on the right track or if you need to make adjustments.
[AIR] Em Calculator
Use Em Calculator to get all the correct values converted from pixels to ems and calculate the correct vertical rhythm for your designs. It’s a simple but effective and useful tool.
[AIR] Random Pattern
Render patterns based on specified settings that can be used for a multitude of purposes. Save presets, save output image(s) as SVG and more. Random Pattern is a great app for generating creative patterns fast and easy.
[AIR] Icon Generator
It’s a simple application but it’s very useful. Icon Generator makes it super easy to create CS3 or web 2.0 style icons. Pick a color, enter your text and save it. It can generate four sizes ranging from 16×16 px to 128×128 px.
[AIR] FlairBuilder
With FlairBuilder you can prototype and wireframe websites and even implement interactive components. It uses a drag and drop interface and includes a full set of elements and tools for every aspect of your website.
[AIR] Boks
Boks is a visual editor for the Blueprint CSS framework. With it you can easily configure the grid, baseline rythm, CSS, grid.png export HTML layout and a lot more. If you haven’t taken the time to get familiar with a framework like Blueprint CSS, this is a great place to get started.
[Add-on] Font Finder
Font Finder lets you quickly pull the CSS styles of text you select in web pages making it super easy to discover new font styling. A simple but very helpful tool for web designers and developers.
[Add-on] Firebug
Firebug is arguably the most popular and feature filled web development add-on for Firefox with a fantastic collection of tools and capabilities. Edit, debug and monitor CSS, HTML, JavaScript and more in any web page as well as performance testing and more.
[Add-on] Web Developer Toolbar
The Web Developer toolbar brings a wide array of web design and development functions and tools to Firefox for everything from CSS and HTML to JavaScript, cache, validation and much, much more.
[Add-on] YSlow
YSlow analyzes web pages and ranks them based on Yahoo!’s rules for high performance web sites. It also includes Yahoo!’s Smush.it service for optimizing and reducing image size for the web. This is a great add-on for designers and developers to improve performance and optimize their website images.
[Add-on] FireFTP
FireFTP gives Firefox more than just web browsing powers, making it a super powered browser with a cross-platform full FTP client. FireFTP is commonly used as a complete replacement for a standalone FTP client since it offers just about everything you need.
[Add-on] HTML Validator
Quickly check website validation from within Firefox with the HTML Validator add-on. You can also check the number of errors and warnings, all in an unobtrusive manner.
[Plugin] Safari Tidy
Safari Tidy validates web pages as you browse with Tidyand W3C validator. The error and warning results are displayed in the bottom right corner of the browser window. Clicking them will open the Tidy and W3C result pages.
[AIR] jsBeautifier
jsBeautifier is a very basic app that formats your JavaScript properly for easy reading and editing.
[Add-on] DownThemAll!
This is a download manager and accelerator for Firefox to maximize download speeds and manage bulk file downloads. It adds many more advanced capabilities to Firefox such as customizable download criteria and downloading all links or images in a webpage.
[Addon] View Dependencies
The View Dependencies add-on adds a new tab to the Page Info window and lists all the files loaded to show the current web page. View the files in order of server, type, size and more. Then quickly open any file in a new tab, window or copy to the clipboard.
[Add-on] JSView
JSView gives you a quick way to view external files linked in a website such as CSS and JavaScript without the need to dig through the site source code. Quickly access these linked files directly from the context menu, toolbar, view menu or status bar.
[Add-on] Live HTTP Headers
Although this is a very basic add-on, it’s quite helpful for developers. With Live HTTP Headers you can view the HTTP headers of the pages you’re browsing, quickly and easily.
[Plugin] SafariStand
SafariStand implements many great improvements for Safari including a bookmark shelf for saving and resuming browsing sessions, site alteration for customizing site specific settings, syntax coloring in source view and much, much more.
[Plugin] SafariSource
Safari’s default source view does not include syntax coloring which is where SafariSource comes in. It solves this issue and adds syntax coloring for easy reading. You can customize the plugin preferences (fonts, colors, etc.) in Safari’s preferences pane.
[Add-on] Window Resizer
Browser window size testing is important but an often overlooked task. The Browser Window Resizer Firefox add-on makes it a breeze to quickly test all the major resolutions.
[AIR] Polaris for Google Analytics
Monitor your Google Analytics account straight from your desktop with a simplified and very attractive interface. View all your Google Analytics information easily with maps, charts and graphs.
[AIR] Klok
Klok is a time tracking application that makes it very easy to visualize how your time is being used. View graphs and other visual aides from your time tracking information and easily keep track of every minute you spend working or not to maximize your time and efficiency.
Although several of these tools only do basic tasks, they’re quite useful and surprisingly helpful in optimizing your workflow and productivity. Whether you’re a web designer or web developer (or both), the apps and browser additions listed above are bound to help in some way and are well worth trying out if you haven’t already. The great thing about many of the tools listed above, is that they require little to no additional computer resources!
Have some more great AIR applications or browser additions you find useful that we
Conclusion
didn’t list? Post a comment below and let us know.
To subscribe to the "Guy WhoSteals" feed, click here.
You can add yourself to the GuyWhoSteals fanpage on Facebook or follow GuyWhoSteals on Twitter.
Any feedback can go straight into Guy's mailbox:
- guywhosteals AT gmail DOT com
- guywhosteals AT yahoo DOT com
0 comments:
Post a Comment