Make desktop website look proper on iPad/iPhone/Android

I have a small website (4 pages) which is designed for desktop browsers. I need to improve the website, through the stylesheets, JavaScript scripts and images, so that it looks good on mobile platforms. I'd like to minimize the amount of HTML changes. I want to be able to access the same website URL from desktop and mobile devices, and see it differently depending on where I'm accessing it from. I also want to be able to update the website HTML content once and see the changes laid out properly on desktop and mobile devices.

I want the website to look "proper" on mobile platforms - fit into screen width, have reasonable layout depending on screen size, and have CSS/Javascript working (or be replaced with alternatives). Please let me know if you can do only a part of the project.

More details below.

## Deliverables

Here are the detailed requirements for different mobile platforms.

# IPad

I want the website to fit by width into the iPad screen (landscape) so that the users don't have to zoom in when they are viewing the website.

There are some Javascripts and special CSS - I need to make sure it all works and looks good on iPad. I need you to make any customizations to make it look good and fit. The font should be adjusted as well so that the users can read the website without zooming in (but scrolling is fine).

There is a jcarousel component used for displaying the screenshots. I need you to make sure this works on iPad and fits within the screen, or need to modify it so that it works. If it is not possible, the HTML page needs to be scripted to not use this component on iPad but to show a two row table of screenshots instead.

# iPhone (iOS3.2+)/Android (1.6+)

I need the website to look different on mobile phones. I am targeting portrait mode, 320x480. Each page should fit in terms of width into 320 pixels (portrait mode).

1. The main page should have

a. a title with logo at the top

b. download button for the corresponding app store (or no button if that is not iPhone/Android). short description (4-5 lines)

c. vertical stack of buttons for sub-pages - "How to play", "Contact", "News", "Screenshots". You can use the original images from the desktop website or produce similar images that would look better on mobile

2. Each subpage is simple - no decorations, just content on proper background.

a. The "How to play" page should have only the text with icons with proper background

b. There should be no forum link

c. The contact page can be left empty (but the button linking to it should be present). The same for the news page.

d. The screenshots page should display the provided screenshots to be viewed in landscape mode (if that is possible), with horizontal scrolling, or if not possible, just in a vertical list which fits into the screen width.

Please let me know if any of these things are not possible and thus will not be included into final deliverable.

# Website

You will be given the website files, but you can see it online at <[url removed, login to view]>. There are only 4 pages. You would need to change the files as appropriate and return the modified files

Arte & Artesanato

ID do Projeto: #3061419

Sobre o projeto