We all love our smartphones and tablets, but sometimes there’s only so much you can do with the single screen view and limited screen size. Wouldn’t it be great to be able to manage all your data on your Android device like you could on the laptop? With AirDroid, you can.

AirDroid lets you connect your Android device with a desktop PC or laptop where you can then access files, send/recieve SMS, install/uninstall apps, and manage bulks of data in your Android smartphone or tablet. Oh, and it lets you do this wirelessly.

Getting started with AirDroid

In order to begin using AirDroid, you must ensure your desktop PC or laptop is on the same (wireless) network as your Android device. This is to link up your mobile device with your desktop PC or laptop.

On your Android device, go to Google Play and download and install AirDroid. Run the app.

On your desktop PC or laptop, navigate to web.airdroid.com or key in the IP address shown on your Android device.

Login to AirDroid

You can login by scanning the QR code or punching in a 6-digit code.

To enter via QR Code scan: tap the camera button in the AirDroid app. Scan the QR code shown on your browser.

To enter via passcode: input the 6-digit passcode you see on your Android device onto your web browser.

Once you have successfully logged in, you’ll see icons, and other relevant information about your device. Your devices are now connected. Let’s get to work.

What You Can Do With AirDroid

After you have logged in, you can click on any of the icons to start managing and controlling your Android device from your desktop PC.

Here is the list of icons and a short description of what they do:

• Messages – Create, receive or reply SMS messages.
• Music – Manage and upload music content to your device.
• Contacts – Manage and edit contact details.
• Apps – Manage apps installed on your device or install an app with an APK file from your desktop.
• Ringtones – Manage and upload phone, notification and alarm ringtones.
• Frequent Contacts – Shows contacts you frequently communicate with.
• Files – File explorer similar to exploring files when your device is plugged into your computer.
• Videos – Manage, view and upload video files.
• Screenshot – Take screenshots of your Android device (rooted devices only).
• Call Logs – View or delete details of incoming, outgoing or missed calls.
• Photos – Manage and upload photos on your Android device.

AirDroid Browser ‘Widgets’

There are more things you can do with widgets found on your browser, widgets like the Clipboard and URL Opener, and the Search Bar.

The clipboard allows you to control the clipboard of your device. This is good for transferring a long string of text or digits you may want to transfer from your computer to your device.

The URL opener opens the copied link on the default browser of your Android device.

And lastly, the Search Bar lets you look for apps on the Play Store or on Quixey.

There are also 5 buttons on the right of the search bar which allow you to:

1. Enable "multiple desktops" for better multitasking (see below)
2. Compose a text message
3. Install apps
4. Upload files
5. Return to the AirDroid main page.

Once you’re done using AirDroid, you can tap the Disconnect button on your device and quit the app.

Related posts:

1. 20 Essential Apps For Your Android Phone
2. How to Send / Receive SMS in Chrome Without A Phone [Android]
3. How To Turn Android Device into Keyboard And Mouse
4. Keeping Your Private Photos/Videos Hidden on Android [Quicktip]

One of the new features in HTML5 that attracted me is the native front-end editor. This feature is commonly applied in Content Management Systems to edit content directly from the browser and is usually built fully with JavaScript and AJAX. HTML5 comes to make the process a little easier using contenteditable attribute.

What it does

When applied to any element, this attribute will allow us to edit the content in it, let’s see the example below:

<article id="content1" contenteditable="true">  	<p>Cookie muffin croissant. Faworki danish biscuit. Jujubes powder cookie cake   	biscuit halvah halvah. Biscuit gummies jelly biscuit.</p>    	<p>Sweet roll tiramisu chocolate bar sugar plum caramels tootsie roll caramels.  	Chocolate cake wypas cotton candy icing. Applicake sesame snaps liquorice pastry croissant   	caramels fruitcake gingerbread biscuit. Donut toffee candy canes.</p>  </article>  

In this example, we’ve added contenteditable attribute and set it true so the content becomes editable. There are two other values that can be added for this attribute;

• false which does the opposite: the content will not be editable
• inherit; it will turn the content editable when the direct parent is editable as well.

• View Demo

If you have checked out the demo above, you can see that the content can be edited right from the browsers. However it should be noted that this element does not cover the storing of the changes we made, so when you refresh the page after you’ve made the change, the content will revert.

How to Save the Changes

Saving changes depends on where we will store the data; commonly, it will be saved in a database. But since we do not have database access, in this tutorial, we are going to show you how to save the changes in localStorage. To do so, we will also use a bit of jQuery to make the code simpler. I recommended you take a look at The Past, Present & Future of Local Storage for Web Applications as further reference.

First of all, let’s add a button next to our content.

  <article id="content2" contenteditable="true">  	<p>Sweet roll tiramisu chocolate bar sugar plum caramels tootsie roll caramels. Chocolate cake wypas cotton candy icing. Applicake sesame snaps liquorice pastry croissant caramels fruitcake gingerbread biscuit. Donut toffee candy canes.</p>  </article>    <button id="save">Save Changes</button>  

The idea here is that we will store the changes once the button is clicked. So, let’s set this event through the script;

  var theContent = $('#content2');    $('#save').on('click', function(){  	var editedContent 	= theContent.html();  	localStorage.newContent = editedContent;  });  

