Redesigning a City's ArcGIS Online Home Page

5728
18
08-22-2016 08:19 AM
RachelWeeden
Esri Contributor
32 18 5,728

If I weren't a GIS professional, I always thought a cool back-up job option would be to name paint colors. Of course, as a GIS professional, I get to play with color here and there - styling a map, designing a web app, etc. So, I knew it would be a fun assignment when, earlier this summer, the City of Boston's GIS team let me and LDafner-esristaff help with a redesign of their ArcGIS Online site, which they call BostonMaps. And even better - the redesign involved working with the City's new web color style, which included wonderfully-named hues like Charles Blue and Freedom Trail Red.

Some background - several years ago, we worked with the City on their initial ArcGIS Online release. They wanted to make a big splash, and were very deliberate about designing their ArcGIS Online presence - creating a banner graphic, customizing the home page, creating new icons, etc. And the result was well-used for several years - but it was time for an update. One thing that spurred the update was that the City was developing a redesigned web site - pilot.boston.gov (now released). It would be a completely different look and feel - the City developed a new brand guideline, complete with new typefaces, logos (and, of course, colors).

Design and branding (especially in digital media) is becoming increasingly important to local governments, and I'm increasingly hearing GIS professionals mention that they want to build maps and apps whose design is harmonious with branding standards. So, we had our marching orders - make the new BostonMaps design harmonious with the pilot.boston.gov site. I wanted to share details of the work we did, in the hopes that it might be useful for others going through a similar process. Here's the approach that we took, in three simple steps:

1. Banner graphic:  This is the attention-getter of an ArcGIS Online home page! I've seen many great examples of customers who make their own images using these guidelines. For BostonMaps, we incorporated a map screenshot and added a layer of Optimistic Blue on top. Using the B mark/logo (which we also repeated in thumbnails) and tagging to mark it as an official City website complete the look:Blog_BostonMapsBanner.png

2. Flat Design: You may have noticed that the banner graphic and thumbnails look subtly different than usual - the City's web team requested that we use a flat design and eliminate rounded corners and drop shadows to eliminate the effects that give the page dimension in favor of a more minimalist look (this has been a popular web design trend for some time): Blog_BostonMapsBannerCorners.pngTo do this, we went to the Home Page settings and accessed the HTML source code view. Did you know that you can perform various style overrides to the ArcGIS Online home page by inserting HTML/CSS code into this section? For example, this CSS snippet removes the rounded corners & shadows from various home page elements:

<style>

/* remove rounded borders and box-shadow on: */

#matrixLayout, /* org banner */

#featuredMaps, /* featured items control */

#featuredMaps #fHeader,       /* featured items control header */

.galleryNode.small .galleryThumbnail, /* individual featured items */

#bottomContent { /* org description */

  -webkit-border-radius: 0;

  -moz-border-radius: 0;

  -o-border-radius: 0;

  border-radius: 0;

  -webkit-box-shadow: none;

  -moz-box-shadow: none;

  -o-box-shadow: none;

  box-shadow: none;

}

/* if you want to remove the bottom border color on featured items control and org description */

/* this is visible when the box-shadow is removed */

#featuredMaps,

#bottomContent {

  border-bottom: none;

}

</style>

3. Icons: Many people use the bottom half of the ArcGIS home page as a container for additional content - perhaps descriptive text, links to popular apps, or contact information. The City wanted to use this area to promote three collections of their GIS work: Story Maps, Open Ddata and Interactive Apps. To mirror the new Boston.gov site, we wanted to use icons for these three categories that matched the same minimal line drawing asthetic. I'm no artist, so I had to rely on icons that were available to use. Enter my new favorite web site - Noun Project. This web site is a great collection of icons that serve as a visual representation of our language - you can find a wide variety of images for anything from airplane to zebra. We found icons by the same artist for consistency, and made sure they were licensed for our intended use. To make them more 'mappy' I added a pushpin symbol in our favorite shade of red. The result:

Together, these three techniques really had a transformational effect on the City's ArcGIS Online home page - now it blends pretty seamlessly with the City's other web properties, and has a fresh, modern look that the GIS staff is proud to showcase. 

Check it out for yourself - you can visit the site here: http://boston.maps.arcgis.com

18 Comments
GlennLetham2
Occasional Contributor II

Nice example and handy tips, thanks for sharing.

AvinashPatel1
Occasional Contributor III

Good One!

OMARGAAFAR
Esri Contributor

Great example!!!

AnninaHirschi_Wyss1
Occasional Contributor III

