Advancement Portal Design: Left-Side Navigation

Hello, everybody. Welcome, Welcome on this Wednesday afternoon. Today is November 6th. It's good to be speaking with everybody today. Hello to everyone who's saying hi in the chat. Good to hear from you. Hello, Jason, Miranda, Raymond, good to have you here. Scott from Cooper Union, Chris from just up the road at Hartford. So good to have everybody with us today as we're talking about the next portal in our series, our continuing series of portal design.

This time, the left side navigation portal. So really appreciate all of you joining us today for this continuation of our series.

So let's go ahead and dive right on in a couple of housekeeping things as we get going today. One, this webinar is being recorded, so it will be available for you after today's presentation. Should you need closed captioning, you can click the little CC link at the top right corner of your window. That's also where you can find the full screen viewing.

If you're there's a problem or if we lose connections, go ahead, click the refresh button in your browser. That will resync everything.

Right back up as we're moving through today's presentation, go ahead and put your questions as we're moving along in the chat. The advancement team is here on the back end keeping track of all those questions. So don't worry about them getting lost. We will get to those questions. We will answer them at the end. The end is also where we'll just open it up to any other questions that people have about the topic for today, so.

That takes care of our housekeeping items. Let's go ahead and dive right in. Talk about what we're going to be talking about today. One, we're going to start with sort of a recap of how we got here.

Or are they going to move on as if you joined lasts our last presentation. You know, I won't sort of save it till the very end. I'll sort of show you what we're gonna end up with at the end of this type of coral design right at the very beginning. So you know what we're getting into. We'll talk a little bit about what the experience is like from the end users who are accessing these types of portals. We'll talk about how it's constructed using.

Different tabs inside of your database, different views and how you can control things from that perspective.

We'll also talk about how this really lays the foundation for any of those portals that you want to make for whatever the use cases that you have. This type of portal can serve as really a good baseline to then continue building off of. So to recap, where are we coming from? The idea between this portal and our previous portal that we talked about and some of the other ones that are going to be coming up in this series is that they're all designed to be out-of-the-box. So what we are going to look at today, what we're going to share a suitcase ID for.

Is something that you can grab, take to your database, take to your test database and it really kind of just works right away. It's easy, it's simple, but it also allows you to customize what the portal looks like. So that way it fits your your particular needs and your particular brand. You we've made it easy to sort of just go ahead add in your school colors, the primary colors, secondary colors, those types of things. So it looks and feels like it's just it's made for your institution.

We put all of those things into a portal template, so that way you don't need to hunt around and have your styling or your CSS in various places. It's all neatly packaged inside of the portal template. And then your, your views, your methods and queries are just very straightforward. I mentioned before and we're going to talk about a little bit later, but the idea behind these portals from a sort of a template perspective or design perspective is really that it's foundational that this is a.

How you can start to put the pieces together, but then you can take this type of portal and run with it. You can adapt it for a myriad of purposes that you might have, but really use this as a baseline. So what are we talking about here? What is the left side navigation portal? This is a portal design that is primarily for sort of more task oriented things that you may have somebody do in a database. There is a left side pane that has.

Navigations that has different links to different tabs that then swaps out the content on the page. It's designed to be fully mobile responsive as well. So that's what we're seeing here, where all of your different sort of tiles and dashboard views all sort of rearrange on mobile devices. You have a nice mobile menu that's available, but this is where we're going to be ending up with, right, The idea that you're going to pop up in this view. They're also more responsive, but it's a way to put a lot of different content.

In front of your users, your volunteers, whoever it is that you're granting access to this type of portal.

Here's one of the views. So we're gonna go through what this actually looks like when we talk about what the end user experience. I just wanted to have them here on these slides so you can sort of see more clearly what they look like. We went with more of a tile based approach to these, this type of portal where you can drag and drop and make really these dashboard tiles with sort of drop shadows and headers and those types of things.

We also have in this portal chock full of really good stuff, including things like how to make a sort of a pop up that also has its own design elements with it with buttons and tiles and links to emails and phone numbers with icons and sort of sub subtitles that have a different design for sort of secondary or tertiary type of information. We also have some table design elements inside of here. So if you want a, you know more.

