Advertise here with BSA

When your business model revolves around reoccurring subscriptions — which is a popular model for software as a service (SaaS) products like Basecamp, FreshBooks and CampaignMonitor — the most difficult part of generating revenue becomes getting users to sign up.

That’s where pricing plans — different subscription options with variations in price and features — play a pivotal role.

In this article, I will discuss a few tips and best practices for creating and testing pricing plans for web-based subscription services and apps.

Background

I had a great discussion on techniques and best practices for selling SaaS with DeskAway’s founder (and a very smart guy) Sahil Parikh.

The interesting thing I got from our conversation is something we already know is happening. IT — and thus, the Internet startup business model — is moving toward a reoccurring subscription-based economy.

Thus, designing an effective pricing plan for users has become of paramount importance more than ever.

Testing the Pricing Plan

I believe it’s extremely important to test your work and gather data for designing and improving on a product. Testing should be a  primary priority in the creation of a web-based app or service, especially because improvements can be made at any time.

In the context of designing a pricing plan, it’s essential to check whether it works well for the target user base and to ensure that it generates your company the most optimal revenue.

How do you test the efficacy of a pricing plan? You can use A/B testing to discover differences in the number of sign-ups when you change a certain aspect of the pricing plan.

Google’s Website Optimizer is a free and very popular tool for A/B testing, and that’s what we use at my company to test pricing plans.

What to Test

You can test several components of your pricing plan. Let’s go through a couple of things we can test.

Price

What are the effects of increasing or decreasing the price of your software?

Caution is needed here, since varying your prices for the same product can get you in hot water, as in the case of Amazon.com when they tested pricing back in 2000.

Test the validity of pricing ideas such as whether increasing your price leads to more sign-ups or if having the price end in a 9 (such as $49 or $19.99) increases, decreases or has no effect on revenue generation.

As a starting point for your price testing, you can read this short PDF guide on software pricing for inspiration.

Number of Subscription Plans

There are ways in which you can create smart pricing plans that help your end-users choose an appropriate plan.

One of the ideas we tested was to have a mid-range plan that could lead more users to purchase our more expensive subscription plan.

This idea was inspired by professor of psychology and behavioral economics Dan Ariely’s observation that "most people don’t know what they want unless they see it in context."

"Like an airplane pilot landing in the dark, we want runway lights on either side of us, guiding us to the place where we can touch down our wheels," explained Ariely.

When people see different options, they start comparing them with each other. The hypothesis we tested was that people choose things relative to their neighboring options, and not in absolute terms.

Our idea was that the $69 plan would lead to more sign-ups for the $79 plan.

When we tested these two versions in Google Website Optimizer, this is what we found out:

• With version B, we got about 9% more sign-ups for the $79 plan
• Nobody bought the $69 plan

The interpretation of the results: When we provided the $69 option, potential buyers compared it with the $79 plan and found that it was more valuable.

What could have gone on in the user’s mind as he was choosing a plan to purchase? "For just $10, I’ll get another 2GB and social media branding/bookmarking."

Some Tips for Free Plans

We have largely talked about paid plans, so let us briefly discuss the topic of providing free plans along with paid subscriptions: the freemium business model.

The objective of the free plan is simple: to grow your number of users. The theory is this: when a company is just starting out, their needs aren’t the same as bigger companies and, almost certainly, their budgets are more restricted.

The freemium model reduces the risk to try and use your software. It eliminates a barrier of use (i.e., cost) for companies starting out and those that would like to field-test the software without monetary commitment.

Then, as they grow, and as their needs expand, they will upgrade their plan to one of your paid plans to match their needs. This is similar to how retail stores often offer reduced prices on certain items (called loss leaders) in the hopes of getting you in the store to purchase one of the regularly priced items.

The Forever Free Plan from MailChimp is a great example of using free plans to get sign-ups that can later on be converted to revenue through subscription upgrades.

How do you differentiate between free and paid plans? Through resource throttling. For example, MailChimp is free for up to 2,000 email recipients. If you have more email subscribers than that, you will have to upgrade your subscription plan.

An effective free plan lets users use all (or most) of the features of the app. For example, the popular file-syncing tool, DropBox, gives you every feature of the paid subscription plan, however, your resource is limited to 2GB of files instead of 50GB of files.

In addition, use the art of distinction to highlight the subscription plan that provides the user with the most bang for their buck. Give it a different visual treatment.

Similarly, if you find that you need to, you can deemphasize the availability of the free plan without discontinuing it. For example, the free plan of Basecamp, now a wildly successful web app, has reduced the visibility of their free plan.

Related Content

• 70+ Examples of Product Comparison Tables in Web Design
• 6 Popular Content Presentation Design Patterns
• Designing Effective FAQ Pages
• Related categories: Web Applications and User Interface

About the Author

Ravi Pathak is the co-founder of Tatvic. He manages conversion rate optimization and is involved in developing products like Liftsuggest. He is based out of Ahmedabad, India. Connect with him on Twitter @ravipathak and LinkedIn.

Advertise here with BSA

Mobile web apps are useful alternatives to native apps for mobile devices. These days, Android-based products and iOS devices like the iPhone and iPad all come packed with fantastic mobile browsers (Mobile Chrome and Mobile Safari respectively), and Opera fans can install their preferred browser, too.

From a desktop point of view, these products make browsing just about the most pleasurable experience possible. CSS3 transitions, beautifully crafted HTML5 and embellishments mean their users get the highest possible browsing experience (assuming the content being viewed has been crafted with care and consideration).

Their mobile counterparts equally do not disappoint. Fast-loading JavaScript, combined with equally impressive CSS3 and HTML rendering mean that your mobile browser can provide you with as rich an experience as a native app.

Being mobile and Web-based, there are obviously going to be performance concerns. One advantage of native over Web-based mobile apps is that you download much of the interface when you download the app originally, so you are only really loading relevant data when you use them. In addition, native apps can take advantage of the platform’s integrated development features (such as standard UIs), which can further aid performance.

Web-based mobile apps work in the same way as a website would, i.e., you load the content of a page when a user requests to view that page. We can use the browser cache to make things speedier for users with primed caches, but all graphics, images, scripts and data are loaded from your web server as opposed to being on the client’s device (in the case of most native apps).

Mobile Web App vs. Mobile Website

These days, more and more online products come with a mobile version, which is generally a slightly scaled-down version of a main website optimized for small screens (see Amazon, Twitter, and the BBC homepage, for example). A mobile version of a site often takes a site’s content and outputs it so the information can be consumed more easily on a mobile device.

CSS media queries and other feature-detection techniques can be used to determine certain characteristics of a device or browser viewport, which gives developers the option to use the same code to present content at its best for the situation in which it is being viewed.

Mobile web apps are similar in a certain respect, because you want the content to be enjoyed and digested as easily as possible.

I would argue, though, that a mobile web app differs from a mobile version of a website due to it being tailor-made for the mobile platform. The UI will generally be more customized, and will include more mobile-device-centric user interfaces, as can see from the following examples.

At a quick glance of the mobile web apps above, you can see how the user interfaces are more customized to suit the mobile platform. They use bigger hit areas optimized for fingertips, making them easier to use. The YouTube and iPlayer examples use more grid-based button layouts, presenting controls within the app in a similar way as native mobile apps do.

As an example, shown below, you can see the similarities between the two forms of apps and their UI elements by comparing the YouTube and iPlayer web apps, and the Sky Sports News native app on the iPhone.

Mobile as a Platform

We’ve all got a mobile device these days — whether it’s a smartphone like the iPhone or a touchscreen tablet like the iPad — and most of us in the industry will use many different features of our mobile devices for various purposes.

It’s now easier for a greater proportion of people to access the Mobile Web, and that should be an important consideration when you decide to launch a product in this space.

Mobile design and data delivery differs from the traditional desktop environment; let’s talk about that next.

Desktop vs. Mobile

Here’s a quick breakdown of the big differences between desktop and mobile platforms:

• Mobile device hardware is smaller and generally tends to have lower hardware resources than desktops/laptops.
• Smaller screens bring about different design considerations and challenges.
• Touchscreen technology introduces new interaction concepts that differ from traditional input devices (keyboard and mouse).
• With a mobile device, internet connectivity is not always as reliable as a hard-wired broadband connection, which means internet connectivity is a concern and data transfer could be significantly slower.

Although these sound as if they are hurdles to get over, with careful thought and consideration, there’s no reason why they should be.

Touchscreen technology is exciting. The smaller screen design will really make you think about how to get the user to interact with your mobile web app in the most satisfying way possible.

What we should really be doing is looking at the list of differences above and seeing opportunities to deliver our content in a different way.

Building mobile web apps will be a paradigm shift from traditional web development and web design.

Mobile is the platform that people can have with them all of the time. That’s an exciting concept.

In the next sections, we will discuss development/design considerations, as well as concepts and techniques for building mobile web apps.

Keep File Sizes Small

When you don’t have sufficient WiFi coverage, data connection will usually be slower or non-existent. For any mobile product — whether it’s a native app that relies on data transfer, a mobile web app, or a mobile version of a site —  concerns regarding internet connectivity means you should try to cut down on the amount of data that your user has to download.

Quicker experiences are generally more satisfying and are therefore more usable. We can speed things up by keeping files smaller in size and reducing the number of files we serve to users.

Remember:

• Slower download speeds = longer loading times
• Smaller and fewer files = quicker loading times

It’s our responsibility to balance the above equations so that we create a beautiful-looking product that still functions responsively.

Dealing with Image Performance

We want to try to get rid of as many images as we can. For the images we keep, we want them to be as lightweight as possible.

If images are a necessity for particular parts of your mobile web app design, then there are a couple of extra steps we can use to trim off any excess fat from your files.

Use Adobe Fireworks for Transparent PNGs

I have to admit that I don’t really use Fireworks that much these days, as Illustrator and Photoshop more than meet my design requirements, but Fireworks does have one powerful ace up its sleeve. If you want to use PNGs with alpha transparency, then unfortunately, Photoshop will only allow you to export 24-bit PNGs (PNG-24), which are heftier than 8-bit PNGs.

Using Fireworks, we can save in 8-bit PNG, even when the image requires alpha transparency. In my experience, this can remove 20% or more off the file size with little to no loss in quality.

All you have to do is open up your 24-bit PNG, then, in the PNG compression settings panel in Fireworks, set it to 8-bit with alpha transparency, and then export. Voila, you have much smaller images to use!

Using ImageAlpha

If Fireworks sounds like too much of a bother, check out ImageAlpha. Once installed, all you need to do is drag your images into its main window and then tweak the export settings to remove excess data from the images.

Both techniques are very quick to implement. I would recommend using them for all projects, not just for mobile devices, because they’ll speed up web page loading times for your users due to reduced file sizes.

To learn more about using PNGs in web designs, see the Web Designer’s Guide to PNG Image Format.

Leveraging CSS3

Mobile web browsers these days are pretty advanced. Android devices use a mobile version of Google Chrome, whilst the iPhone does the same with Apple’s Safari. Some mobile devices come with mobile Opera and others allow you to install a browser of your choice such as mobile Firefox. So we’re talking about some pretty good browsers in terms of CSS3 and HTML5 feature support.

CSS3 allows us to render things through code that would previously have required an image. We can use color gradients, draw rounded corners, create drop shadows, apply multiple backgrounds to HTML elements, and more — all of which can help improve performance and decrease development times.

If you look at a typical application interface via your smartphone, it’s almost guaranteed that you’ll find CSS3 being used.

By using CSS3, we can reduce data transfer — particularly images and possibly excess HTML markup. We let the browser and the device do the work to render the interface more quickly.

Want the Apple-esque toolbar highlighted above? All you need is the following style rule (which uses CSS3) rather than creating and loading a CSS background image (which is how we’d traditionally do this with CSS2).

