2

This question is fairly simple, though I'm not sure the technology exists yet. I'm building a responsive version of a website to be optimized for use with a tablet device. This is one challenge itself, but another one I've been pondering is this:

When a user activates a keyboard, lets say on focus of a text input, can we A) recognize this and B) respond to this? In some tablets, the keys take up a significant amount of real estate and in some cases that can be less than helpful. If a user is, for instance, typing into a dynamic filter (i.e. Google Instant) that is immediately responding to their results, they have use for both the keyboard and the screen. This leads to a challenge for designers, do we create (or CAN we create) a design that responds to native mobile behavior such as keyboards?

Improve this question
3
  • I'm not sure how your question can be answered. Responsive design is conceptual - it doesn't define implementation. You can create any implementation you like.
    – codeinthehole
    Feb 25, 2012 at 11:27
  • I have seen a question like this on SO: it should be migrated.
    – Knu
    Feb 25, 2012 at 22:50
  • Hi Alec, if your question is "should we create this", then this is the right place to ask it. If you want to find out "how to create this", then you should ask this question on Stack Overflow.
    – Rahul
    Feb 26, 2012 at 1:19

2 Answers 2

Reset to default
3

For web pages, the reported screen/document size doesn't change when the on-screen keyboard is shown. So there is no way to adjust your design with Media Queries or JavaScript.

If you want to adjust your page based on the on-screen keyboard opening, you would have to do it manually based on the field getting focus. With all the different possible screen resolutions (both portrait and landscape) and keyboard sizes and configurations (which aren't detectable), it would be impossible to get this to work properly for all cases.

Improve this answer
0

Wanting to modify the native UI elements of the device itself is counter to the whole idea of taking a responsive design approach.

If you want to use standard web functionality, such as actual text input fields, then, no, you can't have any say over what the browser and operating system do when interacting with it. At most, you can maybe request a particular keyboard using some of the HTML5 TYPE attributes, but that's about it.

You could, of course, just go and build your UI and your own JS based keyboards and the like, but that would be a daunting undertaking and likely introduce usability and accessibility problems rather than solving problems.

Improve this answer
2
  • 1
    I think he means have the web page shrink up a bit to accommodate the keyboard. It's something I wish more apps would do.
    – Ben Brocka
    Feb 24, 2012 at 20:57
  • Either way, still the same principle. Let the device do what the device does. Don't try to create workarounds but embrace the way it is.
    – DA01
    Feb 24, 2012 at 23:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.