Archive for the ‘Mobile Development’ Category

HTML5/CSS3 web applications have rapidly meshed into mainstream web design. Apple’s iOS App Store requires moderation before your app can be listed. This helps to remove poor-quality submissions but also stifles innovation by other means.

If you want to build a mobile app but don’t want to go through all the bureaucratic Apple guidelines, why not create a mobile webapp instead? These resources can help you get started building an iOS-styled web application interface. Most of these tools are built with CSS3 while others might utilize JavaScript libraries. But any framework should prove invaluable when building your own mobile web application.

Read the rest of this entry »

When developing with Xcode and Objective-C, it is usually hard and time-consuming to create animations.

Canvas is a project that makes adding good-looking animations easy for iOS apps.

Canvas For iOS

With almost no coding, effects like fade, zoom in/out, slide, bounce, pop, shake and more are available for use.

The project is not only about animations but currently comes with a “custom font” component and plans to add ones like parallax, sticky headers and various others.

Native mobile apps usually work faster, smoother and these result in a better user experience.

And, web designers/developers always look for new ways to catch this performance with web technologies.

Ionic, a front-end framework, a helps building native-like mobile apps with HTML5, CSS3 and JavaScript.

Ionic Front-end Framework

It is not a replacement for PhoneGap or a JavaScript framework but the focus is on the UI interactions and design.

The framework ships with SASS and various AngularJS extensions (optional) and many components like buttons, toggle, header/footer, tab bar and more.

Ionic is well-documented with tutorials and examples to start with.

Sometimes, we need to take environment-specific actions while working on web projects.

Device.js is a tiny JavaScript library that simplifies writing conditional CSS or JavaScript that is based on the platform, operating system or browser.


The library detects them and adds specific classes to the <html> element, just like <html lang="en" class="android tablet landscape">.

But that’s not all. Device.js has JavaScript methods to detect them too. And there is support for all the major operating systems + browsers.

When designing for mobile, transferring the work from desktop to the mobile device for previewing it is usually time-consuming.

Skala Preview is a free Mac application with free iOS and Android apps that makes this process a joy.

The application instantly sends lossless and colour-accurate previews to mobile and they can be zoomed, tested for color blindness and viewed in any orientation.

Skala Preview

For Photoshop CS5+ users, previews can be delivered on each edit automatically and, for others, they can be sent via the clipboard or by dragging files to its dock icon or window.

Also, Skala Preview supports any number of devices being connected at the same time.