#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2011
    Posts
    195
    Rep Power
    3

    What Are My Options


    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
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    676
    Rep Power
    441
    Instead of having the overlay close when clicking outside, just add a close button to the overlay. Then it won't close on the iPhone.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2011
    Posts
    195
    Rep Power
    3
    Thanks for your reply... i just don't think the work well on the iphone... i was thinking of using a JS hide / show div that slides out from under the banner... then i can place all notifications in there too... what you think...

IMN logo majestic logo threadwatch logo seochat tools logo