Best Practices when setting up your login page

The first interaction many attendees have with your event is when they are logging in. You can control the look and feel of your login page by changing its page background and banner. This document explains how to make these changes, and also gives examples of best practices to make your page inviting and easy to use.

Overview

In a nutshell, here are the main steps. For more details, see the How To Update Your Login Graphic article. 

1. In Event Cloud, navigate to Admin > Event > Setup Properties.

2. Scroll down to the ‘Choose File’ buttons to edit the following:

• Logo: the main banner at the top for the screen throughout the site, including the login page.
• Favicon: the small, 16x16 px icon that lives in the browser tab for your site.
• Background Image for Login Page: the main background image for your login page.

Remember, when uploading a new logo/banner or background, it may take a minute or so to appear on your site, and you may need to do a ‘hard’ refresh (Ctrl+F5) of the page to see the new images appear.

Best Practices and Examples

The recommended logo sizes are:

• Width: 400-600px - If the logo is too wide it will get squished in the banner.
• Height: 89px - If the logo is too big it will look poor in the emails.

The standard background image default size is:

• Width: As wide as you’d like, at least 1000px to be as wide as the default login text. Note that we recommend an image width of 1920px or more (or a solid color of 1200px or more) if you want the image to display well for the entire page width.
• Height: 471px - Keep in mind that the default settings for “upload a background image” will fit into a form factor of (width) of your image by ~471px high.

If you choose, you can use a larger image that fills out the whole screen behind the login text & fields if you want something with more flair – you can use a solid color that matches your branding, or a color gradient that blends from one color to another. If you prefer a textured background, a texture image can be tiled/repeated either vertically, horizontally, or both.

Note: If you would like to use a full-screen background, please provide your image to your Account Manager and they will assist you with this, or any other customization of the page beyond the default options.

Figure 1: A mostly solid background-color

Figure 2: A background image (in this case, a green gradient that is not too distracting)

When selecting an image, remember that there is welcome text with login instructions in the center of the page. Caution: Be aware that too busy a background can make this hard to read and can clash with the text in a negative way!

Figure 3: A background image (in this case, too “busy,” making it hard to read the text)

Also, you can combine a logo and background image. If you use a background color or image, you can also upload a logo, which will be displayed in the lower left of the screen. Your logo will be displayed on the page with the background of your choosing, without needing to be a combined pre-made image. This can help avoid issues of stretching & distortion when the screen size changes if you tried to incorporate the logo in your background image instead of uploading a separate logo.

Figure 4: A background where the logo is part of the background image

When planning your background, remember that every page also has the banner with your company/event name and logo, which goes at the top left of the screen above the login fields.

Figure 5: A logo and banner above a background image.

Think about how you’d like the banner and background to work together to create a unified visual presentation. While the branded logo/banner itself is typically about 600px wide, the “blank” white space to the right of your banner, all the way to the right edge of the screen can be filled in with the main/background color of your banner, to essentially create a continuous color theme that stretches across the entire top of the login page.

Figure 6: A logo and banner where the banner color exactly matches the page background for a seamless look

Recommended file types

• Bear in mind the file types you may need for your purposes. We recommend that your company logo should be in ‘.svg’ format, as this will allow it to scale up or down in size without any loss of quality.
• If you’d like to layer anything, like images on a colored background, be sure to save the images as a ‘.png’ or ‘.bmp’ file type, which allows for a transparent background and seamless layering.

Additionally, be sure to supply high-resolution images for any logos/background imagery so they will look good at any size!