Connect With WRD
feed via e-mail
feed via e-mail

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.

Device.js

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.

Clank is a free and open source HTML-CSS framework for easily prototyping native mobile or tablet apps.

It focuses on providing a consistent UI “without the the concern of mimicking a specific OS”.

The framework is component-based so that we can pick and use only the needed parts. And these components include buttons, forms, sliders, toggles and much more.

Clank HTML Framework

SCSS is used for styling and the layout can be skinned with ease by changing several variables.

There are also various “device wraps” bundled (iPhone, Nexus, iPad..) to quickly present the output in a realistic design.

While creating a “demo for a product” or presentations to be displayed on a touch-enabled device, visualizing gestures help a lot to better understand the user actions.

Precomposed Touch Gestures is a set of gestures that are packed as raw Quicktime animations.

They can be easily used with a video editor or Photoshop and inserted transparently to a demo/presentation.

The resource is not 100% free, it can be downloaded in exchange of a tweet or purchased for a small fee.

Precomposed Touch Gestures

When planning the layout of a web or mobile project, wireframing helps a lot to see and discuss the thoughts visually.

For anyone who is about to develop a mobile app for iOS7, the free wireframing kit that Blake Perdue created will be a huge time-saver.

The kit is for Adobe Illustrator and includes most of the common UI elements for the operating system.

iOS7 Wireframe Kit

Pixate is a free platform for creating the user interface of native mobile apps with CSS.

It is actually a graphics engine that transforms CSS into scalable graphics, bitmap effects and more.

The app can be built with any tool/language (Objective-C, Titanium, etc.) and Pixate will work with all of them.

Pixate

CSS used can be loaded  locally or remotely which is great for totally customizing the look and feel by updating the CSS and not updating the app itself.

Pixate is currently iOS-only but Android support (where the same code could be used for both platforms) will be available soon.

Once, we were discussing whether websites needed a mobile version or “which sites needed mobile versions”.

Today, it is clear that every site needs to have a mobile-optimized interface that will improve the experience of mobile visitors as internet is being consumed more and more on mobile.

GinWiz (which was previously shared at WRD) is a web app that can automatically convert any site into mobile quickly.

GinWiz Discount

The conversion is in real-time so that the mobile site is always synchronized with the desktop version. And, there are lots of templates + features to ease customization.

GinWiz also has a custom development option that takes all the work from you and the site is created by the design professionals.

The package is normally priced $299 (one-time) + $8.99/month but this $299 fee is waived for a limited time (ends in July 4th). Plus, the 1st month is free and, if you didn’t like the design created, you can “say goodbye” without paying anything (actually, couldn’t be better).

Once purchased, you are contacted by a GinWiz designer so that they get a brief and complete site as quickly as possible.

Ginwiz Splash

Besides the site, a free domain, unlimited amount of monthly page views, expanded bandwidth and full email support is provided too.

For anyone with a limited time and/or don’t have too much design experience but wants to go mobile, that is a very good deal to get started instantly with a minimal price.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com