Archives: Mobile Development

If you build it they will come…that is unless they can not find it. The navigation on your website or mobile application is the map your users have to guide them to all of the features and pages you have built. If you have poor navigation your users may not be able to find what they are looking for and it might as well not exist. In this post, we will go over a few good mobile navigation strategies, how to use them and common mistakes developers make when implementing their mobile menus.

The Side Bar Menu

Let’s start with the sidebar menu. The sidebar menu is a simple solution for navigation on a responsive website. The sidebar menu starts off as a top bar navigation, once the browser size reaches a specified width the navigation transforms into an icon that can be clicked to toggle a sliding menu. This menu is easy to install and customize.

Below is an example of the sidebar menu.

Advantages

The sidebar menu allows the user to view a portion of the content on the page they have navigated to without closing the menu. This happens because part of the page is exposed when the menu is opened.

If the menu you are using has sub-menu items the sidebar menu is probably the best fit for your project. The sidebar menu allows for drop downs to be embedded in the menu. This is why the sidebar is the menu of choice for many UI framework websites like Angular Material that have a large selection of menu and sub-menu items.

The sidebar menu is an easy transition from a full web menu, once the screen is too small for all of the menu items to fit the breakpoint can be set to transition the UI to just a menu icon.

Common Mistakes

Setting the breakpoint too late can ruin a users experience on your site. If you are using the sidebar for responsive web design make sure that your media queries are set to trigger the menu before your menu options run out of room and collapse to the next row. In the example below, the break point is set to small and the menu overflows out of the menu bar. To avoid this make sure you test at different screen sizes. If you add additional items to your menu be sure to go back and test again.

Camouflaging the menu icon is a common mistake designers make when using the sidebar. If your menu icon does not stand out or if it not in a common location the user may not see it. In the example below the menu icon is one of the last things your eye sees. Your eye is pulled to the left corner where the menu button normally is. The extra icons and dull color also contribute to the lack of visibility.
To avoid this, remember that in the hierarchy of your design the add button and the menu both need to be seen. You should move the menu to its traditional position where users will expect it. You can also make it a bit larger and brighter so it can be seen clearly within the rest of the design.

Drop Down Menu

Next we will look at the dropdown menu. The dropdown menu is a very common solution for mobile menus. The transition to this design is similar to the sidebar. When the menu items no longer fit in the menu bar an icon replaces the text.This is one of the most commonly used mobile navigation choices because it is easy to create and mobile users have become accustom to this type of menu. You can see an example of the dropdown menu below.

Advantages

The dropdown takes up less space than the sidebar menu so users can see more content while navigating. This is why the dropdown is good for smaller amounts of menu options.

The dropdown menu has more options for placement. It can come from the center of the page, or pop up from the bottom. The sidebar is limited to the left or the right.

Common Mistakes

Cutting off the menu is a big mistake that can be made with a dropdown menu. Be sure to give your menu enough room to show all of the navigation options. Just like any other element in your design the dropdown needs proper spacing, if all of your other graphical elements are in a grid made sure your dropdown follows the same rules.

Tabs Menu

Last, let’s take a look at the tabs menu. The tabs menu shows a few menu options with the currently selected option highlighted or underlined with an accent color. This menu option is good for small menus or for sub-menu options on a main menu page. It is not recommended to use this menu on mobile for your main menu if you have more than four options. This menu requires a minimum amount of space to view the menu options. This style of menu has become popular on applications where multiple sub-pages can be scrolled through on a main page in the application.

Advantages

The main advantage to using the tabs menu is its simplicity. Applications with just a few options do not need to waste space with large dropdown or sidebar menus when you use this option.

The tabs menu does not cover any of the content when you are navigating, so the user can see all of the pages content as soon as they arrive.

The most common use case for the tabs menu is to navigate through sub-pages or different types of content in a section of the application. This is used alongside with another menu option like the dropdown or sidebar. You can see examples of this when you look at popular applications like Yelp or Venmo.

Common Mistakes

The most common mistake people make with this menu is putting in too many options. If you have too many options on mobile you risk having your menu get cut off.

