Hi, i am almost finished designing & coding a new website and i have noticed one small issue…
I have several different buttons that load different js overlays, which pop up and allow users to enter and update certain details - e.g - sign in form & feedback form etc… - so when a user clicks the sign in button or the feedback button, a small js overlay pops into the middle of the screen so that the user can complete the sign in form / feedback form.
This all works fine on all browsers, however it is not ideal for smartphones (iphone and android) and i envisage a lot of my users visiting my site from mobile devices.
The main reason i have used js overlays, is to keep the user on the same page - e.g - so when they go to sign in or leave feedback, they can do so from the same page, instead of having to bring the user to a new page. The main reason i need to change from these js overlays, is because when a user views it on an iphone, the overlays loose focus when a user clicks into a text field (i have done a lot of research on this and everyone seems to agree that i need to drop the,)
(please do not advise on building a separate mobile site or separate code for mobile devices… for now i just want a method / interface that works well across all browsers / platforms)
Here is an example of what i am currently using (click the login button (top left)) - http://soundcloud.com
Here is what i am thinking i might need to use (click the the account login button (top right)) - http://www.letshost.ie
Question
What is the best user interface to use on a website, so that when a user clicks a button a small form displays allowing them to input data, which allows them to stay on the current page
Thanks for reading all of this 