Advertise here with BSA

In this article, we’ll be reviewing my top 10 online payment systems for accepting payments on the Web. While many of the companies on this list have been available to online merchants for years, many are also now getting into new areas of online payments such as social commerce and in-store online card reader systems.

A Quick Primer on Online Payment Systems

Before getting started, here are just a few things to know about online payment systems.

• ACH payments are electronic credit and debit transfers, allowing customers to make payments from their bank accounts for utilities, mortgage loans, and other types of bills. ACH stands for Automated Clearing House and most payment processors offer ACH payment options to their customers, especially for monthly- and subscription-based transactions. Most payment solutions use ACH to send money (minus fees) to their customers.
• A merchant account is a bank account that allows a customer to receive payments through credit or debit cards. Merchant providers are required to obey regulations established by card associations. Many processors (such as the ones listed below) act as both the merchant account as well as the payment gateway.
• A payment gateway allows merchants to securely pass credit card information between the customer and the merchant and also between merchant and the payment processor. The payment gateway is the middleman between the merchant and their sponsoring bank.
• A payment processor is the company that a merchant uses to handle credit card transactions. Payment processors implement anti-fraud measures to ensure that both the front-facing customer and the merchant are protected.
• PCI compliance is when a merchant or payment gateway sets their payment environment up in a way that meets the Payment Card Industry Data Security Standard (PCI DSS). The PCI DSS standard was created by the Payment Card Industry Security Standards Council to increase security of cardholder data and to reduce fraud.

What follows are 10 excellent online payment systems.

1. Authorize.Net

Authorize.Net is the Internet’s most widely used payment gateway. With a user base of over 300,000 merchants, Authorize.Net has been the go-to method for e-commerce sites that need a gateway to accepting payments. Widely used e-commerce platforms such as Magento, Volusion and X-Cart are designed to accept payments using Authorize.Net easier.

Pricing: Authorize.Net has a $99 setup fee, costs $10 per month and takes a $0.25 per-transaction fee. Source: Authorize.Net pricing

2. PayPal

PayPal is the world’s most widely used payment acquirer, processing over $4 billion in payments in 2011. PayPal payments are made using a user’s existing account or with a credit card. Money can be sent directly to an email address, thus prompting the users to sign up for a new PayPal account. In addition to taking payments, PayPal also allows its users to send money through the service, which is a feature that only a few payment solutions provide.

Pricing: PayPal takes 2.9% + $0.30 per transaction and has no setup or monthly fees. Source: PayPal merchant fees

3. Google Checkout

Google Checkout is Google’s answer to PayPal. Google Checkout allows users to pay for goods and services through an account connected to their Google profile. The major benefit that Google Checkout has over the competition is that millions of Internet users use Google for other services, making a purchase through Checkout a simpler process.

Pricing: Google Checkout fees start at 2.9% + $0.30 per transaction for sales less than $3,000. The percentage they take goes down depending on monthly sales volume. Source: Google Checkout fees

4. Amazon Payments

Amazon Payments allows its users to receive money using its API (and to send money out via ACH). Popular crowdfunding site Kickstarter uses Amazon Payments.

Pricing: Amazon Payments fees start at 2.9% + $0.30 per transaction for payments over $10 (the percentage they take is less for larger transactions). For payments under $10, the fee is 5.0% + $0.05 per transaction. Source: Amazon Payments fees

5. Dwolla

Dwolla is a direct competitor to PayPal. One of the newcomers in the third-party payments space, the company is processing over $1 million per day. Setting up Dwolla payments is similar to PayPal, although Dwolla doesn’t have the same name recognition as their competition.

Pricing: There are no fees for transactions less than $10. For transactions over $10, Dwolla charges $0.25 per transaction. Source: Dwolla fees

6. Stripe

Stripe provides an excellent payment solution for web developers who would like to integrate a payment system into their projects using Stripe’s robust API. By bypassing the traditional sign up process, Stripe acts as a merchant account for its providers, handling all PCI compliance and merchant approvals.

Pricing: Stripe charges 2.9% + $0.30 per transaction with no setup or monthly fees. Source: Stripe: pricing

7. Braintree

Braintree is an online payment gateway and merchant account solution known for working with popular tech startups such as Airbnb and LivingSocial.

Pricing: Braintree has a $35 monthly fee (with a $75 monthly minimum). Transaction fees start at 2.29% + $0.30 per transaction for qualified cards. Source: Pricing – Braintree

8. Samurai by FeeFighters

Samurai is a payment gateway and merchant account solution. The company’s main product, FeeFighters, is a tool to help merchants compare rates for merchant accounts. Samurai was developed as a direct competitor to Braintree and other gateway/merchant solutions and offers customers a payment gateway or a gateway/merchant account package.

Pricing: For their gateway/merchant solution, Samurai takes 2.3% of all sales volume, costs $25 per month and charges a $0.30 fee per transaction. Source: Samurai by FeeFighters pricing

9. WePay

WePay is a payment processor that allows Internet merchants to accept credit cards and bank account payments online. WePay seems to be focused on the individual user, and has recently added e-store pages to their service to help their customers conveniently take in payments (e.g. event tickets, products, donations and so forth) through their service.

Pricing: WePay charges a 3.5% transaction fee (with a $0.50 minimum) for credit card transactions and $0.50 for bank payments, with no setup or monthly costs. Source: WePay fees

10. 2Checkout

2Checkout is another payment processor that combines a merchant account and payment gateway into one, allowing customers to receive credit card payments as well as PayPal payments. The company offers international payments, shopping cart stores as well as a recurring billing feature.

Pricing: 3.99% (if you apply by May 1, 2012), a $0.45 transaction fee and $10.99 monthly service fee. Pricing and fees – 2Checkout

Other Noteworthy Payment Systems

Here are other online payment systems I think you should also check out:

• Serve (by American Express)
• V.me (by Visa)
• clearXchange (by Bank of America, Chase and Wells Fargo)

What about Payments through Mobile Devices?

These two payment services allow merchants to accept credit card payments directly through their mobile devices, making it possible for devices such as the iPhone, the iPad and Android smartphones to act as a mobile point of sale (POS) checkout system.

• Square
• Intuit’s GoPayment

Conclusion

There are plenty of online payment systems out there that you can use to conduct e-commerce activities. Choose one that’s in line with your business objectives.

This isn’t an exhaustive list of online payment systems. If your favorite online payment system isn’t on the list, please share it with us in the comments and discuss why you choose it over other online payment systems.

Related Content

• Essential E-Commerce Website Features: Tips and Examples
• Top 5 Excellent E-Commerce Plugins for WordPress
• Tips for Creating an Excellent E-Commerce Website
• Related categories: Tools and Web Development

About the Author

Rosston Meyer is the founder of Sponsorist.com, a marketplace where advertisers, non-profits and people in need of sponsorships come together to make deals. Rosston has a strong background in Web marketing, design and development having worked as a freelance developer for the past four years. Follow Rosston on Twitter: @rosstamicah

Advertise here with BSA

A blog is a great way to express your thoughts, create a web presence for your company and provide content to Internet users.

If you’re planning to create a blog, but don’t wish to get into the hassles of hosting, developing and deploying it yourself, consider creating a blog at any of the free blogging platforms mentioned below. Such services offer a plethora of features and generally come with both free as well as paid plans.

Let’s look at the top 10 most popular online blog-publishing services.

1. WordPress.com

WordPress.com is perhaps the most feature-rich blogging service out there. It uses the popular open source web software WordPress, and offers many features in its free version — traffic stats, anti-spam filters, SEO, gorgeous themes and more.

If you choose to use WordPress.com, you’ll be in good company, as many popular blogs — including CNN’s Political Ticker, People Magazine’s Style Watch and Flickr — are on this platform.

If you need more than what the free version offers, you can opt for their premium features that include custom domains, upgraded web hosting resources and more.

Whether you’re an expert blogger or a beginner, this ultimate blogging platform is a safe bet.

2. Blog.com

Blog.com is another popular WordPress-powered blogging platform.

Just like other services, it has its own share of pros and cons. For a start, it offers many beautiful premium themes in its free accounts, as well as advanced plugins that one can expect only on a self-hosted blog. However, on the downside, the free service displays more ads as compared to WordPress.com. (But you can opt for paid upgrades to remove the advertisements.)

The free storage space offered on Blog.com is 2GB in the basic plan, which is less compared to 3GB that WordPress.com gives its users.

3. Blogger

Google Blogger is a well-known blogging service that offers many features to its users. For example, Blogger comes with a Template Designer user interface that lets you tweak your blog’s appearance as much as you want. (However, the templates provided are, in my opinion, no match compared to WordPress themes.)