Conclusion

There are a number of options to choose from when you are creating the navigation for your project. You need to keep in mind how many options your user will be choosing from, how important it is to keep the page content visible when navigating, and the screen sizes your users will likely be using. These considerations will allow you to choose the most effective navigation for your mobile application.

Plugins need to be implemented differently for each platform so you need to be sure to read into how to how apply the one you have selected correctly for the device you are working on. In this example you will be installing the splash screen plugin on an android device.

Step 1) Importing your Plugin

You will import the plugin that you have chosen into your config.xml file. You need to include the plugin name, spec, and source. The spec is your plugin version, your plugin will work without this, but it is highly recommended that you include the version. The source for plugins from the PhoneGap core where the splash screen is located will be “pgb”. The import script for the splash screen will look like this once all of the parameters are added:

Some plugins require you to add in a reference to the javascript files. This is not the case with most PhoneGap core plugins like the splash screen plugin. If you are required to reference the files you will not be adding them into your project when you upload it on PhoneGap Build. The files will be automatically injected by PhoneGap and adding them in advance will cause problems with your build. Read the documentation for your plugin if you are using a different plugin, as mentioned before each one is different.

Step 2) Adding Your Platforms

Once you have loaded in your splash screen plugin you will need to specify the platforms you are targeting. In this example you are using Android. To do this you will add the following code to your config.xml file.

<platform name="android"></platform>

If you would like to add in other platforms the format is the same. There is no limit on the number of platforms you can use.

Step 3) Add Your Screens

The step is to add in your splash screen files. If you read part one of this post you will be using the png files you created. Nest them into your platform tags. You will have one default screen and a landscape and portrait screen for each pixel density.

Step 4) Customize Your Splash Screen with Preferences

Now it is time to customize your splash screen. The splash screen plugin gives you a few different preferences to work with. The following are a few examples that you can use.

SplashScreenDelay
The SplashScreenDelay lets you add a delay to the amount of time before the splash screen is hidden. This is set in milliseconds. It is useful when you want to expose users to your branding but your application has little or no loading time. This can also be set to 0 to force your screen to automatically hide.

<preference name="SplashScreenDelay" value="3000" />

FadeSplashScreen and FadeSplashScreenDuration
FadeSplashScreen can be set to true to give your screen a fading effect as it transitions to the application. You can set how long this transition takes with fadeSplashScreenDuration, also set in milliseconds.

ShowSplashScreenSpinner and SplashScreenSpinnerColor
Lastly you should add your spinner. You learned about the parts of a splash screen in the first part of this series. Now is when we add in our spinner. This is set with ShowSplashScreenSpinner. You can also change the color of your spinner to go along with your application by using SplashScreenSpinnerColor.

Log into your PhoneGap Build account. Find the application project you were working on in the last post. Click on the Update code button and reload your project. Once you have done this click on Rebuild all. Download the new version of the project to your android device. Open up the application on your phone. You will notice you are now being greeted by your new splash screen!

A splash screen is a graphical element that appears when an app launches or is loading. The basic splash screen usually contains a logo, the application or brand name and a loading bar. Splash screens are more of a necessity for larger applications that take time to load. Having a user look at a blank screen while waiting for the app to load increases their perceived wait time. If you have a smaller application with less loading time, splash screens are a good opportunity to expose users to your logo and improve brand recognition .

The following is part one of a two part series on creating a splash screen for your mobile application. In this section you will learn about the elements included in a splash screen, how to design a splash screen, and the design files you will need to implement your design on an active mobile application.

If you have been following the RealEyes blog series on building mobile applications using Google Material and Cordova PhoneGap this post will continue to add to the real estate rating application you have been building. If you have not been following along, and would like to learn to build a mobile application using Cordova PhoneGap and Google Material the following are links to the previous posts:

If you have not been following the RealEyes blog series on building mobile applications using Google Material and Cordova PhoneGap this is still a great reference for improving your mobile application with a well designed splash screen.

Step 1) Knowing the Design Elements