Slicker looking table inside of your portals. Rather than just sort of the the default branding, we have some branding inside of here that makes it a little bit more white spaced, a little bit more padding.

A little bit sort of easier on the eyes to look at and digest that is here. So that's where we're driving to. This is the mobile view of it, right? So we always are designing with that in mind that we have here. But what does it actually look like in person? So let's go ahead.

This is the live version of it directly inside of here. So as you start to navigate right you have your different tiles as you click on your tabs over here on the left hand side.

You can see that the tiles can be rearranged. We can go and we have our tables that are here. You can sort these as well. You can search for them. And then we have things like sort of ever present links where we can link out to other pages that you might have. This one links out to the advancement page. You can change where that actually goes. If we look at something like the pop up tab, very easy. We have a link here, you click it, you get the pop up. Very similarly, we have buttons here that you're able to click on.

They can open new tabs that way as you need folks who are navigating this type of portal to have sort of quick links to actions like you need to add interaction to somebody, you need to e-mail somebody, you need to quickly go to their record. We have different classes of buttons that let you do that. So this is going to be what the the overall experience is like. We can drag and drop, drag and drop our pop up around, quickly, go back, toggle back and forth, very quick, very responsive right inside.

Here, Jim, has he had a question coming in the chat? Just because we hear what happens when you click the danger button. Nothing right now, David, it would be really cool if we made the fireworks or something like that show up. What this really is is just a secondary class of buttons that you can highlight. That's maybe a different color, right? So you may want to have this be red or something. Would you call it danger button? Because it sounded really fun and it's different than your normal buttons that are there.

Great question.

All right, so let's go back over. Keep walking through a little bit about.

How we actually are putting those pieces and arts together. If you joined one of our previous webinars where we were talking about putting pieces and parts of portals together, this is really a refresher of what are all the different elements involved. So from a portals perspective, there are these things called methods. I tend to think about them really as the Sherlock Holmes or the detective that, you know, you're constantly scanning and looking for certain actions or commands.

That are on your different portal pages. When we find one of those, so you click on a link like to the top up, that's when we actually we go and we do a call out to the view and we say, hey, they clicked on something, load that view that we're connected to or they clicked on something, go ahead and load that query that we're connected to. And that's kind of in a nutshell, the simplest way I found to describe how methods work with views and with queries.

Inside of Slate. So keep that in mind. It's going to be important when we start thinking about sort of the tabbed approach on the left side of the the navigation.

Right. So how do our tabs work in this portal inside of our portal template where we are, we are listing out sort of what are the different tabs that we have. It's a a list just like you might expect in HTML. But for each of the names of our tabs, we also have the link attribute, the for data hyphen tab in there. That's where we're putting in just the meat of that method that.

Want to call right? So if Sherlock Holmes is sort of snooping around, he's looking for someone to click on that link that has a data tab name in it. And when that happens, that's where we're see the corresponding action on your methods. So when someone clicks, you know, the tables tab, there's a data tab for tables. We then go ahead and we say up, that's the table page that we need to load that then loads the view that pulls in the table that's there. So the data tab is equal to.

The method action in this case.

Some more stuff happens with JavaScript. We're not going to go into all of that today. It's there, it's baked in. Again, the idea is this is out-of-the-box, but that ultimately then loads the pages for you. So how do you go about and just update what's there? You simply swap out the data tab names to match whatever your method actions are. So you can continue to iterate that theme, add things to the list, and as you do that, you can start to add more and more tabs to that left side navigation.

You simply connect the method to the view that you want displayed. So they click on that tab. We then load the view that's associated with it, and if it's desired, you can then also call a query at the same time. That's how you're really getting those tables to be connected as well. So the method then ties everything together. We load the view, we load the query that's there abracadabra, you now have everything showing up as you would expect it to be.

So what are these views look like and how are they just sort of easy to?

To iterate through and design, we're using these standard dynamic row layout feature inside of Slate where you are able to click, add a new row and you're given this pop up of what are those rows looking like? They could be single column, two column, three column, and you can decide where you want sort of the larger side, the smaller side, those types of things. That's going to be how you can have your tiles on all those different views.

Those tiles are auto adjusted based on the row layout that you select. So as you start dragging in content to serve A33 column layout, your tiles will will line up exactly to that three column layout that's there.

