ArcGIS Hub Banner Dimensions

KristenWobbe1

Hello!

Our Agency is interested in getting started with ArcGIS Hub and are hoping to start with the Hub Template called Share Open Data. I wanted to get input from our Visual Information Specialist on ideas for graphics, a banner, and color branding. My question is are there standard dimensions for the Hub banner that I could provide to our graphics expert? What is the best method for determining the dimensions of the Hub banner just to get started, or could you point me to how to acquire the dimensions?

Here's a screenshot of the one that comes with the Template:

 

KlaraSchmitt

Hi Kristen,

It is a little hard to give recommended banner dimensions for background images in Hub as Hub is a responsive app and content will re-order based on device size. For example, with that template, assuming you keep the title, subtitle, and search as-is, and add no other cards to that row that would increase height, the row height is 365px on desktop and 616px on an average size phone screen. Depending on what you want to guess is the average desktop browser screen might be, maybe ~1200px for laptop screens or ~2000px for larger screens, I'd say the minimum size requirements for replacing that image would be a 616px height banner than is 1600-2000px wide. 

But because large images do tend to load more slowly, especially on mobile networks, it's also best to use JPEG if no transparency is required and to compress images if possible, using something like: https://www.iloveimg.com/compress-image

Lastly, as previously stated, Hub is responsive; this means we may proportionally resize your background image so that regardless of device size, your image will cover the entirety of your row background. It also means that parts of your image may not always be visible depending on a viewer's screen size. We do provide an option to set image focal point. This lets you choose which portion of the image should be the part the primary focus as the image scales for different devices.

If you do wind up changing the height of the content in the row, you can determine your new row height on desktop and mobile by a couple different methods.

1) You can use a browser ruler plugin, such as this Chrome extension, which will let you draw a rectangle on any portion of your screen and get measurements: https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal?hl=en 

2) Alternatively, you can use Chrome Dev Tools to measure the height of an element. You would right-click on the row, select inspect from the dropdown menu, and then click on the <section> html element from the Elements panel. This should pop up a white tooltip on the visual panel with the dimensions of the row and that is what you can use to size images. You do want to do this for both a desktop browser and a mobile browser, but Chrome Dev Tools does offer a mobile emulator, simply click the icon, select the device type, and repeat the inspection of section.