Iphone / Android / Jquery Web

Hello,

I have a small … but difficult project to do in the Design / programing of a webpage.

The idea is to make ONE webpage that will allow to search a database and display the result. The communication with the database is ajax based and returns a JSON.

Ajax and layout should use jquery 1.3.2

The page should work well on iphone (3 and 4th generation) and android. The main problem with be that it looks well, take all the place of the screen independently of the resolution !

You may try the webpage at:

http://test.chemexper.com/mobile

Most of the logic work well and you should not touch it. What there is to do:

1. Create an attractive layout mostly based on CSS.
2. For the search we have 2 possibilities “Quick search” / “Structure search”. Create a “tab” navigation on the top allowing to select the first or second search tool
3. Once the user has started the search, the page jumps on “searching” and there should be an animation showing that the query is being done. In this page there is a way to go back to the search. The animation should be again based on CSS if possible to reduce the size of the code (no image).
4. Result. On the top of the result page there should be a navigation toolbar that allows to go back to the search, go to the next result, go to the previous result, display the current result. If possible HOME, NEXT / PREV could be existing UTF8 characters (pictograms) in order to limit the size of the page (the target is mobile phones !!!).
NEXT should be dimmed for the last record, PREV should be dimmed for the first record.

As you will see in the search results, sometimes the name can be very long. We could think about changing the size of the font if the name is too long or truncate the name.

In general the code should be short and well done ! I will still have to add some functionalities in it … so I should be able to understand it !

Still in the search result, the name should span on the whole width while more specific information like bp, mp, … could be in 2 columns.

Please contact me if you need more information.

Best regards,

Luc

Leave a Reply

Your email address will not be published. Required fields are marked *