Responsive Templates: Logo Sizing & Display

PhotoShelter works hard behind the scenes to prepare your website's logo for optimal display across all devices, including HiDPI displays (which include Apple's "Retina" models). 

 

Our General Approach

Each of our responsive templates was designed to prominently feature your site's logo, a crucial element of your branding. By default, we will use your site name to generate a text-based logo, but you may choose to edit the text or upload an image logo to override it.

HiDPI-Ready Image Logos

To accommodate the high pixel density of HiDPI displays, images must be available at a larger size than is necessary for a non-HiDPI device. In the case of your image-based logo on PhotoShelter, the file size used on an HiDPI display is exactly 2x bigger than its non-HiDPI counterpart -- this ensures a high-quality, consistent delivery experience across display types.

For this reason, when preparing your site, we encourage you to upload a large, high-resolution version of your logo (up to 2040px on the image's longest side; PNG, GIF, or JPEG supported). This way, PhotoShelter has the full version of the logo available for HiDPI displays, and after the logo is downscaled by 50% (in non-HiDPI contexts), it will still display at a reasonable size.

Please see the "Guidelines per Template" section below for more detailed size recommendations and other information specific to each template. 

If you do not have a large version of your image logo (meaning that it would not look passable when displayed at half of its original size), you may choose to disable HiDPI/Retina support for your logo. This way, it will display at its original size on non-HiDPI displays, though its quality will be compromised on non-HiDPI displays. It's up to you whether this risk is worth it, but as HiDPI displays will only increase in number over time, we strongly recommend future-proofing your portfolio by obtaining a larger version of your logo.

Please note the "HiDPI (Retina) support" setting in the below screenshot. To access your Logo Settings, open your Site Builder, and click the pencil icon next to your site's logo.

logo_settings.png

Please note that in the interest of image quality, we will never upscale your logo, so it will never display at a size larger than it was uploaded to PhotoShelter.

 

Guidelines per Template 

Please note that the maximum logo size across all templates is 2040px on the image's longest side.

If you have the HiDPI (Retina) support disabled, the following size recommendations do not apply.

Element

  • Recommended minimum logo width: 432px

  • When your site loads, we calculate the screen size and set a maximum width at which your logo may display; this way, space is shared optimally between your logo, navigation, and images

  • Square or vertically-oriented logos are recommended for this template 

Downtown, Pivot, Sonnet & Shuffle

  • These templates have more flexibility with logo display; main content area is not affected by the logo's size/position

  • Many different logo shapes and sizes will look nice on these templates

East

  • Recommended minimum logo height: 75px

  • When your site loads, we calculate the screen size and set a maximum width at which your logo may display; this way, space is shared optimally between your logo, navigation, and images

  • Horizontal logos are recommended for this template

Horizon

  • Recommended minimum logo height: 80px

  • When your site loads, your logo will be displayed at half its uploaded height

  • Horizontal or square logos are recommended for this template

Marquee

  • Recommended minimum logo height: 144px

  • When your site loads, we do a behind-the-scenes calculation to determine whether there is sufficient width to display both your logo and your site's navigation

    • If, after the logo fills the available width, there isn't enough room for all navigation items to display, the nav is automatically collapsed under a menu ("hamburger" icon)

    • This same approach applies to text logos, though the size of the text is fixed (i.e. not presently scaled to fit the space, as image logos are)

  • Horizontal logos are recommended for this template

Promenade

  • Recommended minimum logo height: 136px

  • When your site loads, we do a behind-the-scenes calculation to determine whether there is sufficient width to display both your logo and your site's navigation

    • If, after the logo fills the available width, there isn't enough room for all navigation items to display, the nav is automatically collapsed under a menu ("hamburger" icon)

    • This same approach applies to text logos, though the size of the text is fixed (i.e. not presently scaled to fit the space, as image logos are)

  • Horizontal logos are recommended for this template

Still have questions? Contact us.

Comments

Powered by Zendesk