Skip to main content
redguitar
Known Participant
February 17, 2020
Answered

Best practice for browser bar

  • February 17, 2020
  • 1 reply
  • 422 views

Hello, apologies if I'm not using the correct terms, this is re: the mobile browser bar, where the URL address appears. I realize this space can "disappear" once interactions start happening, but it doesn't appear to be a consistent behavior that I see across all mobile sites, or all phones. Therefore, I've been designing with the assumption that this space is not available to me, and I've adjusted my scroll line accordingly. My viewport is set at 560 for Android, which looks perfect when viewed on a 360x640 Android phone (my test/prototype phone). If you could please clarify the best practice for accommodating the browser bar I'd appreciate it, thank you.

This topic has been closed for replies.
Correct answer Peter Villevoye

It's fairly impossible to accommodate your design for all possible device screens, browsing apps, and mobile systems. They all have a different sizes and approaches for handling the browser bar (its size and behavior) and other main navigational elements. So pick a size and rendition that suits a use case, design it with or without a sample browser bar (and some behavior), and expect or warn your reviewers to understand that this design is a mock-up.

 

Compare it with giving instructions how to reverse-park a car. You can't anticipate all possible situations, but you'll demonstrate one and hope for the best... 😉

1 reply

Peter Villevoye
Community Expert
Peter VillevoyeCommunity ExpertCorrect answer
Community Expert
February 21, 2020

It's fairly impossible to accommodate your design for all possible device screens, browsing apps, and mobile systems. They all have a different sizes and approaches for handling the browser bar (its size and behavior) and other main navigational elements. So pick a size and rendition that suits a use case, design it with or without a sample browser bar (and some behavior), and expect or warn your reviewers to understand that this design is a mock-up.

 

Compare it with giving instructions how to reverse-park a car. You can't anticipate all possible situations, but you'll demonstrate one and hope for the best... 😉