How do we actually say yes? I want this to have all the different styling and I want something to be a tile or I don't want something to be a tile. Made it very simple. I know this is really hard to see on this screen share but there's a CSS class name on this.

Static content part. If you just Simply put the word tile in there, that's going to mean that everything inside of this part, the static content block you're going to have be in that particular tile.

Other class makes it a tile, you're good to go.

From a table styling perspective, again, this is really small. We can dive into this on a doing more screen shares later when we get to everyone's questions that are there. But when you're making a table, one of the ways I like to make tables is to use again a static content block.

Inside of the portal and then simply run a for loop for it. So you could say for every item in my query, simply return those results that are there. You can Simply put on a class for your tables. We've made one called Slate Dash table. When you do that, that's where you're going to get the styling that we saw earlier with the bigger padding, the sort of striped rows in your table, and all the other things that we've added the box simply by putting in the class of Slate table on your tables.

This one, the pop up styling, this one is a little bit more tricky. There's a certain class that we we we asked you to add to the view for your particular pop up. We then will will do some styling inside of the CSS. So that way if it's on mobile, you're going to be able to see the full pop up on your mobile view. That's there the thought process behind this.

Sort of out-of-the-box pop up is that there's many different styling attributes in there.

If you recall, we had sort of a top section for tiles. Within it we have sections for just free text and paragraph text and some styles there for, you know, smaller types of tiles. The idea behind this is that you can kind of pick and choose what you want to include or not include in this type of pop up. So you don't need all the danger buttons, you don't need all the regular buttons. You can sort of choose what you want and get rid of the rest to really, you know, only include the content that you need.

This one does require, if you're editing it a little bit stronger, experience in HTML or CSS, just because pop ups on mobile are somewhat tricky and also because if you want to remove things from the standard pop up, you have to understand a little bit about what the HTML is saying. So you remove only the things that you want and keep the things that you need that's there.

Taking it back, right, so we went really far into the weeds, just that if we bring it back up a level, the whole idea behind this portal is that you don't need to get into the leads. So the idea is that.

It's there, it's LA Box and it's extensible for a variety of use cases. From the advancement side of things, this could be where you just put in sort of calculated KP is so that way you can have a dashboard for your leadership team to come in and see how our people performing, how are we doing from a revenue perspective. This is also where if you want to have a place where your gift officers, your prospect researchers, they can log into these type of environments and have a curated experience to only see the things that they.

They may want to see or use this as a juming off point to get into their database and look at different parts of the record. We see this type of portal design really great for things where you have staff members that you're trying to manage from a performance management perspective. How are my staff doing relative to their goals? Right there, their supervisors, their leadership can have this one consolidated type of environment and quickly tab between the key pieces of information that they want to see. We also see really good examples of this.

Class agent side of things or the volunteer side of things where this can have an authentication for person login so your external constituents can log in and see the things that you want to make available to them inside of this portal. So while it is somewhat technical in terms of there is a bunch of design elements in here, there are some nifty things that we're doing from a JavaScript perspective to be able to make those tab works. The idea is that all that exists.

You can simply adjust it as needed. You can use it out-of-the-box. It's easy to understand and sort of read through. As long as you know you're able to sort of read and comprehend what is in front of you, you can very easily start to iterate on what is there. The whole idea behind this portal, the pearls that we have done before for our everyday online giving and the portals that we're going to talk about in the future.

Is all. So that way you have this nice clean type of design that you can use right away.

For whatever purposes they are that you you need them.

That was a lot of information, fast and furious. I will now go ahead and we'll open this up to questions. As you have questions, go ahead, drop them in the chat. The team is there, I'm there. They're compiling them as well. So that way we are able to to get those questions answered.

Question from David. Could we use this for admissions purposes? Yeah, absolutely. So this is available.

Right now in the advancement Showcase, clean slate environment, so if you want to go and see how we're using it there, you can go and grab it. I think there was also a suitcase ID that Steven may have dropped into the chat. Grab it, bring it into whatever database that you want, whether it's emissions or advancement or student success. This is going to be a design that you can take with you and adapt to whatever purposes you need.

Yeah. The question on can will there be a session for dashboards reporting KPIs our next session?