The splash screen has two main objectives. The first objective of the splash screen is to let the user know that the application they are trying to launch is loading. The second objective is to give the user extra exposure to your brand. You are going to accomplish these goals with the two key elements of the splash screen, the loading bar and the brand logo. Google also suggests that you expose placeholder UI. Placeholder UI includes core structural elements such as a status bar to give a smooth transition into the application. Extra elements that can be added into the splash screen is the brand or application name, brand slogan, the application version number and any other graphical elements that increase brand recognition. When choosing what to add to your splash screen remember to keep it simple, less is better.

Design Elements :

(Suggested)

Logo

Loading bar

Placeholder UI

(Optional)

Application name

Slogan

Version number

Below are some examples of splash screens:

Step 2) The Design Specs

When designing splash screens you need to account for different screen sizes as well as different orientations. Therefore every screen size qualifier should have two different images, one for landscape and a second for portrait. In the demo you are looking to create an app for an Android device. If you are building for other devices you can find the design specs here. All files should be in a png format.

Name

DPI

Portrait

Landscape

XHDPI

320dpi

720px X 1280px

1280px X 720px

HDPI

240dpi

480px X 800px

800px X 480px

MDPI

160dpi

320px X 480px

480px X 320px

LDPI

120dpi

200px X 320px

320px X 200px

Step 3) Designing your Splash Screen

Now it is time to put it all together! You are going to build a simple splash screen for the real estate application you have been building over the last few posts. You will use the application logo (the design you are using for your icon), the app name (Real Estate Rater), and the color scheme from the app with a light texture. The placeholder UI and the load bar will be added and configured when the design is implemented in PhoneGap with your plugin. When you create your design you need to remember to use a vector image so you can easily recreate the image in multiple size files.

You now have a set of splash screens that are ready to be added to any android application! If you would like to learn how to implement your new design in a PhoneGap project using the splash screen plugin, look out for our next blog post: Using PhoneGap to Create Splash Screens: Part Two

You and your team may have spent months developing a great application. Now it’s time to put it on the market for users to discover. In a large sea of apps you need to make a great first impression to stand out from the crowd. A well designed product icon will help you accomplish this. The product icon is the first and sometimes only part of your app a potential user will see. The icon you design needs to represent your app in a clean, eye catching fashion. It needs to give potential users an idea of what your app does while gaining their trust with a quality design.

In this post we will be showing you some guidelines to follow in order to create a well designed product icon. We will be using Google Material design standards along with PhoneGap to complete our project. If you have been following our blog we will be using the real estate reviewing app that we have been building over the last few posts Creating Cross Platform Mobile Applications with Cordova/PhoneGap and A Comparison of Material Design Frameworks. If you have not been following our blog you can still use this as a guide for creating an icon for your own project. Let’s get started!

Step 1) The Concept

First thing you need is a good concept. Your concept should represent your app simply. It should give the user an idea of what it does before they ever click on it.

This app is about rating and reviewing real estate so putting the shape of a house in the icon will associate the app with real estate. Adding a star will give some indication of the purpose of the app since users have become accustomed to the star rating system. These two shapes will give users a sense of what the app is about without ever opening it.

Step 2) The Design Specs

One you’ve established an exciting concept you may want to jump into creating it. First, however, you should look up the specs for the icon. You’ll need to create the same icon a few different times in multiple sizes in order to account for different screen pixel densities. This means your icon needs to be scalable and for that reason, using a vector graphic is highly recommended. The following is a chart of the naming conventions, dpi, and sizes for the Android icons that you would need to create.

xxxhdpi

640dpi

192px X 192px

xxhdpi

480dpi

144px X 144px

xhdpi

320dpi

96px X 96px

hdpi

240dpi

72px X 72px

mdpi

160dpi

48px X 48px

Step 3 ) Designing the Icon

Now that you know the sizes and naming conventions required, it’s time to start designing. For this, you can use Google Material’s guidelines to create the icon. These design guidelines are already implemented through the app via the Materialize framework. It is good practice to sync the design of the icon with the design of the app. After all, the icon is supposed to be a preview of the rest of the application.

