Latest Contributions by KlaraSchmitt

‎08-06-2019

Hi Nataliya, I'm going to start with your padding question first. It's not actually an issue of padding. You can use Chrome Dev Tools to inspect (right-click the element on the page, then click Inspect from the dropdown menu) the two navbars you have in your header. Highlighting a portion of the code will show you want element is being controlled on the web page. In the Styles section of the Dev Tools, you can then scroll the CSS rules being applied to this element and toggle the checkboxes on and off until you find what attribute is the culprit. In this case, the padding is not padding and it actually comes from a min-height that is set on this element from Bootstrap and is therefore part of our codebase. I think you were trying to fix it by using .first-tier {height: 0;}, but that wouldn't work because height and min-height don't negate one another. To fix the space between your headers, you would want to add this line of CSS to your code. .site-header .custom-header .navbar { min-height: auto; } ‍‍‍‍‍‍‍ As for your issue with a responsive state, your have a couple different factors at play. 1) You do have media queries, which is good, as those are what will help you control your custom header at different sizes. But they are used on classes that don't exist in your code at all. It looks like you're trying to hide navigation links at smaller sizes, but when I shrink your header down, I don't see any classes that do the hiding (eg. .header-container .navbar.navbar-default .navbar-collapse.collapse). If the classes aren't there in your HTML, then your CSS and media queries won't work and that's why your links are wrapping and overflowing the header instead of collapsing into a mobile menu. 2) Based on the classes you have in your CSS, I think you were trying to use https://getbootstrap.com/docs/3.4/components/#navbar to handle the responsive state for you. If that's the case, you need to base your HTML on that example. We use Bootstrap 3, but in order to have Bootstrap handle the responsive behavior for you, you need to format your HTML following their guidelines. You are currently missing the part that generates the burger menu and contains the data-target that ties it to the matching ID on your nav-collapse div. <nav class="navbar navbar-default"> <div class="container-fluid">  <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div>  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Link A</a></li> <li><a href="#">Link B</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Link C (Dropdown)<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Link 1</a></li> <li><a href="#">Dropdown Link 2</a></li> <li><a href="#">Dropdown Link 3</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Right-aligned Dropdown<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Link 1</a></li> <li><a href="#">Dropdown Link 2</a></li> <li><a href="#">Dropdown Link 3</a></li> </ul> </li> </ul> </div> </div> </nav> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ So you have two options for a more responsive header, you can either format your HTML to follow the Bootstrap specification, which will handle responsiveness for you or you can tie media queries to the actual classes you have in your HTML. Although, if you do the latter, I recommend you add more unique classes to your btn-group divs, so that you can associate a media query to something less generic.

‎07-16-2019

Hi Sarah, By turning off that capability that Patrick mentioned, visitors will have the opportunity to open a result by clicking the title and viewing the full description on the item details page. However, they will still have to click the title. Unfortunately, we don't offer any functionality allows visitors to expand the search result description within the context of the search results page. We truncate descriptions like many other search engines and use an ellipsis to denote that you might not be seeing all available information within a search result item, which is a pattern similar to Google: We can take your request under consideration for the future.

‎07-10-2019

Hi Aaron, Currently, it is not possible to configure collections. However, we do have an issue on our backlog for giving more control over that feature. The collections present in autosuggest are intended to help visitors more easily explore content available on a Hub. However, unlike the search results page, collections are not supposed to show in the autosuggest if you have no content of that type in your catalog. If you only had data in your catalog, then only data should show as recommended in autosuggest. I was able to confirm that is not what is happening right now. I will open a bug about it.

‎07-10-2019