Is going to talk through some of those types of things we're actually going to see different applications of this left side navigation portal. The next one that we have coming up is going to be actually on December 4th that our team is going to host and it's going to be viewing this type of portal. But from a performance management lens where we're saying how are my staff doing relative to the goals, what are the KP is that we have for.

Things from an annual giving perspective. From a communications perspective.

From a leadership major gift giving perspective and we're using the query tool to sum up all the relevant data points and present them nicely in this type of environment. So yes, there absolutely is going to be some of those. So stay tuned.

And Tracy's putting into the chat right now. When that is, you can register right inside of home slate for that. It's going to be another Wednesday at 2:00. Nothing like something right in the middle of your week so that we have, you know, something to look forward to on Monday and something to miss by the time you get to Thursday and Friday.

Yeah. There was a question that came in about accessibility built into this. Yeah, absolutely. So as we were going through and designing this, we want to make sure that not only was it pretty built efficiently, built with speed in mind, built to be accessible for writing these cases, built through to respond on mobile appropriately. It also is built excessively as well. So you'll notice there's no accordions inside of this.

We've ran it through a couple of different testers to make sure that it does pass all the accessibility checks.

And it does. If you find that it's not, let us know. We can go and make tweaks to this. That's one of the beauties of Portals is that you're really in complete control over the overall look and feel, design and experience for your end users.

Other questions that people may want to have and I'm also happy to jump back into into the the live view of it and show anything on the back end if people have questions about how that works. For those of you, if you're unable to join us from our last webinar on these portal designs, we are using the template function inside of portals. What that's doing is it's packaging up all the CSS.

Inside of here. So we're really loading it once and as you need to make changes or tweaks to say, your institutional brand colors, you can do it all right up here at the very top. You don't need to scroll through all the various CSS that's there. We're using these variables and are passing them through as you may need.

A question from you, Lloyd. Yeah, can you demo the side NAV and pop up feature that you were calling out again? Yeah, so.

What we're looking at here is, you know, you have the side navigation that's over here. This is really just some examples of what a table might look like, how the different sort of tiles work. One of the things, and I'll get to the pop up lid in just a minute, but just to show how easy this is to adapt and update. If we go and we look at this home page on the back end, we can simply navigate to that home view. We see a very sort of close approximation to what we see on the front end.

Side of things, but if you wanted to change the layout and you wanted to say actually I wanted there to be.

Two columns. I want 2 tiles in each row. You can simly drag and drop and rearrange the tiles to place them where you want. And in real time we're going to automatically adjust what that looks like, right? So I can start to say I want to be, maybe I want to be 1-2 and three all in a single column layout where I can simply drag and drop them all right there where I can drag in #1 #2 and #3 and then I refresh my page and now they're full width. That is here very easy.

And it's just again baked in and you can simply tweak and change to be what you want that experience to be. So if I go back and I put these back in my sort of three COM layout, I can delete my two column layout, refresh it again. And now we're back to that sort of three column layout. Lloyd, from the pop ups perspective on our pop up page, we're standardizing a a pop up environment drag. You can move it around, position it. But what we've done is we've put in a bunch of.

Various elements that you can choose to include in your pop-ups or not, depending on what that information is in the pop-ups. That includes a section for action buttons. You can have two, you can have one, you have 6. It's designed to be responsive based on what you actually put in. Some sections for things like tiles, free text comments, as well as sort of secondary, tertiary types of information that are also tiles but not as prominent, that is here, so making it very easy.

Merge fields, things like that that make it easy.

To do Lloyd Fob question, does it extend the pop up knowledge base article or a little different? We're doing a couple things a little bit different here for the pop up one in particular, we're doing some specific classes on it. So when you think about what is the pop up actually look like, we're adding in a class for a pop up windows. That way we can make sure it's appropriately.

Sized and sort of manipulated to handle mobile. So that way you don't have a, you know, this is a very nice sort of wide pop up. So when you're on the desktop it looks great. But so that way it responds appropriately when you're on a mobile device and it takes up that full width and still being able to rearrange dynamically the content within the pop up.

Gotcha. Other questions that folks have?

Questioning from Amy. Amy may have covered this before I was able to join.