When it comes to ease of use, most beginners prefer Blogger as it offers a no-nonsense interface for administering your blog and top-notch integration with their Google account. Another great thing about Blogger is that it offers certain great features for free that you normally need to pay for in other blog-publishing services,  most noteworthy being the ability to set up custom domains without paying a cent.

4. TypePad Micro

TypePad Micro is another free blog-publishing service. The interface is easy to use, and you can import/export content from many other blogging platforms.

However, in terms of add-ons and themes offered, TypePad Micro won’t satisfy even the most basic blogger. The cheapest paid plan begins at $8.95 per month and comes with additional themes, custom domain mapping, as well as technical support.

In an age where almost all blogging services are offering numerous features in their free versions, TypePad Micro seems to be lagging behind.

5. Jux

Jux is an innovative service that lets you easily share content online. Conventionally speaking, it’s not a blogging service like the ones previously mentioned, however, it has a lot of the same functionalities. Rather, Jux lets you create your own microblogging site for sharing your content.

By default, Jux templates don’t have the native sidebars and other widgets that are common to most blogs. Instead, Jux provides a clean (and beautiful) approach to blogging. Simply create an account, and then start sharing your content.

While Jux does seem amazing and has excellent support for mobile devices, it may not be everyone’s cup of tea. For instance, if you’re planning to create a more conventional blog, opting for WordPress might be a better option. On the other hand, if you’re leaning more towards visual content, such as photos and artwork, Jux may just amaze you with its features.

6. Tumblr

Tumblr is a popular and feature-packed microblogging platform. It comes with many outstanding and interesting features such as audio blogging (for sharing your music, for example), free custom domains, hundreds of amazing blogging themes and more.

Furthermore, you can sync your Tumblr account with Facebook and/or Twitter so that you can update your social media feeds in a single location. Yet another awesome feature is the ability to create community-powered group blogs. Tumblr also offers support for many third-party apps such as Google Analytics and Feedburner.

7. Posterous Spaces

Posterous Spaces is an excellent online blog-publishing service that is similar to Tumblr.

Posterous Spaces has excellent privacy and viewing features so that you can easily control who can see what on your Posterous Spaces site. It’s designed to allow its users to post content quickly and as hassle-free as possible, so it has loads of features included to facilitate this, such as free mobile apps for iOS and Android smartphones so you can update your blog on the go and a simple, well-designed user interface.

Using Posterous Spaces means you’ll be in good company; popular tech startups like MailChimp, TweetDeck and Airbnb leverage Posterous as their company blog.

8. Blogetery

Blogetery is a WordPress-powered online blogging service that offers a modest set of features. Free accounts get nearly 140 themes, custom domain mapping and roughly 40 plugins to choose from.

On Blogetery, ads are displayed on all free blogs, but if you wish to upgrade, you can opt for the paid plan that will cost you $3.50 per month and will give you additional themes, plugins, email support, 5GB of additional storage space, the ability to remove ads, etc.

9. Weebly

Weebly offers more than just blogging — it’s a fully featured website builder! Weebly’s blog manager features a drag-and-drop interface, support for image galleries, slideshows, video/audio, maps, etc. Additionally, you can opt for their Designer Platform that lets you build websites for your client, thereby effectively using Weebly as a content management system.

10. LiveJournal

LiveJournal (often abbreviated as LJ) offers blogging with a touch of social networking to it. You can participate in polls, create networks and interact with other LJ users alongside your blog.

With that said, the features, compared to other similar blogging services, are nothing to brag about. Their collection of template is decent, and plugins/extensions are pretty basic in nature.

Other Online Blogging Platforms

Here are other blogging platforms that didn’t make our top 10 list that you still may wish to check out:

• Blogsome, freeblogit and Blog Dive  are other WordPress-powered blogging platforms.
• Thoughts.com is a service similar to Tumblr and Posterous.
• Blog.co.uk seems to have a wonderful community, but appears to put a lot of ads on your blog.
• MyBlogSite looks interesting but seems to lack in features when compared to other options.
• Aeonity offers free blog hosting but it looks like a dated service.

Conclusion

There are numerous blogging services out there, and choosing a specific one is more of a matter of personal taste and needs.

For the security and success of your blog, I recommend sticking to online blogging services that are well known and reputable.

Related Content

• 10 Excellent and Free Blog Editors for the Desktop
• Components of High-Quality Blog Posts
• Important Features All Blogs Should Really Have
• Related categories: Tools and Resources

About the Author

Sufyan bin Uzayr is a 20-year old freelance writer, graphic artist, programmer and photographer based in India. He writes for several print magazines as well as technology blogs. He is also the editor of an e-journal named Brave New World. You can visit his website as well as friend him on Facebook and Google+.

Advertise here with BSA

We all should be aware by now that Internet users are impatient when it comes to waiting for a web page to load. Thus, your website’s performance and ability to render speedily is critical to its usability and, ultimately, its success.

In order to help you build faster websites and identify troublesome website performance bottlenecks, consider incorporating some of the following tools into your web development process.

Tip: It might be a good idea to use several of these website speed-testing tools so that you can obtain a better picture of site speed issues. Heck, they’re free, so why not?

1. Page Speed Online

Google’s Page Speed Online — which is a web-based adaptation of the popular Google Chrome web development browser extension, Page Speed — analyzes your website’s performance under Google’s Web Performance Best Practices (a set of rules for optimal front-end performance). You can gain lots of information from this handy web tool – it even includes a report for mobile device best practices for optimal performance.

2. Pingdom Tools

This free online website speed-testing tool by Pingdom (a server, network and website monitoring service) provides you with several reports such as a breakdown of how long each web page object (e.g. images, style sheets and JavaScript libraries) takes to download and performance grades for things like browser caching. Another useful report is a page analysis that provides information on load time, page size and requests.

3. Free Website Performance Test (BrowserMob)

This free website speed and performance testing tool by BrowserMob, a company that offers website load testing and monitoring service, gives you a ton of information about your web page speed such as average load time, total page weight and number of page objects. It pings your web page from four locations so that you can get a global view of your website’s performance.

4. Which loads faster?

This interesting tool pits two websites against each other in terms of loading time; for example, you can find out if Google loads faster than Bing does by using this tool. This can be a simple tool for comparing whether your website performs better or worse than competing sites. This open source tool (view the source on GitHub) was originally created to promote the importance of web performance.

5. WebPagetest

This nifty online tool tests your web page’s rendering speed in real browsers (Chrome, Firefox and IE) and gives you a choice of conducting the test from several locations around the world. It also has advanced settings with options for simulating common Internet connection speeds (e.g. DSL and 56K dial up) and ad-blocking so you can see the performance cost of running ads on your site.

6. Web Page Analyzer

This simple web page speed test analyzer — probably one of the oldest tools out there with its first version released in 2003 — gives you data on your web page’s size, assets and load time. It also supplies you with recommendations on things you can make better.

7. Show Slow

This is the web-based version of the open source server application by the same name (Show Slow). Show Slow allows you to add a URL to be monitored (publicly) and regularly captures results from three popular testing tools: YSlow, Page Speed and dynaTrace. This tool requires registration.

8. Site-Perf

This web-based website speed testing tool displays relevant data on page-rendering time, such as total download time, number of connections made and number of requests made. It also has some bonus features such as being able to run the test even if the web page has HTTP authentication (simply supply it with the password to the page) and the ability to simulate different types of Internet connections.

9. Load Impact

Load Impact’s free online load testing and performance tool gives you plenty of data on your website’s ability to handle website traffic. This online web performance evaluation tool has the ability to show graphed data such as user load time (simulated by an automated virtual machine) and requests per second (helpful for seeing how durable your web server is and how fast it can handle web page requests).

10. OctaGate SiteTimer

OctaGate SiteTimer is a rather straightforward online tool: you plug in the URL you want to test and, in turn, it will output a bar graph featuring all web page objects containing information such as download start times, end times and duration for each. This tool is beneficial for quickly discovering slow-loading page objects so that you can optimize them to improve website speed.

Other Website Speed Testing Tools to Check Out

• Web Site Performance Test (Gomez) – a real-time site performance tool displaying information on things such as DNS lookup time and connection time.
• Webslug – similar to the Which loads faster? tool mentioned above, this web tool will compare the site performance of two websites.
• WebWait – a basic website speed timer with options for specifying the number of requests to make and the interval between requests (e.g. 5 requests in 10 seconds).
• Website Speed Test (Searchmetrics) – provides plenty of data on page speed, including estimated load times for various types of Internet connections.
• GTmetrix – an online tool that uses YSlow and PageSpeed to evaluate your website’s front-end performance, giving you easy-to-understand information.
• Website Speed Test (WebToolHub) – a rather basic online tool that provides data such as page size, load time, download speed and average speed in tabular format.
• Yottaa Site Speed Optimizer – this web performance analyzer outputs great-looking reports. This tool requires you to sign up.
• Zoompf Free Web Performance Scan – this tool will scan a web page and gather data pertaining to web performance. You are required to provide and verify your email address in order to run tests.
• Site speed checker – a web-based site speed tool that allows you to run tests on 10 URLs all at once.
• Free web site speed test (Self SEO) – this simple website speed testing tool gives you the option to enter up to 10 URLs to run tests on simultaneously.