This code will create a new key in localStorage containing the last change made in the content. We can use the Firebug or Developer Tools to clarify whether the data has been successfully stored or not, but make sure you hit the button. For Firefox users, go to the DOM panel and search for localStorage. In Chrome as well as Safari, we can see it under the ‘Resources’ tab.

We can then retrieve this data to update the content, as follows;

  if(localStorage.getItem('newContent')) {  	theContent.html(localStorage.getItem('newContent'));  }  

The code above will identify the item newContent from the localStorage and if it exists, it will pass the value to the selected element, in this case #content2. At this point, when we refresh the page, we should still see the change we made.

• View Demo
• Download Source

Final Thought

In the old days, adding the front-end editor feature as we had demonstrated, can take hours or perhaps even weeks. Today, it takes only a second with this attribute, contenteditable.

And, according to caniuse.com, this attribute is already supported, (surprisingly) in IE7+ and (unsurprisingly) in other browsers as follow: Firefox 12, Chrome 20, Safari 5.1 and Opera 12. That means we can use this element with peace of mind without having to setup fallbacsk for older browsers.

Related posts:

1. A Look into: HTML5 Placeholder Attribute
2. A Look into: CSS3 Negation (:NOT) Selector
3. CSS3 Attribute Selector: Targeting the File Type
4. HTML5 Tutorial: Login Page with HTML5 Forms

Editor’s note: This is a contributed article by Lakshmi Harikumar who anchors the content marketing efforts of MobStac Inc, an HTML5-enabled mobile cloud publishing platform that seamlessly integrates with your existing website and makes your content accessible to mobile and tablet devices through mobile sites and apps.

The tablet arena, which was once solely dominated by the Apple’s iPad, is now booming with a new entrant every day. The Google Nexus 7, Amazon Kindle, Microsoft Surface, and a host of other tablet devices that have entered the market are pushing marketers to think beyond the PC website and develop a stand-alone tablet strategy – or, at a minimum, a tablet-friendly website.

Are tablets a replacement for smartphones? The short answer is no. In fact, a recent comScore report clearly reveals that one in four smartphone owners also used a tablet. Moreover, there are some clear differences in the way people use these two devices. While some of your mobile web strategies may work for tablet users, your tablet readers have particular needs that require special consideration.

More On: Responsive Web Layouts For Mobile Screens: Intro, Tips And Examples

Building for the Tablet

Accessing content and information seems to be the top-most activity of tablet owners across the world, says a study by the Online Publishers Association. Content consumption included watching videos, followed by reading news. So, what should you, as a content marketer or publisher, be doing to woo your tablet readers?

Tablet readers are used to engaging with a myriad of apps, which are built with rich graphics and highly detailed visuals. Hence, tablet readers expect the same lean-back, app-like reading experience they are used to seeing on their desktop browsers.

Scroll is passé; swipe is in

The only way to engage your ever-growing tablet visitors is by thinking beyond PC website norms i.e. the vertical scroll formats and layouts, and to start building a more personal, interactive website. Tablet readers are used to gestures like swiping and flicking and prefer these to the older "scroll and click" way of navigating sites.

Take advantage of HTML5 and CSS3 to display content in a paginated, well-formatted layout that emulates a printed magazine and give readers the experience of flipping the pages of their favorite magazines.

Check out our HTML5/CSS3 Tutorial Series

Touch-friendly Websites

Every tablet on the market today works with a touch interface, which has redefined the very idea of how we interact with personal computers. For optimal reading experience on tablets, it’s as simple as placing the minimum text size at 14 pixels. But what about user interfaces especially when it comes to human input?

It’s in the Fingers

While PC websites load on a screen that is placed at a certain distance from the eye accessible with the mouse via a cursor, tablets are designed to be held in hand and to accept input from the user’s fingers.

Increase text padding so that there is quite a bit of an area around hyperlinked text that can be clicked even by large fingers. Also increase line-spacing between sentences so that there is no clash between hyperlinked texts, form fields or dropdown menus. Remove hover events but keep the behaviors and controls intuitive, or at least predictable enough so that users need not relearn how to navigate your site.

We recommend you comply with Apple’s iOS Human Interface Guidelines when building a tablet-friendly website.

Avoid Flashy elements

With the iPad still the leader of the pack in the tablet market, it’s still safe to not build for Flash. However, you can create a betterapp-like experience for your readers on their tablet browsers using HTML5. Use less of JavaScript-based animations to keep your tablet website fast and accessible across all tablet devices.

Orientation matters

Your tablet visitor can view your website in landscape or portrait orientation; so make sure your tablet website’s content rearranges itself automatically to fit both these orientations. See 30 Responsive Portfolios For Your Inspiration for an idea of how your content needs to rearrange itself to suit different screen sizes and orientations.

And for further reading, take a look at:

• Mobile Web Design: 10 Tips To Better Usability
• 30 Useful Responsive Web Design Tutorials
• 50 Useful Responsive Web Design Tools For Designers

Lastly, always use images that are of very high resolution, or make sure your images resize for different orientations, so that users get the full picture. The 16:9 aspect ratio works well with most tablets.

Wrap Up

When building a tablet-friendly website, think beyond PC websites and take personal interaction a step further. Rethink and rebuild your websites for a world where tablets are first.

Related posts:

1. Tablet Computers: Fad or Future?
2. 5 Services to Convert Websites For Mobile Devices
3. How to Remotely Access Mac From Your Tablet
4. 9 Ideas for Building Great Websites With Less