Mobile Website Experimentation

This here is some individual experimentation that i did. I focused on experiemnting on a mobile device but still used dreamweaver to create the pages and such.

I added a simple header or banner which is my own image. I also added a spry table so that it makes the website more interactive which i think is important because you have to compensate for the lack of space with interactivity to keep interest and it makes for faster loading times.

Here i found an addon that can support the iPhone IOS which allows you to customize the content of teh buttons and menus while keeping to the same iPhone design. I have seen this on only a few websites online. I think this is not a very popular style of mobile web apps because there may either be an issue with copyright or the fact it is quite simplistic.

After playing around with a few other add ons that i downlaoded i managed to get a really cool slideshow of some of my graphics. This caused a few problems though as for some reason the coding restricts the accsess of you being able to use source images that you have in your project folder. This could be due to the way the add on animates the images together because it does iot through a private server so your images have to be online. A simple way past this was to upload to sizes of the images to this blog, one large one thumbnail, and then embed the code into the add on.

Another simple add on that i incorporated was to have a map. This is as simple as dragging and dropping the addon in to a box that you have created. But before you do that you have to customize the settigns in the preferences tab of the add on. This is vital because you need to change the dimensions  of the map to fit in your box, else it will be on a huge scale and wont operate properly.

I also added a YouTube video by simply embedding the code into the java script. But before i did that i had to make sure that the code had the right height and width. There is an option of having a Youtube player, but i was wondering if certain devices ould be able to handle it because it requires flash.

Images for mobile site

Mobile Web App

This is my website that i created on Dreamweaver. By importing it in a new folder into Titanium Studio  I was able to run it on the ios version of an apple device. 

This is the home screen of my website. The first obvious thing to notice is that the website is clearly designed for desktop. The buttons are too big, and the background needs to be modified to either fit the screen or change all together. 

 

Even the vidoes that i emeded from youtube worked on the iPhone device.

Here is the image that you can click on off of the table. As you can see the image is way to big to fit on the mobile screen.

Titanium Studio

This is Titanium Studio and is used to create mobile apps. Here we began buy learning some basics about how it works and the different operating systems. We started by using code snippets provided to set up a simple background colour and heading with text. The snippets consisted of variables which we had to call to the programme so that they would be displayed.

Here I customised the text and added a picture to the web app. I also edited the text to match the picture. This is the start of a very basic mobile web app.

This is the source image. I made it smaller to reduce the file size so the web app would load faster.

File Size

PNG

Here I saved the logo as a website image and set it to PNG settings. This enables the image to preserve its transparentcy. It also reduces the file size Dramatically because the PNG format focuses on the block colour and enables the transparent background, making there less pixels to generate.



JPEG

This is a JPEG image set at 300 dpi. It is a large image size and not really fit for mobile browsing. However, by using this web saing tool you can change some of the settings on the image and therefore compress the image. One of the ways you can do this is to choose a preset. These are low, medium and high JPEG presets and are the simplest way to go. The higher quality image however, the bigger the size of the image.



GIF

Here is a GIF image and is good for compressing simple images such as logos. For example one option here is to change how many colours there area in the image. So to make a smaller file size while keeping the block colour you just simply turn down how many colours the image produces. At first i chose 4 because it is red white and yellow. However when i did this the edge became grainy and pixelated. I then increased the number of colours to 8 and that sorted the problem and decreased the file size.  

HTML Demo

This is the demo that we did on the basics on creating a website using Dreamweaver. First of all we created a folder somewhere that we could use as our project folder. We called this site and this is where we would store everything that we make to put onto the website. This is because this is where the website will find all of the information to display. 

This is where i saved my "site" file.

We then started to look at the layout of Dreamweaver. Here we looked at the various tools and windows. Alos we looked at the coding side of the page and the design side. Then we set out to make some simple links and colours.

Here we made the page colours different by using the page properties page. This is so we could distinguish which page is which and also when the page changes when you click the link. The text was made so we could view the different pages. It works kind of like a hyperlink and we use a pickwhip system to get the link to send information to Dreamweaver so that it changes page.  

Here I imported a picture and used the same technique as linking the page together. Instead this time i linked the picture to a website. 

Here we created a new page and created a table. I also looked at the code side of the page so i could input text and visuals.

Then by importing small PNG images into the table i was able to link them to another page by adding behaviours. So what happens is, when you click the glasses another window appears with a larger JPEG image with some text information.

This is the website with the glasses page open in an internet browser.

Mobile Tables