What limitations are present that we should be aware before using such a side navigation setup? For example, limit of the data used, combinations of layouts to avoid, or things to keep? Great question. I I love this question for a variety of reasons Amy, but I think that this goes to the heart of.

Of sort of content design more so than anything else where you're thinking about, hey, we have a table and we want people to see a bunch of information. Well, as you start adding in information density into your, your designs, right? If you have a sort of A2 column layout or a three column layout, but you still have all these values that you want to show inside of the table, your table is going to start to get really smushed. So from a, hey, can people actually use this? Is it a?

Good thing to have here. My recommendation is probably no. I think probably anything more than just these types of handful of columns. In this example, you probably want something that's much more full width and taking into account, you know, all the real estate that you have here, including when things go to mobile, you have as much real estate to actually manage. And then goes to the question of, well, what information do we actually want to share and how do people access it if it's something like a volunteer and they may be accessing something on their phone.

Is a table really the best thing that they should be receiving or do they just want sort of the key sort of highlighted pieces of information that's better aggregated rather than sort of a listing of 400 rows that they have to sort of sift through and get? So I absolutely think it's an important part of the design process to say not only like what is the look and feel right, but what's the right sort of method of delivery of information.

And that could impact its overall usability that's there.

To Rocco, can you explain in more detail how the edit template functionality difference from adding custom CSS styling rules at the top level? Yeah, so this is something we covered in our previous in our previous session, but where the template allows you to essentially build in more than just CSS, right so.

One of the reasons for doing this is this is going to load on every page. It's going to be consistent across all your different views that are there. And I know that you can do your CSS added here at the sort of higher level inside of your portal. What you can also do inside the template is more than just that. So as we Scroll down, this is where we're actually referencing the the navigation. So inside of the template is where we're actually building the navigation, which you can't just do inside of the CSS.

Override rules At the higher level portal level we can actually have.

Full HTML inside of here, including any JavaScript that you may need to do whatever it is that you want on your page. In this case, we're using the JavaScript to allow you to toggle back and forth between the different tabs that you have. We're doing different overlays on mobile, so that way when we're looking at something from a, I'll just exit out of this to show what that looks like. If we go back to the home page, we'll just pretend to be on a, an iPhone, right? But you'll see that.

Your tiles will realign as you click, you get the overlay, you can navigate between your various tabs, you can click off, it will unload. But we're able to include all those things at the template level. Rather than having to have separate views and methods that are called every single time you load pages. We can sort of set it all at once inside of the template that's there.

Yeah, exactly. Replacement for having the old sort of way of doing it where you had to have separate views and methods that had to be run every single time you.

You you've refreshed the page or went to a different view?

Yeah. And hopefully that was a Emily, I see your question coming in after Rocco. Hopefully that covered it as well. I think as folks have more questions about sort of the template design of things, feel free to take these to our community conversations as well. We have them multiple times a week on the advancement and but this will allow much more sort of back and forth dialogue to more so than the somewhat 1 directional nature of this webinar.

Emily, it's something you you build uniquely to each portal. Yeah, which is one of the reasons why we have sort of the idea of this sort of foundational framework for left side navigation. So that way you can come here effectively just to control a control C in your new portal, paste it right back in and then you have that foundation again. You don't need to re sort of litigate all the different stylings in the CSS and the branding. You can set it up at one time that sort of your template portal and then use that as.

Baseline for every iteration you want to build off of that.

Great. Fantastic questions coming in.

Part of the idea behind these these series of of webinars that we're doing is that they are a little bit based on the previous one. So our first one much more very simple sort of 1 pager view everyday online giving form. For those of you who may have missed it, here's the sort of preview of it. So I know it's not exactly in the agenda, but something a little bit more like this right, where you have sort of this one pager.

View you can drop in whatever form you like. Ours is a giving form very easy to update the branding, background, the images, but a nicer landing page that you're able to make this. We talked about sort of the portal template, how that works with the overall styling. This every the left side navigation portal that we are in right now is much more building on that foundational concept of the template, adding in the layers of the tabs for that left side.

Navigation, the next one on December 4th, we're going to talk about performance management.

