Interactive Media Web Authoring Part 2 of 3 (Mobile App)

Part two of this module looks at taking the mini website created in part 1 of this module and using it as a basis for creating a Mobile Portfolio App for use on Android devices. This App will be designed to display some of my work & will include a call to action button leading to the final portfolio site built using WordPress in part 3, image gallery & links to social media.

This application was initially designed using Notepad++ with html & Javascript to create the responsive layout & gallery. Then with the help of the Adobe PhoneGap and using a combination of Node.js & other programs the code for the site was converted into a platform for the web app.


I found more information on some of the software here, Node.js is an incredibly sophisticated & complicated software but enables you to build multiple platforms upon which modern mobile app’s are based.

I also had a look at some of the more common applications that we use to asses design trends. riseWhat I found was pretty obvious in that the most user friendly app’s were the ones that kept the design uncomplicated & easy to use. Here are some examples. Dribble   and Alarm Clock or the screenshot of Rise shown here.


In developing the app I was much more aware of the need to have all the elements positioned correctly so they would collapse in the correct order, and also highly aware of having content optomised correctly for ease of viewing & loading. For instance, app1all images were sized at 250px square for each of the thumbnail images otherwise they would push the grid layout of the gallery out of sequence, an each of the larger images were sized so they would all measure 900px on the longest edge so when viewed in the slideshow all of the images would be visible & the slideshow would have a consistent look. The low file size also kept the response time down to a minimum.



Once the design of the app was complete it was uploaded to the Adobe PhoneGap server phonegapwhere it was converted to an app. Adobe PhoneGap utilises Node.js as well as other scripts to create the platform recognisable by the Android & Apple platforms.

Once generated I was able to download the app & install it on my phone to test the various links & pages. I was also looking to make sure that all the elements loaded without delay & that everything was as responsive as designed.

With some further research we were able to discover ways of naming the app & replacing the generic icon on my home screen with my own branded icon. This was achieved through the use of a couple of different bits of code. Firstly, I uploaded a Config file containing the app name and by uploading icons sized for 4 different devices. These were saved in the root folder of the app that was reloaded to Adobe PhoneGap, the result was an app with my own naming & branding that could be downloaded directly from my website or if I had a key to use Googles developer tools it could be made available on the Google Play.

I did try uploading the App to a post or page on my WordPress site and also Behance, but the .Apk format was not allowed by these sites.  Here is some useful information on releasing an app through the Android Studio page.

Here is some information on Signing your app for the Google Play Store.





One thought on “Interactive Media Web Authoring Part 2 of 3 (Mobile App)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s