Mobile Programming - Part 3

What's up everybody. West here for another installment of my mobile programming series. Well in part 2 of the series I left off with the need to install an image gallery for my photos. I have done that and some minor tweaking to make the experience for the user much better. Let's start with the image gallery I chose to use. After searching the internet for the best image gallery, I decided to go with a simple plugin called ImageFlip. You can check out the page here, but basically when a user touches an image, it will show the image in bigger resolution with a black background. When the user clicks the image again, he/she can see a little description of the image and chose to view the next, previous image, or just exit from full screen.

As you can see from the image to the left, when the user clicks the button to go to a specific gallery, this is what they will see. These images were made smaller to accommodate for the space to see all images is a friendly manner.

Now what you see in this image is when the user touches an image they wish to see in bigger resolution. It's pretty simple. You can see the description of the image at the bottom and the ability to view other images or exit the mode at the top.

I mentioned in my previous installment that I was having problem with the loading of the site when first opened. Meaning, all the pages would show rather than just the active page and this is a big no-no. Well I indirectly fixed this problem when I was messing with a new way to list my buttons.

A few things were changed from old installments. The obvious difference being the buttons. Before I was using "data-role='navbar'", I then changed it to "data-role='listview'" and viola, no more loading issues. I don't know what was the issue with navbar, but needless to say I won't be using it anymore unless under direct circumstances.
Another that I added was the small arrow to the right of each button. This just makes it clearer to the user that this button directs to another page. Just a simple visual enhancement for the user. I also added a button in the header that will navigate to the home page of the desktop site. I just did this to get the knowledge.

The last thing I changed was my contact page. Originally I had an actual contact form where the user would write a message and it would send that message to my email when the submit button was clicked. This was frustrating to deal with because there were many variables that could break the friendly experience, such as submitting with blank fields, reloading the page, and pressing the back button upon submission. I felt it was best to avoid this and just put my contact information for the user to use at their leisure.

As you can see, I simply added my contact information instead of a form. I felt this was appropriate because using a smart phone device automatically can do the background work for the user. For example, if the user were to click on my phone number, it would immediately go to the dial setup. If they were to click my email, it would go to their email service. In fact, this can be seen as even more user friendly than a contact form.

Well after weeks of working on and off of this mobile site, I can say that it is finished. For a first timer like me, I think it turned out well and I will only expand on it with future projects. If you are looking to build a mobile application, you should check out mobile sites first and see if that would work. To me, applications are overrated and I much rather use the convenience of the web than having to download an app that may or may not be update to the date. Just my opinion. It's worth a check out right? Anyways, thank you so much for reading or just viewing my images (I try to make them pretty), it was a great experience and I highly recommend checking it out if you're into web development. Thanks again for taking your time to read this again, it means so much to. I will be making other posts on new projects so stay tuned for those! Thank you and have a great time!

- West P.S.
The website is West-Productions. Go to the mobile link at the bottom to view the mobile site. Thanks again!