Your organization home page is the place visitors and organization members will start. How your home page looks will create first impressions – not just about you as a GIS organization, but also about the quality and veracity of the maps and apps people will find there.
People do judge books by their cover, so it’s important to have a professional looking, aesthetic, and well-organized home site, whether you’re exposing it only within your organization, or to a more public audience.
As the administrator of your organization, you can create a compelling and attractive home page using easy-to-configure settings. And with a little bit of HTML know-how you can do even more. In this post we’ll take a closer look at how to visually enhance your organization’s home page.
The organization Administrator sets up the organization’s home page, and can modify it at any time. The home page settings can be accessed after logging in. Click Organization:
Then click Settings:
Click the General tab (a). When you set up your organization you can enter a name (b). In this example our organization is titled “The Science of Where.”
We’ve also added a logo (c), and entered a brief description (d). To display the description, check the box (e).
It’s also a good idea to add a contact for the page. This mailto link appears at the bottom of the home page. Scroll further down in the General tab to locate Link and check the Contact Us box, and add the mailto contact information.
You can also choose a different graphic than the default for your home page background. Click the Home Page tab, then scroll down to the Banner section. Choose from one of the displayed options. We chose the gray banner.
Here’s what our home page looks like. It’s not going to win any awards, but it’s a start.
Beyond the basics
To improve the look of your home page you can create a custom custom banner. When creating a custom banner you can start with a size of 960 pixels wide by 180 pixels high (the smallest banner the home page supports). Add the custom image in the Banner section of the Home Page tab:
With a custom banner image our home page is much more appealing. Note that if you use a custom image you’ll have to include the organization name, logo, and other graphics you might want directly on the image.
Add a gallery
Something you should definitely think to add is a gallery ribbon featuring interesting or useful maps and apps. To add featured content to your home page, create a group (we named ours “Featured Maps and Apps”) then add the items you want to display to that group. We followed best practices to create good thumbnails for each item. For more information see Put your best thumbnail forward.
Once you’ve added the desired maps and apps to the group, select the group by going to the Featured Content section in the Home Page tab:
Our home page now includes featured content, and is starting to look pretty snappy!
Using larger background graphics
You can use a larger custom image that fits behind the featured content ribbon by changing the Banner settings. There are two good size choices; 960 x 400 px, and 960 x 470 px.
960 x 400 pixels
A good size to use is 960 pixels x 400 pixels, which leaves a bit of the featured content ribbon exposed, allowing the text under the thumbnails to be clearly visible on the gray background.
Add an image of this size the same way as as you you did above; by adding a custom image in the Banner section of the Home Page tab.
Here’s our home page after adding the larger (960 x 400 px) graphic.
Tip: Note that the bottom corners are automatically rounded when you add a custom image as described above. If you don’t want the corners of the image rounded (I personally think the background image at this size looks better if the corners are not rounded), you can edit the HTML used to display the image.
In the Banner section click Custom design, then click the View HTML Source button:
You will need to know a little HTML to make the edits, but you can easily remove the rounded corners to keep them squared off. Select the inline Style element at the end of the HTML (highlighted in blue), delete, and Save.
Here’s the same graphic used for the Home Page without rounded corners. Compare to the rounded corners shown above and decide which you find more appealing.
960 x 470 pixels
Using an image sized at 960 pixels x 470 pixels will completely cover the gray background. This means the thumbnail title text, which is blue, will display on top of your image. To make the text pop, you can add a light colored stripe or fade transition along the bottom of your banner (as is shown in this example).
Add the image the same way as as you you did above, by adding a custom image in the Banner section of the Home Page tab. Below is the home page, note the corners are automatically rounded.
There’s lots more that you can do to customize your organization home page by adding your own HTML in the Banner section and also the Organization Description. For more information see Supported HTML.
For more information
This post was originally published on June 20, 2012, and has been updated.