Related Content

• 10 Ways to Improve Your Web Page Performance
• Performance Comparison of Major Web Browsers
• 10 Free Server & Network Monitoring Tools that Kick Ass
• Related categories: Tools and Web Development

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Advertise here with BSA

Firebug — an open source web development tool extension for the Mozilla Firefox web browser — is incredibly powerful, with a wide range of super useful and practical features that would benefit any web designer or developer.

In fact, this browser extension (also available in other web browsers with limited functionality) is so useful and popular that it has browser extensions of its own.

This real-time coding tool reduces the guesswork out of debugging web pages, among many other things such web page layout inspection/testing and web performance profiling, to speed up your workflow.

Whether you’re building a web page, adding new CSS for a responsive web design, troubleshooting web layout issues, or inspecting how other websites are built, Firebug is going to be a valuable tool in your arsenal.

Let’s take a closer look at how this indispensable browser extension can help web designers. We’ll only focus on certain Firebug functionalities that are especially helpful for web designers.

Getting Started with Firebug

First, you’ll need to download and install Mozilla Firefox if you don’t already have it.

Then you also need to download and install Firebug.

Once you’ve got the extension installed, you’re ready to start dissecting any website.

You can experiment with how it works just by playing around with it or you can take some time to read the official Firebug documentation (which is a wiki).

Opening the Firebug Panel

There are several ways to open the Firebug panel. When it’s open, it should look like the image below.

Opening Firebug Using a Keyboard Shortcut

Press F12, which is the keyboard shortcut to toggle Firebug on and off (see other Firebug keyboard shortcuts).

Opening Firebug in the Browser’s Context Menu

On any web page, right-click on the page or a particular HTML element (such as a hyperlink, a text heading, an image, a form button, etc.) and then choose Inspect Element from the context menu that appears.

Firebug Icon

You can also click on the Firebug icon to open the Firebug panel. Depending on your version of Firefox, it will be in the bottom status bar, or in the upper chrome to the right of the search bar.

Tip: Have Firebug in Its Own Window

Once you have Firebug open, feel free to break it out of the browser and into its own window by pressing the Open Firebug in New Window icon. This is perfect for big monitors or for multi-monitor computer set-ups.

Now you’re ready to do some damage. Next, we will talk about some useful Firebug features and techniques.

Inspecting a Web Page’s Layout and Markup

It’s the most common question you’ll ask about a web page you’re developing: "Where’s the flaw?" (or "WTF" for short). The most common use of Firebug is inspection.

Once Firebug is open, you’ll be in the HTML panel by default. This is the panel that will help you inspect and understand the web page’s HTML elements.

There are two panes in the HTML panel. Let’s briefly discuss these panes.

Node View Pane

Firstly, on the left, is the Node View pane displaying the generated source of the page you are currently on.

Node View allows you to edit HTML elements/code on the web page and then see the result on the fly.

When you mouse over the HTML markup in Node View, the browser actually highlights the element on the web page being inspected. This is incredibly helpful functionality – it shows you exactly how the browser is handling your HTML elements and where that particular element is on the actual web page. This can help you visualize margin/padding issues and float problems, for example.

When you click on an HTML element in Node View, it will show the element stacking order just above the pane. This is helpful for any CSS you have to write that needs to be more specific to prevent styling similar elements elsewhere on your site. More often than not, I’m inspecting to see what CSS rules are being inherited.

To help you quickly find HTML elements, try the search feature towards the right of the HTML panel, which will, in Node View, highlight the matched text in gray.

HTML Side Panels

The second pane, on the right, is the Side Panels. These panels give you more information on the highlighted element.

There are four side panels in the HTML panel.

1. Style
2. Computed
3. Layout
4. DOM (which stands for document object model)

The Style side panel shows you what CSS style declarations affects a particular element. It also displays which style sheet (and what line number) the style rule is in, in case you have more than one stylesheet.

The Computed side panel displays CSS properties of the HTML element such as font-size, color, text-align etc. This gives you information on how the web browser renders the element.

The Layout side panel visually shows you the box model of the element you’ve clicked on. If you’re a visual learner like me, it’s really nice to see the padding, border and margin illustrated like this. Double-clicking on the displayed values allows you to make changes and experiment in real-time.

The DOM side panel displays the document object model information of the selected element. It’s especially useful for front-end web developers working with JavaScript/client-side scripting.

Edit HTML on the Fly

There are a hundred different ways to manage your HTML workflow when you have access to files on the server or when you’re working in a local server environment using a web server stack like XAMPP or WampServer. I think most people prefer to work right in their own code editor, so code can be saved as you go whenever they can.

However, for quick in-browser tests and situations where you don’t have access to the HTML files (such as a website you don’t own or when you’re away from your dev computer), Firebug is perfect.

In Node View of the HTML panel, you can click on any HTML element and edit it. Add or remove whatever you like and then see what results your changes make to the web page.

A few common tasks I perform in this way include:

• Adding/removing entire HTML elements (e.g. "What happens to the floats if I remove this div?")
• Adding/removing a class or ID to elements (e.g. "Will the rendering issue get fixed if I remove this CSS class?")
• Substituting longer text on titles and buttons to test line breaks
• Adding temporary inline styles for quick testing using the style HTML property (e.g. "Will this hyperlink look better with style="color:#00aeef" or style="color:# 067fad"?")

Firebug doesn’t save any code you write in it; when you click a link or refresh the page, your changes are gone. (And you wouldn’t want it any other way!) So, it’s a good idea to keep a text editor handy for pasting in code you’ve tried or may want to keep.

Editing CSS on the Fly

Editing CSS within Firebug is where the real action is, at least for web designers. As has been mentioned, inspecting an HTML element on the page will reveal its inherited styles in the Node View of the HTML panel. These styles are listed alphabetically, and grouped by selector on Style side panel.

The selectors are presented in the rendered CSS order: the most recent declaration at the top (for example, something at the beginning of the style sheet will be at the bottom of the CSS pane, and inline styles would be shown at the top as element.style).

If you use multiple style sheets, it does the same thing. For example, I’ll often use Eric Meyer’s CSS reset as the first style sheet on a site, so I’ll often see a very long selector at the bottom of my Style side panel.

Firebug makes it clear which styles are actively affecting your HTML element by crossing out the CSS properties that have been superseded by another CSS property declaration. If there’s a line through it, then it means that another CSS rule has overwritten it by being declared after the former rule, or by being !important.

The great thing about the CSS in the Style side panel is that it’s editable. Want to see how the web page would look if you changed the element’s padding-top property to 22px? Click on the property value and change it. You can also change the property itself (e.g. change padding-top to padding-bottom).

You can also disable/hide a CSS property/value pair to see what the page would look like if it didn’t have that rule. This is useful for seeing unneeded CSS lines in the web page, determining if the property declaration is what’s causing rendering issues, etc.

When you’re editing CSS in the Style side panel, the Enter key will jump to the next editable cell – from property to value, and down to the next property.

When you’re at the last property of the selector, hitting Enter will give you a new line, where you can add a new CSS property/value pair.

Now if you want to add CSS to an element that doesn’t have a class or ID (and therefore won’t appear in the Style side panel), you can either add inline styles in Node View, or venture into the CSS panel.

The CSS panel shows you a page-view of the various style sheets you’ll have attached to the site.

In Source Edit mode, you are able to edit values (Similar to the HTML panel’s Style side panel we discussed earlier). In Live Edit mode, you can actually type freely as if you were working on your site’s style sheet in a code editor.

Editing via the CSS panel.

Firebug Quirks and Limitations

Even Firebug has its quirks, but with the insane release schedule Firefox is under lately, who can blame it?

Here are a few issues that cause occasional hiccups when using Firebug for debugging, as well as some limitations you will have when working with it. Let’s just talk about a few of them.

HTML Elements with Hover Properties

It can be hard to troubleshoot elements that have CSS :hover rules or JavaScript hover events, like fly-out drop-down menus because the Node View updates the markup when you mouse out of the element. So one issue is that it gets tricky to study nested elements of the parent element that are hidden until you hover over the parent.

I’ll usually work around this by using the style HTML property to force the element to be visible, which isn’t ideal for a live-test, but gets the job quickly done.

For example, say I want to debug and study the unordered list in the flyout-menu div below. But there’s JavaScript that hides the div when the mouse isn’t on the element.

<div class="flyout-menu">
  <ul>
    <li>Menu item one</li>
    <li>Menu item two</li>
    <li>Menu item three</li>
  </ul></div>

I can just add, for example — because it depends on how the div was hidden but basically you want to counteract the JavaScript DOM manipulation — the following inline style to the div.

<div class="flyout-menu" style="display:block;">
  <ul>
    <li>Menu item one</li>
    <li>Menu item two</li>
    <li>Menu item three</li>
  </ul></div>

For more solutions to this issue, read this Stack Overflow question and answer thread.

Firebug CSS Panel Bugs Out Sometimes

Occasionally the CSS panel will be unable to provide you with Edit Mode and then it will throw an error. I can’t pinpoint the cause, but if you’re testing various User Agents, it happens a lot more. A browser restart usually fixes it.

No Code Formatting Options

You don’t really have an option to display and format that code you see in Firebug based on your own preferences/formatting guidelines. So, if you were going to copy CSS or HTML directly into your work, for example, what you see is what you get. However, there are many online CSS formatters you can use after (or during) development.

Firefox is Different from Other Web Browsers

Another interesting "problem" is that Firefox is a pretty great browser! So good, in fact, that it can cause issues when it smartly corrects errors in the markup.

For example, consider the following list item element:

<li><a href="home.htm">Home</li>

Someone has forgotten the closing </a> tag. Some browsers may render this properly by respecting this error, and have the link spiral out of control. Firefox, however — and subsequently Firebug because it relies on Firefox’s layout engine — will show you the </a> in the proper place. (This is called the generated source.)

This essentially means that if you’re having an issue in another browser, Firebug may not give a 100% accurate representation of the same code. This also means that what you see (and fix) in Firefox, may still cause trouble in other browsers because of layout-rendering differences and error-treatment disparities between browsers.

So, Firebug won’t completely save you from having to debug in other browsers. However, Firebug is available for some other browsers besides Firefox: It’s available in a Lite version for browsers such as Google Chrome.

Additionally, Google Chrome, Safari, IE and Opera have similar development tools:

• Google Chrome: check out the built-in Chrome Developer Tools
• Apple Safari: see the WebKit Web Inspector
• Internet Explorer: see the Internet Explorer Developer Tools
• Opera: has the Opera Developer Tools

Get Buggin’!

So that’s a quick look at some of the web-design-related features that Firebug has. Using this tool can greatly improve your debugging and site production process.

Also, let’s face it. This is one of the best tools ever for pranking your friends. "Hey Steve! Come check this out!"

To be honest, Firebug pranking is how I learned all of this.

Related Content

• 20 Useful Tools to Make Web Development More Efficient
• 15 Tools to Help You Develop Faster Web Pages
• 10 Useful Firefox Extensions to Supercharge Firebug
• Related categories: Tools and Web Development

About the Author

Arley McBlain is a web designer, web developer, in Burlington, Ontario, Canada. If you’d like to keep in touch with the author, check out his personal site, ArleyM, and follow him on Twitter as @ArleyM.

Advertise here with BSA

One of the greatest benefits the Internet provides web developers is the ability to share and collaborate with other professionals. When you’ve hit a coding roadblock, you can reach out on your social networks to see if your friends can give you a hand.

When you need to debug, experiment with, and share short code snippets, sandboxing tools are immensely useful.

Why use a web-based sandbox tool instead of a testing server or a local web server stack like XAMMP or WAMP? Not having to set up and save HTML, CSS and JavaScript documents simply to test and debug small code snippets, being able to back up your code snippets remotely, and the capability of quickly linking to and showing off your work (which many of these tools can do) are the major reasons you’d want to use them.

In this article, you’ll find some of the best free code sandboxing tools for testing, debugging and/or sharing your code.

Common Features

Though each tool in the list has its own unique features that might make one of them more appealing than another, you’ll find these general features in most of them:

• Simple and optimized for snippets: these tools aren’t meant to be full web-based IDEs/source code editors (like the Amy Editor and Kodingen)
• Web-based: Can run in the browser without having to install any software
• Free: You can use these tools without paying a cent, and many are even open source
• Preview pane: Allows you to see how your code will render
• Runs front-end/client-side code: Can, at the very least, run HTML, CSS and/or JavaScript
• Saving capabilities: Most tools included allow you to download your code and/or save it on-site
• Sharing capabilities: Most tools below are designed with sharing and collaboration in mind

Let’s look at some top-notch, free sandboxing tools and, for each of them, we’ll discuss some notably unique features they have, to help you make an informed decision on which one is right for you.

1. Tinkerbin

Created by web development agency Sinefunc, Tinkerbin is a relatively new code playground that can run HTML, CSS and JavaScript, as well as CSS and JavaScript abstraction languages/metalanguages like SASS and CoffeeScript. It has keyboard shortcuts that conveniently allow you to navigate efficiently between tabs and code panes. The auto-updating preview pane is a nice feature that displays your work as you’re coding.

2. JS Bin

This open source sandbox tool by developer Remy Sharp is an excellent JavaScript/HTML code-testing tool. It has the option for live/real-time preview and the ability to reference (include) popular open source libraries like jQuery, MooTools, YUI and Modernizr. You can grab JS Bin’s source on GitHub if you’d like to use the tool locally. View documentation, tips and tutorials for this tool on JS Bin’s very own Tumblr blog.

3. JS Fiddle

JS Fiddle is a free sandbox tool for HTML, CSS and JS that has a wonderful set of features, like the ability to reference popular JS libraries/frameworks like jQuery, YUI and MooTools and an Ajax-request-testing functionality for simulating asynchronous calls for your code. There’s a command for running JSLint that can check your JavaScript for code quality and the "Tidy Up" code-formatting command for re-indenting your code. The source code of this open source web tool is available on GitHub.

4. CSSDesk

This online CSS/HTML sandbox tool is a slick way of testing snippets of your style sheet and markup. You have the option of changing the background of the preview pane, which is useful when you have a hard time scoping out the outcome of your CSS/HTML work due to low foreground/background contrast or for seeing how your work looks on different types of backgrounds. You can also maximize the screen viewing size of the preview pane by hiding the HTML and CSS code panes.

5. Pastebin.me

A tool created by developer and entrepreneur Dale Harvey, Pastebin.me is a simple and clutter-free HTML/JS open source sandbox tool. The code pane flexibly resizes depending on your browser’s viewport, which is especially awesome when you’re using a widescreen monitor. It has three useful templates ("HTML", "JavaScript" and "jQuery") for instantly auto-populating the code pane with default HTML tags.

6. jsdo.it

This sandboxing tool emphasizes on community engagement and collaboration, with features that easily give you the opportunity to share your code on your social networks as well as within the site. It has a slick interface, an auto-updating preview pane and the ability to include open source JS libraries. One unique feature is the "Smart phone preview" command that opens a new browser window with the viewport sized equivalently to mobile phones. This tool requires you to sign up and be logged-in.

7. Tryit Editor Instant

This free and no-frills tool allows you to rapidly test your HTML markup. If you don’t need all the features that the above tools offer and simply want one for quickly testing HTML, check this one out. It auto-updates the preview pane whenever you change something in the coding pane. It doesn’t have any saving and collaboration features, so this one is more of a personal tool.

8. PractiCode

The PractiCode online code editor is a supplementary tool for Landofcode.com’s educational web design materials. Though it’s meant to be used alongside their guides and tutorials for practicing and testing code snippets while you’re reading their material, it can be used as a sandboxing tool as well. This online tool can render HTML, CSS and VBScript.

9. JavaScript Sandbox

Are you looking for a dead-simple tool for testing your JavaScript code snippets? Look no further than the JavaScript Sandbox, which is a very austere tool when pitted against the other web-based tools already mentioned (such as Tinkerbin and JS Bin). However, to some, its uncomplicated nature may just be the thing that’s most attractive about this tool.

10. Google Code Playground

Google offers web developers plenty of free APIs and services for things such as web fonts, Google Analytics and a content distribution network (CDN) for popular, open source JavaScript libraries (such as jQuery). Google Code Playground is a sandbox tool that gives you the ability to test and experiment with Google’s awesome APIs.

Also, see the top Google products and services for people who build webites.

Other Tools to Check Out

• Pastebin: A simple text-pasting tool that has syntax highlighting. (No live preview though)
• codepad: A web-based compiler/interpreter for server-side and software programming languages like PHP and C++
• Real-time HTML Editor: A very simple HTML previewing tool
• Ideone: An online interpreter/debugging tool that can run over 40 programming languages

Do you have a favorite web-based sandboxing tool not mentioned above? Please share it with us in the comments.

Related Content

• 10 Excellent Tools for Testing Your Site on Mobile Devices
• 15 Tools to Help You Develop Faster Web Pages
• 10 Excellent Tools for Responsive Web Design
• Related categories: Tools and Web Development

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Advertise here with BSA

So, you’ve decided to venture into the creation of responsive web designs. Wonderful! With the browsing landscape diversifying into mobile devices, netbooks, desktops and so forth, responsive web designs allow web designers to provide different layouts for specific devices (based on screen size and browser features) giving site visitors an optimal user experience.

So now, you’ve determined that it would be beneficial to create responsive web designs. What tools can help you get the job done?

Tools have started to spring up to provide us with shortcuts and helpers for common responsive web design tasks. Let’s take a look at just  few that I find the most useful.

I divided the tools in this list into four categories:

• Responsive typography
• Flexible images
• Responsive web page layouts
• Testing and cross-browser support

Responsive Typography

First, let’s look at two tools (out of the many out there) that allow us to create beautiful, adaptive typography.

1. Lettering.js

Lettering.js, a jQuery plugin for controlling the appearance of your web type, is a great tool to help designers get a chokehold on their typography. Whether you’re working with a responsive web design or not, having this kind of control over your web type can help you craft a truly creative look without resorting to image-based solutions.

In the context of responsive design, Lettering.js gives designers precise control over typography characteristics such as spacing, leading and kerning in order to produce an optimal reading experience in various visual spaces.

2. FitText

Another jQuery plugin, FitText helps you make your headlines responsive. FitText make sure your display text appears optimally on various devices. This plugin may be simple, but its flexibility leaves the creativity in your hands and is easy to implement.

Flexible Images

After setting type, we can move on to tackling the issue of placing images in our responsive web designs. There’s one tool that should be a part of every responsive web designer’s arsenal.

3. imgSizer.js

Before heading straight to the code of imgSizer.js, make sure to read through Ethan Marcotte’s breakdown of what role this script plays in your responsive web designs. Essentially, this script was designed to make sure your images render cleanly in Microsoft Windows. Marcotte’s script does a pretty nice job of cleaning up images that have been sized down automatically by the browser.

Responsive Web Page Layouts

At the core of every responsive web design is a fluid and flexible layout that adapts itself to the screen size and features of the user’s browser. Let’s move on to resources related to layout, where most of the action happens in responsive web designs.

4. Fluid 960 Grid System

If you’ve been using the ubiquitous 960 Grid System by Nathan Smith (plenty of us have probably used it for projects or experimentation at some point), check out this fluid adaptation of the original project. If you’re comfortable with the original 960.gs, then you already know how to use Fluid 960 Grid System.

5. Gridless

If a grid system for web page layouts seems too restrictive to you, check out Gridless. Gridless is built to be leaner than other grid systems and was constructed with responsive designs in mind. The Gridless code bases its philosophy on the much-discussed mobile first method for crafting websites that must be delivered to a multitude of device environments.

For designers seeking more of a barebones, content-focused approach to responsive web design, you may find yourself quite at home with Gridless.

6. PXtoEM

A tedious mathematical process associated with converting fixed-width design work to a fluid layout is converting absolute units of measurements (i.e. px and pt) into relative units of measurement such as ems and percent (%) for typography, spacing, container widths, etc.

PXtoEM is a tool that provides users with a simple conversion tool to help them with all the math. The site also allows designers the ability to quickly and easily change the base font size of their layout to something that leads to more manageable math.

For example, in your HTML document, setting your body element’s font-size to 62.5% gives you the more convenient conversion ratio of 1em is to 10px, making unit conversion a little easier to do.

Testing and Cross-Browser Support

Finally, as we create our responsive web design, we’ll come to the point where our web type is clean and adaptive, our images are flexible and our layout is fluid.

Now we need to make sure that our site works in as many browsing environments as possible.

7. Adobe Device Central

The best way to test your website on different devices is to actually test it from within the devices themselves; nothing compares to seeing how your website actually looks and behaves within a particular mobile gadget or computer.

However, for those of us who don’t have the budget for hundreds of new gadgets, the solution comes in the form of Adobe Device Central. Device Central is one of the better pieces of software I’ve used for testing a site out on different devices.

If it’s variety and range you seek, Device Central won’t leave you disappointed. With an actively growing device library to choose from, users will find pretty much every major device on the market, ready to load in and test.

Testing websites has been made easy as well: Simply input the URI of the web page (local or remote) and then you can freely switch between the devices you want to test it in.

8. Web Developer

While Device Central (above) is cheaper than purchasing a bunch of devices, it still may be outside the price range of some designers’ pocketbooks.

A fantastic alternative (or additional tool alongside Device Central) is the Web Developer browser extension. Available for Firefox and Chrome, this extension provides designers with several tools that come in handy when developing responsive or fluid websites.

Most notable is the built-in ability to resize your browser window with the click of a button. New size presets can be saved and used instantly.

Other helpful features include viewing CSS by media type and outlining your containing elements, which I find useful for quickly identifying break points (or potential break points) in a design.

9. Respond.js

One of the glaring disadvantages of using media queries is that they are part of the CSS3 specifications and therefore is an absent feature in older browsers, such as in IE8 and below.

Of course, one might argue that we don’t see a lot of mobile devices running IE6. But one thing to note is that responsive web design isn’t just about mobile devices, it’s a way of developing sites that become optimized for all types of browsing situations. For example, IE7 or IE8 users might still benefit from a site that renders a different layout on large, widescreen monitors versus a small-screen netbook.

Fortunately, we have Respond.js, a lightweight, open source script that gives us more options for executing media-query-driven responsive web designs in IE6, 7 and 8.

The script is small — only 1KB when served gzipped to site users — and is unobtrusive, so there’s little excuse not to use it!

10. Modernizr

Much like Respond.js, Modernizr is here to bring designers the power of HTML5 and CSS3, even in older browsers. While it’s not as lightweight as Respond.js, it does give you media-query-like abilities in older browsers.

The other exciting capability Modernizr brings us, as it relates to responsive web design, is some added support for the very intriguing — but currently problematic and tumultuous — W3C specifications of the Flexbox model that allows for easier and more robust web page layouts.

Modernizr also provides conditional loading features. If you’re concerned about loading many resources because of page speed concerns, Modernizr allows you to conditionally load certain resources based on the user’s browsing circumstances.

Responsibly Responsive

Not every responsive web design project is going to require all of the resources mentioned here. As always, restrict your design projects to only the components that are required to achieve the goals desired. And then, when appropriate, sprinkle in features that can enhance the user experience for as many users as possible without degrading it for anyone else.

These resources were chosen based on their ability to help you complete your responsive web designs more efficiently.

Adaptive and responsive web design practices are still in its beginning stages, but they are important because the diversification of browsing devices and viewing methods — like 3D on the Web, for example — is going to continue as our industry progresses into the future.

If you know a tool that can help in building responsive web designs, share them in the comments!

Related Content

• 10 Excellent Tools for Testing Your Site on Mobile Devices
• A Quick Look at Mobile Web Designs
• Building Mobile Web Apps the Right Way: Tips and Techniques
• Related categories: Tools and Web Design

About the Author

Jason Gross is a freelance web designer focused on creating clean and user friendly websites. Jason currently lives in Indiana and can be found on Twitter as @JasonAGross or on the web at his personal blog and portfolio.

Advertise here with BSA

As a web designer or web developer, focusing on your core work responsibility — producing websites — is tough enough of a job. So, I want to share with you a list of free tools to help you in various aspects of your work so that you can spend more time designing and less time on the other necessary things you need to deal with as a web professional.

1. Bounce

Bounce is both a fun and useful way to optimize and analyze websites. The tool allows you to share web page screenshots. The web app takes a screenshot of the web page after you enter its URL. You can then click and drag on the screenshot to make notes.

I found that by sharing screen grabs and notes through Bounce, I’m able to get helpful feedback on my designs. The built-in sharing functionality lets you seamlessly post your shots on Twitter and Facebook.

2. MindMeister

Brainstorming new ideas for projects could be limited by the capabilities of the tool you use. With MindMeister, an excellent mind-mapping tool, you have great options for composing and drawing out your thoughts, supporting your creative habits through its intuitive interface.

I particularly enjoy the collaboration feature that allows team members to easily contribute and help shape brainstorming sessions.

3. Simplenote

Stop littering your computer monitor with Post-it notes. Simplenote is an app that’s straightforward and simple, allowing you to jot down your thoughts and ideas and share them from any internet-enabled device. Because it’s an open platform, Simplenote boasts an incredible amount of other tools that support Simplenote syncing, which makes working with it even more useful.

4. Woorank

How well is your site doing? Woorank helps you answer that question. It’s a super handy tool, giving you a comprehensive score of any website you want to learn about. But there’s much more to the simple score. Get insights into Alexa ranking, an SEO analysis and a list of competitor sites, as well as loading times and usability scores.

With just one click, you can get the full reports of competitor sites and see how you can improve. It can also help you perform design research on competing sites as well as learn about traffic trends in the niche.

5. ResizeMyBrowser

It can often be a big hassle to know how your web design is viewed on various monitors and browsers. ResizeMyBrowser provides you with common preset dimensions for popular default browser sizes, such as 1440×900 (MacBook Pro, 15”) and 480x800px (Google Nexus One smartphone).

6. Ge.tt

This is one of the simplest ways to share files online that I’ve found. You arrive at the site, upload your files, and whilst the files are uploading, you can already share the link. Additionally, you get interesting stats about your files such as the number of people that’s seen your shared files.

From sharing files with your clients to presenting mock-ups in your social network, this file-sharing tool can help increase your productivity.

7. Coolendar

Coolendar is a very efficient way to create to-do lists. It automatically syncs with your favorite calendars (e.g. Google Calender, iCal and Outlook). The stunning part is the hassle-free syntax you can use. No more time setting and fiddling with scheduling. Write one line such as "tomorrow 5pm wireframe for Mrs. Client’s site due" and it automatically sets the task for you.

Integrate it with Google Talk and get a reminder for a new item on your to-do list via a chat message. Brilliant.

8. Smartr

Smartr is an incredibly handy iPhone app that pulls in tweets and status updates of your followers and friends and then turns them into a newsfeed with little thumbnail previews. The algorithm of the app gives you only the most useful content. Some tweeting and social-sharing capabilities are present so you can easily retweet, mark as a favorite or save to read for later.

9. Buffer

(Full disclosure: I’m the co-founder of Buffer.) Buffer is a tool that allows you to throw tweets into your Buffer from any web page. These tweets will then be posted for you, well spaced out over the day. It streamlines your tweets so you can better focus on your work.

10. FontStruct

FontStruct is a simple way for you to design your own custom fonts. The tool offers you a great array of different geometrical shapes you can use to create your fonts. After designing your font, you can generate high quality TrueType fonts that you can use with any Mac or Windows application, such as Photoshop.

Related Content

• 10 Twitterific Twitter Tools
• Using Design Tools to Become a One-Man Design Team
• How to Use Your iPad for Real Design Work
• Related categories: Tools and Resources

About the Author

Leo Widrich is a Social Media enthusiast with an extra large addiction to Twitter. As Co-Founder of Buffer, he blogs at the Buffer blog every week to help their users make the most of their service. Say "Hi!" on Twitter @leowid.

Advertise here with BSA

Designers have a love affair with Apple products that stretches back decades, but as Apple shifts their focus towards low-power devices that fit more towards a mainstream audience, are designers being left behind?

We all know that the iPad is fun — but is it a legitimate business tool for designers? We’ll take a look at a few tools that will help you use your iPad for professional-level design work.

Can the iPad Be Used as a Professional Design Tool?

Love it or hate it, the iPad represents a monumental shift in computing to an interesting new form factor. Apple certainly didn’t invent the tablet, just as they didn’t invent the smartphone, but as with the iPhone, the iPad was perhaps the most significant catalyst for the outright stampede of similar devices from electronics manufacturers.

From the perspective of a designer, the iPad and its brethren represent a significant problem. On one hand, the thing is simply too cool to pass up. On the other hand, many of us have trouble justifying the purchase for business use.

The problem is that, for all its coolness, the iPad is low on the scale of powerful computing devices. Designers require powerful processors, loads of RAM and terabytes of storage to handle their daily workload.

The iPad, though, is specifically designed to be primarily aimed at web browsing, email and running applications that are relatively basic when compared to those found on a full-fledged computer.

There has been a lot of discussion revolving around how designers can use the iPad in their workflow, which helps us validate our purchases to angry spouses who doubt our need for new toys. In all honesty, though, the thing that we all realize — but aren’t owning up to — is that all of these roundups of iPad apps for designers are full of super basic sketching apps and to-do lists, not exactly enough to merit a $500+ purchase or pull us away from our Mac Pros for anything but some fun distractions.

Don’t get me wrong, products like Adobe Ideas are great, but do you really find that they have dramatically improved the way that you design websites, brochures, business cards or even logos? Are they really that far beyond a good old pencil and sheet of paper?

Adobe Ideas is a fun but basic drawing application.

As an iPad owner, I’ve put a lot of time into exploring how designers can really use this device as a professional-level tool instead of an expensive paperweight that plays Angry Birds and lets us read our email in a bigger font than our iPhones.

The following are some of the best accessories and applications that I’ve found to help meet this goal.

First Things First, Get a Stylus

It almost pains me to suggest such a thing. The iPad is not designed to use or require a stylus. All of the default applications and controls contain touchable areas large enough to be used by any of the ten God-given styluses protruding from your hands.

I would even go so far as to say that, in general, a stylus ruins the experience of the iPad. The "magic" of this device is that it makes computing an incredibly direct experience. Suddenly we can reach out and touch GUIs instead of pointing and clicking. A stylus might not be as indirect as a mouse, but it’s certainly a step back from your index finger.

However, as a designer, you simply must have precision beyond that offered by your chubby little fingers. If you’re typing or navigating the general iPad interface, use your hands, but for writing by hand, drawing and manipulating graphics, you’ll want to check out a stylus.

The Pogo Stylus for iPad.

I was personally a very big doubter in this area but once I purchased a stylus I couldn’t argue that it helps take drawing on an iPad from something silly and fun to something that a serious professional would consider doing on a regular basis.

Choosing a Stylus

A stylus that works with an iOS device is a little bit different from those you might be used to elsewhere. Since the iPad has a capacitive touchscreen, scraping a piece of plastic across it won’t do anything.

In practice, the need for capacitive touchscreen and screen protection typically results in an iPad stylus being composed of a metallic shaft and a soft, squishy tip. The latter of these is quite annoying if you’ve ever used any other writing instrument on the planet — pen, pencil, etc. — which tend to have a firm tip.

Because of this, I recommend being choosy when you purchase a stylus. Try some out before making a purchase if possible. Many people recommend the Pogo or Pogo Sketch stylus (shown earlier), but I own one of these and the foam tip really bugs me.

Griffin has a nice stylus with a rubber tip that is still soft but a bit firmer than the foam.

Griffin Stylus for iPad.

There are also a few really unique products out there like the iClooly stylus, which is more like a paint brush, the Dagi stylus, which is tipped with a transparent circle for serious precision and the Stylus Socks Pro, which uses conductive fabric stretched over a pen shaft.

The Stylus Socks Pro for iPad.

If you’re the do-it-yourself type, hit up YouTube for all kinds of different ways to make your own stylus using common household products.

iDraw: A Real Graphics App

After you get your stylus squared away, it’s time to decide whether the App Store holds any hope for legitimate tools for designers.

Fortunately, there are in fact a few really solid professional-level tools if you know where to look.

One excellent and underappreciated app in this category is iDraw, a genuine vector-drawing application with many of the same features that you find in Adobe Illustrator.

Far beyond a simple drawing app, iDraw packs a serious punch and is a steal for $8.99.

Layers in iDraw.

Let’s talk about why this app is more like a professional art program than a fun little drawing app.

First, you get a full-on multi-layered canvas. If we’re trying to compare to graphics software on a desktop, you can’t even consider something that doesn’t have basic layering functionality.

Also, since the graphics that you create are vector, each piece stays independently moveable just like in Illustrator.

iDraw has a genuine Bezier pen tool and complex path-editing capabilities. Creating a quick sketch is dandy, but there’s a strong argument for building custom graphics as fully editable vectors and even powerful drawing apps like Sketchbook simply don’t offer this functionality.

iDraw has a Bezier pen tool and the ability to edit vector paths.

There’s even a collection of Boolean operations — equivalent to the Pathfinder panel in Illustrator — that allow you to quickly create complicated graphics by combining basic shapes.

Most importantly, iDraw has a PDF export feature that allows you to bring your artwork right into applications on your desktop. Opening the PDF in Illustrator will retain all of the paths, fills and gradients so you can effectively use your iPad for actual professional vector artwork creation that can be further manipulated in desktop software.

iDraw’s export options.

Other awesome features include basic selection tools, copy and paste actions, text creation and editing and drop shadow creation.

If you’re skeptical that the iPad can really be an effective tool for designers, check out iDraw.

Air Display: Use Your iPad as a Multi-Touch Display

Air Display is another app that really pushes the iPad away from being a novelty and towards being a serious asset to a designer’s arsenal. With this app, you can use your iPad as a second display for your desktop computer.

Just like any normal multiple display setup, you can set your iPad next to your computer screen and drag windows to and from Windows or OS X. When you’re working with multiple graphics applications, anything that gives you a little extra screen real estate is a huge help. This is especially true for those of us that work full-time on a laptop.

The awesome benefit of using your iPad as a second display is that, with Air Display, you retain the benefits of having a touchscreen. This means that you can drag Photoshop over to your iPad and use your stylus to paint, draw and perform any other action you want.

With Air Display, you can use Photoshop right on your iPad!

Using this setup, you can transform your iPad into a full-blown drawing tablet for Photoshop and Illustrator. Not some watered-down mobile versions of these apps mind you, the real versions.

A quick drag action is all you need to swap back and forth between actions that you think are better performed with a mouse on your desktop PC versus those that merit direct interaction on your iPad. A bit of lag and no pressure sensitivity means that it’s not quite a Wacom Cintiq, but it’s close!

I really enjoy using my iPad as an input device in this fashion. It’s great to be able to break away from the mouse and sketch out something quickly by hand without sacrificing the powerful toolset found in Adobe apps. Air Display is well worth the $9.99 download.

Bust Out a Wireframe at Lunch (with These Apps)

Designers disagree on the usefulness of wireframes, but almost no one approaches a really large design project such as a web application without plotting out a general outline and interaction flow from screen to screen. Low-fidelity mockups are a valuable tool that many designers wouldn’t dream of skipping during the initial planning process of producing a website.

iMockups helps you build low fidelity wireframes.

As it turns out, the iPad is a really nice way to create these types of mockups. Using something like Photoshop or Illustrator, you’re easily tempted to take the exercise too far and start actually designing before you’ve worked out the content. Alternatively, drawing by hand works great, but can be quite time-consuming if you’re a perfectionist.

Apps like iMockups ($6.99) and SketchyPad ($4.99) allow you to quickly experiment with visual layouts in a basic wireframe format. The minimal graphics force you to focus on content, and the large range of pre-built items allows you to save tons of repetitive drawing time.

You can definitely do wireframing on a desktop, but there’s something mentally refreshing about stepping away from your computer for a minute to plot content out in a portable, full-screen and distraction-free environment.

Land a Job with Your Portable Digital Portfolio

You can’t make a living as a designer without clients. Whether you’re a full-time employee or a freelancer, you’ll find that selling yourself is a much more frequently necessary task than you’d like it to be.

Years ago, designers carried around large, unwieldy portfolios with printed samples of their work. At the time, most design work was done for print so the format made perfect sense.

Now that the digital age is upon us, it’s time to replace that physical portfolio with something a little more modern.

Sure, you may have a portfolio website that you can send someone to, but what about in an offline situation such as coffee with a client or a job interview around a boardroom table? I’ve tried passing around my laptop in such cases and it’s certainly not ideal.

Your iPad presents the perfect solution. It’s portable enough that you can keep it on you almost all the time and easily pass it around a table, while being large enough to really show off your work nicely.

And let’s face it, the iPad makes for an impressive presentation. Your potential clients can either passively gaze at your work or interact with it directly as they tap, pinch and swipe their way through your samples.

There are a number of apps available in the App Store that transform your iPad into a personal, branded portfolio that’s sure to impress. Some, such as Portfolio for iPad, will run you a whopping $15, but others like Minimal Folio are less than $3.

Minimal Folio gives you a custom digital portfolio to carry.

Minimal Folio has a lot of really cool features for its small price tag, including the ability to sync via Dropbox and present on an external display, which is perfect for when you have access to a projector.

This may sound dangerously close to the novelty area we spoke about before, but trust me, the first time someone asks to see a sample of your work and you pull out a fully-branded iPad portfolio, you’ll see the professional value of this tool right away.

Good News: The Future is Even Brighter

Right now apps like Air Display are about as close as we can get to legitimately using an iPad in a way that improves our traditional Photoshop workflow. Fortunately, though, Adobe is putting a lot of effort into this area and appears to be quite committed to tablets as a form factor for serious creative professionals.

The recent release of Adobe’s Photoshop Touch SDK means that you can expect developers to go crazy in a gold rush to create the best and most useful Photoshop iPad tools.

Adobe itself has already used this kit to create three very promising apps that will be available soon.

Adobe Nav allows you to use your iPad to select tools and navigate between documents in Photoshop. Adobe Color Lava allows you to mix together colors in a simulated painter’s palette environment. Adobe Eazel is a seriously cool way to paint right into Photoshop using your fingers or a stylus.

Adobe Nav.

You can expect these already impressive apps to be just a small taste of the wave of apps that will no doubt result from this effort by Adobe.

Perhaps this, above all else, will really catapult the iPad into something that creative professionals can not only justify purchasing, but wonder how they ever lived without!

Conclusion

To sum up: Despite the fact that iPads are nowhere near as powerful as the computers that run modern graphics applications, there are still a number of ways to use them as legitimate and professional design tools.

A simple stylus helps you overcome the clumsiness of sketching with your finger, real vector drawing applications like iDraw allows you to compose impressively complex graphics right on an iPad with Illustrator-like features and Air Display will turn your iPad into a multi-touch second display perfect for working inside of Photoshop.

You can also perform some great secondary design tasks like wireframing and showing off your portfolio.

Some think that tablets are purely a fad that will fade as quickly as they sprung up, but I suspect that they will be a driving force in personal computing for years to come. As Adobe and others invest in new and exciting technology for these devices, they’ll only become more viable as an instrumental piece of a designer’s arsenal.

Related Content

• Designing Web Apps for the iPad
• 10 Excellent Tools for Testing Your Site on Mobile Devices
• 10 iPhone Apps Every Web Designer Should Know About
• Related categories: Tools and Web Design

About the Author

Joshua Johnson is a Graphic Designer/Web Designer with over six years of experience working with a major international marketing agency. He is also the Editor of Design Shack, a web design and development blog. Check out his recent work and follow him on Twitter: @secondfret.

Advertise here with BSA

As designers, we can often find ourselves on a bit of an island. Whether we are working independently or at an in-house position, there are times when we are left to fill many job roles that merit an entire design team.

I recently experienced this situation at my previous job where I was a solo user experience designer at a company employing thousands of people. I had to do my own research, wireframes, prototyping, functional specs, visual design, etc. I had no team to help accomplish these tasks, but I still had deadlines as if I did.

On the one hand, it was a great experience to work in all of these different roles. On the other, I was rarely afforded the opportunity to focus in on one of these disciplines and perform it at the level I would have liked.

This is me, stressed out.

Does this describe you? Are you the lone designer working at a company tasked with accomplishing the many tasks that a team would normally tackle? Maybe you are working as a freelancer and certain projects need many of these roles to be filled to really produce an excellent result.

How do we handle multiple roles?

I propose we build our own team. A team consisting of you and design tools.

I will share with you how I used some very valuable (and relatively affordable) tools and resources to help me tackle a few different roles at a much higher level than if I was trying to do it all on my own.

I used four different tools and resources to help me in my struggle to produce well-informed solutions that met my deadlines.

These four things are data-gathering tools (ClickTale), design pattern galleries/libraries, wireframing/prototyping (Axure), and design resource sites (like Designmoo and 365psd).

You can swap out the specific tools I’ll be mentioning with your preferred tools and resources, but I wanted to share with you my personal setup as a proof-of-concept.

Tools Can’t Replace People

Before going any further, let me first say that working in a team environment is almost always more fruitful than trying to do all multiple roles on our own. But when you’re at a company that doesn’t have the budget to form a design team or are working independently as a freelancer, sometimes you just have to do the best with what you have, to ensure that the results are the best they can be.

With that said, let’s go over these four types of tools.

Data-Gathering Tools

Let’s start with ClickTale, a great research/analytics tool that shows you how users are interacting with your web pages. ClickTale allows you to track page views along with some basic analytics reports that you could get from a free alternative like Google Analytics. But its strength is in features like heat maps, click-tracking, scroll reach (how far down the page your users scroll), recorded sessions of users interacting with your site/product so you can see how they navigate your site, and some great web form analytics. Six Revisions uses ClickTale on the front page of this site.

I used this tool to help me with the research phase of my site projects. The detailed reports it gave me helped in discovering ways to improve our web page layouts and web application interfaces. I didn’t actually have to do the research; I just needed to sift through the very well prepared datasets it provided me.

With a tool like ClickTale, I was equipped with more knowledge about our users to help me either rework or create new designs based off of solid information about our customer base and how they interacted with our products.

Other tools like ClickTale are:

• Google Analytics (it has heat maps as well)
• Crazy Egg
• ClickHeat
• clickdensity

Design Pattern Libraries

Once I had data about how users experienced our existing products, it was time to rework website components such as site navigation, web page layout structures, the design of web forms, and so on — all in an effort to improve conversions based on what I had learned.

Often having to work under the gun and in constant deadline-dash mode, I found that it was helpful to use design pattern libraries as a guide to see how other designers have tackled the same design problems that I was faced with.

I also look at anti-patterns (which can be found on sites such as dark patterns) to double-check that my interfaces are built with the user’s best interest in mind.

Here are some design pattern libraries that I have found to be helpful:

• UI-Patterns.com
• Pattern Tap
• Patternry
• Elements of Design: A Web Design Showcase
• Yahoo! Design Pattern Library
• Interaction Design Pattern Library (Welie.com)

It should be noted that design patterns do not replace the need for us to create the experiences based on our projects’ objectives and needs, but they serve as good references especially when we need a quick jumpstart.

Also, check out these articles if you are interested in learning more about design patterns:

• Guide to Website Navigation Design Patterns
• 6 Popular Content Presentation Design Patterns
• User Interface Patterns for Dealing with Interactive Content

Wireframing and Prototyping

For wireframing and prototyping, I use Axure. This application is a wireframing /prototyping tool that can generate functional HTML prototypes from your wireframes as well as produce functional specifications based on them. You can kill two birds with one stone by creating your wireframes and documentation at the same time!

This app has saved me gobs of time, and having functional prototypes instead of lifeless, static wireframes made with graphic design tools really helps with getting the clients to understand the flow of the application/site.

Functional prototypes are also very helpful in quick-and-dirty iterations and usability testing, allowing you to test the functionality and flow of things before you get to the visual design stage.

Of all of the tools and resources, this one was the most helpful to me.

To discover more wireframing tools, read this guide called Ultimate Guide to Website Wireframing. If you are not convinced that this phase of a design project is important, also read The Benefits of Wireframing a Design.

Design Resource Sites

Just as with design pattern libraries, I have found that visual design resource sites are crucial in fulfilling projects on time and within budget. My background is in visual design, but for someone who is a user experience designer or web producer that doesn’t have visual design as a skill, these resource libraries can be very beneficial.

To be honest, even as a visual designer with the required expertise, I need inspiration and starting points when I’m on tight deadlines. Many times, I don’t have the time or resources for creating custom design elements, so these sites can be a lifesaver.

Designmoo and 365psd are two sites that I have found to be super helpful. Not only can you find great design files on these sites, but each site also provides the opportunity for you to give back to the design community by allowing you to submit your own designs that others can use.

There are a lot of design resource sites out there, and it’s really up to you to find ones that fit your needs. Also, blogs provide freebies occasionally that you can also look into.

Parting Words

I hope you find these resources as useful as I have. Again, let me stress my earlier statement that these are tools and resources that can help you build a range of sites and applications, but no tool can replace real people with actual skills.

Don’t get discouraged when you feel outnumbered or overwhelmed by the amount of work on your plate. Look around for resources, and use the opportunity to crank out some awesome work even when it seems the odds are against you.

Do you have design tools and resources that have been helpful to you? Discuss them in the comments below.

Related Content

• Top Five Web Design Tools
• 12 Useful Web Tools for Designers
• 30 Useful Open Source Apps for Web Designers
• Related categories: Tools and Resources

About the Author

Aaron Irizarry is a user experience/interaction designer for IGN Entertainment in Costa Mesa, California (where it’s always right around 70 degrees and sunny). He has a background in visual design and has been handcrafting pixels since 1998. He shares his thoughts and experiences on his blog thisisaaronslife.com. Follow Aaron on Twitter @aaroni268.

Advertise here with BSA

Twitter continues to add a staggering amount of 460,000 users each day. In order to be fully equipped to stay on top of this popular web service, you can use Twitter tools to help. Here are 10 fresh, new Twitter tools that you can use to achieve greater productivity on Twitter-related tasks.

1. The Archivist

This tool gives you insights and data about a specific search term. Simply search for terms that interest you and The Archivist will present you with plenty of information such as how much the term has been tweeted, top users that use the term, how many retweets the term has gotten, and more. It also lets you search for topics and hashtags, and gives you amazing visualizations about the Twitter activity surrounding them.

The Archivist allows you to download the data so you can go and pull it into presentations, reports and other analytics tools.

2. Tweriod

This Twitter tool analyses your tweets and your followers’ tweets and then gives you a graph of times of the day and days of the week your tweets will have the most visibility. Super simple and very useful. It’s an app that attempts to answer one question: What times are your followers most active?

Tweriod saw development at a great pace in the past few weeks. It started out as a simple service a few months back, but has recently received an overhaul in its design and in its algorithm.

3. ManageFlitter

ManageFlitter has been around for a while; however, a few weeks ago, the app rolled out an overhaul and launched a pro version of its service. Managing your Twitter followers is now easier than ever before.

With ManageFlitter, you can unfollow Twitter accounts that don’t follow you back, users that clutter your Twitter stream, and people who’ve stopped using Twitter.

There is no signup or registration process; you simply connect using Twitter’s authentication system and off you go.

4. Buffer

(Full disclosure: I work at Buffer.) There exist many different tweet-scheduling services out there. However, Buffer gives you a simpler and hassle-free solution than other services you might know of (such as Hootsuite or CoTweet). Buffer allows you to add many tweets at once, without flooding your followers with too many tweets back to back. All you do is throw a few tweets in your Buffer and the app then schedules them for you throughout the day. No need to figure out when to tweet. It gives your Twitter stream better consistency.

Another great feature is that you’re able to add tweets to your Buffer from any web page using a browser extension.

5. Hashable

This high profile New York City startup gives you a chance to document all the relationships you make on Twitter and other social networks. It’s a new way of sharing the people you have met and can become an online space you can always go back to as a contact list.

It works in a very simple manner: You simply tweet out hashtags alongside an introduction or piece of information in reference to the person you have met.

What you’ll appreciate with Hashable is that it will store all this information in the form of a log so that you can keep track of your contacts. And it’s good fun to use, too.

6. Qwerly

Qwerly gives you a place to put all your Twitter contacts and other social networking profiles in one place. Another one of these all-in-one apps? I hear you, but Qwerly allows you to make this a fun and convenient experience.

All you do is sign in using Twitter’s authentication and it automatically pulls in all the information for you. Qwerly saves you all the trouble of manually entering your information. In addition, it helps you connect with more users by telling you what other people are up to.

7. Twileshare

You most likely know that there are several file-sharing tools out there for Twitter. In the past few weeks, I tested a few of them, and my decision is firm that Twileshare is the best one out of the whole bunch.

You simply upload files and share them with your followers, all in one tweet. The files are safely hosted on Twileshare’s servers and you get a generous storage space of 1GB to start out with. You’re able to share a variety of file formats such as PNG, GIF, JPG, DOC and PDF files. Another neat feature on Twileshare is that you’re able to see the amount of views your files get.

8. Twoolr

This app gives you detailed statistics about everything happening around your Twitter account. It tells you about your mentions, retweets, the words you’re using, the progression of your follower count, and more.

9. Deck.ly

At a market share of just above 10% of all Twitter usage, it was only a matter of time til Tweetdeck would extend its functionality.

Deck.ly allows you to write updates longer than Twitter’s 140-character limit. The first part of a message over 140-characters will be tweeted alongside a link to a new platform Tweetdeck created so that your followers can view the entire message.

It comes in super handy when you need to reply or send out tweets without having to resort to cutting down your message. It even allows you to include embedded videos.

Deck.ly is sort of like Posterous on top of the Twitter platform.

10. Proxlet

This tool allows you to mute certain tweets without unfollowing the person altogether. It also eases the pain of finally getting rid of Foursquare tweets and tweets about trending topics that you no longer want to hear about. You can do this under Settings by blocking whole hashtags, terms or apps.

Proxlet works on Tweetdeck, iPhone and other Twitter clients.

Related Content

• 10 Twitterific Twitter Tools
• 50 Beautiful & Unique Twitter Profile Designs
• 10 Features That Will Make Twitter Better
• Related categories: Tools and Resources

About the Author

Leo Widrich is a Social Media enthusiast with an extra large addiction to Twitter. As Co-Founder of Buffer, he blogs at the Buffer blog every week to help their users make the most of their service. Say "Hi!" on Twitter @leowid.