Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
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 '12 at 11:27
    
I have seen a question like this on SO: it should be migrated. –  Knu Feb 25 '12 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 '12 at 1:19
add comment

2 Answers

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.

share|improve this answer
add comment

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.

share|improve this answer
    
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 '12 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 '12 at 23:09
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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