Which we have a pretty robust example of already in the advancement showcase environment. But we're now going to take this type of design and apply it to a performance management where you can see, you know what all the gifts coming in with recent contact reports, where are my gift officers progress towards their goals, What are those KPISI mentioned before that we just want to see what's that big number that we're doing in terms of coverage ratios or alumni participation or any of those types of things.

So we're going to keep building, building off of that.

To give a little preview of some of the other ones that we're going to to be doing after that, some more peer-to-peer style portals where we applied the same, different use cases to the same portal design. Then as we get into later in December and early in the new year, much more about sort of what is a giving day portal look like with challenges and matches and reports and leaderboards and those types of things. Again, all with the idea that these are things that can just be suitcased right into your database.

An Emmy for any new school that joins. I'm preaching to the choir a little bit, but makes it easier for any new school that joins this lake community to then start with these things out-of-the-box so they're just baked right into their database.

Cool. Any final thoughts and questions in my team? Have we have we missed any that came through? I'm scanning our document. I think we may have gone to everything that's here.

A question coming in from Jeff. So if you're pulling brand styling header footers, NAV and portal that has NAV, how would this interact with that or should we hide underlining brand stuff? Great question. So what we're doing in this type of environment is that the.

The pages are actually no branding, so they're all being referenced because they're tabs with no sort of institutional headers and footers. So we're actually not taking into account your your overall design that you have there. So it actually hides all that stuff automatically. The minute that you start adding anything into the portal template, your sort of database level branding goes away in favor of whatever it is that you style in the.

Itself.

Good question.

Awesome.

Lloyd yeah, the side map is in the template, so easy to manage it all right here. We're not sort of clogging up your views and methods with things just to do the navigation. When you go into the template, move beyond all the CSS that's there. We have it listed right down here. So we have a container for your navigation. So as you want to add, say, new tabs that are there, you can simply just copy.

And paste and they will show up.

No, for this example, Lloyd, you're asking will sometimes show for some people and not others. And this type of environment you're putting into the template something that's going to show for every single page of your of your design for your portal. I think that there's some other ways that you could probably accomplish conditional type of tapping that's there, including taking it back out to putting these into your.

A traditional view that's there. What then would let you put in some some dynamic characteristics to show and hide some tabs?

But I also think that that goes to a broader conversation a little bit to the question that Amy asked earlier about sort of what's the overall philosophy behind what's included in any one particular portal. An idea that we talk about a lot here is this, not trying to cram everything into a single portal, but instead of having consistent portal designs and simply linking between portals. So the authenticated session.

Carries over from one portal to the next, but based on what they're doing.

They can then simply be passed from 1:00 to the next to the next based on what permissions that they have.

Cool. I'm not seeing any more questions come in, which is great. I know this is a lot of information fast and furious. Just as a reminder, we we have been recording this session. It's going to be available in your home slate under the recording section section. Once it's finished being transcoded. You are also then able to find more information about this coming soon to the knowledge base called left side navigation and an advancement portal design section.

This is also available today in the Advancement Showcase Clean Slate Environment.

We call it something very.

Very direct of left side navigation, so it should be relatively easy to find the suitcase ID I think is floating around and the chat will also be adding that to the knowledge base article as well. So you can simply just grab it bring it over and be good to go. Or if you're like me, you can also sort of pull it up side by side and and learn as you're building it along where you can sort of have this on one screen start a brand new portal from scratch on your side. I think that the sort of craft of going through and sort of bringing over the.

Template CSS and the HTML there and building out the methods and the views. It's just a very helpful thing to do from trying to figure out how portals work, particularly with this one being a really sort of ready to go out-of-the-box type of portal. It's going to be very easy to follow along and see how the pieces and parts are put together. If you do have more questions that we couldn't get to in the chat or you weren't fast enough on typing it in again, join us at our our basement community conversations. Our team is.

Very happy to answer any follow up questions that you have on this. Otherwise, we'll look forward to seeing you at the next one on December 4th. Be sure to check it out and for anyone who is here that's attending the ASP conference in New Orleans, be sure to stop by a booth. We are going to be there myself, Steven on my team, Tracy on my team. So we want to make sure to say hi if you are going to be in New Orleans for that Advancement Services conference.

With that, we'll go ahead and say goodbye for now. Thank you again, everybody for joining us today. Really great questions and we'll see you again soon.

Take care of y'all.