Mobile Website Development Simplified

May 30, 2013 Vipin Jain

A few years before, most of the website owners who wish for a mobile-interactive website uses a different theme for mobile so that the website can be designed specifically for different mobile devices. In fact some people also prefer to use separate mobile domains. The concept of Mobile website development is a crucial one because it can boost your chances of gaining success in the online business.

In case you are interested in mobile theme then you can use WordPress for switching themes. It will be very beneficial and effective. On the other hand, a responsive theme utilizes the similar staying and a same theme for both websites. In this, a unique combination of media queries and fluid layouts are used which make the content and layout different for devices of different size. In fact it is not only useful for mobile website design and development but it can also beautify the look of a website on large screens and tablets.

Important Concepts About Responsive Design

For finding grip on the responsive design it is important to understand the concepts of web development mentioned below:

Media queries: For integration of additional changes in the CSS, media queries are used in the devices.
Fluid layout: It is a layout for a website which uses width percentages in place of pixels. By using this feature, the width of the website is changed according to the change in the browser.
Smart phones: These are 480px high and 320px wide. It states that the screen width will vary when there is turn around in the device. This feature can be noted before you start with the actual procedure of mobile website development.
Tablets: The screen size of tablets can vary. For iPhone which is the most preferred tablet, the screen resolution is 1024px high by 768px wide. Tablets like Kindle Fire are smaller in comparison to the iPhone.
Desktop Computers: The width can vary from 1024px and more. It is obvious to place a limit on the layout’s maximum width. It will be helpful for right view of website on larger screens (for instance more than 1200px). In case the feature is not utilized properly then it will be very hard to read the content on larger sized screens. This is why it counted among the important concepts of mobile website design.

Before beginning, it will be a great idea to carefully observe the functionality and content of the website. Without any doubt, it is the right strategy to give better results.

In a discussion about development of mobile website, it will be better to consider the available options which are following:

Utilizing a mobile Plugin.
Implementing a responsive theme which is off-the shelf.
Making a theme responsive.
Developing a mobile theme and utilizing switcher for activation of the mobile devices.

By: Vipin Jain

Creating Multilingual Apps in Android

May 13, 2013 Vipin Jain

Android apps run in many devices in different regions of the world. To cover the maximum number of users across the world for your android app, Multilingual can play a vital role. Multilingual feature is also known as the localization process of your app.

Before proceeding further, make sure that you have some basic knowledge of creating android apps, handling resources, creating layout XML files etc.

1. Basic Localization Process

Android loads its resources, text and layouts from /res directory in your project folder. The default structure of the /res directory in project folder is like this:

In order to support localization in our app, we need to add some extra folders for resources, strings for that locale. Android OS itself detects the current locale of the device and picks the most relevant resources from the appropriate folder in res directory.

2. Localizing Strings

To add support for multiple locales, we have to add additional values folders in the /res directory of our project. The naming convention that will be followed to create the additional directory is: values followed by a hyphen and ISO code of the language.

For example: values-fr/ is the directory containing the simple resources for the language with ISO code “fr”.

Now add the string.xml containing the language specific text to the appropriate folder.

In this example we are focusing on French(values-fr) and Japanese(values-ja).

3. Localizing Images

Similar to values directory, we can create separate directory for drawables that includes the images for their respective locales. Android will automatically detects the current locale setting of the device and load the appropriate images in the app.

res/drawable-hdpi: Contains default images for high density.
res/drawable-fr-hdpi: Contains images optimized for Japanese.
res/ drawable-ja-hdpi: Contains images optimized for French.

Similarly, you can create directories for other drawables too.

4. Testing Localized Application

Once you have localized all the resources in their project, the application is ready for testing.

To test the application, we can set different locales via

Settings -> Language & input or Language & keyboard -> Select Language

and run the application.

5. Localization Checklist

Now as we have understand how to develop multilingual apps in android, let’s look over some checklist that must be kept in mind while developing localized apps:

Never hard code strings in the project, instead use string.xml file.
Never hard code drawables and layouts, instead use drawable and layout directories.
Make sure to include all default directories under /res and all default resources as when Android can’t find any specific locale then it picks the resources from the default directories of resources.
Place your localized resources(images & strings) in the appropriate directories under /res/

Reference links:

By: Vipin Jain

iPhone 5 Optimization Must

April 30, 2013 Vipin Jain

We just got an email from Apple that they won’t accept apps which don’t have 4″ screen support from May 1st.

Here is the email we got from Apple today –

Dear developer,

We have discovered one or more issues with your recent delivery for “Dream Countdown”. Your delivery was successful, but you may wish to correct the following issues in your next delivery:

iPhone 5 Optimization Requirement – Your binary is not optimized for iPhone 5. As of May 1, all new iPhone apps and app updates submitted must support the 4-inch display on iPhone 5. All apps must include a launch image of the appropriate size. Learn more about iPhone 5 support by reviewing the iOS Human Interface Guidelines.

If you would like to update your binary for this app, you can reject this binary from the Binary Details page in iTunes Connect. Note that rejecting your binary will remove your app from the review queue and the review process will start over from the beginning when you resubmit your binary.