Very nice, great job!

Do you know if there is a way to keep the navigation style (Home, Gallery, Map etc.) also in the respective pages? E.g. when you click on gallery, the style is again default AGOL without your "favorite shade of red" underline.

RachelWeeden
Esri Contributor

Hi Annina, thanks for your question. Currently, I believe it is only possible to customize the home page in the manner described in this blog. I expect that we will continue to see more enhancements in future ArcGIS Online releases that allow for further configuring and styling options, however.

deleted-user-t3dSviijg-m9
Occasional Contributor

Great article! I love the use of the three icons as containers for Applications, Open Data, and Story Maps. I'm curious though, are these just images used as hyperlinks to take the user to the map and app gallery supplied with the local government model? If so, that is a really clever way of making the Homepage streamlined and simple. How were you able to use images as hyperlinks? Is that a common functionality, or did it take some HTML, CSS, and Javascript work in the text box to make it all function?

Great read!

GlennLetham2
Occasional Contributor II

I'm not sure if this is exactly what you are needing, however, another way to provide some added customization to a front facing AGO page is possible using the Mapfolio app from the marketplace. You can highlight items based on tags or "faves" etc.. and present them on a custom page (your logo even custom CSS). This might be another option to consider

RachelWeeden
Esri Contributor

Thanks, Nick! Yes, the images are just used as hyperlinks to point to gallery pages. I think this is a really useful way to consolidate content. The way that this is accomplished is by editing the Home Page description with HTML. This blog post by Bernie Szukalski‌ gives a good overview (and actually uses an older version of BostonMaps as an illustration!). I hope this helps!

deleted-user-t3dSviijg-m9
Occasional Contributor

This helped a lot, thanks again

RyanHefley
New Contributor III

I know this is kind of an old thread, but I'm currently redesigning our companies Portal. I almost have it all done, but how did you change the color from the blue to red underline on the navigation bar? Would love to make this a green color for company colors. 

Best,

Ryan

LauriDafner
Esri Contributor

Hi Ryan!

Here are a few steps to changing the header underline color...

- Download the header underline graphic here (it is a very small red icon) - ldafner.github.io/header_underline.png

- Use a program like Adobe Photoshop or a free site like Pixlr to recolor the icon

- upload/host the icon to get a URL (you can upload it to ArcGIS Online and share it publicly to get the URL)

- In the code below replace the red text with the new URL

- Then add that code to your org!

<style>
.top-nav-link.is-active,
.top-nav-link:hover,
.top-nav-link:focus {
  background-image: url('add url here');
}</style>
RyanHefley
New Contributor III

When I click on this your github link, I get an error. 

Thanks,

Ryan!

LauriDafner
Esri Contributor

For some reason GeoNet doesn't like that URL. If you copy the url and paste it in another window you'll be able to access the icon.

Lauri

RyanHefley
New Contributor III

Thank you very much! I just did that, and now i have it to work! It took a little bit to try and implement this in my other code. You also wouldn't happen to know how to change the text color would you? Maybe change the text to something like white (because I have a black nav bar) and then when hovered the text will change a different color?

Thank you so much!

DerekLaw
Esri Esteemed Contributor

FYI,

 

Please take a look at this Esri UK sample called Customiser,

Introducing Customiser — CommunityHub 

 

 

 

Hope this helps,

deleted-user-0nqv06bQ3DtB
New Contributor II

I can't seem to make this work for ArcGIS Online - is it for Portal only?

DerekLaw
Esri Esteemed Contributor

Hi Danny,

Yes, the sample is for ArcGIS Online. Please see the response on your similar comment on the blog post,

> "... This version is just for ArcGIS Online. Where it says 'upload to portal' it will upload to the portal you logged into - which for now will always be an ArcGIS Online portal."

Hope this helps,

deleted-user-0nqv06bQ3DtB
New Contributor II

Hi Derek, in which case it is as i thought. It does not work for me on either Portal (ArcGIS Online or Portal for ArcGIS). A shame as it look very useful.

About the Author
I first got started with GIS as an undergraduate student studying Geography at Penn State. And, imagine my surprise when I found out after graduation that it was an employable skill! My first job was with Chester County PA where I built my competencies from the ground up - digitizing parcels and writing AML scripts to print parcel maps. Next, I worked for the Philadelphia Police Department as a GIS Analyst - there, I was able branch into spatial analysis and web GIS. In 2004, I joined Esri. Currently, I am the Esri Mid-Atlantic Regional Manager.
Labels