Highlighted

Best practice for browser bar

Explorer ,
Feb 17, 2020

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Peter Villevoye | Adobe Community Professional

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... 😉

TOPICS
Design, How to

Views

142

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Best practice for browser bar

Explorer ,
Feb 17, 2020

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Peter Villevoye | Adobe Community Professional

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... 😉

TOPICS
Design, How to

Views

143

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 17, 2020 0
Adobe Community Professional ,
Feb 21, 2020

Copy link to clipboard

Copied

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... 😉

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 21, 2020 0