[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 327
  • Last Modified:

very low keyboard response on web page using tablet

We have the following home page: https://www.ohprs.org. When using a tablet, specifically an Android, the page comes up fine, but trying to type login ID and password is extraordinarily slow with the user waiting many seconds between letter. Other website, such as yahoo, respond quickly. This must be something on the tablet. The webpage is not doing anything special for mobile devices except not loading the slideshow.

Should it do something special for mobile devices? Any idea why it is so slow with keyboard interaction?
0
jmarkfoley
Asked:
jmarkfoley
  • 3
  • 3
1 Solution
 
sentnerCommented:
Looking at the site, there is a function that rotates through several pictures, and appears to be continually updating the page.  This is likely slowing down the tablet's browser significantly.  On a PC it would be able to handle this because most major web browsers are multi-threaded and would put that processing on a different thread.  However on the tablet the browser is much less advanced and has to keep switching context to handle the picture updates while you type in the box.
0
 
Scott Fell, EE MVEDeveloperCommented:
Step 1: Validate

http://validator.w3.org/check?uri=https%3A%2F%2Fwww.ohprs.org%2Fohprs%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Start by attacking these errors.  Fixing one, may cascade and fix others.  I can't really see anything else.  

If you can provide a demo username and password we can look what is going on in the log in phase.  Please don't make us register though.  Just provide a demo account.

Thank you.
0
 
jmarkfoleyAuthor Commented:
sentner: >  there is a function that rotates through several pictures,  ...

Yes, I thought that was the problem, but I did disable the for mobiles (smart phone, tablet) and it didn't help. Are you trying to access the site with a mobile device? It should only display one picture in this case.

Scott Fell (padas): Can't really provide a demo account, but the problem occurs *while* trying to type in an account ID -- it doesn't have to be valid.

In fact, this appears to only happen with a Samsung Android tablet. My Samsung Android smart phone has no problem.

I'll investigate the validity problems -- and try other mobile devices.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Scott Fell, EE MVEDeveloperCommented:
The issue is easier to see with just the form. http://jsbin.com/gagala/1/edit

1) Use form controls such as <input>
<input type="text" placeholder="Login ID">

Open in new window


2) Use buttons for buttons.

3) Validate your code.
Just this bit below is not valid.

4) Avoid absolute positioning.

5) Make the page responsive so you don't have to "zoom in"


6) Avoid inline styles.  Keep html separate from css.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>test</title>
</head>
<body>
<form name="memberLogin" method="post" onsubmit="return submitLogin()" action="index.jsp">
	<input type=hidden name=logout>
	
	  <div style="position: relative">
      	    <img class="login" src="images/user_icon.png"><input type=text class="login"  autocomplete="off"
      	      tabindex="1" onfocus="loginFocus('idPrompt')" onblur="loginBlur('idPrompt',this)"
      	      autocomplete="off" name=logId size="10" maxlength=60 value=""/>

	    <div id="idPrompt" style="position: absolute; top: 5px; left: 25px; font-size: 12pt; color: gray">
	      login id
	    </div>

	    <div style="position: absolute; top: 1px; left: 146px">
	      <input id="subBtn" type="image" SRC="images/login.png"  style="height: 52px; border: 0" 
	      	 onmouseover="this.src='images/login_over.png';"
	         onmouseout="this.src='images/login.png';" />
	    </div>

	    <!--div style="position: absolute; top: 1px; left: 146px">
	      <input id="subBtn" type="submit" SRC="images/login.png"  style="height: 52px; border: 0" 
	      	 onmouseover="this.src='images/login_over.png';document.body.style.cursor='pointer'"
	         onmouseout="this.src='images/login.png';document.body.style.cursor='auto'" />
	    </div-->

	    <div style="position: absolute; top: -2px; left: 141px">
	      <img style="height: 56px" src="images/login_fancy.png">
	    </div>

	    <div style="font-size: 11pt; position: absolute; top: 5px; left: 215px; width: 245px;">
	      <b>To register</b>, <i>or</i> if you have forgotten your password
	      <a href="password.jsp">click here</a>.
	    </div>

	    <div id="pwPrompt" style="position: absolute; top: 30px; left: 25px; font-size: 12pt; color: gray">
	      password
	    </div>
    	  </div>

    	  <div style="margin-top: 2px; clear: both">
      	    <img class="login" style="height: 22px; border-bottom: 1px solid rgb(237,238,241)" 
      	      src="images/user_lock.png"><input type=password class="login" tabindex="2"
      	      onfocus="loginFocus('pwPrompt')" onblur="loginBlur('pwPrompt',this)"
      	    name=password size="10"/>
    	  </div>

     	</form>

