Responsive Web Design

RWD is a process in which we create one-size website that will smoothly flow in all variants of mobile and non-mobile device to present in different screen size. Fundamentally it utilizes context clues from the environment. To make website responsive there are several key factors that plays its role. They are viewport, device-pixel-ratio, css3 media queries, fluid-grid layouts, fluid images and media.

Mobile Design

Mobile Design is done initially by sketching a wireframe. This coherent design is done on piece of paper. In the design process we ascertain interaction flows for a utilizer, especially paramount on a small screen mobile device. Other aspects requisite in design process requires is kind of mobile app you targeting. There comes the role of features and functionality requisite for a design. We have categories our design on types of app we build. The categories will lies in location vigilant computing, mobile persuasion, social networking, extending experience, personal networking, companion device, and enterprise apps. Before building any prototype, our next phase is accumulating the assets required for the apps. We build logos, icons, background images utilizing adobe photoshop and illustrator. Requisite for mobile web is vector logo and for mobile app is icon. Both logo and icon has required dimensions for different screen size and has to be unique for the web. Now comes the phases of prototype where we assemble prototype over wireframe utilizing all the assets we created. After initial prototype implementation we do field test of our incipient system. We catch mistakes in early stage where it is easy to change. Our design process is iterative. Ultimately we come to a stage of product design. Our building and testing are iterative. Expeditious tests along its way increases fidelity.

Frameworks

Developing a native mobile app is a challenge to all the device type. For example to build an android apps requires java, for iOS apps requires Objective C/Swift and for Windows phone apps uses .net. But since web started evolving many different frameworks came into existence. There are over 30 plus framework that I know have come up to support web apps development. There are many more frameworks out there that are yet to be discovered by me. The basic language of web are html, CSS and Javascript. Most of the framework also use the same languages.

PhoneGap

Out of many frameworks there are few frameworks developed to support fully stack web and mobile apps development. The apps can be called hybrid app or native apps. One of this framework is called phone gap. It was developed by Nitobi in 2011. Phone gap is a distribution of apache cordova as it is the engine that powers it. Now phone gap is the product of Adobe System. The characteristics of phone gap are it does not reply on with specific platforms. It is a package that is downloaded from its website and then can be installed using cordova package installer. Once installed we can create a project using Xcode or eclipse. It is free and open source. The target of this package is to build hybrid apps. But after the version of 1.9 releases it can be mixing with native code and have access to native device API. It supports following O.S. and its hardware components.

Phone Gap

List O.S - IOS, Andriod, Blackberry, Firefox OS, WindowsPhone, symbian, Web OS, Windows 8 List Hardware - Accelerometer, Camera, Capture, Compass, Connection, Contacts, Device, Native Element, File, Geolocation, Notification, storage, Vibration, Guesture & Multitouch.

Target - Hybrid Apps

UI - Corporate Design

PhoneGap may be extended with plugins that enable the developer to access more device features, including these: barcode scanning, Bluetooth, push notifications, text to speech, calendars, Facebook Connect.

JQuery Mobile

Comparing to JQuery Mobile

Comparing phone gap to Jquery Mobile, We see that JQM does not support mobile device API. JQM is there to build basic logic but if we want to access device features like GPS, camera we need phone gap. JQM is just for UI and does not support device functionality. JQM framework allows you to design complex web apps that are responsive to smartphone, tablet and desktop. It takes application of to next level by writing less and do more. It gives JS UI frame that gives apps look and feel of native apps. It provides components like a button, animation, menu etc. The challenge to port application of to different platforms is challenging. But when phone gap combined with JQuery mobile we can develop a cross platform solution. An apps that is less expensive and is called hybrid build by html/CSS/JS.

JQuery Mobile

List O.S - IOS, Andriod, Blackberry, Tizen, WindowsPhone List Hardware - -

Target - Mobile Website, Web Apps

UI - Corporate Design, Accessibility, Widgets

Ionic

One side WebApps and hybrid Apps framework evolving, the other side a new framework called IONIC was created by Drifty Co in 2013 by Max lynch , Ben spores and Adam bradley. The main target who developed this framework was to make a framework which is extremely fast, native focused and built on top of angular JS. IONIC was built on top of Angular JS, apache cordova and bootstrap for styling. IONIC with angular JS created Web Apps, and this Web Apps with Cordova created hybrid apps. Cordova was used for wrapping up webpages in a native app context. But the main objective of this framework is to promote design pattern. These design patterns were Master detail patterns, side menu patterns tab patterns, split view patterns. These UI pattern can be combined and used like side +tab or side + master or two side or side + master + tab. In Ionic angular JS with html5, css, SASS used cordova to access native device functions.

IONIC
List O.S - IOS, Android

List Hardware - Accelerometer, Camera, Capture, Compass, Connection, Contacts, Device, Native Element, File, Geolocation, Notification, storage, Vibration, Guesture & Multitouch.

Target - Hybrid Apps

UI - Corporate Design, Widgets

Bootstrap

Comparing to Bootstrap

Bootstrap is open source and free to make responsive websites and web apps to fastest speed. The good part are we do not have to write any javascript and CSS as it already contains css based design templates and JQuery Plugins. The bootstrap classes are so designed that we just need to call different class to do its work in html page. e.g. forms, button, navigation, list..etc. Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. A small group of developers developed this framework called Bootstrap as a way to document and share common design patterns and assets within the company. Bootstrap provides a set of stylesheets that provide basic style definitions for all key HTML components. In regular html page, Bootstrap contains commonly used interface elements such as buttons with advanced features, labels, advanced typographic capabilities, thumbnails, warning messages and a progress bar. The components are implemented as CSS classes, which must be applied to certain HTML elements in a page.Bootstrap comes with several JavaScript components in the form of jQuery plugins. They are dialog boxes, tooltips, and carousels, auto-complete function, Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel and Typeahead. Hence bootstrap makes a web application or website creation faster. The Ionic Framework has similar goals in that we want to help promote recommended design patterns and document best practices. That is why the framework is entirely open-source (MIT Licensed) so that as a community we can share our knowledge to built great apps with HTML5.

Bootstrap

List O.S - IOS, Andriod, Blackberry, Firefox OS, WindowsPhone, Tizen List Hardware - -

Target - Mobile Website, Web Apps

UI - Corporate Design, Accessibility, Widgets