As discussed in our post Initial Thoughts on Google Material Design Material design is based around the concept of digital design inspired by the physical world. The same concept is applied in product icon design. Product icons like most good design is based on a grid system that you can see below. Along with this grid system, a keyline grid to guide for pre-rendered base shapes is provided. You can use these guides when designing the icon.

The Grid and Keylines

Get Your Base Down

To start, add the base lines to the grid to form the outline of the icon design. Once you have a blueprint of what is being designed, start putting the pieces into place. First, fill in the background. In this example the main color in the application, teal, is being used. Remember to keep your color scheme consistent to what you are using in your app. The background will have two additional parts. The top of the icon will have what is called a ‘tinted edge’ this is the original color mixed with white. The bottom will have what is called a ‘shaded edge’. This is the background mixed with a darker color to give the appearance of depth to the icon. After the background is in place, color in the foreground.

This is the house shape using white for the foreground.

Add Some Color
Next, add some spot color to the icon. This is a highlight on your icon using a small amount of a secondary color. We are going to use yellow on the star as the spot color.

Give the Icon Depth
Lastly, give the icon elements depth by adding shadows. Imagine a light source coming from the top left corner of the icon at a 45 degree angle. Add a soft shadow from the foreground onto the background to separate them.

Here is the final result.

Experiment
You can also try experimenting with different background shapes using the same guidelines. Have fun!

Step 4) Create and Name Your Icon Files

Use the chart in step 2 to create your icon files. Use the name in column 1 the dpi in column 2 and the width X height in column 3. Save your files as pngs. Once you have all of your files created, add them to the config.xml file in your PhoneGap app.

Step 5) Add the Icon to Your PhoneGap Project

Log into your PhoneGap Build account. Find the application project you were working on in the last post. Click on the Update code button and reload your project.

Once you have done this click on Rebuild all. You will see your icon replace the default PhoneGap icon in your project space. You now have a brand new product icon to represent your app! Feel free to download the example Android APK installer here: http://office.realeyes.com/reblog-downloads/reRealEstate.apk

In 1994 IBM released Simon, Simon is widely considered to be the first “smartphone” it was the first mobile device to use a touch screen and run apps. In the 90s and 2000s the mobile market has exploded with applications and devices, for developers this means needing to be able to develop apps for not only different size screens a but also for different platforms. Ideally it would be nice to find a cross-platform solution to write once and deploy “everywhere”. To account for different screen sizes we work with responsive design, where content moves fluidly to adapt to the size of the browser it is being viewed in.

Using responsive design works great for web applications, but what if we want to take our web application and have it become a mobile application? That is not as simple, to get our app to work on an Android device we need to rebuild it with the Android SDK, and then we need to build it again in Swift/Objective-C for IOS. Lucky for us there is an easy way to get the same responsive web app we built earlier to run as a mobile app on Android and IOS without having to rebuild it. Apache Cordova has created a technology that takes our HTML, CSS and JavaScript and transforms it into a mobile application that can be used across an array of different platforms.

In an earlier blog post we created a real estate rating application using different Google Material based design frameworks. Currently these applications are web apps and can be run off of your smartphone, but only through opening up your mobile browser and navigating to the page where the app is being hosted.

In this post, we will show you how to use Adobe’s PhoneGap – an open source distribution of Cordova – to simulate and build mobile apps using just HTML, CSS and JavaScript.

Step 2) Install the PhoneGap Desktop Application

Step 2) Install PhoneGap on your mobile device

On your mobile device you will need to install the free PhoneGap developer app. It is available on iTunes, Google Play and the Windows Phone Store.

Step 3 ) Create your app template and connect your devices

The next step is to create our app template. To do this open your PhoneGap desktop app and click the add button on the menu. Select ‘Create new project’. Then select the blank project. There are also some other templates available for you to play with later on. Next, choose a folder on your file system in which to place the app. Give the app a name and ID click to create the project.

Now that you have your app template created open your mobile PhoneGap developer application. Replace the server address with the one highlighted in your PhoneGap desktop app and try to connect.