</body>
</html>

Open in new window

0
 
jmarkfoleyAuthor Commented:
I've revised the html to validate as HTML5 with only 3 innocuous errors. I thought perhaps the 'autocomplete' attribute on the <input> tags was not working because docs say it is an HTML5 attribute. Nevertheless, that didn't help. I also turned of the tablet's form completion and word suggestion features. No matter what, there is a delay of about 1 second after tapping a character before it shows.

Interestingly, I get the same delay when typing in a new URL in the address bar. I do not see this problem on other websites on the same tablet. Hmmm, could it be the https versus http?

As to your other suggestions, largely not practical:

> The issue is easier to see with just the form. http://jsbin.com/gagala/1/edit

I went there, but I don't really know what I'm looking at or supposed to do. The form on the right panel does not seem to take input.

> 1) Use form controls such as <input>
> <input type="text" placeholder="Login ID">
   
Not quite sure what you're suggesting here. Don't really see that the "placeholder" attribute is needed, if that's what your suggesting.
 
> 2) Use buttons for buttons.

Web designer designed use of images. What can I say. Still, this should not account for slow typematic.

> 3) Validate your code.
 > Just this bit below is not valid.

Done.

> 4) Avoid absolute positioning.

Don't really know how I would position images and DIVs absolutely without that. Again, not a problem on other mobile devices.

> 5) Make the page responsive so you don't have to "zoom in"

Not sure what you mean for me to do here.

> 6) Avoid inline styles.  Keep html separate from css.

Well, I'm not going to create classes for all the in-line styles. I'm skeptical that would speed things up and it would be a lot of work for the experiment.

ANALYSIS:

This page works fine on other mobile devices such as my Samsung Charge. It works fine, no keyboard delay, on this tablet for other sites including sites I've developed using in-line styles and absolute positioning.

Most puzzling, there is the same keyboard delay when typing a URL into the address line on this tablet when on this site, but no delay in the address bar when on other sites. I don't see how the browser's address line would be affected by the current page, unless the current page was constantly refreshing or loading, which I don't believe it is.

Browser User Agent for Samsung Galaxy 10.1 tablet:

Mozilla/5.0 (Linux; U; Android 4.2.2; en-us; GT-P5113 Build/JDQ39) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30

Browser User Agent for Samsung Charge smart phone:

Mozilla/5.0 (Linux; U; Android 2.3.6; en-us; SCH-I510 4G Build/FP8) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
0
 
Scott Fell, EE MVEDeveloperCommented:
The jsbin link is your exact code without the css.  Try surfing to just the view page  http://jsbin.com/gagala/1 and it is very difficult to bring up the keyboard on one of the form inputs.    This is will not submit because I did not load your js.  

Now surf to a plain old form  http://jsbin.com/gagala/2 and notice that your keyboard comes right up.  

The only purpose is to point out some issues in the code.   You don't have to take things literally like using a placholder or not.   But you can see the speed difference when the form element is not being reconfigured.

Best of luck!
0
 
jmarkfoleyAuthor Commented:
Scott Fell (padas): I will try your ideas as time permits. Meanwhile, I checked this webpage with various other mobile devices: Andriod smart phone, iPad, iPhone and others and none of them have a problem with this page; only the Android Galaxy tablet. I need to back-burner this for a while.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now