Regards,

The App Store team

Here is what we should do to optimize app for iPhone 5 4″ screen.

Upgrade to Xcode 4.5 or later .
Add splash screen of size 640×1136 with name – “[email protected]”
Design your app layout with auto layouts see this article –

http://www.raywenderlich.com/20881/beginning-auto-layout

By: Vipin Jain

Android App Designing for Multiple Screens

March 30, 2013 Vipin Jain

Android supports hundreds device types with several screen size and density. Android ranging from small screen to large TV sets. Now we create an app that supports multiple android devices. We create an android app that can works on multiple screen size mobile. It enhance your app and able to support multiple mobiles.

Before we create app for android we have to know some terms and concepts.

Screen Size (small, normal, large, xlarge)
Density (ldpi, mdpi, hdpi, xhdpi, nodpi, tvdpi)
Orientation (port, land)

Our res folder in app contains all layout, draw able and values folder. It is responsible for all design aspects in android.

1. Generally android phones screen divided into four sizes. So we have to put following prefix of layout file.

res/layout-small.xml → For small screen, its minimum resolution 426dpX320dp
res/layout.xml → For normal screen, its minimum resolution 470dpX320dp
res/layout-large.xml → For large screen, its minimum resolution 640dpX480dp
res/layout-xlarge.xml → For extra large screen, its minimum resolution 960dpX720dp

2. Density means quantity of pixel within a physical area of screen. It categorized according to density per pixel (dpi).

res/drawable-ldpi/icon.png → For low density (~ 120dpi)
res/ drawable-mdpi/icon.png → For medium density(~160dpi)
res/ drawable-hdpi/icon.png → For high density(~240dpi)
res/ drawable-xhdpi/icon.png → For extra high density (~320dpi)
res/ drawable-nodpi/icon.png → For independent density.

3. For portrait and landscape screen we use this by put port or land prefix.

res/layout-xlarge-land.xml → For extra large screen in landscape orientation.
res/layout-large-land.xml → For large screen in landscape orientation.
res/ drawable-xhdpi-land/icon.png → For extra high density in landscape orientation.

Here is screenshots of all layouts in all portrait modes.

Here is screenshots of all layouts in landscape mode.

Here is hierarchy of res folder for all screen size.

For the app launcher icon, we also create .png image according to different screen size. Here is icon size for app:

36×36 for low-density
48×48 for medium-density
72×72 for high-density
96×96 for extra high-density

36 x 36

48 x 48

72 x 72

96 x 96

It helps you create layout with less coding and create efficient design of layout for multiple mobile screens.

By: Vipin Jain

Getting Started With StoryBoard in iOS

March 29, 2013 Vipin Jain

With the introduction of storyboard in new Xcode 4.x makes designing your iOS app so much easier. Storyboard allows you to graphically order all your views within a single canvas, where you can design the app’s logical flow and even assign transition animation. So without wasting any time let’s get started with our first iOS application using StoryBoard.

Step1: Open Xcode 4.x and create a Single View Application, name it “StoryBoardTutorial”, while providing name the make sure to check the use storyboard checkbox situated in the lower portion.

Step 2: Once your project has been created screen will look like this (below)

Now select the MainStoryboard.storyboard in the project navigator.

Step3: Xcode creates a default view controller (rootViewController) in the project. Remove default view controller and add one UITabBarController to the design canvas.

Delete the two view controllers attached to the UITabBarController.

Step4: Now add three UINavigationControllers to the Canvas, so that your storyboard starts looking like the following snapshot.

First replace the three UITableViewControllers with the UIViewControllers( make them rootViewControllers of respective UINavigationController ) and also add three more UIViewControllers to the storyboard each in front of every previously added UIViewController (UIViewControllers in place of UITableVIewControllers).

You can give different colour to each viewController’s view in order to identify them easily. In my case I have used the following colours.

Also add the three UIButtons to the Dark Colour ViewController.

Step5: Here the DarkGreen, DardRed, DarkBlue viewControllers are set as the rootViewController of the respective UINavigationControllers what is left is to connect each the LightGreen, LightRed, LightBlue ViewController to the DarkGreen, DarkRed, DarkBlue viewControllers respectively. Now right click the mouse on UIButton present in the DarkGreen controller and drag it to LightGreen viewController, as you release the click the following window appears

Select “push” option provided in the following window. Repeat the step for DarkRed and DarkBlue ViewControllers. Now your Storyboard must look like the following

What is left now is to serve to the dish. Build & execute the project.

Congratulation without writing a single line of code here is your first iOS Tab based App using Storyboard

Happy Coding

By: Vipin Jain

Mobile Website Development Simplified

Important Concepts About Responsive Design

Creating Multilingual Apps in Android

1. Basic Localization Process

2. Localizing Strings

3. Localizing Images

4. Testing Localized Application

5. Localization Checklist

iPhone 5 Optimization Must

Android App Designing for Multiple Screens

Getting Started With StoryBoard in iOS

Recent Posts

Archives

Categories

connect with us

certificate