Design a responsive Mobile Website incl Javascript
€30-250 EUR
Paid on delivery
Hi,
I have an existing Web App where I need to enhance the main screen. Note the page will be embeeded in phonegap/backbone environmnet later (not part of this project - just FYI).
IMPORTANT: Generic bids will be IGNORED. Make sure in your proposal you refer to this bid content. Say why you are the right partner. How long will it take? Also note my parallel project on a HTML5 App framework if you are interested.
Mainscreen in 3 sections:
- Header Bar with some information
- Main section with 15 buttons
- Footer bar with 3 buttons + 1 status field (buttons: refresh, settings, info)
Challenge:
- Target is different mobile phones & tablets. So need responsive design which
a) scale buttons on footer correctly
b) aligns the 15 buttons and potentially scales them
Aligining/scaling the buttons is the main part of the work. Buttons are currently HTML5 elements (including 3 icons) with fixed height/width size. They are displayed in a grid.
See two example scrrenshots iPhone and iPad. iPad currently not scaling and looks pretty stupid.
If the mobile screen is too small to show all 15 icons the main section can be scrolled. Like iPhone 4 needs to scroll, iPad is fine.
Button responsiveness:
- have minimum size (current size)
- need to be able to scale to bigger size for tables (maximum size depends on what's still looking good without scaling the 3 png within button too much, let's see).
So button to
a) displayed in grid
b) if screen to small to display 15 buttons in minimum size, then show minimum size and allow scrolling (currently using mCustomScrollbar as drawing page for that)
c) if screen is big enough (like tablet) scale buttons (up to defined max button size) and align nicely
Button consists of several HTML elements -- see attached button template. The button comes with variances - standard and extend. The extended version shows more info (you see it in template as well). Either all 15 buttons show standard or all 15 show extended info. This extended info is and option that can be toggled in the settings page.
If you press a button a small popup will show containing one image. You can then close that popup again.
Project Ask:
- Create 4 HTML pages using jQuery Mobile framework
a) main page with the 3 sections in the page described above
b) dummy info page opening as popup when pressing info in footer
c) settings popup where to enable extended version
d) pop up image when pressing one of the 15 buttons
- Buttons to toggle between standard info and extended info (as per setting)
- Buttons to scale from minimum size up to max size (to be defined) depending on screen size
- If not enough space allow scrolling
- Position buttons in grid evenly space
In your bid refer to how you you will implement/why are you good choice. Bid a la "I've read the description and here are my 1000 references" clearly haven't considered the project requirements and will not be awarded this bid.
Note if your work proves to be great there might be more follow up jobs.
Project ID: #6218000
