Highlighted

Adjusting design to include space for the browser URL bar

Explorer ,
Dec 18, 2019

Copy link to clipboard

Copied

I'm not sure if I'm asking this correctly, but I'm designing a mobile site, using Android viewport artboards. I have a pinned footer, which I'm resting on top of the scroll line. But when viewed on a phone, the footer is not visible because the browser URL bar pushes all the content down. Other than sending myself a screen grab, manually measuring the height of the URL bar and adjusting my designs to account for that additional content (which means ignoring the scroll line that XD gives me), am I missing something?

Adobe Community Professional
Correct answer by Sjaani | Adobe Community Professional

Hi Flixer,
You make a great point, there is no allowance in the XD artboard for browser specific requirements. If you're planning to do a lot of designs for a specific device size you might be best to create a template based on the browser so you can show developers exactly how you want things to look on that device.
There are resources with mock-ups and templates already created which could save you time if someone has already created something you can use.

Here's a few sites which might help
 Web Browser Mock Ups
XD Resources 
Free UI design kits 

TOPICS
How to, Mobile, Preview, Share

Views

474

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

Adjusting design to include space for the browser URL bar

Explorer ,
Dec 18, 2019

Copy link to clipboard

Copied

I'm not sure if I'm asking this correctly, but I'm designing a mobile site, using Android viewport artboards. I have a pinned footer, which I'm resting on top of the scroll line. But when viewed on a phone, the footer is not visible because the browser URL bar pushes all the content down. Other than sending myself a screen grab, manually measuring the height of the URL bar and adjusting my designs to account for that additional content (which means ignoring the scroll line that XD gives me), am I missing something?

Adobe Community Professional
Correct answer by Sjaani | Adobe Community Professional

Hi Flixer,
You make a great point, there is no allowance in the XD artboard for browser specific requirements. If you're planning to do a lot of designs for a specific device size you might be best to create a template based on the browser so you can show developers exactly how you want things to look on that device.
There are resources with mock-ups and templates already created which could save you time if someone has already created something you can use.

Here's a few sites which might help
 Web Browser Mock Ups
XD Resources 
Free UI design kits 

TOPICS
How to, Mobile, Preview, Share

Views

475

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
Dec 18, 2019 0
Adobe Community Professional ,
Dec 18, 2019

Copy link to clipboard

Copied

Hi Flixer,
You make a great point, there is no allowance in the XD artboard for browser specific requirements. If you're planning to do a lot of designs for a specific device size you might be best to create a template based on the browser so you can show developers exactly how you want things to look on that device.
There are resources with mock-ups and templates already created which could save you time if someone has already created something you can use.

Here's a few sites which might help
 Web Browser Mock Ups
XD Resources 
Free UI design kits 

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...
Dec 18, 2019 2
flixer LATEST
Explorer ,
Dec 18, 2019

Copy link to clipboard

Copied

Thanks very much for the help, I will check those resources.

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...
Dec 18, 2019 0