If you can not connect try these steps to debug:

Check that you have the latest versions of the mobile PhoneGap developer app and PhoneGap desktop app (if you just downloaded them you should)

Make sure you do not have any firewalls blocking your connections

Check that your computer and phone are on the same wifi network

Step 4) Replace the template application code with your code

Go into the /www folder in your new template application. This is will be the root of your application code. You will notice that there is already an index file referencing the Cordova framework through a <script> tag:

<script type="text/javascript" src="cordova.js"></script>

You will want to copy your application files to the /www folder, open up your index.html, and add the Cordova <script> tag to your application. At this point you can save your index.html and you’ll be ready to test how well your app runs on a device.

Here’s a screenshot of what the demo-app-house-materialize project looks like with the Cordova script reference.

Step 5) View your app on different mobile devices

Select the play button to start the server for your application in the PhoneGap desktop app. You will now be able to connect to it via the PhoneGap developer app on your mobile device. When you click to connect in the PhoneGap developer app on your phone PhoneGap will wrap your HTML/JS/CSS application into a mobile friendly package. Then your application will be launched on your Android or iOS mobile device.

Step 6 ) Enhance, review, repeat

You can now enhance your app so that the mobile app looks as good as the web app looked. One example would be to modify the CSS file to make the container of the app 100% instead of a fixed pixel width.

Part 2 – Packaging our project as a mobile app

Step 1 ) Get started with PhoneGap Build

Click ‘get started’
Pick your plan (we are using the free plan)
Create an account and log in

Step 2) Uploading your project

Before you upload your app you will need to prep it. Whether the app is in a git repo or is uploaded as a zip file it will need an application descriptor config.xml file. We will go the zip file route:

First, copy the config.xml from the PhoneGap project root to the /www folder that represents your “app”.

Make sure all of the libraries, fonts, icons and frameworks you are using are also properly referenced and exist somewhere under your /www folder.

Zip up the /www folder.

Now, to upload your app:

Log into PhoneGap Build

Click the ‘+ new app’ button

Click the ‘Upload a .zip file’ button and select the zip file you created.

Once the zipfile is uploaded you will see a screen similar to the following screenshot.

Notice that in addition to building your app, you have the options to enable debugging and enable hydration. Debugging gives you access to a set of tools similar to the debugging tools available in your browser. Hydration helps with pushing code updates automatically.

If you want to generate the installation assets for each platform click the ‘Ready to build’ button. Doing this will result in the following screen.

Step 3) Downloading your installers.

From the screen posted above you can see that by default you will have the ability to download builds for Android, iOS and Windows Phone. Although you can immediately download install assets for Android and Windows Phone right after building, you will need to provide a signing key for iOS before you can create iOS builds. Here’s some info on that: http://docs.phonegap.com/phonegap-build/signing/ios/

We will download an Android APK installer. Click on the Android button and a browser download prompt will display. Choose a folder on your machine to save your APK.

Step 4) Run the app on your Android phone

On your Android device, go into your security settings. Turn on the option to allow installation of apps from unknown sources.

Through some means, e.g. email attachment, get the APK install file on your android device and open it.

When you open the file it will ask you if you want to install it and at that time choose yes.

There is no substitution for actually testing on the device. Between all the different iOS and Android configurations, not to mention the cloud of other manufacturers and OSes, you’re bound to discover some peculiar behavior that only occurs on the device. What to do?

Given the wide variance in implementation and guaranteed support, CSS filters (and their cousins) are still a ways from being advisable for any key functionality of a site. That being said, caniuse.com currently lists browser support at almost 65% (includes partial support). With this in mind, CSS filters create some very interesting possibilities for Progressive Enhancement of carefully considered elements.

When you consider that over the past 5 years mobile devices have risen from 0.9% to over 15% of all internet traffic, it’s become increasingly important to make sure that there is at least a basic level of support for mobile users in anything you build. While there are new tools and technologies popping up daily to help make that easier, there are still an incredible number of challenges involved.