Hi Sarah, Sorry for the slow response. In our search results pages, we use the ellipsis to truncate the text coming from the item description because descriptions can often be a couple paragraphs, which is too long to easily scan for most people. We follow a similar design pattern as other search engines in using the ellipsis from a grammar standpoint and not as a "read more" button. That being said, I think this may have bug that got fixed (or at least I'm having a hard time reproducing it on my site.) I know it's a capability that you can turn on to have apps and maps operate open full-screen under your header and I think the bug was that it got turned on by default. Could you let me know if you're still experiencing this problem?

‎07-10-2019

Hello Kirsten, We currently do not support modal dialogs that trigger from an onLoad event and you are correct that we block javascript from our text cards. We do this to mitigate the security risk of having malicious code injected and also because people used to load in duplicative instances of jQuery or Bootstrap.js that would collide with our files and cause things like dropdown menus not to work correctly. We do have a feature for this on our backlog, but I cannot give you an answer for when it'll be included in the product. I, will, however add your request to the issue. In the meantime, is it possible to present that information in an info alert at the top of the page? If you were to use a custom header, you could even position it right near the top. I see a number of alerts around cookies these days that do not require explicit consent and are worded such that if I continue to use the page, I am agreeing to have cookies track my movement.

‎05-13-2019

Hi Arne, Are there any specific problems you are trying to address? I might be able to find others who'd have resources if you're looking for specific areas. Unfortunately, my background is more of general UX/UI with a focus in web accessibility and less so in cartographic areas.

‎05-09-2019

If you have a custom header, then yes, you can do the same thing with your own links. You just need to use the full anchor URL in the href for your links. If you need additional information on how to construct a navbar in HTML, I recommend the Bootstrap docs: https://getbootstrap.com/docs/3.4/components/#navbar But the process for adding inline anchor links is still the same. If you are trying to anchor link to a different type of card (ex. a chart chart), you will have to add a text card above the card you are targeting and then add the anchor ID. You then append that anchor ID by a hash at the end of your site URL and you now have the full URL for your anchor. Our documentation site is going to go through an overall in the next few months to improve ease-of-use, but I will pass that along to the person who manages it.

‎05-09-2019

> Ideally, I don’t want to change the navbar on the “News” page, I want to be able to navigate back to the home page sections from the “News” page. From what you are saying and what I’ve experienced, this doesn’t seem possible as you either have to have the navbar coded to a single Hub page content sections or have the navbar coded to go to other Hub site pages and you can’t mix and match. You should be able to do what you're saying. If you have a site that has 3 links in the header:"About Us" "Data" and "News." "About Us" and "Data" could be anchor links to sections in your main site whereas News could take you to a second page. However, as it currently stands you must use absolute path for anchors links (example: https://earthday-parkville.hub.arcgis.com#get-involved) in the external link field when you are adding them to the header. There is also a bug that if you have a gallery card on your main site and it appears above the anchor link for "About Us" that someone clicks on the News site, the page might jump a little as the gallery card loads in because the anchor link happens faster than the page loading. To correctly set up your anchor links, you'll need to use an id on the in-page anchor and the absolute path in the header. So for a heading on your main site, you'd want to use a text card to format your anchor link like this: Then in your site header, add an external link to your menu and paste in the full URL to your anchor link. It should look like this: Then you'll have an anchor links in your header that can take you to in-page content on your homepage from both the homepage and the News page.

‎05-08-2019

Hi Chris, I'm afraid I don't understand what you are trying to do. If you had a site with a Header containing the links for Home | News | Blog, we would expect that you'd have that same Header on the News and Blog pages as well. Are your menu links broken when you go to the News page? Do you have a URL I could look at? In short, Hub Pages inherit Header, Footer, & Theme from the Hub Site, so you would not be able to change the Header from page to page. If you want unique Headers on each page, I would recommend you 1) use a site instead of a page if you want to use our pre-defined layouts or 2) use custom HTML/CSS within a Text Card to give the illusion of a header that you can then change page by page. I've marked up the screenshot below so you can see the pieces. My Hub Site is called "Get Involved." My site header has no links and only has a title. However, using the #2 method I mentioned above, I added a pink navigation banner (or a fake header) to my site using HTML and CSS. I can then manually add links to that area that take me to the pages. On the Discover page, I do not have the pink banner because it is not a formal part of my header. It is a Text Card. However, I can copy the code that makes the pink banner from my Hub Site to my Hub Page and then I'd have the ability to change the links for that page because it's just the Text Card. Here I have added a pink row for my Hub Page. I then add a Text Card. I open the Text Card code editor from my Hub Site and copy the code over to my Hub Page to duplicate the look of my banner. I could change the links if I wanted. That seems to be what you're trying to do. I don't necessarily recommend this model, but it is possible. However, you would have to have some knowledge of HTML/CSS to get a look like this. We only handle styling of your formal header if you choose one of our pre-defined layout options and add menu links through the editor. But the formal header does not support changing links page-by-page.

‎05-07-2019

Hi Chris, With Hub, you set branding at the site level, which includes navigation, header, footer, and theme. Pages then inherit those settings from the parent site. The purpose of having a consistent header on all pages within a site is to actually help visitors navigate as it can be very disconcerting to have a primary navigation menu change as one moves about a site. Consistent navigation is recommended by the Web Content Accessibility Guidelines and is also a common design best practice in helping visitors orient themselves, especially if they've arrived at a page from a search engine as opposed to entering it from the site's homepage. If your primary concern is that your visitors have no way back to your homepage, we actually have you covered. In the header, your logo and/or site name will always take visitors back to your home site no matter what page they are currently viewing. You wouldn't need to add a link back to the home from your subpages. We automatically handle it in our pre-defined header options. If you absolutely need to have two different headers on each one of your pages, I'd actually recommend you create two sites (instead of pages) and you can link between the two sites and each one can have a different menu.

‎04-23-2019

Barring any unexpected issues, the changes that I will be describing in this post will go out on May 7th, 2019. What is Changing? In our current header settings, you only have two options: Default Header This gave you options for a logo URL and title, was styled from the theme builder, and featured the search bar and Sign In. If you were signed in, this was also where you would see notifications and your account/profile dropdown menu. Custom Header This gave you the ability configure your own header using HTML and CSS. This was the only way to add your own menu links. When we release our new version of navigation, we will be separating it into two parts: Global Navigation & Header Global Navigation Moving forward, this feature will contain search, notifications, and your account/Sign In. We’ve designed this as a minimal view that allows us the ability to add new functionality without impacting the information hierarchy of your own site branding and menus. Search will be collapsed by default to keep global nav compact, except on search results where it is a primary action. You might notice the "My Data" button is missing. Don't worry, that functionality remains in your account profile. But you will notice a few new additions. For those with content-creating privileges, a "New" button will allow you to make content quicker and for the those exploring Hub content, we’ve added a menu button that expands a panel to view search collections. For brand new sites, Global Navigation will be on by default. For existing sites, Global Navigation will be turned off by default so that those who have very restrictive branding guidelines have the option to keep it off. However, we strongly recommend that everyone turn on Global Navigation. You can do this by going to https://hub.arcgis.com/admin/ and signing in to view your site. On your site editor, you will see the following methods to turn it on: A quick toggle at the top of the customize panel (this will go away after a couple visits) A persistent toggle in your header settings A persistent toggle in your site capabilities To turn it off, look for it in capabilities. In existing sites, Global Navigation will initially be themed using your site’s body background and body text theme colors, but you can change this in the Theme section of the Customize panel. Why is it so important that you turn on Global Navigation? Navigation plays a critical role in teaching others how to use your website and accomplish their goals. People who have a hard time navigating a site and its pages are going to be less likely to revisit it in the future, and without Global Navigation people using your site will not have the ability to Sign In or Sign Up for Community accounts. For our Hub Premium customers, global navigation: allows you to interconnect multiple initiatives, pages, and events within your Hub through search, which benefits visitors and content-editors alike in quicker access to what they seek offers visual consistency between sections of your Hub so that visitors aren’t required to memorize how they got to a given location a means for others to explore all the content your Hub has to offer, create accounts, favorite items, comment (if enabled), and receive notifications as they become more involved in initiatives While our search is currently scoped to an initiative, we will be adding functionality in the coming months that will broaden a visitor’s ability to search against your whole Hub if relevant to their task. For our Hub Basic customers, global navigation: provides consistent navigation with an easy search experience available on all pages; for many people, performing a search is the first thing they will do on a website. offers content-creators the ability to log in quickly and get started making content gives visitors a way to sign up for an account, favorite items, and comment (if enabled) Plus, having both a visible search and navigation helps you meet the WCAG 2.0 AA Multiple Ways guideline currently advised for Section 508 and ADA compliance. Header Our upcoming header will give you more layout options, the ability to add menu links without knowing any HTML, social media links, and it will automatically handle responsive navigation patterns for tablets and phones. If you use one of our pre-defined layouts, you can choose between a standard or prominent header, and if you choose the prominent header, you may also pick one of two logo alignment options. This will give better design options if your logo happens to be tall rather than wide. Theming for the header will still be available from the theme builder and we will use the colors that you currently have set for your header today. Need more freedom for brand requirements? We still support custom headers, but the code editors for both CSS and HTML will now live in the customize panel. However with our new expand button, you’ll have more room to code. Plus, our CSS editor now supports media queries so that you can build better custom mobile experiences yourself! Bonus: Actions Menu If you have the correct privileges, you may have also noticed an edit pencil button that appears fixed along the edge of the screen on sites and pages, which allows you to quickly flip into edit mode. This is the first of several in-page actions that will appear in this space. We will be adding the ability to favorite any resource to this menu (and as reminder, you can see favorites under your profile.) On mobile devices, you will notice that this menu repositions itself as a toolbar that will be pinned to the bottom. Better Mobile Support All these changes to navigation are also mobile-friendly! While our app has always been responsive, it wasn’t until the past year that we really buckled down and thought through the mobile interactions at every level. Who Does it Help If you are using Hub to engage with your community and encourage collaboration on content, global navigation is important as it gives community participants a method to sign in/up for a community account, and if logged in, no matter where they are in your Hub, they’ll see any new notifications as you enlist them in activities. For visitors, it offers multiple methods of exploration, including the links in the global navigation side panel, the improved search experience, and any context-specific navigation that you’ve added in your header. And for content-creators, it speeds up the process of creating new content or events within initiatives, as well as a faster method to find and edit content. You will notice more changes as we slowly reduce the amount of time you have to spend navigating around in our admin app. Instead, you will be able to simply navigate around your live Hub and select the edit button on the items themselves to be taken directly to the item you need to modify. Future Features We’re not done yet either. In the future, we’re planning to make the global nav panel links customizable, so you can influence what you want visitors to see. We also intend to expand the customization options on global nav to include the ability to set your organization’s Hub logo and name, and as well as additional style and layout options. For additional information, check out our blog.

‎04-18-2019

Thanks for the link, Kitty!

‎03-22-2019

Hi Steven, We don't currently have the feature in production, but I will add your interest to the feature in our backlog. I tried to find you a CSS-only solution this morning and one that was also accessible, but I'm afraid the one that seemed more viable (JS Fiddle for CSS Show/Hide ) seems to collide some of the functionality being built out around anchor links. The other CSS solutions I looked at involved using span tags, which was unfortunately not semantic enough to make them keyboard accessible, and the ones using checkboxes and radio buttons will not work in our text card due to security reasons. I gather you do not like having separate pages, but if the reason you do not like multiple pages was because linking pages together was difficult, we are making improvements to our header that will be released in the next month that will make it easier to add page links (no more needing to know HTML/CSS to do it.)

‎03-21-2019

Hi Steven, ArcGIS Hub currently does not support a carousel feature out-of-the-box. I have seen some customers who managed to pull it off with CSS, so you might have that as an option. Would you consider a "Show More/Show Less" experience equally as sufficient, if it were available? We have been hesitant to add carousel functionality as studies (Nielson Normon Group, Notre Dame University) have proven they are not a terribly effective user-experience. In addition, carousels are challenging to make accessible if an organization is trying to achieve ADA and/or Section 508 compliance. Here are a few more articles on the topic: The Unbearable Inaccessibility of Slideshows Hero Images/Carousels | Usability & Web Accessibility Notre Dame University website metrics Carousel Usability: Designing an Effective UI for Websites with Content Overload You may notice that - Notre Dame University metrics aside - most of these articles relate to a poor experience associated with auto-rotating content. I know is not specifically what you are requesting, but I mention this because even with static carousels there can be issues with accessibility. I don't know if you've ever tried to navigate a carousel using a screen-reader, but it can be problematic as the next/previous controls are often absolute-positioned and therefore outside of the natural reading order of the page. Since there are other ways to showcase content that make it more usable and accessible, we typically recommend methods that keep all content visible on the page.

‎03-12-2019

Hello Chris, Glyphicons are a type of iconfont and we're actually trying to move away from using glyphicons in our app at all. Iconfonts can be problematic as they inherit font styling, such as line-height, and are more difficult to size consistently. Plus, assistive technologies like screen-readers cannot actually interpret iconfonts correctly and will instead read out the mapped font character. For instance, our search magnifying glass used to give the auditory cue of "j button," which is super non-helpful. Might I recommend using SVGs? They are vector images so they scale well and you can apply color to them via a fill property. I don't know the context for which you need the image, but you can use the code view of the text card to paste an inline SVG and then apply a style tag to change the color and size. For example, the following would give you a blue RSS icon: <svg xmlns="http://www.w3.org/2000/svg" style="width: 24px; height: 24px; fill: blue" aria-label="rss" viewBox="0 0 24 24"><path d="M6.503 20.752c0 1.794-1.456 3.248-3.251 3.248-1.796 0-3.252-1.454-3.252-3.248 0-1.794 1.456-3.248 3.252-3.248 1.795.001 3.251 1.454 3.251 3.248zm-6.503-12.572v4.811c6.05.062 10.96 4.966 11.022 11.009h4.817c-.062-8.71-7.118-15.758-15.839-15.82zm0-3.368c10.58.046 19.152 8.594 19.183 19.188h4.817c-.03-13.231-10.755-23.954-24-24v4.812z"/></svg> I'd recommend using iconmonstr - Free simple icons for your next project to find some SVGs. They have all the ones you mentioned. If you are using our text card, I'd also recommend you add an aria-label with a description of what the SVG represents. We've found that not all screen-readers respect the <title> tags in an SVG and aria-label is the equivalent of using the alt-text attribute on images. If you use our category card and a url for a .svg file, you might see a prompt for alt-text, but behind the scenes we're doing an aria-label.

Online Status	Online
Date Last Visited	6 hours ago

My Ideas

Latest Contributions by KlaraSchmitt

Re: Hub Site Custom Header

Re: HUB Description ...

Re: In ArcGIS HUB, is it possible to limit Categories displayed in the Search Card and if so, how?

Re: HUB Description ...

Re: On Load Open Modal

Re: ArcGIS Hub slider

Re: Multiple Page Headers

Re: Multiple Page Headers

Re: Multiple Page Headers

Re: Multiple Page Headers

Header and Navigation Changes to Hub: What to Expect & Why Are We Doing It

Re: Making an Accessible PDF

Re: Map Carousel Capabilities?

Re: Map Carousel Capabilities?

Re: What Glyphicons are included?

New accessibility documentation

Re: Dashboard selector color tied to element focus...

Automated accessibility scanning and the Shadow DO...

Re: WCAG AA accessible polygon colors

Re: Menu Button Text Disappeared