.toolbar {
  width: 100%;
  height: 44px;
  background-color: #000000;
  border-top: 1px solid #4B4B4B;
  background-image: -moz-linear-gradient(top, #2F2F2F, #151515 50%, #000000 51%, #000000);
  background-image: -o-linear-gradient(top, #2F2F2F, #151515 50%, #000000 51%, #000000);
  background-image: -WebKit-gradient(linear, 0% 0%, 0% 100%, from(#2F2F2F), color-stop(50%, #151515), color-stop(51%, #000000), to(#000000));
  background-image: linear-gradient(top, #2F2F2F, #151515 50%, #000000 51%, #000000);
}

Here’s what it looks like when applied to a div element viewed in Safari (desktop):

Now, instead of an image that won’t scale well — i.e., if the toolbar’s height needs to be increased, a CSS background image will not scale with it — we have a device-rendered HTML element with a gradient that will scale and adapt nicely for different device orientations and sizes.

It’s true that older browsers such as IE on a Windows Mobile device won’t necessarily render the gradient, but we can circumvent that problem by using the background-color within the same CSS rule as a fallback mechanism. This means all browsers capable of the gradient will show the gradient, but those that can’t will show the solid color instead (which we set to black, #000000).

All users still get to enjoy your mobile web app interface, but older devices just have the extra layer of gloss removed. This technique is called progressive enhancement.

HTML Canvas

If you fancy a little more work, then you can improve speed even further using the canvas element. Although using CSS gradients eradicates the loading of a physical image, that method still causes the device’s rendering engine to construct an image in the browser, which can result in a performance reduction depending on the device and browser.

By using the canvas element and some JavaScript, we can get the browser to draw the gradient without rendering it like an image. This technique can possibly be speedier on certain browsers, even if we need to use JavaScript. At the very least, using canvas is another tool you can use for drawing if it can’t be done in CSS3 or if you find that it’s a better option for performance.

To create the same toolbar above, first we need to create a canvas element in the HTML document like so:

<canvas id="toolbar"></canvas>

Then, with JavaScript, we can use the following script to produce the desired gradient on the canvas:

var canvas = document.getElementById("toolbar");
var context = canvas.getContext("2d");
var gradient = context.createLinearGradient(0, 0, 0, 44);
gradient.addColorStop(0,'#2F2F2F');
gradient.addColorStop(0.5,'#151515');
gradient.addColorStop(0.51,'#000000');
gradient.addColorStop(1,'#000000');
context.fillStyle = gradient;
context.fillRect(0, 0, 300, 44);

This is what the above code looks like:

Hardware Acceleration

When it comes to mobile web apps, Apple’s mobile devices are a major consideration that we need to be aware of because of the current popularity of the iPhone and iPad. Safari 5 (on all platforms) brings hardware acceleration into the mix. If you’re not familiar with the feature, Apple describes it as follows:

"Safari supports hardware acceleration on Mac and PC. With hardware acceleration, Safari can tap into graphics processing units to display computing-intensive graphics and animations, so standards like HTML5 and CSS3 can deliver rich, interactive media smoothly in the browser."

Essentially this means that Safari can use extra hardware device capabilities to enhance the rendering of graphics and transitions, which in turn promises faster user interface performance.

Other browsers have added support for hardware acceleration, too — including Firefox 4, Chrome 10 and Opera 11 — so hopefully we’ll see them integrated into their mobile versions soon, providing silky smooth transitions and lightning quick graphics-rendering for all of us.

Be Cautious of CSS3 Rendering Performance

As brilliant as CSS3 is, certain properties can slow down a web page. WebKit-based browsers, for instance, really seem to struggle with shadows in particular, so just be careful that you don’t apply too many of these to elements of your interface until the issue has been resolved.

As another example, the opacity property can also cause problems with Safari’s hardware-accelerated rendering, so it’s probably worth avoiding over-use of this.

One workaround to the opacity property performance issue is the ability to use RGBa value notation to declare CSS color properties in modern browsers; the significant factor of this being that the a in RGBa stands for alpha. By declaring a color using RGB values, then appending one more value, we can have full control of the transparency of an element without having to use the opacity CSS property.

Instead of:

.myElement {
  background-color: #000000;
  opacity: 0.75;
}

We could use:

.myElement {
  background-color: rgba(0, 0, 0, 0.75);
}

We can achieve the same results for our HTML element by using RGBa values, so when you want to add any transparency to HTML elements, make sure you’re using the most suitable method.

Consider the Offline User Experience

Finally, let’s briefly discuss HTML5 offline data storage.

Making use of local data storage means that once our data has been downloaded to the device, we can use a manifest file which allows us to cache certain files locally. What this means is that when users have no connection, we can continue saving data client-side.

Offline storage opens up a lot of opportunities. For instance, we can now try to maintain the user’s experience even when internet connectivity drops rather than having to defend against the issues posed by the possibility of internet interruptions.

We’re not going to be able to allow data downloads from our server when there’s no connection, but at least we can provide the opportunity to store options and user-decisions on the client’s side, which we can then synchronize back to the server once the internet connection is restored.

Conclusion

Hopefully this article has shown you some best practices, tips, and techniques you can use to design and build quick-loading and beautiful user interfaces for your mobile web products. If you were on the fence, I also hope that this encourages you to get started with mobile web app development.

Some people might think that mobile web apps are not as sexy as fully-fledged native apps for iOS or Android. However, the biggest advantage of mobile web apps is that we are able to build them to be platform-independent — we can maintain independence from devices and operating systems. We can make web apps without the need for extra developer toolkits and platform-specific SDKs, and thus we can still use our everyday development tools.

Further Reading

• Developing Web Apps in 2011
• How to Make an HTML5 iPhone App
• 10 Excellent Tools for Testing Your Site on Mobile Devices
• Mobile Web Design: Is It Worth It?
• Mobile Web Design: Best Practices

Related Content

• Designing Web Apps for the iPad
• Five Things That Will Keep Shaping The Web in 2011
• Situational Design for the Web
• Related categories: Web Development and User Interface

About the Author

Andrew Devlin is a lead designer with years of experience in the industry. He specializes in multiplatform front-end design and development. Currently working at Clock, a London-based digital agency, he enjoys focusing on the user’s experience with all things digital. See what he has to say on Twitter @toomanydevs and look him up on LinkedIn.

Advertise here with BSA

Recently, Facebook rolled out a major overhaul of their Pages. We studied the new design extensively to see what was new and improved. In this guide, we will go through the Facebook page changes and their impact, from a design, usability and web development perspective.

Design Changes

Let’s go over some of the major design changes to the new Facebook Pages.

No More "Standard" Tabs

The standard tabs that we’re used to seeing in the top area are now gone. They’re accessible on the left hand side, under the profile picture. The brand page designs and interface is now in sync with the personal user profiles where tabs are accessible under the user’s profile photo.

Note: the new tabs will appear in the form of a list (there will be a maximum of 6 above the fold).

New Photo Strip

Like the new Facebook profiles, the new pages will have a Photo strip above the Wall (with the most recent photos you posted or tagged). When another brand or individual tags your company in a photo, that photo will appear in this section, giving your brand less control of the images shown. The downside: It’s now more essential to have someone monitor your Facebook Page regularly for inappropriate photos of your brand.

Profile Picture

The maximum size for the profile picture has been reduced from 200x600px to 180x540px.

User Interface Changes

Here are some functionality and interface changes on the new Facebook Pages.

Admin View of Wall (See Hidden Posts)

Users can now select the "Admin View" option (below the profile photo) and view Hidden Posts. In the example above, someone had spammed our wall with a magical diet post, which we then hid (we were also able to ban the user). To do this, on your own Wall, click the "X" at the top right corner of any post and select the option from the drop down that comes up.

Post as Your Brand

With this new powerful feature, you can now post on other Facebook Pages using your company’s Facebook Page. On the right-hand side, you’ll see a link that says, Use Facebook as [your brand name]. Click on that to start using this feature. You’ll then get this modal window:

Here’s an example of a wall post made by the Majestic Media Facebook Page on the Six Revisions Facebook Page Wall:

This can be beneficial in driving traffic to your Facebook Page, but be careful not to abuse this, as the other Facebook Page moderators can block your post and ban you from their wall (and we assume that if that happens enough times, your Facebook Page might be closed down by Facebook). Keep conversations meaningful!

Your Brand Can "Like" Other Pages

You’ll notice, in the screenshot above, that your Facebook Page can "Like" other pages.

Note: your Likes will show up in your Facebook Page, and when you go to your home page (while logged in), your newsfeed will populate with feeds from the brands you’ve Liked.

Fans Count Has Changed

If you’re an admin of the Facebook Page, you’ll be able to click and see the names of the people who "Like" the page. From what we can tell, it’s in order from most recent "Likes". That is to say, the first person that shows up on that list was the last person to click "Like" on your Page.

The most important change that we see is that non-admin users will not be able to view the username/profile of those who "Like" that particular brand. This functionality will only be made available to the administrators of the Page.

Categories

Now displayed on Facebook Pages is your organization’s category (which can be adjusted). We recently changed ours from "Local Business" to "Internet/Software".

Development Changes

Let’s look at some web development/web technology related changes to Facebook Pages.

Facebook iframes Now on Tabs

From a web developer’s standpoint, this is the biggest and best change Facebook has rolled out. What does this mean? No more Facebook Markup Language (FBML)!

Any Facebook app developer will tell you about the challenges of using and learning FBML. It’s limited, choppy and doesn’t allow you to build those fully customized Facebook applications within a Facebook Page tab.

Functionality is limited in the Facebook Page tab because of FBML, which usually means anything robust will have to be developed as a full-blown Facebook application.

The most recent example is the one we created for HomeSense (that we couldn’t previously do on a Page tab). During the planning phases, we were hoping to rollout this app within a Page tab, but Facebook had delayed their iframe rollout from Q4 2010 to Q1 2011, so this type of app wasn’t possible within the Facebook Page. Today, it can easily be implemented thanks to the iframe rollout.

To use iframes, you need the most up-to-date layout. First and foremost: in order to use iframes, the page must be using the new Facebook Page layout. If you’re an admin of a Facebook Page, you can check the status of your page. It’ll look something like this:

Custom HTML and JavaScript

We conducted tests and found that HTML and JavaScript work flawlessly without restrictions on the iframes. More specifically, we were able to confirm that jQuery works perfectly as well.

However, we noticed some issues in the iframe display.

The iframe window height cannot be bigger than 800px. It seems that Facebook hard-coded this value (we viewed the Facebook HTML source code). When the iframe content is longer than 800px height, scrollbars show up in the iframe.

This also causes issues on some browsers, and adds another scrollbar on the main window (see below).

Facebook API for Facebook Pages

In the initial request parameters, they send us the following data:

• page id: to know the source page where the tab is installed
• locale: to know the viewing user language so we can show Spanish only or French only content to these users, rather than creating a new tab or making a bilingual tab
• country: to know the viewing user’s country
• Liked?: if the viewing user Liked the page; if not, we can show a "pre-like" conversion page encouraging them to hit the "Like" button to get access to page content
• Admin?: to know if the viewing user is an administrator of the Facebook Page

Saving User Sessions

This part is important if you’re running contests or creating applications that are user specific. In our initial research, we found that we can save sessions without any problems. So when the user enters the Page tab and authenticates itself, he/she can return (in the same browsing session) again and we will not need to authenticate. This is something we couldn’t do before using FBML.

Summary

What does all this mean to you as an account manager, digital account representative, freelancer or social media expert? Likely, fewer blank stares from clients and a greater overall sense of control over their brand on Facebook.

With the changes scheduled to take full effect March 10, 2011, you should now be ready to take full advantage of the changes.

Here’s the summary of changes:

1. Profile photo now has a max size of 180x540px.
2. Display page category.
3. Photo strip shows most recent tagged or posted photos. They are randomized. Watch out for inappropriate photos tagged with your Facebook Page. The dimensions of thumbnails are 96x67px.
4. Admin view.
5. Filter wall posts by your Facebook Page only or by everyone.
6. Tabs are now on the left (under the profile photo) in the form of a list (maximum of 6 above the fold). Also, switch to Admin View to see hidden posts.
7. If you’re an admin, you can view the people who have "Liked" your brand. We noticed it’s in order of most recent Likes. If you’re not an admin, you can no longer view those who have "Liked" the brand page.
8. Your brand page can Like other pages. They’ll show up on your brand page.

Other changes not shown in the image above:

• You can see a Newsfeed of updates from Liked Pages on your home page when using Facebook under your Facebook Page name.
• Pages now support iframed tab applications.
• Email notifications when users post or comment.

Related Content

• Spying On Competition Using Social Media
• 10 Features That Will Make Twitter Better
• 10 Great Tips for Using Twitter as a Designer
• Related categories: Web Applications and Project Management

About the Author

Mario Zelaya is the Managing & Exec. Creative Director at Majestic Media, a leading digital agency located in Toronto, Canada. Specializing in Social Media Strategy and Mobile Development for Fortune 500 companies, he leads a team of over 35 highly talented designers and developers. You can contact him via LinkedIn, Facebook, or through email.

Advertise here with BSA

What’s stopping you from creating a functional app/website for the iPad? My answer was the Objective-C coding language, time constraints and having to deal with the infamous Apple App Store.

But if you’re a web designer, like me, and you think that designing for the iPad is outside the realm of possibility — think again.

Love it or hate it, the iPad is an incredible medium. There is no denying that the touch form factor will have an incredible impact on how designers approach user interaction. So get ahead of the game and start experimenting with iPad web apps now.

In this article, I will guide you through my creative process in which I developed a simple but useful iPad web app in just one weekend: BracketSlash.com.

I do not consider myself a professional iPad app developer, so if you feel a little apprehensive, let my experience be an inspiration to you.

Why Did I Create a Web App for the iPad?

I created a web-based iPad app mainly for my own personal use. I got fed up with the App Store and all the paid apps that didn’t do the trick.

My particular project is a news aggregating app that makes it easy to take 5 minutes every couple hours and keep up-to-date on news stories from a variety of sources.

This helps because I am in business/finance and it takes too long to go through a static newspaper or browse multiple websites.

It turned out better than I thought, so I figure it may be of use to others. I made a landing page at www.bracketslash.com allowing anyone with an iPad to use it 100% free.

Again, I do not consider myself a professional and I truly believe any web/graphic designer can learn from my experiences to create web apps better than most of the ones you find in the App Store currently.

Start with a Functional Goal

Don’t just say "I’m going to create an iPad app" without thinking about how your app will be valuable to the end-user. Even iPad games are targeted towards certain audiences.

Some questions to ask yourself to tease out the functional goal of your iPad app include:

• What do you want your iPad app to accomplish?
• Who will use your iPad app?
• What needs are you trying to fulfill for your users?

The one thing you have to remember is that it is not possible to create the "app to end all apps." Your app cannot be everything to everyone. Think in simple terms and execute your idea flawlessly; you will be more successful this way.

Draw It Out!

If you draw things out by hand, great. If you use a graphics tablet, even better. If you go straight to Photoshop, kudos to you.

Whatever your workflow is, always get your ideas down first.

Personally I go straight into a design software like Photoshop. I use geometric shapes (such as the custom shape tools) to get my ideas down and then I add in details progressively.

My design evolved a number of times — and expect yours to do the same. Always refer back to your functional goal, thinking about how the end-user will be interacting with your app.

The iPad is a highly visual medium so spend time making it pretty. What’s great about designing for that iPad is you don’t have to worry about cross-browser or cross-device compatibility. If it works on your iPad, it will probably work on everyone else’s.

Here are some quick aesthetical tips for the iPad:

• Create all your designs at 768px x 1024px — the native resolution of the iPad
• Remember that the iPad displays both in portrait and landscape mode
• Always note where you want scrolling to occur
• Don’t be afraid to use native iPad GUI elements (Find the PSD here)

A Cautionary Note Regarding iPad Resolution

One thing I noticed is that the native screen resolution (768 x 1024) appears smaller on your iPad than on your computer monitor. So keep in mind that the iPad resolution will look bigger on your computer monitor.

This presents some issues with sizing and you will quickly find experimenting with typography to be a pain in the rear.

My suggestion is to save your mock design images and open them up on your iPad photo viewer to get a feel for the layout and typography. This is not the most elegant solution, but it worked for me.

Know the Limitations

Never set boundaries when you’re brainstorming. That being said, you will be more productive in your endeavor if you have an idea of what is and what is not possible when developing for the iPad. I got frustrated many times, not realizing some of the limitations.

For your convenience, I have outlined a few of the main limitations below.

No Flash

I think this one is fairly obvious. With all the uproar recently, you should know by now that the iPad cannot display Flash objects. I don’t necessarily agree with this path, but the simple solution is to just not use it.

You can accomplish similar feats with HTML5 and CSS3.

No Mouse Cursor

This means that mouse events, such as mouseover and hover events, are not possible.

You may be able to find some workaround for this, but conveying how they work to your users might be difficult.

Scrollbars Don’t Act as Expected

Scrollbars are not displayed for scrollable divs with overflowing content.

Frames also have height/width issues.

In addition, scrolling requires two-finger gestures. (We’ll discuss this more fully later down the article.)

No CSS Fixed Positioning

HTML elements with the position:fixed CSS property will not show up correctly and are frustrating to control.

There are some quick fixes available for this (more on this later on).

Use Your Fingers

This is the fun part. The #1 difference between browsing on your computer or laptop and browsing on your iPad is that you get to use your fingers. There are ways to optimize your site for iPad use with a few simple yet powerful solutions.

Redirect Users Based on Device/Browser

You can add a few lines of JavaScript in your page’s <head> tags to redirect the user to your app if they are visiting your site with an iPad.

The JS code block below checks to see if the user agent is an iPad. If it is an iPad, the user is redirected to the app page.

<script type="text/javascript">
  if ( (navigator.userAgent.indexOf('iPad') != -1) ) {
    document.location = "http://www.bracketslash.com/app.php";
  }
</script>

Set the Size of the Viewport

The viewport is the rectangular area that determines how content is laid out and where text wraps on the page when viewed on iPad.

Your computer and iPad viewports are slightly different. Safari on the iPad has no windows, scrollbars, or resize buttons. The user browses with their fingers. Most of the touch gestures can be controlled with some manipulation of code.

To set the dimensions of the viewport, add the following meta markup inside your <head> tags:

<meta name="viewport" content="width=device-width" />

Different Style Sheets for Different Orientations

To use different style sheets for different orientations (landscape mode or portrait mode), just add the following media query in the <head> tags of your web page.

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Note: This is not a necessary component and can be kind of distracting for the user if the two style sheets are significantly different.

Control Your Touch Scrolling with iScroll

This is easily the single most useful bit of code that can help you control your web app. Created by Matteo Spinelli, iScroll is a project developed because the WebKit web browser engine (which is used on the iPhone, iPod, iPad, Android, and Palm Pre) does not provide a native way to scroll content inside a fixed width/height element.

This unfortunate situation prevents any web app to have a header and/or footer with a position:absolute CSS property, and a scrolling central area for contents.

The iScroll code base is extremely easy to work with. If you like iScroll, you may also be akin to these jQuery plugins: jQuery Swipe and JQTouch.

Use the "Add to Home Screen" Button

In the Apple Safari web browser, the user has the option to add your app to their Home screen. This simply adds an icon similar to how a native app looks. To customize this icon, you can link it in the <head> tags using the following code. To be safe, make sure your icon is at least 72pxx72px.

<link rel="apple-touch-icon" href="http://www.yoursite.com/your-apple-touch-icon.png" />

Take Advantage of HTML5 and CSS3

Many high-profile websites have adapted and redesigned their sites, calling themselves "iPad Ready."

In reality, the majority of these sites have simply rearranged their content to fit the iPad’s resolution and aspect ratio.

Personally, I don’t get the point. HTML5/CSS3 is the future and aims to improve the web experience for everyone.

Here are some simple things you can do to take advantage of the emerging standards:

• Use CSS3 gradients, font shadows, rounded boxes and borders — these are especially useful for menus and simple website designs.
• If you want to show videos, use an HTML5 video player instead of a Flash one (which obviously won’t work).
• Use HTML5 to create offline apps and store data offline.
• Tutorials for these kinds of functionalities are everywhere, and I made use of them when developing my iPad web app. Google them. Get creative.

Keep Moving Forward

Don’t get held back by irrelevant details. If one of your design functions or ideas is not working as intended, find alternate solutions to the problem.

Don’t try to stick to your plan so precisely that you lose sight of your functional goals.

If things don’t work as planned, find a creative alternative and move on. I am an incredibly meticulous designer, which can be both a good and a bad thing.

I found that not everything I planned worked, and I learned that I have to just let things go, figure out workarounds, and learn from my mistakes for my future iPad apps.

Spread Awareness

One of the major barriers for web apps is that they are not as popular as native apps.

There is no Apple App Store equivalents to help you get recognized — especially if you are creating something commercial.

Getting your app out there is infinitely more difficult if you are a no-name developer (like myself, *haha*).

Let as many people know your web app exists. If it’s good, it should do well.

Native iPad Apps versus iPad Web Apps

What is the difference between apps in the App Store and websites created specifically for the iPad?

Many argue that web apps are the future and will quickly outperform their native counterparts; this is because the openness of the web is more appealing than closed platforms.

I have noted some simple comparisons below to shed light on how powerful web apps can be.

Native iPad Apps

• Native Apps are faster: uses more of the iPad’s resources and capabilities.
• No need to search the web: one-stop shopping on the App Store.
• Users feel more comfortable: They know the app was made specifically for their device, not adapted using HTML5/CSS3.
• Easier to turn on and off: Apps are made to turn on/off without interruption or loss of data.
• More difficult to develop: requires knowledge of Objective-C and use of Apple SDK.
• Closed Platform: difficult to adapt for other devices like the Android platform.

iPad Web Apps

• Emerging coding standards: HTML5, CSS3, JavaScript are bringing incredible client-side functionality to the web; especially with local/offline storage.
• Tailor the site for any browser: switch between style sheets or redirect pages depending on which device or browser your user is operating. It is possible to make your app universal.
• Easy to develop: Use HTML, CSS and JavaScript to create iPad web apps instead of learning new languages. These are skills you already have.
• Steve Jobs can’t censor your web app: The web is an open platform — meaning that you are in control. No waiting to get approved by the App Store.
• Small market, not enough support: web apps need strength in numbers which means not only attracting users but developers as well.

Related Content

• How to Make an HTML5 iPhone App
• Getting Started with the iPhone SDK
• 10 iPhone Apps Every Web Designer Should Know About
• Related categories: Web Applications and Web Design

About the Author

Stephen Vescio is a 20 year-old business student and freelance designer. You can visit his personal site at stephenvescio.com. Check out his free iPad app at BracketSlash.com.

Advertise here with BSA

Twitter was founded in 2006 by Odeo (a podcasting company). It was first used as an internal service for Odeo employees, and later, it became public and then took off as its own company in 2007.

Today, Twitter is ranked in the top 50 websites on Alexa, and in February 2009, a blog post by Compete ranked Twitter as the third most used social networking site.

The original intention of Twitter was to announce to your friends and family, in 140 characters or less, what you were doing, as you were doing it. People would be updated all the time on the status of their friends.

Nowadays, people have found tons of different uses for this social media site that answers the question "What’s Happening?" 

I know many of you are already all over Twitter and are already familiar with its benefits as a professional working designer.

If you aren’t on Twitter yet, hopefully you’ll see why you need to join in the conversation and be a part of this social networking phenomenon. If you’re already on Twitter, I hope to share some tips with you that you may not have considered before. Here are 10 tips for using Twitter to help you network, find jobs, and/or build your business. 

1. Follow awesome designers and studios

They may not follow you back, but it gives you a good opportunity to join a conversation and get your name out there. Retweet their posts or comment on something they’ve said. They may also post valuable resources for you to check out. 

2. Use search.twitter.com to search for jobs or projects

People tweet "I’m looking for a web designer" or "I need help finding a good logo designer" frequently. Search often and you’ll be able to capitalize on those opportunities to land a client, or at the very least, spread the word that you’re a working designer and available for hire.

3. Help the community: answer fellow designers’ questions

Tons of other designers and developers ask questions about coding issues, program quirks, or client dilemmas and will be very grateful for the help you can provide. The next time they need help on a project or have too much work, they will hopefully think of you.

4. Share your design critiques with designers that ask for input

Network with other designers by commenting on the designs that they post. People generally love hearing what you think about their design (or else they wouldn’t have posted it on Twitter). This is a good way to connect with other designers and also showcase your own design tastes and expertise to your followers.

5. Post your newest projects and published websites

I love seeing what other designers are doing and enjoy it when designers post their newest projects. However, don’t spam your followers with tons of stuff you’ve done, keep it to one post to announce a new site being published or a new business card you’ve designed. Keep your tweets relevant and not (too) self-promotional, or else, you might find yourself losing many of your followers.

6. Tweet and discover new web resources

Post awesome articles and tutorials that you’ve found. I can’t possibly include every cool web design blog in my RSS reader (it’s already out of control) but I love reading the occasional cool post I see on Twitter from a blog I don’t subscribe to. Sometimes I find an awesome blog that I haven’t even heard of before! Twitter is a great way to trade information and knowledge.

7. Use #hashtags

Something I don’t utilize nearly enough, but is extremely valuable, is using hashtags to categorize and contextualize your tweets. It allows other people to find you on Twitter: someone clicks on a hashtag on their friends page to find similar content, and they land on your Twitter page. Voila – another connection has been made.

8. Find and follow people and businesses in your area

Design groups, design studios, and programmers are people you can find on Twitter. There are also many people near you, but outside of the design world that would be great to network with such as the chamber of commerce in your city or new businesses that need your services. You can use Twitter’s advanced search to find tweeple that live around your area.

9. Customize the design of your page

Create something that matches your blog or website and list the services you offer. You can use your Twitter background to display links to your other social media profiles. Customizing the look of your page goes a long way in terms of self-branding.

10. Build relationships

Creating relationships is the single most valuable part of Twitter in my opinion. It gives us the opportunity to network and socialize informally while sharing ideas and resources.

Join the conversation! Twitter may have started as a way to keep your friends and family updated on what you’re doing but it’s a valuable resource as a working professional these days.

Maybe you think that you don’t have time to get involved in another social networking site, but I think you can’t afford to miss out on the opportunities with Twitter.

Share some of your best Twitter tips in the comments below.

Related Content

• 35 Creative Twitter User Profile Designs
• 10 Features That Will Make Twitter Better
• 50 Beautiful & Unique Twitter Profile Designs
• Related categories: Web Applications and Project Management

About the Author

Shannon Noack is a designer in Arizona and the Creative Director of Snoack Studios. Designing is her passion in life and she loves to create websites, logos, print work, you name it. She also blogs regularly here and you can connect with her on Twitter as well.

Advertise here with BSA

Webapps–compared to their desktop counterparts–have the distinct advantage of being flexible in terms of the environment they have to run in; if you have a web browser and an internet connection, you’re good to go. This allows designers who work in a variety of locations, from office cubicles to the neighborhood coffee shop, to do what they need to do without being bound to a single spot.

Last week, we asked readers what they thought the best web application for designers is, and here we share the top five favorites that gained the most votes. The web applications you’ll see here aren’t all specifically for designers but, as you’ll soon see, it’s not surprising why designers love them.

5. FreshBooks

FreshBooks (coincidentally Six Revisions’ longest standing site sponsor) is a time-tracking and invoicing tool targeted towards freelancers. It’s perfect for project-based work, with the ability to keep your time logs, keep track of your expenses, create repeating invoices, and much, much more. FreshBooks comes in many flavors, and for those wanting to try before buying, the free version gives you all the features of the webapp (but is limited to only three clients). As a FreshBooker myself, I can’t say enough good things about this web application, only that it’s crucial for people who work on contractual jobs.

4. Google Analytics

Google Analytics is a free web application that tracks site statistics. This is a favorite tool amongst web designers for seeing how effective their web user interface designs are. It lets you create custom reports that you can PDF and ship off to your clients (you can use it to show the effectiveness of that recent redesign you did for them). I use Google Analytics on Six Revisions for traffic reporting, and it’s, without a doubt, the best web analytics out there – free or otherwise.

3. Basecamp

Basecamp is a project collaboration tool aimed mainly towards small-to-medium sized organizations. You can share and upload project files, create to-do lists, set milestones, participate in real-time collaboration (with Writeboard), and a lot more. I’ve been using Basecamp for roughly six months, and it’s made teamwork with co-workers and communication with clients a breeze.

2. DropBox

DropBox is a file syncing tool that’s fast, reliable, and very easy to set up. DropBox also has a web interface that allows you to manage, upload, delete, and organize your synced files. DropBox is free, allowing you to store 2GB of files (and you can get up to 5GB for referring people to join) – if you need more storage space, the $100/year is more than worth it, especially if you’re using it for work. DropBox is my personal favorite: it’s become an essential component to my work.

1. Kuler

Coming in at numero uno: Kuler, managing to garner nearly a third of the total votes, is a web application that lets you make, store, and share color schemes. It’s wonderful for remembering your favorite color combinations and getting color scheme inspiration for your design projects.

What’s your favorite webapp and why? Join the discussion in the comments.

Related Content

• 10 Useful Gadgets for Mobile Computing
• 10 Unusual Places to Get Design Inspiration
• 10 Ways to Cut Down Web Development Time
• Related categories: Web Applications and Web Design

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 PHP development. 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

As Twitter becomes the latest online craze, we look at some impressive Twitter profile designs that stand out from the micro-blogging site’s millions of users.

1. @pairadocsdesign

A variety of styles including the Polaroid and the name badge means that there is a design style you are inevitably going to like on this page.

2. @shirtpizza

The cartoon theme of this Twitter profile has appeal and really stands out from the crowd, while the choice of avatar picture reveals the logo and a nice complement to the user’s name.

3. @BWphoto

A very colorful Twitter background (despite its name), with a comic book effect.

4. @ramesstudios

Clever how the photographed person in this page is looking towards the Twitter main content area, isn’t it?

5. @Pudny

This is a really interesting Twitter page where a picture of him has actually been placed into a screen-dumped picture of Adobe Photoshop, clever!

6. @anousone

The rustic design really allows the location of this user to hit home, as well as providing a lovely advertisement for the Grand Canyon.

7. @kimdeanart

 Contact details, a brief description, a testimonial and then full artwork to demonstrate the artist’s skills on this Twitter page.

8. @duboutdesyeux

The Twitter page may be in French, but the picture of the woman in the background speaks for itself.

9. @sitepointdotcom

This Twitter profile by SitePoint has it made with a tempting peek at the homepage of the actual site whilst giving some very small clues as to what the purpose of the actual Twitter account is for.

10. @mj12982

An excellent background where doodles are prominent and the contact details are sketched sideways, making for a unique and memorable design.

11. @SutterGroup

Very nice use of the periodic table in their design as they try to relate it back to what they do.

12. @dpencilpusher

Nothing punctuates a pencil pusher’s point than a background that is surrounded by pencil doodles (in my opinion).

13. @scottclark

Very reminiscent of a notice board, this motif gives the indication that the user is a wanted man.

14. @chrisspooner

This design is an excellent example of a bird’s eye view of a desk.

15. @canvascubed

A subtle bit of canvas to complement what the Twitter page is all about.

16. @travisbme

It may be loud, but the natural motif seen here is an excellent complement to the color of the text seen in the central box.

17. @divvoted

A nice bit of illustration never hurts, right?

18. @stevenpitts

Photoshop can do wonders to bring together an eccentric design that is more than likely to get the user’s attention.

19. @ithinkmedia

Setting the decorum as well as informing the user of all of the information they would need to decide whether or not their services could be of use.

20. @weheart

A nice cartoon can achieve a variety of atmospheres, even somber ones. This Twitter page has a brilliant use of color, which really sets the tone.

21. @starswelove

A mix of cartoon, words and real life makes this Twitter page a must see, even if you are not too keen on the context of the Twitter page itself.

22. @elitistsnob

Sometimes simple can make more of an impact than a design that is in your face. Here, you can rest assured that simple is the case, with a nice logo at the top in the contrasting darkness.

23. @djambazov

With a stack of books and a discreet picture to boot, this user’s Twitter name might be a nightmare to type, but it is worth it.

24. @desizntech

A very nice bright and colorful background with complementing colored hyperlinks.

25. @niedson

High-impact and bright colors, and a nice sidebar content area is what makes this profile page stand out from the crowd.

26. @webb_art

A great demonstration of how a sidebar content can explain what the company does. The logos towards the right are an exemplary and genius way of showing what some of the tweets talk about.

27. @TheEllipseCow

A nice background and good use of the left-hand space for contact information makes this a beautiful and well-designed Twitter profile page.

28. @G_Obieta

A weird style to explain, but when you look at it more closely, you will know what’s going on.

29. @juanmanuelm

Juan Manuel’s background illustration makes for a remarkable Twitter profile.

30. @Go_Media

Not only does it have the logo and a nice bit of color, but a bit of a dark side to counterbalance it.

31. @design_junkies

Nice use of color and words in this page to make it stand out from the crowd and capture the imagination of followers.

32. @mimobot

The white faded concept really does work with this Twitter page, something that other pages might struggle to pull off correctly.

33. @DesignerDepot

If you like a busy (but high-impact) design, this could be the type of background that you would consider using in your own Twitter profile.

34. @clovermeadow

A nicely designed explanation of the alias of Clover Meadow, as well as random additions like a quote and a splash of paint really give this page a lot of character.

35. @katchapman

A beautifully designed page that should fit you right in at home.

36. @StudentUniverse

Another case of the main Twitter content area overlapping key text in the design when your monitor is small scale, but the silhouetted skyline really is quite clever on this page.

37. @tonychester

A unique and grunge-themed profile page that results in a simplistic and memorable design.

38. @happytoaster

Repetition can be very effective in a mind-numbing way. A way to make it even more interesting is by adding a few designs out of place from the others. The difference brings the user in and draws attention to the site.

39. @jeanneleez

A very nice mix of different artistic styles, including the art from the influential pop art era. With a discreet name mention, this Twitter profile page is very aesthetically pleasing.

40. @geeklaur

A mix of tessellating design and an elusive figure is guaranteed to ensure that you are intrigued beyond words.

41. @JacobIreland

An interesting take for this graphic designer’s web page. Not only has he designed himself a good-looking background, but he has incorporated his name into it, too!

42. @noluckneeded

No luck is certainly needed with this page that has a variety of dice and cards on it to keep you interested. Even nicer are the cards that are placed as an overlay into the blue background.

43. @gennefer

Gennefer proves that if you want to make a point very nicely with a Twitter background, using a variety of texts will not disappoint.

44. @everywheretrip

This guy has a variety of different design influences to punctuate his point that he is lucky enough to travel the world and visit a variety of places.

45. @hemeon

Sketchy effects really do work well with this site.

46. @dimsis

Is it computerized, is it animated, is it a cartoon? There is an absolute mix of odd art styles and media types on this Twitter background that will intrigue you for a nice period of time.

47. @rizalrenaldi

A variety of color with a welcoming message and the strips are very pleasing to the eye, too. What more could you possibly want?

48. @snipeyhead

This Twitter profile looks like a retro throwback with dog tags, Polaroid pictures, and a mix tape.

49. @napwarden

The silhouetted skyline and the superhero comic book effect really doesn’t disappoint. The URLs that they want followers to pay attention to are even in an Adventurer font!

50. @imaaronmoody

And last but not least, the 50th Twitter page comes from a fellow graphic designer that uses a variety of things to express his mood. In addition, he used the background design for the opportunity to plug his website at the top left hand corner.

What do you think?

What do you think about these designs? How important is a good Twitter background (Jacob’s Twitter profile goes the opposite way where he’s stripped down the design to the bare minimum). Let us know in the comments.

Related Content

• 10 Features That Will Make Twitter Better
• 11 Excellent Twitter Improvement Ideas
• 16 Genuine, Authentic Designers on Twitter
• Related categories: User Interface and Web Design

About the Author

John Urban is a sophmore at UCLA and currently majoring in computer science. He is a writer for an online magazine StyleCeo, which deals with fashion. In his spare time, he enjoys sports, being with his girl, or just doing some freelance work. If you like his work on here and you’d like for him to work as a freelancer for you, you can contact him on Twitter.

Advertise here with BSA

The amount of site features that you have can take a dire toll on your web server, making your site sluggish and more vulnerable to becoming offline because system resources have been expended.

To alleviate the work that your web server is doing, it’s a good idea to offload certain site features to share the burden. In this article, you’ll read about six site features you can easily offload, and the web services that you can use for them.

1. RSS feeds

Serving and managing your RSS feeds yourself can be a big burden on your server especially when you have many subscribers requesting your feed. What’s more is that there are aggregators such as AllTop and Technorati that automatically request your feeds at regular intervals for their own use, further adding to the strain on your server. You can easily offload your feeds using one of the following services.

FeedBurner is a feature-packed RSS feed manager. It has various options that will enable you to monitor, manage, analyze, and monetize your RSS feed. Recently bought by Google, it experienced a few issues during the transition but it’s now back to its full capacity, and then some.

Feedity is perfect for websites that don’t use a content management system (i.e. static HTML pages). All you have to do is type in the URL of the web pages you’d like to create RSS feeds for, and it will monitor it. Whenever there’s a page update, it will push it to people’s RSS feed readers. If the automatic feed it generates isn’t accurate, it has a Refine feature that let’s you select specific HTML elements in your web pages to watch for changes.

Page2RSS is a simple web service that keeps an eye on a web page for changes and notifies you via RSS feed. You can use this on your front page to let users know that your site has been updated. Check out an example feed using Google’s front page. The results can be clunky at times and doesn’t compare well to a real RSS feed service, but this is a great option for when you’re in a pinch.

2. Site search

Site search can tax your server because it requires server-side processes that usually involve database queries. Additionally, by using search API’s of third-party services, you take advantage not only of their infrastructure, but also their more accurate and optimized search algorithms. Check out these two options by leading information search companies.

Google AJAX Search API allows developers to create mashup’s and applications with Google’s data. Don’t want to put a lot of work into creating your site search? Well that’s alright, they have a wizard-like tool that will generate the code for you to use on your own site so all you’ll need to know is where to place the code.

Yahoo! Search BOSS is similar to Google’s Search API, but the display of search results can be more integrated to your site’s design. Additionally, unlike Google’s search results, Yahoo! Search BOSS doesn’t display any advertisements. You can see a live implementation of Search BOSS on the WordPress.org site.

3. Serving popular JavaScript libraries

By offloading common JavaScript libraries such as jQuery, MooTools, and Prototype, you stand to gain a few things. First, it reduces the amount of work your server has to perform in order to send these libraries to users. Secondly, there’s a bigger chance that the library is already in the user’s cache because other sites they’ve visited previously may have already served them the file through the third-party site, increasing your page response times by taking advantage of a primed cache.

Google AJAX Libraries API can serve popular JavaScript libraries through Google’s content distribution network (CDN). This means that it will serve the libraries from a geolocation closest to the user requesting it from your site, which results in speed improvements on the user’s end.

4. Managing and processing web forms

If you use web forms on your website (i.e. contact forms), you can offload the processing and management of them to an external service. By doing so, you alleviate some tasks that your server has to perform in order to receive and process web form submissions. This can include monitoring for spam submissions, possibly administering and evaluating Captcha challenges, and utilizing your email server for sending email notifications when a web form is submitted.

Not only do specialized web form applications help with your server’s burden, they also have heartily featured administration interfaces for creating and organizing your web forms. The following are third-party web form services to check out if you’re looking to offload your forms.

Wufoo is an HTML form builder that is a cinch to set up and manage. They have various packages ranging from $0 to $200 dollars. The free version allows you to have 3 web forms with a maximum of 10 input fields each – more than enough for simple contact forms and questionnaires.

FormSpring is a robust and fully featured web form creation application. The free version gives you 3 web forms and 10 submissions a month.

FormSite gives you a free web form service that can have up to 5 web forms, 50 input fields per form, and 100 submissions a month. Additionally, you’ll be able to take in file attachments (such as images and other documents) – you get 50 MB of file space off the free plan.

Icebrrg makes web forms "chillingly simple". For $0 dollars, you get up to 3 forms and 100 submissions per month.

5. Running Polls and Surveys

If you frequently poll your users, it’s a great idea to offload this site feature to a third-party service for the same reason as with offloading your web forms. Here are a few sites to peruse for your polling and surveying needs.

Vizu is a free web polling service that can be easily integrated into popular content management systems such as WordPress, Blogger, and Typepad.

PollDaddy offers free polling and surveying services for your site. You can create and administer unlimited polls a month, as well as take in 100 surveys. See their pricing table for comparisons between their other plans.

SurveyMonkey.com is a popular web service for administering surveys. It has a robust administration interface that provides you utmost control over the design of your surveys. It’s used by popular sites like Digg, a testament to the quality of their service.

6. Captcha challenges

Captchas can help prevent spam submissions by providing would-be web form submitters a visual challenge that they must solve. Having your own Captcha system on your web server can be very demanding: not only does your server have to process the serving and evaluation of Captchas, but it has to serve the Captcha images as well. Some Captcha services to check out are listed below.

reCAPTCHA is a free captcha service that serves a dual purpose of having users digitize books and newspapers. Users are shown images of words from print material, and when they solve it, they help verify and digitize the word.

captchas.net is free, even for commercial usage. If you can run PHP, ASP, Perl, Python, JSP, or Ruby on Rails on your web server, then you’ve got the only requirement that this service needs.

OpenCaptcha has a three-step copy-and-paste installation process that can get you using Captchas in no time.

Do you have any experiences (good or bad) to share regarding the offloading of site features? What other site features can you offload? Participate in the discussion down in the comments.

Related Content

• 12 Excellent Free Tools for Monitoring Your Site’s Uptime
• 8 Excellent Tools for Optimizing Your Images
• 10 Excellent Feedback Tools for Web Designers
• Related categories: Tools and Web Applications

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in distance-learning education, front-end development, and web accessibility. 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

Selecting the perfect domain name for your website is the most important, and oftentimes hardest, step in establishing a web presence. There are plenty of tools out there that can help you ease the burden of checking available domains and suggesting similar names that are related to your searches.

In this article, you’ll read about 12 neat web tools that will lend you a hand in finding and choosing domain names. You’ll find a variety of search and suggestion tools that have an assortment of features so that, hopefully, you’ll discover a few favorites.

1. Domainr

Nowadays, it’s difficult to find a domain name that end with the popular .com, .net, and .org TLD‘s. Domainr is an innovative web tool that helps you explore other TLD’s that have made popular websites like last.fm and del.icio.us stand out from the crowd. Of course, searches will also include popular top-level domains that are available.

2. Dot-o-mator

Dot-o-mator is a web tool that suggests site names based on prefixes and suffixes that you’ve entered (keywords). Alternatively, you can use a category of prefixes (like "Tech" or "Games") and suffixes (like "Hardware" or "Web 2.0 words") to generate suggested site names for you. It’s a helpful tool for, at the very least, obtaining inspiration for a site name.

They also have a fun tool called Web 2.0 Domain Name Generator that generates "Web 2.0" site names like "Yakidoo" or "Zoompulse".

3. BustAName

BustAName is a robust and feature-packed domain finder that uses linguistic data to help you search domains. BustAName allows you to save and manage/organize your searches for later use. It has a "List of Words" feature that advise you of similar words to your search – which you can then organize inside folders.

Available domains that are returned can be sorted in a number of ways such as "by quality (readability)" or "by length" for easier viewing. Though the web tool is very intuitive, the creators have a video tutorial on how to utilize BustAName.

4. Domain Tools

Domain Tools is a set of domain name search engines that will help you uncover relevant information about certain domain names. They have a "Whois" search that reveals records about the party who registered the domain, a "Suggestions" search to help you find similar domain names, a "Domain Search" which shows you what TLDs of a domain name are available, and domain names that are "For Sale" or "At Auction".

5. Domize

Domize is a fast, Ajax-based search engine that you can use to rapidly check the availability of domains. Domize has a widget that you can install on your website to provide a domain search engine to your visitors. Domize also has an iPhone app – because domain name inspiration can hit you at anytime (hopefully you have your iPhone with you when it happens).

6. squurl

squurl is another fast Ajax-based domain search engine. It has a "Suggestions" feature to help you discover similar domains to the ones you’ve typed.

7. DomainsBot

DomainsBot is a domain search engine that has an "Advanced" search feature so that you can conduct a more customized and refined search. For example, you can set the maximum domain character length to eliminate lengthy domain names from the results or exclude domain results that have a hyphen (-).

8. dnScoop

dnScoop tries to estimate the value of a particular domain based on several statistics such as site traffic, links pointing to the domain, and other factors. This will help you gain some insight on the value of a particular domain name in case the name you really want is "for sale" and you want to see if the asking price is fair, or to make an offer to a site owner that owns the domain you really want.

9. StuckDomains

StuckDomains is a database of expired domain names that previous owners have not renewed. This can be an opportunity to find a domain name that doesn’t involve odd names like "fujiyakuku.com".

10. Nameboy

Nameboy is a popular domain name generator. This straightforward web tool asks for a "Primary Word" and "Secondary Word" that describe the topic of your website, and based on your input, it suggests possible domain names.

For example, typing in "web" as the Primary Word and "superman" as the Secondary Word returned results such as webhero, supeweb and supermanweb. There’s a "Rhyme" option that tries to suggest domain names that rhyme with the search phrases, but the feature didn’t seem to work on the above example.

11. dyyo.com

It’s common practice to keep domain names as short as possible so that it can be quickly typed and also so that they’re easier to remember. dyyo.com specializes in helping you find 4-letter domain names to keep your URLs terse.

12. Ajax Whois

Ajax Whois is a simple Ajax-based domain search that makes domain-name-hunting effortless and rapid. To make your searches even faster, they have a set of useful keyboard shortcuts to satisfy the power user in you.

Got moar?

If you have a tool that you absolutely love that wasn’t on the list – please share it with us in the comments, we’d love to hear your thoughts!

Related content

• 10 Promising Free Web Analytics Tools
• 15 Tools for Monitoring a Website’s Popularity
• 6 Tools to Help You Analyze a Web Host

Advertise here with BSA

Twitter‘s popularity has skyrocketed in the recent months. Usage statistics states that most people who use Twitter interact with the application via the web rather than a third-party client such as TweetDeck or twitterfeed.

Twitter’s web interface is simple and intuitive but lacks a few features that can make it much better. In this article, you’ll read about 10 excellent user interface features that can enhance the Twitter web experience.

1. Enable grouping of friends and followers

Figure 1 shows tabs that you can use to quickly see tweets in a particular group.

Twitter’s increasing popularity has gotten many people on board and using the web application. With the growing number of active users comes the need for following more people.

The ability to create groups (or categories) of Twitter users that you follow can reduce the noise in your Twitter feed and can help you immediately see updates from particular groups of users.

For example, having a group for "co-workers" or "local tweeters" can help you quickly see what your co-workers are saying or find up-to-the-minute information on local events such as traffic accidents.

2. Auto Complete in Tweets

Figure 2 shows an auto complete dialog box appears when you type the @ symbol.

Auto complete is an interaction design pattern that involves displaying a list of suggestions as the user types in text. Auto complete can speed up the process of sending a tweet directed to a particular user using the @username format.

It will also help in times where you’re having trouble spelling someone’s username.

Another application of the auto complete feature is for suggesting #hashtags (keywords associated with a tweet) to make keyword-tagging of tweets easier.

3. Text links in tweets

With a 140 character limit, it’s often difficult to have links in a tweet without robbing yourself out of precious characters. By allowing users to tweet hyperlinked text, not only will it give them a little bit more room for including additional characters, but will also make Twitter feeds look cleaner.

4. Tweets-threading

Twitter is a great source of information and is a wonderful forum for discussing various topics. Unfortunately, the current user interface doesn’t allow you to easily view a conversation between two or more people.

Figure 3 show how threaded comments could look.

Coupled with the "reply to" feature in the current user interface, threaded tweets can give users the chance to participate in (or follow along with) conversations taking place in several Twitter feeds.

Threaded tweets can also serve as a means for people to find other Twitter users that are interested in similar subjects of conversation.

5. Allow Tweets directed to a group of people ("group tweet")

Figure 4 shows a possible syntax for tweets directed to a group of users using a double @ synax.

With companies and communities joining in on the fun, the ability to tweet to a group of Twitter users offers a convenient way of specifically targeting a set of people. For example, if you wanted to tweet to your co-workers, the syntax could be:

@@friends I'll be a little late for our lunch date, start ordering without me.

The double @ serves to differentiate a tweet directed to a single user from one that’s directed to a group of users.

6. Display meta data through hover tooltips

A tooltip is an effective graphical user interface element that allows users to view more information when they hover or click on a text or object of interest without having to leave the current web page. They enable information-gathering with fewer clicks and fewer pages to visit.

One way tooltips can be helpful is in seeing the bio information of a Twitter user when you hover over their username on your Twitter feed. If you see a username mentioned in an interesting Twitter update, simply hover over the name to see more information about the user that was mentioned.

7. Use the sidebar more effectively to display information

Figure 5 shows a "Recent @Replies" and "Popular #hashtags" section on the side bar.

Twitter can utilize the right sidebar more effectively by showing relevant information and statistics. For example, a "Most Recent Replies" section or a "Most Used #hashtags" section can be very helpful in showcasing the latest activities and the hottest topics.

8. Add a page that displays tweets mentioning your username

Twitter users (me included) like seeing their names mentioned. Currently, only @replies (tweets that begin with @username) can be seen in the @Replies page. A nice optional feature would be to have a page that lists tweets where your username is mentioned or where a particular tweet of yours is re-tweeted (example: "RT @username").

A less self-centered benefit for this feature is the opportunity to find people who are interested in what you have to say, enough that they update their own Twitter feed with a tweet of yours, or to see what types of your tweets are popular amongst people who follow you.

9. Highlight specific users, deemphasize others in feed

Figure 6 shows the first tweet as being highlighted, and the second tweet being deemphasized. The third tweet is how tweets normally look like in the current interface.

Users who follow many people run into the trouble of Twitter feed overload where there’s just too much going on and too many tweets to read. The ability to mark favorite Twitter users, as well as deemphasize users that you don’t care much about (but still want to follow for some reason), can give users better visual queues on what to pay attention to first when perusing one’s Twitter feed.

10. Add a Built-in URL shortener

With Twitter’s current user interface, hyperlinks are counted towards your 140 character count limit even if it gets reduced in length by a URL-shortening service like TinyURL.com after you hit the "Update" button.

One way to allow users to enter more text – without having to go to another website just to shorten URL’s – is to have a built-in URL-shortening feature. This would not only save user’s some time, but also eliminates the need to rely on other websites to perform an action that should really be handled within the system.

Got more ideas?

If you have more ideas on how Twitter’s user interface can be improved, please contribute to the discussion in the comments.

Related content

• 20 Websites to Help You Master User Interface Design
• 10 Tools for Evaluating Web Design Accessibility
• 7 Incredibly Useful Tools for Evaluating a Web Design