ArcGIS Enterprise: Designing Sites and Pages

hi everybody welcome to designing enterprise sites my name is Graham Hudgens I'm a product engineer on ArcGIS hub and aren't yes enterprise sites and today we have a good agenda for you I'm gonna give you a really short introduction of the app mentioning both enterprise sites and hub if you're in ArcGIS online we'll talk a little bit about planning in the middle we'll have some designers join us and give us some of their tips and then we'll walk through building a site and highlight some of those design practices as you're building a site this talk is definitely going to be more design leaning and less of you know a deep customization or an introduction talk or talk about something else so if you're kind of here hopefully you're here for some design best practices and things like that so RCS enterprise sites is a capability that lets you create web sites and web pages and a goal of these web sites is to reach your non GIS user and so that's your kind of everyday person maybe within your enterprise your organization or maybe it's other people with access to your systems but that's somebody who's not a GIS expert knows anything about it so this is a part of arcgis enterprise and it's a including capability as a 10-6 one with the main focus at launching websites and web pages targeting non GIS users these websites and web pages are gonna feature content from your enterprise portal so you know any number of apps or datasets or other content that you've uploaded into your portal can be made available on these sites and pages but the key here is that we're using it to try to reach that non GIS user so we're highlighting that in ArcGIS online this capability is included in an app called ArcGIS hub we're actually gonna be looking at a lot of examples from online because the very nature of enterprise is we can't you know see behind your networks in most cases there are a few running publicly but you know hub is gonna be a much better resource to find a good example so we'll take a look at those and then there's an additional offering and hub as well so before we get going always good idea to know where what where the app is and what we're talking about I always tell people build something with no plan to get it feel for things so if you're getting ready to make your very first site make sure you have a creator user in the portal you need these five privileges it's about a publisher level of user access and if you have these other privileges marked below you'll be able to help pull and help around your enterprise site but not totally required the app is here in the app launcher if you've never found it before it's a tile made available there and soon in enterprise it will be in the create menu but it's not there yet when you land on the in the app you'll you take it to this enterprise sites overview page this is where you can return to previous sites that you were editing and you can also make new ones so just a quick kind of springboard into all the different sites I haven't seen people once they launch their sites embed it in their app launcher or make other accommodations to make that site easier to find we'll talk more about that in a little bit but just another idea there so now that you made your first one before we get into you know the design process and designing an effective site and going through kind of the nitty gritties of really good best practices for making that site great I think it's a good idea to just shop around and literally go look at a lot of sites and see kind of what you find to be more useful and what you find to be less useful so I'll give you a few resources for this but like I mentioned before ArcGIS online is a great place to kind of peruse to see kind of how people and design their sites and why they've made specific choices about the layout so this is a good example this is like a high cal high contrast banner here telling me the the point of this is State Information government data and then you can kind of see the layout immediately wants me to go search so sites have this ability to search their content new in the later versions of ArcGIS Enterprise we have autocomplete and these collection coming into Nate one and we also have these categories and these categories can be links outs and things like pages you can also have it search your your content so within each site we can have some number of search results this is a really good user experience if we want to feature a lot of items on our site so you don't have to design a site that uses search but if you have 1787 items and maybe you want to and then once you click on an item this is pulling from all the item information like the description the terms of use license for example I can actually read you know different things there and tags and other metadata is available here too so you know basically this is only going to be as good as your items are and there are some other talks that kind of feature data best practices but very much as an important part of your design is having good data you'll notice at the top we have this header the header is another pretty important design choice as to how to get people around your site and one of the different sections this site chose to use pages to organize different logical chunks of information so you can kind of see like a thanks to organizations you know here's their featured apps that you can jump into which is nice in the later versions we've added this app page functionality which lets us embed applications underneath the header so you kind of have this consistent user experience where you're bouncing between the apps and the site you know here you can see there are some training resources so you kind of get the general idea when we take a look at headers in a little bit the nice thing about the out-of-the-box header is it does really well on a mobile phone so here you can see it kind of collapses down and you can have this menu which is really easy to use so that's kind of a good reason why the headers an option there so that kind of gives you the lay of the land of a site and you can kind of tell that these people really just wanted us to find thousands of pieces of items and thank a few people and organize it in more of the type of items that people are looking for this is really good if you're just trying to give somebody access to let's say your whole portals worth of content or a large number of it and you're not really sure why they're coming to your site so you're kind of focusing on the primary action being searching or finding those chunks of data that you've pre prepared for them a couple of other sites to look at is a very similar data-driven site that kind of features all of their content here in DC at open data that DC gov they have a little bit more going on in their layout top to bottom kind of goes on for a while it gets a little you know lengthy in terms of content but it gets more granular as you go so at the top it's very high level there's some really main projects that they want you to look at you can click into those projects and now you get a whole website about that project and then as you scroll down everything gets a little bit more granular you get access to the data so this is kind of illustrating that above-the-fold focus and that below the fold focus and similarly they're using the same kind of header to get around so you kind of see a couple patterns emerge there skipping ahead this is a my County here in Pennsylvania they have kind of a similar vibe as the other two very kind of kind of citywide countywide information available for you divide it up into some number of subdivisions and I can come in and find you know maybe I'm interested in land development or something specific or I'm interested in the data so kind of very data focused yeah so I'm going to skip those two so another one to look at is the more project style site if you're trying to expose specific information about a specific topic you know maybe a budget for example this is a good example of that or you can see maybe the performance you know looking at how well is the city doing in a bunch of metrics so these are these sites that are not focused as much about finding but more about exposing key apps and maps and content you know here I can see a story map and a couple of other charts and graphs and things coming from their system so you can kind of get a feeling for this site has a little bit of a different purpose than the previous sites we were just looking at and similarly you know some sites have objectives out right and they just want you to see a piece of information or do something or follow or do something very in-your-face so they can be very simple as well so kind of think about your audience when you're doing this and try to imagine you know which type of site is resonating the most with you so far because it'll help you later on these these folks for example the kind of primary action here is to you know click one of these areas and get started volunteering or attending an event so it's kind of less data focus but still exposing some day that's just kind of like the previous one and then last but not least if you're interested in finding examples yourself go to hub that ArcGIS com there's two resources here that are really useful first is the gallery these are some of our favorites that we just pick out if you're ever interested in being on the gallery definitely drop us a line on GeoNet or you know contact us we're always looking for new sites so that's a kind of a very distilled list of sites that are out there if I go back here what I can do is I can just search all of hub for all of its public sites and actually just browse so if I'm looking for a specific topic I can come in here and basically search for it home did arcgis.com is a good way of searching all of our chests online and there isn't really an equivalent with enterprise unfortunately so you know kind of the nature of the beast of the enterprise being you know in your own networks is that it's it's yours and so best way to kind of get inspired is to come here and try to find things and pick up on design trends show it to some stakeholders and then move on from there okay so hopefully with all that inspiration loaded up in our minds the next step is to do some planning and there's this saying in scuba-diving that you should plan the dive and then dive the plan since you're already familiar a little bit with the app and you kind of have this idea of mind this is a good time to have some good discussions with your stakeholders because upfront conversations are really important you know the web is likely someone's domain in your organization there's some existing place that you probably want to be a part of you know this basically bringing people to the table early will help integration later and you also might get free resources and design advice from other parts of your organization by asking the right questions so if you're at this point where you're like I think I know what I want to build this is the kind of the next step I would recommend if you don't do any sort of planning and it may be you don't need to but this is kind of what you're gonna end up with you're gonna have a bunch of islands of different you know sites with different purposes kind of growing on their own in the wild organically and the problem with a bunch of islands is you know you need a boat or a map or a you know it's kind of hard to get between them and there isn't a lot of cohesiveness and you're not teaching any patterns to your users you're just kind of giving them a bunch of different user experiences jumbled up on the web so maybe you want to build something more like this which is like a well organized city with a center with different districts or regions and with a kind of cohesive way of getting around just like we have any urban planners watching I'm sure they can tell you more about that so if you are interested in this you know then you need to ask yourself a couple other questions to figure out what is basically going to be your site map first is how will this fit into your existing site somewhere or will it and so if you're thinking about this is like a public sense this is like will it fit into your organization's website comm but if you're thinking about it internally its will it fit into that existing web property people go to for this information now that might be your portal in which case it will really well fit into that but it also might be other external systems like I've seen people have SharePoint or confluence or you know some internal place that people go to find information so you might want to consider integrating with that to make your enterprise site very usable and I always tell people this but you know in your success you may confront this problem so if you you do something independent and it's long it's an island and it grows and it gets a lot of really popular somebody's gonna say be really nice to have those two things in the same thing so you know maybe you want to consider it upfront and matching headers this is a good idea even if it is just branding it'll help everybody feel like they're in a cohesive place part of your organization etc and then I also like to ask do you think you need that super site the one that demonstrates everything I don't really advise this unless you really need like a kind of information hire or hierarchy that has like the everything in there I think a lot can be done with consistent branding and links out to things but if you do need that kind of monolithic site it's good to know that upfront because it will affect the decisions you make so and a lot of people like that so if we want to just kind of play out how your sites can mature maybe you start in the beginning and you have these three with different requirements different groups different departments the first thing you can do is you could use the portal that home screen inside of the whole map of the portal to launch off to all the sites that you have I've seen people configure the gallery to have items that point to these sites and then they can click it and that way you have this kind of jumping-off point so here's just a really basic example what I mean these can each be sites you can click on them you find your way from the portal into this site and you're off and running this is also really nice because non GIS users might have been already trained to log into the portal now they can find the content in a and the easier form factor then if they were trying to explore and find it themselves directly so that's a kind of maturity level one maturity level two is rather than having three different sites I kind of common look and feel calm instead of theme or header to align these sites this can be really useful again just to make that experience a good one and then the other thing you could do if you need that monolithic experience where you have the site that has everything in it you could make a site instead of using the portal as that kind of role and then that means you have a site that has everything on it and then it links off to those other sub sites very similar to that DC site we were looking at just moments ago I was able to go to their site see all their active projects click one of them and I'm on another site just around that project so that kind of gives you an idea of what that's all about so yeah here's this adding people being kind of see multiple sites they're actually separate but they are all styled similarly and linked up together and don't forget that you know we always have access to pages within each site so even if you tie a couple sites together this way you still have another level beyond that so this is how like a specific project can have different experiences for each one so you're gonna make a site map literally PowerPoint has smart art if you're interested in that it's effectively just a bulleted list you can do something fancy like a diagram this is a great way to plan is make a site map understand the different audiences it's a very fun planning exercise but very commonly it'll look like this where you're gonna get in a whiteboard and be drawing boxes and arrows and that's exactly a good way to get consensus and begin the design process about the different solution you're trying to develop just to show how crazy it can be this is Wikipedia sitemap you probably don't want to go that extreme with this but I'm just kind of showing that like there may already be a site map to your internal systems built by the people who configure them originally for our next section we want to do a designer round table rather than just hearing for me the whole time I thought it might be good for you to hear from some of our designers on the hub team so with me I have Clara Schmidt who's a UI UX designer and Sam hunter who is the same role hey guys thanks for joining for this recording so I wanted to just ask these two three questions the first is tell me a little bit about the most important thing you do when planning your site or maybe just some high-level design principles like the things that are kind of most important to have in your mind up front Sam do you want to kind of give a crack at it sure I would say first of all knowing what your purpose is so if you're sharing information make sure you have that listed out less is more when considering text maybe try to write it all out it can be very weird first and then try to pare it down think easy scannable you know headings and then your hierarchy should be clear so make sure you're using consistent headers down the page things like that they should be larger than your body copy so using size and yeah consistent labeling of things and then also making sure your calls to actions are clear so your buttons should be descriptive instead of saying something like learn more maybe if you're going to an interactive dashboard the button should say go to dashboard so things like that cool clarity of anything that say regarding text and copy it might be worth doing a Content inventory so all the little bits of content that you're intending to put on the page then you can structure it use information architecture to determine what should be primary heading primary copy your primary call-to-action because it is worth knowing what your audience is and what your intended goal is and if you're serving multiple audiences it's relevant to like chunk it out into pieces that like lets each audience zoom into the bit that they kind of need to get to first like Claire said maybe you have a dedicated row for each audience or something like that when you're building your site that's great okay so my next question is just I think you touched on this already a little bit but do you have any kind of layout favorites we're gonna be looking in a few minutes at the layout editor in some detail but just kind of a high level like your favorite kind of pieces of the hub layout engine Clara do you have any ideas about this one it's useful so it again just going back to the the text bit it's like be careful not to overwhelm people with too much text because they people just really don't read they want to skim so like a bold heading on each section that you had that lets people it's down the page it adjusts of what the information is being presented it's nice having a lot of white space images are great that eye catching and I'll go into a little later on what to avoid with images and one of the things we have observed on sites that are really eye-catching they have like a strong banner image but they also they have text on the banner they had a pretty good contrast between your banner text and your banner image so if your are missing that contrast you might want to use the transparency tool to dim the image into the background color to increase the contrast between your text and your background image that's awesome we could take a look at that in a little bit in a demo that's great idea Sam anything dad yeah so Clara also mentioned about the headings and also one tip I guess is just to try to think this is also gonna help your SEO to keep it short and think like what might people Google about this content so that could help you make it you know catch your and short that's awesome great idea so yeah I guess the last area I wanted to just ask you and I think you know heard a little bit of it is the kind of things I make your eye twitch that you see people do kind of common pitfalls or traps anything like that come to mind yes so I'll go back into the image so it is very tempting to get those eye catching images to go to sites like unsplash or pencils that provide free images and grab the highest resolution image possible that you can come up with because that allows you to scale your site from mobile layout to a desktop layout and have an image that looks great for both the downside is that it slows loading time on mobile so if somebody is looking at your site on a mobile device that and image is gonna take a while to show up and it's really useful to use a photo editing program and provide Graham with a link for a free one online or Photoshop to resize the image to like the appropriate role background height that you might want and we hear very often like well what is the appropriate resolution and what is the appropriate size for that row and unfortunately I can't tell you that because it really depends on what content you put in the row so if you stack several charts into a row I can't tell you one image size because you should not go into that yourself that kind of screen shot even to generate what the height maximum height maximum width you might need is and then go into your photo editing tool and crop your photo to those dimensions and then save it as a web format so that it will take it'll be faster to load on mobile devices I think another thing I've seen is within hubs specifically I would try to avoid setting Heights on iframes that involve scrolling in the container since it's a suboptimal experience for anyone scanning they're on phone and also it just feels a little weird in Page Scrolls it used to be popular but it's less popular in modern web design great Sam anything I had to Claire it yeah so to pay back on kind of what Clara was saying also another thing you could do if you don't want to crop is there are some free image compression tools out there so again we can send Graham a link to that but that might be a alternative if you didn't want to resize maybe you could just try to make the image as small as possible like me personally I try to do even 200 kilobytes is kind of large sometimes like I think the recommended is between 50 and 80 but it just depends the kind of image you have and like Clara said you know if you're getting a free image from unsplash or something like that you know if you have an image with a city in the background and there's buildings everywhere you know that will be harder to read the text on top so maybe something where they're lower down with a sky above so it's easier to read the words so those are the kinds of things you should be looking for is less visual confusion and something more awesome yeah thank you both for hanging out for a second I think it's really valuable and we'll take a look more these best practices as we move forward so thank you so much guys appreciate it let's take a look at some design fundamentals taking an account for what we just heard from Clara and Sam these are things you should think about for every site so just taking a look in a little bit broader kind of design principles these are from some members of our team and some designers I know as well as Google you can kind of see a consistent theme here is simplicity overly designed websites may make consensus building easy with stakeholders but the net result won't be as useable by the people actually trying to consume the information so try to resist the urge to you know say yes to every request and intent and focus the intent around one simple goal or a handful of simple activities consistency and clear navigation is something mentioned here readability the color palette we'll talk a little bit more about so these are just some ideas kind of have in our mind as we get into the nitty-gritty of designing the layout Brian says you know make sure it's responsive so you may you know have everybody accessing your site on a desktop and be convinced that you know maybe that's the primary way people experience it but even if they're only on desktop you don't know their resolution maybe they are our heart of vision or some other sort of circumstance so designing your site to work both on a cell phone as well as on a desktop will make sure that everything in between is also a really nice experience you can kind of see Brian also brings up that minimalism and clear purpose and then Mary another designer says engaging imagery and clear action so you can see kind of that common thread of design principles hopefully kind of seeing that theme come out there so with that let's take a look at the site's layout this is the most visual part of designing your site if you're interested in kind of thinking about the site's content or any of the other ways you can design the site from like the data perspective I recommend checking out the getting started or deep customization talk as those two talks cover those areas of the site design so we're gonna focus mostly on just the visual part since this is a more design focus talk I always tell people you know it's more applicable to the anonymous web than it is to an internal Enterprise but it's still pretty important imagining you're a really busy person and you're trying to get information quickly to maybe make a business decision you really want to make it really obvious the point of your site and I think you only have a few seconds to convey the purpose of your site so make it by personal departmental let the branding and photo at the top speak for the purpose and try to keep it simple if you're making a project style site I recommend you know using powerful imagery that's very upfront explains some goal and then gets you right to what you want them to do so in this case we want the user to click this button after they understand kind of the current state of the project so focus on the one thing you want somebody to do and put it highest on the page there's a bunch of examples of different types of one things out there in the examples we looked at earlier as well as in ArcGIS online you can I kind of search for different sites and see what their purposes were so like viewing a chart searching a site etc the other thing I mentioned is that you know mobile phones are on the rise in online you know it's over half of our traffic in enterprise it may be less or may be the same depending on if you're dealing with folks in the field you know that are maybe in a location where they're accessing from a tablet or a mobile device so definitely try to design with mobile in mind this will come mostly into play if you get into writing your own HTML or CSS because you're now kind of taking the burden of coming up with responsive HTML where otherwise the enterprise sites or hub application does that for you so looking at the layout pragmatically with those kind of design tenants in mind we have a bunch of different parts of the site the header is this section of the ha we'll take a look at the theme is the color palette that's used by all of the system controls and is all the defaults on many of the different rows on the site and then the site itself is made up of rows and cards and so each of these chunks here you can kind of see the visual difference is the rows and then within them there's one or more cards and then we have a footer which is good for your sort of legalese additional resources that kind of extra stuff so this is just an idea of a site design one thing that can be really useful once you understand those ingredients of rows and cards is to have a design thinking exercise where you try to come up with that one intention so maybe you want to feature searching really prominently maybe you want to feature some apps really prominently you know trying to think about what that is and drawing it out ahead of time again similar to the site mapping where you're planning multiple sites this is a good exercise for zooming in on a single site and coming up with a really good game plan and getting people bought in before you're actually building it so that you can do this as almost a double-edged expectation setting with lots of stakeholders as well as well you know low costs you don't have to iterate on actually building it you can just draw pictures so your first decision once you have that plan and you know you've sketched something or you have an idea is to set up a theme for your site you don't have to do this first but given that the theme has such a you know monumental role on how everything looks and feels if you do it later you're gonna have to go back through everything and make sure it's all still working with your theme so try to do this upfront you know this is a kind of tale as old as time find your organization's brand guidelines if you don't know an internal resource for that and your organization is a public organization you can just google yourself you don't find find logos and things like that similarly avoid font choices you can set custom fonts avoid the ones that are hard to read some people you know prefer them but kind of think about if you have really poor vision and you're trying to look at the site you know how a well spaced apart are the letters and what fonts have you chosen to try to focus on those who may not have really great eyesight and again maybe on smaller device screens and things like that and it's also tempting to set the theme in that in the you know the layout editor so you know you're over here in the layout editor and you're setting the theme and you're like this is great and then thinking that your theme is good just because everything you see on this screen is good that would be a mistake you have to make sure you test not only this the layouts that you have for your site overall but if you make any pages the theme applies to the page as well so see how this button is green because I have a green theme I'm basically applying the same theme there as well there's two other gotcha places one of them is the search results page so if I click into here notice this is all very themed and then the other is an individual items page I click into here this is all theme so check all of them when you're kind of reviewing your your theme so that you don't end up with a hard to read site so there's a link there so in it sometimes your brand kind of sucks you know you put all the colors in and it's it's high the contrast isn't like high enough like meaning like the blacks and the greys are right next to each other maybe you're a strict you know military ish government organization and it's all dark blues and you know it just doesn't make the site look welcoming or easy to use one really good recommendation there is to take your primary color into one of these two websites and generate a couple of palettes obviously you know you want to make sure you're not deviating from brand where you're gonna upset somebody but this should give you a set of complementary colors or even colors on the same ramp that and can follow different palette choices and may help you design a better site I definitely recommend leaning more towards white than dark as far as backgrounds because if you do have a dark background you're gonna have to really come into it fully and it's gonna make your site kind of have this really heavy feel very serious feel maybe that's the intent but but white backgrounds will make it feel more open spacious so you know try to kind of play with your different brand colors and play with different palette options on these sites to to get something that doesn't crowd the color and uses color effectively to communicate your brand as opposed to kind of filling the page with just tons of different shades of colors and things like that okay so we've done this the header part or sorry the theme part now you get to move into the header and you know if you've done that site mapping exercise you probably have a feeling of what links will go into your header and how it will or will not connect to your existing web properties so this is really where we get to implement you know our site map we get to if we want to we can do some really powerful things HTML and CSS and we have a bunch of other options that help you achieve a good design these header controls are new as of 10 800 in enterprise and they'll obviously be in 1081 as well a very popular in ArcGIS online because it makes making a header very very easy so to show you just a little bit of that this is the header section we can basically you know set a number of different things so if I have you know a brand or a logo that I want to attach here I can call this dev summit 20 you know I can have a shorter name you know I can make this one really nice and long and then as the screen basically you know resizes down you'll see that I it shortens here eventually there goes see how it kind of squishes down there so it does a lot of that for you it handles the collapsing menus and things like that you can upload a logo set the alt text to make sure it's accessible this is where I can add menu links what's nice is these links if they're bound to items in your portal they will respect that item sharing so if you have different pages for different departments CP they will only see the menu links that they have access to you can also use an external page here this will just be a kind of a quote/unquote dumb link that will show for everybody this is a good way to integrate that existing web property so yeah just kind of configure those to build that sitemap and then you know if you want to you can enable different social icons if that's appropriate for your organization or not you can turn them off and you do on the few choices of the standard header you can have your logo there on the left next to the name or you can put the logo in the name on the top and have a bigger area and then both of these have really nice mobile responsiveness now and you can set them to be wide if you like that too kind of the same way we'll see with ROS here in a minute now if you're interested in and you know HTML and CSS and you want to build something very very specific the custom HTML and CSS options are here for you we give you this kind of boilerplate custom header you can tell I already have a theming problem with it so then we give you a rich HTML and CSS editor again in 10800 is a lot improved has syntax highlighting and will validate your HTML and things like that things to watch out for here is that you are responsible for making this responsive and we'll talk a little bit more about using bootstrap 3 and flex box to do that but it's on you now so it's a it's one of those things that don't just coat it in desktop and walk away make sure you are testing the site you know by dragging the screen down to see how it's doing in mobile like this one has a few issues right that we probably would want to maybe fix that so you can kind of you know work with it from there there's a great part of the getting started talk about this specific feature of customizing HTML by one of our developers and the same kind of developer summit talks series so give that a look if you're interested in doing some custom header he goes into an immense amount of detail ok so I want to give a quick lesson now in bootstrap and cards the layout system itself is using what's called bootstrap 3 there is a bootstrap 4 and we are assessing upgrading to it but we're trying to you know do that at the right time bootstrap is a system to put your content in these little column's you get twelve columns in the site editor you can make the content take up more than one column and then what's nice is this is what power is that mobile responsiveness and bootstrap as far as resources go is a very widely accepted CSS system that is like used by roughly half of the internet so there is a lot of resources and now that you're armed with this knowledge of bootstrap you can Google a lot of things including the word bootstrap and find examples that you can directly use on your site one really important thing to know about bootstrap is that you have these classes bootstrap itself comes with some classes that let you show or hide different content depending on your screen size and you can also use the bootstrap grid system with your custom HTML by applying these classes if you're interested in learning more click this link or visit this link to read the documentation about it fortunately you don't need to know too much because our editor is basically a UI on top of bootstrap so you can see that in enterprise site so you can just reflow content you know dynamically between the different bootstrap columns and it just it just works so the nice thing is as long as you're sticking to the out-of-the-box cards you're leveraging that bootstrap system without too much knowledge of how it works behind the scenes so just to show you a little bit of that you know and when you make your layout choices you'll be putting content into these roads and then this is the inside of it you can tell I have one card that's now true responsiveness filled up to fill all 12 columns let's say I add another category here like I want to have a second category I you know now I have to in it to by default split 6 & 6 but maybe I want something to take up more room with categories it doesn't really have much of an effect but with something like image next to text maybe you want the image to be on desktop less prominent than the text or more prominent than the text and so you can just mouse over the grid and move move it however you want and then again as you go mobile these will all stack so you don't have to really does it do anything to make this work on a mobile phone it will do to happen the way it should which is really nice because I imagine you know if you had to kind of struggle with that you know learning bootstrap could take some time so yeah that gives you a little bit of an overview of the grid as you can tell I can use this layout door to drag out new elements and basically each one will contain any number of cards stacked left to right so next up for kind of the design focus and where you may spend a lot of your time is the text card if you heard from earlier you know having easy scannable headings and doing things like taking an inventory of your terminology use on your site and making sure the page has a clear head or hierarchy is really good we also heard tips around consistency and chunking the site for different audiences so to show you a little bit of that in action I mean editing text is relatively straightforward but there's a lot of design nuance and when to apply which style and having a system of when you use what so you know heading one is probably something you should only use near the top of your site to serve as a title and then choosing heading levels you have to kind of make a bulleted list of your content and decide you know how many different sections are going to need you can use subheading levels to mark this section and then within them even further some heading levels to mark some subsections and so forth so coming up with you know how many levels you're gonna have ahead of time for your text content and how you're gonna chunk it up on the site is really important to have an up front before you start doing things so you don't end up just using different heading levels in different places and you don't have a consistent look and feel to your site a really good page that's out there that I recently made is this how to resources so you can tell this is a how-to guide for using a template in online but I can fly through and they chose to make the super heading levels using heading level 1 in these blue rows so I can skim and find the next blue road section and then I can you know look that section if that's what I'm interested in then within that they you know use a next heading level to do these major sections and then within there they have the kind of paragraph text in tulip lists and call-outs and things like that so this is just a good example like it's pretty well laid out the users could come in here and be like I've already updated my local resources I need to just do something with the look and feel and skip down to the section that is most appropriate to them if it's something like a workflow or something like this if you're in the market for writing some really custom HTML the text card is how to do basically anything you want to custom HTML text images otherwise there's a lot of resources to learn the system but flexbox is a really great CSS set of classes that can help you align different menus and do things like that there's a CSS tricks website that's really cool for finding you know little workarounds to implementing shapes and other things using pure CSS these has been this is good because then you don't have to upload or paste gigantic SPG's and you can just you know through the magic of CSS make shapes and do things that you didn't expect you could in a bootstrap we already talked about the grid system generally you can Google bootstrap and what you're looking for like drop down and find documentation that explains how to do it and the documentation is really good fonts come from Google you can check out Aria for screen readers and don't forget if you are gonna write a lot of custom CSS I recommend you should you know wrap that with your own custom class name so you don't collide with enterprise sites or hubs CSS system and just to show you how that all works there is this whole code editor here so if I had for example my own CSS or HTML I wanted to write I can just write tags in here and I'll be able to fully you know insert my own code in in my site wherever I want moving on so the other important part and we have our text and our kind of our header and our theme is the images I mean we heard the designers talk a lot about how to use images and when you use what it's recommended to use row background images for those edge-to-edge top of the site catch your attention sort of imagery so at the top I think like a really good sites have an image at the top that explained the purpose and then we heard some updates you know some advice around watching the contrast you know with there and you can actually bleed into the background and use images the image card for the in layout images so like once you have your background if you want to do text and an image next to it use the cards for that and then consider that your your image size could be a problem so editing things down is important just to show that like you can tell here there's an amazing contrast between this white and that dark green image in the back what they've actually done to make this image is they set the background color to the theme color and then we have the image here almost 93 percent transparent so this is that idea of like this is hard to read right it's like not that easy because the sky and the trees are not there to close in shade so if you bleed it down you still get this really nice feel you still get the image but you get this higher contrast so that's like a good example of a an image that we want that's like kind of grabbing our attention and explaining the purpose all at once if I come down here maybe later on further down the page I want to you know show something else maybe I want to show a gallery and next to that gallery I want to have you know an image representing what's in the gallery I can dock an image to the right here and pick an image to be inline so maybe I want to browse for something this is always fun picture of oh it's too big so that's actually we do enforce the three megabyte size limit and this is why my next point will be even better so maybe I want to put this image next to a single app or something like that these images will by default show the full image but if we turn on scale image to fill it will try to fill the container which in this case because I've got four cards is pretty bad so we might not want to do that but in some cases if you want the image to reflow and adapt to different container sizes as the screen changes shape that can be really useful and you can set where in the image to focus so it's just kind of up to you how to play with these controls to figure out the right layout and again testing both mobile and in desktop editing your photos Clara mentioned a really good tip take a look at the largest screen size that you need you know put all your content on a desktop measure it just by taking a screenshot and then make your photo that size and this is a free open-source photo editor if you have no other photo editing options to get your images to be the right size I think we took a look at some of those image choices already so we're gonna move beyond that okay and last up we want to look at how to show the content that's on your site and there's really three high-level choices you can embed using the iframe card or now the app card which is new at ten eight and that's a really good choice if you want to show one to two items I would not recommend building a site that embeds like ten things that can be really problematic especially on mobile phones with not a lot of memory because it's loading like ten browser tabs worth of information all at once so really try to be judicious with your embedding just don't don't over embed the gallery is good if you have like a handful of items I recommend usually around for you know more if you must but this is a good way of like beyond the one thing you want them to see here's a gallery of four really featured things and then the category card and the search gives us that thousands of items at search experience so pull that up prominently if you're looking for really getting users to lots of content and just how that looks on our sites to show each of those you know the gallery is good for featuring items you can use dynamic or manual mode and pick some of your content that's maybe on your site some pick a few things and then the category is useful on the let's delete this row is useful if I had thousands of items because this will let me drop into the search results page with a pre-filter of tags or groups things like that and then last but not least we have the embeds and the embeds are best done again you can use the new app card so this lets me I could do apps I can pick something in my you know in my organization that I want to embed so maybe that's not a great user experience for a dashboard I can also embed a map let's put it over here let's get rid of the block all right so this is what I mean you can kind of play with what the default experiences let's get the maps in but you wouldn't want to exceed one to two things like you can already tell this is like kind of feeling like a yard sale so maybe I just want to feature this dashboard and then your other option if you have something just external is the iframe is a sort of kind of escape hatch for embedding anything that allows embeds so this is a good way to do that as well so those are your kind of three flavors of the beds that you can design with for your site to wrap up let's give a few resources I've already given a couple links but more generally if you're looking to find some inspiration on your own go to hug the darkest calm as we looked at earlier and do that search if you're interested in learning the application we even know enterprise sites doesn't yet have its own learn lesson we're working on that hub basic and hub premium does so check out the hub basic learn lessons because a lot of the same concepts are in those workflows so check I learned at ArcGIS comm for that in the app for enterprise you have these links down here at the bottom that gets you to your portals help in online we have a few other links you can always find us on geo net as well so feel free to go to any of these links special call-out if you want to give us feedback about the development of the application join our user lab and Clara who spoke earlier and Katie wrote a great blog about designing your sites for accessibility which is a great resource if you're interested in learning more about you know making your sites custom HTML and things like that work with screen readers and which features to shy away from and lean into so thank you so much we look forward from hearing you and thanks for watching

Channel: Esri Events

Views: 2,636

Rating: 5 out of 5

Keywords: Esri, ArcGIS, GIS, Esri Events, Geographic Information System

Id: kwcd25cJZxg

Length: 52min 7sec (3127 seconds)

Published: Wed Apr 15 2020