What Are My Options

Posted on 2012-09-14
Medium Priority
Last Modified: 2012-10-05
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


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 :)
Question by:oo7ml
  • 2
LVL 19

Accepted Solution

Bardobrave earned 2000 total points
ID: 38397995
Instead of using overlays include your forms code into your pages design and hide it until users click the button. When form is submitted hide it again.

Author Comment

ID: 38398028
Ok, i think this is probably the best option, i will look for a script on http://codecanyon.net - do you know what i should be searching for, thanks...
LVL 19

Expert Comment

ID: 38398068
The worst part here is that you'll probably need to adjust your whole design to make the forms to "blend gracefully" into the rest of the page.

If you can make that design changes you just need to show and hide them through CSS or, if you use jQuery just by using .show() and .hide()

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question