	products recent interviews FastScripts archive about ASAP Sports

Our Clients:

Browse by Sport

Find us on

Subscribe to RSS

Click to go to
Asaptext.com

View our
e-Brochure

COSIDA CONFERENCE CALL

May 17, 2018

Chris Sabato

CLARK TEUSCHER: My name is Clark Teuscher. I'm the sports information director at North Central College and the chair of the CoSIDA Continuing Education Committee. I'll be moderating today's webinar as we discuss some simple but effective ways to enhance your institution's athletic website.

Presenting today is Chris Sabato, assistant athletics director for media at Willamette University and member of the CoSIDA New Media Committee. He's got some tips and advice for enhancing the function and appearance of your website no matter what provider you use.

Chris, welcome.

CHRIS SABATO: Hello, thanks for having me.

So let's get started. I'm going to give you some little tips and trips towards the end, we'll dig into a little bit of HTML and CSS, and as we're going along, if I haven't explained something correctly or if you have some questions, make sure you put those in the chat, and Clark will interrupt me and make sure that I'm explaining what needs to be explained.

So let's start off, let me show my screen.

What I wanted to start off with is some stuff that you might think about over the summer, things that may change that you didn't think about.

One of the first things is your social media icons and making sure that they are accurate. So many of you may know that I run a social media ranking site for the various divisions, and I will come across people who have changed their social media and you would not believe how many times I've come across, like, okay, this handle doesn't exist anymore and I go to their website to find out what the new handle is, and all the links point to the old one.

So if you're changing your Twitter, your Facebook, whatever it is, make sure you're updating these lanes, most of them up here at the top, some have them at the bottom. Some of you have width etc., so just remember if you're changing, if you're changing social media handles, that you're updating all the places on your website where those are included and that may include something like a social media directory or whatnot. But a little thing that is helpful for a lot of people when they are trying to find your social media links.

The other thing I wanted to talk about was a footer address, and this is something that is a huge pet peeve of mine. When I go to a website, and I can't quickly find where the school is located, and it happens more often than not that there's not an address at the bottom of the page. It's a simple thing.

Most of you could probably do it on your own without having your website provider help you, but if you need your website, it's a small thing, I think Sidearm and Presto would easily make that change for you.

Get your address. If I hear of a school and I need to do something about a school that I have not read or don't really know about and I click on their website, if I can't scroll to the bottom real quick and see, hey, this school is in Salem, Oregon, then I have to start digging and searching and it's like, well, where is this school. That's another way that I think, a little easy thing that helps your -- not only -- it doesn't really help your fan base, but anyone who is not a fan who comes to your website, that's an easy way to make sure that they know where you're located.

So the next little bit is the splash page. Splash pages are another one of my pet peeves. And for those of you who are not 100 percent familiar, splash pages are typically when you go to a website and it -- it takes over your screen and pops up and it covers your whole screen with some breaking news, some event that you want to push, and it's -- from a user perspective, it's super, super, super annoying.

And I can't remember where I first saw this. I think it was maybe it was Texas, maybe it was Kansas, one of the big schools did this, and I was like, this is a great idea. Instead of using a splash page, is using -- is inserting a banner, and so we have this -- we have this golf tournament coming up that we want to plug, and so it just inserts. Normally there's nothing here. This collapses and there's -- there's -- there's nothing here, but if we've got something we want to plug, I can -- I can put in an image and it's front and center. You see it right away. It's -- you can't -- you can't really scroll without seeing it. This is actually a smaller one. Normally our normal banners are actually twice this size. But this is one, I made it a little smaller, because we keep it -- we've been keeping it up for several weeks.

So for example, our baseball team, when they won the Conference Championship, I had one that was twice the size and left it there for about a week and then took it down.

This one is a little bit smaller because it's something that's going to be persistent for several weeks. But that's just another way that you can get a message out about some event, something special, something that you really want to push without having to deal with a splash page, and I'm -- I'm pretty sure on Sidearm, that this is something that anyone can do, that has to do with adds. I use Presto so I'm not 100 percent sure, but from what I've been told, there's an easy way for most people to do this on their own. Presto users, you would probably have to ask Presto to help implement that for you and it's -- you know, from the Presto side, it's just an image, that's all it is, and a quick way to get that message out there.

The other thing, this kind of goes back to the social media links, is just making sure that your current content is updated and I'm going to, I'm going to call myself out here because we scroll down to our site, student athlete of the week, these are old. Graduation for us was last weekend and we're not doing this anymore. So I need to make sure that I'm getting rid of this section or in a way that the data is not outdated.

You know, I've got this grand opening sign here for our Webb store, which has been online for over a year now, so it's not a grand opening anymore.

So these are areas that I need -- that I know that I need to work on in the summer to make sure that I'm cleaning these up and this I need to do ASAP, and then this one over the summer, but just making sure that the things on your website that need to be updated are updated and the summertime is a good time to maybe just sit down and go true your Web page and follow all the links and make sure everything is still working and up-to-date and if you've got things that are outdated, either updated or remove it.

I'm sure Sidearm is the same way, in Presto, you can hide things, it's still there in the back end and you can make it back live when you've got that updated. But keeping content on your website that's fresh up and dated.

And then this leads into an article that Chelsea Chamberlain from LSU and Sean from Endicott put out, I think it was last week sometime or maybe the week before, is the how to stay relevant in the summer and if you're looking for content ideas, things to do and how to keep your content fresh over the summer. This is a great article. I suggest that you all read through it.

There's too much in there for me to go through. It's probably a whole webinar in itself but there's just a great bunch of content in here for keeping your website fresh over the summer.

So now let's talk about some things we can actually do to our website, little features or things like that that just kind of spice it up a little bit.

The first thing, I want to talk about is: Tables. I'm sure most of you know tables, have used them, used them on your website, but what a lot of people do is dump a table on their website and just leave it at that. And -- I'm going to pick on my conference here, we have a baseball tournament going on, we have a game in a couple hours and our Conference Commissioner is at that so she's not going to be watching this. Hopefully she won't see this as an example of a bad table.

So this is an example of just the table is on the page. It's not styled. It looks kind of crappy. We've got this fresh website that was recently designed. It looks nice and then we have this table that looks like it's from 1995, and there's simple ways that we can kind of clean that up and make our tables look fresh and look a little bit nicer.

One of those ways is with a tool called datatables.net, and what this does is it takes a table and makes it searchable and sortable and easy to find things. And here is an example from Purdue University, Fort Wayne. This is their all-time awards and honors for volleyball, and you can see it's just a table but you can search by year, there's all my awards from 1995. I can search for associations, I can search for Player of the Week and there's all my players of the week.

So this is a simple way that if you just have a table of all your awards, whether it's for -- in this case it's for a sport, all your awards for a sport. Maybe this is the way you organize all the academic awards for your department, but this is a quick way that you can get all that data dumped on a page but that's easily accessible and easily searchable and sortable.

They have it set so that it doesn't paginate, but you can -- there are settings that you can -- let me show you real quick how to do that.

So datatables.net is the website that provides this, and there's basically three things you need to do. One, you need to include the CSS and the Javascript file, you need to call the Javascript file, and then you get this.

So this is an example of what you would put on your website. So this is the link that's right from Datatables, and then this is right from Datatables, and then this is also. If you just copy and paste these, that little bit right there that you can get from here, and then this is just a table. And as long as your table has headers it will populate and work. I can show you an example of that.

So here is an example of, it's just a table, and I don't even know where this data came from. It's just dummy data, but it's just a table, and so if I come to the bottom and edit that, and so now I just get rid of -- I had commented these out before.

But all I'm doing is I'm adding this link to the CSS, this link to the Java script file, and these are all hosted on Datatables.Net it uses CDN so you don't have to put any files on your server, your Presto or Sidearm site. You copy those two in exactly as they are and this little bit right here, the script, and this is basically saying, apply these to this table. And here is all our table -- the idea of this table is example, and right here, if -- this right here is just saying, use example and apply that.

So if I save that, then you will see, bottom, just like that, now my table is searchable, sortable, and in this case it's paginated and you can -- those are all settings you can tweak. If this looks like something that you like to use, check out Datatables.net. There's a manual and all kind of different ways you can tweak and use things.

But it's a super simple way to get a dump of data on to your website in a clean, usable sortable, searchable way.

So that's Datatables. Just a neat, neat little tool.

The next thing I want to talk about is responsive layout. And as many of you have gone through website redesigns over the past couple of years, you probably know that responsive websites are what everyone is moving to.

Let me show you an example of responsive website. This is our basketball statistics, and it is just a bunch of data, but if this -- if I had just done this in straight-up tables, when you viewed it on a phone, it would all look tiny or wouldn't fit. But because I've used a responsive layout, as the page goes smaller, you can see then it snaps to just one. So I've got three columns and a small screen. It's just one. And I can verify this with Presto sites, I think almost all Presto sites, unless you have a really old one, and any of the new Sidearm sites that have a responsive layout, have the capability of doing this, and it's a pretty simple task.

So this is something that you're going to work in the HTML view to kind of get this started but in a lot of case, once its setup, you don't have to worry about that.

So this is a way on Presto, this is how you would do it. You would create a div with class=row-fluid, and basically in Presto, there's 12 possible columns and the span number tells you how many of those columns you're using up. So span4 plus span4 plus span4 is 12, and you could make it -- you could go two, four, six or six and six or whatever, just as long as it adds up to 12, that would fill up the whole page.

And so each one of these is a column you and put your data in that column and then when the page resizes, it will put this one on top, this one on bottom, this one below it and so everything just reflows.

Sidearm is a pretty similar setup. On Sidearm, if you're in the back end on the help section, I guess this is actually pretty well documented about how you can do this and what your options are but it's a pretty similar setup and then you've got a div class which is essentially a column. So let me show you, an example of that.

So this is our records page. This is actually track and field but you can see that -- no, this actually isn't an example. Sorry about that. There's an example.

So this is our social media index, or not index, but our social media?

CLARK TEUSCHER: While you're looking, there's a couple of questions.

Datatables.net, that's a completely free site?

CHRIS SABATO: It's completely free.

CLARK TEUSCHER: And are there other, maybe paid services, if somebody is really interested in investing some budget into spicing up their website? Are there other places they can go that are offering certain paid models?

CHRIS SABATO: Nothing that I know of. Although if you're looking to pay, there's always people that will take your opinion. I know Presto and Sidearm, if you had specific things that you wanted to build out, they would gladly take your money to do that, I'm sure.

Nothing specific that I'm aware of. This is just a free, simple service that is pretty neat for what they provide.

CLARK TEUSCHER: And in terms of -- you mentioned Presto and Sidearm, somebody using another provider, maybe one in-house at their institution.

What's the best way for somebody to go about inquiring about their options within a framework like that? What's the best way to word that, a support ticket, for what they are trying to do?

CHRIS SABATO: So it's basically just explain what you want -- what you want. You know, if you want a table that's searchable or if you want a table that looks a certain way, lay out what you want and it's always good if you have an example. Say, hey, such and such university did this, here is a page, I want this on our website, can we do that.

If you're working with an in-house website -- we used to be in-house and I fought tooth-and-nail to not leave in-house but I'm happy with Presto. They are few and far between these days.

Yeah, there's options and if you're trying to get your web host, whether that is Presto, Sidearm, SID Help, your university's IT team, whatever it is, sometimes the easiest way is if you actually have a physical example of something you want or something you see, or that you can draw comparisons to.

Like here is an example of this, I'd like this from Site A but I'd like this part from Site B, can we do something like that. If there are examples, sometimes that's easier.

CLARK TEUSCHER: The data that's being maintained in these tables, do you recommend that they be backed up in, whether it's an Excel spreadsheet or some other kind of format that's not necessarily part of the Web site?

CHRIS SABATO: That's a personal preference. It's easy enough -- so that's actually a loaded question and I would say initially, like my initial response would be, yes, of course you should have your data backed up, but I will also tell you that in a lot of cases, things like that, we don't.

Our data of record is our website. That is where we put things, that's where it's stored. That's where we've moved away from the most part having detailed record books. But if you've got the staff, if you've got the time, if you can do that, then yeah, absolutely have it in an excel file. That is safer. It gives you a level of backup, but it's also more work, because any time you update one, you have to update the other.

That's a loaded question about backing up and for the most part, I think we're pretty safe if your source is, you know, on Presto and this is the data you have and this is all your -- everything is on here. If you make a major change and screw something up, for the most part, Presto can go and dig into their backups and pull that data back. It's fairly safe up there.

CLARK TEUSCHER: Loaded question but you handled it well, thank you. Feel free to proceed.

CHRIS SABATO: What was I talking about?

Oh, yeah. Okay.

So here is another example of responsive layout, and so we've got these three columns, it fills up the whole page. One of the reasons I'm kind of pushing is this because I hate when I go to a website that is a huge website, it's got a big, wide website, tons of space and everything is just -- this area over here to the right is just all white space. Fill the page. Use the real estate you've got; but with the caveat that if you use the whole page, that it needs to make sure that when you view it on a smaller phone, that you can still see it.

As we get smaller, tables get smaller until it gets to a point and there it goes and it snaps to just one row. And so this is basically that page right there, and you can see that I have got, there's my row, there's my span4 with my general accounts, there's my next row, span4, my next column with my men's teams, and there's another span4 with another column with my women's teams. And so what you can do is you can -- at least what I like to do is I will lay out my columns like this, and then copy and paste my tables into those columns as appropriate.

So as I'm showing -- showing -- it's also -- you know, this is also another example of not only of like here is an example of responsive layout but here is an example of a way you can style lies a table to make it look clean and like it belongs on your website.

If you're looking to dabble into this, into this CSS and table design stuff, W3 schools.com is a great resource. It's got all kind of information and HTML and Javascript and so on and so forth and nine times out of ten, if I -- like, oh, I can't remember how to do that. I will search it, and the first result will be W3 schools, and what they also have is this little tool where on the left, you can enter your code and on the right side you get your examples.

So this is an example of my table, and let's just get rid of all of my styles. And so when I put pastings in default, it doesn't look terrible, but it just doesn't look -- it looks like I've dumped something into my website that doesn't fit.

So I want to use my styles to make sure that the design of this table, that this piece of data that I'm putting on my website, fits with the rest of the website. It's similar to something -- like a photo. You know, you wouldn't just dump a dumb photo that wasn't cropped or wasn't specific to what your use case was.

And a lot of times, I think we do that with tables and data on our websites because we're not 100 percent sure of what we need to do. If a photo needs to be cropped, I think most of us know, well, you put it in Photoshop and you crop it and it fits right on my website, perfect.

With tables and HTML, it's something that it's not -- we're not 100 percent comfortable with, so we just kind of do the minimum and get the data out there and leave it at that. I think that's something that we can spend a little time on to make things look clean.

And when we are doing these, if we are using styles, like it is right here, we're doing this once. I do this once and if I need to use it again, I don't have to do all this work over and over again. It's just the -- I'm just applying that style to whatever table it is I'm using.

So this is an example of a social media page. Basically this is all our social media accounts. It's helpful for me. It's helpful for fans. It's just -- to be able to find every -- every account we have on social media is here, so I can -- I can easily find our softball, Twitter, Facebook, whatever. It's all there. And it looks clean and it's real easy for me to quickly see what accounts we have. Football has only got Twitter. Swimming's got all three and then obviously here is our university and alumni accounts, etc.

So let's look a little bit about how I actually made this table work. When you're using style sheets, there's a thing called a class, and a thing called an ID. For the most part, we are working with classes and so this right here, there's my table. That's this table right here. And I've given it the class name, wu-table-sm and that's something to think about when you're messing with this is that CSS is how your whole site is designed.

So when we start tinkering with this stuff, we want to make sure we are not messing with anything that's already there, and so anything that I do custom, I want to, I'm going to preface it with W -- university, so that I'm not -- I -- I know for sure that I'm not going to be over writing something that is important to the design and the layout of our -- of our website.

So we have this class wu-table-sm for social media. Up here in our styles, I have this dot, which means it's a class. If it was a hashtag that would be an ID, so this is a class and inside this, first thing I'm going is border collapse and what border collapse is, is -- oh, and I -- let's close that window.

So by default, a basic table, there is a border around the cell of each -- there's a border around each cell, and around the main table, which basically means there's like two boarders for every cell. And what border collapse does is it basically says any time there's two boarders like that, it's going to collapse it into just one, and so I want to do that. I want my width to be 100 percent so I want that table to take up the whole space that its allotted and I want a border on the top.

You'll see, that's this border right here and you'll see why I did that in a second. So let's just skip down to this. So TD is your table data. That's basically your cell.

So if you're familiar with -- with tables, and I'm assuming most of you are, we've got our table, we have our table rows and we have our table data which is your cell within your row and basically this is saying, a that I believe is assigned this class for all the table data cells in this table, we're going to do these things.

And one of the things is I'm going to line the text left. I'm going to put a border on the bottom and this comes up, it matches this border right here because what's going to happen is I put a border on the bottom and they will all have boarders on the bottom except -- except this -- well, they all have border on the bottom and essentially a border on the top from the one above it but the top one won't have a border. And so what I'm doing is basically adding this -- this line right there.

Padding, that's -- that's -- what it is, it's the padding in the cell, how much space is around the cell. So there's two, well there's a couple ways to define padding. If there's two numbers like this, what it's saying is, this is the padding on the top and this is the padding on the sides.

You can also define it by each individual side and it starts at the top, and it goes clockwise. So it would be top, right, bottom, left, and I think we may see one of those. But that's -- there's not a ton of -- this is not -- this is not terribly complicated stuff.

Once you start kind of grasping how you can tweak something, it just kind of expands, and you can say, I want to do this, how -- well -- well, there's this other way to do it. So it's -- it's not -- like I said, it's not terribly complex and you can just start with things like -- things like border collapse and having just a solid border on the bottom, as opposed to a whole grid.

If this was just a grid, I think it would look kind of silly but with just the border on the bottom, it kind of makes it look -- it separates the data but it's still -- it's still -- it's still clean.

All right. Let me jump to the coach. So this is actually, I stole this from Scott Harris at Hampton and Sydney. He had posted that he did -- that this is what he does with his sight, and I said, well, okay, here is some ways we can kind of clean that up a little bit. So this is an example of a way we can use tables with some simple CSS in a coaching bio to make that coaching bio look a little bit better. And so here is our highlights table, so let's look at that real quick. This is the styling for that table. Let me actually go into that so you can see.

So we've got, there's just a table. There's my text. There's another table at the bottom, but if we click in and view our source code, we can see that that table has this class, wu-table-coach highlights and this style, which actually shouldn't be in there -- I'll get rid of that -- and then so now if I didn't have those styles loaded in my -- in my style sheet, it would look just -- just like you see it here, but because we have the -- the styles loaded, it -- it looks like this.

So let's go over what the styles we use to make that table look like this. We'll start right here. And so here is our styles, and there's my table, wu-table-coach highlights.

Again, border collapse. I'm going to float it right and that float means that it's going to wrap around it, and I want -- I want it to float left, the table would be over here with everything wrapped around it, float right puts it over there. Margin, margin is kind of -- is just like padding except margin is on the outside.

So this space that we have right in here, between the text and the -- the gray box, that's the padding, and the space we have here on the outside, that's the margin.

And so I've defined my margin and like I said, this is an example of using all four. So the margin at the top is zero, the margin on the right is zero and the margin on the bottom is 15 and the margin on the left is 15.

So that's zero here, zero here. So you can see it's right in line with everything else. There's no margin and then there's 15 down here, which actually it splits the paragraph, so you couldn't really tell and then there's 15 here on the other side and we can make those as wide or as small as we want.

Okay. And so here is -- so wu-table-coach highlights. That's my table. Table data, that's my data, my -- my cell in the table and I'm defining my padding on that cell which is 10 and 20, and so I've got 10 above and below and 20 on each side. There's my -- so now we are talking, now we have table headers, so that's the header of this table, which is this thing up here.

And I'm defining that, my text, my padding, my background color, the color of the text, and in this case I'm using text transform to upper case. That's just a little something that -- so for me, no matter what I type in that -- in that field it will always be upper case but you can -- that's one of those things that you could also just type in upper case every time.

Now, here is the trick to make these alternating colors. I've seen -- and actually, Scott's first version of that, basically what he was doing is going into each cell in the editor and making the background of that to the color.

Well, what we can do with CSS is we can say, I've got my table, wu-table-coach-highlights, I've got my table row, and -- which includes all of my data, cells in that row, and when I say colon-nth-child-odd, I would say every first, second, third, fourth, but here I'm just saying odd. So all of the odd rows will have a background of this color. And then down here, all of the even rows will have a color this color, just a little bit darker gray.

And what that does is that whenever I come in here, I can go and add a bunch more rows, bunch more data, and that -- that every other color scheme will continue and I don't have to manually make sure that I have them set.

This is another example of that, too, if for some reason I forgot a year and I had to insert one, it just reflows, I don't have to worry about changing colors or backgrounds. It's just set that way.

CLARK TEUSCHER: Chris, we're running up on our time here. We do have a couple more questions before we let you go.

To get into that source code where you're working, depending on the provider, how does one get to the place in their website where they can actually manipulate that code?

CHRIS SABATO: Okay. So there's two ways to do that. The first one is you can actually put it right in here, if I go to my tools, source codes.

So I go right in here and I can create a space for my styles and I just want to use style, and I want to close that style, just like every other HTML element, and then I can start doing that right here.

What this -- and -- and, and I would encourage you as -- as you are starting to mess with this is this is how you do it, what that means is that this style will only affect this particular page.

And let's see -- do something -- yeah. And so that will ensure that you don't screw up anything else on your website. And once you've kind of got the hang of doing that, once you've got your table or whatever figured out, then what we can do is you want to find out where your style sheet is, and it varies from site to site.

I think most Presto sites are CSS, and the CSS folder in the CSS styles, and you can go -- where is my Presto -- you can go to the back end of Presto, go CSS, and there's MyStyles.CSS that has everything, and I'm not 100 percent sure on Sidearm, but I believe it's a similar -- a similar type of process and so there's -- there's all my -- there's all my styles for my entire site. And like I said before, we want to make sure we're not screwing up anything that's already done.

So you want to make sure you're documenting what you're doing, and so for example, this right here, forward slash a star and then a star, and a forward slash, anything between these -- this is basically ignored, so I can comment, and so this says -- this is my custom code.

This is all stuff that I put in and has nothing to do with the Presto layout. And there's my global silent. So now there's all this stuff below here is all the Presto stuff.

So I want to make sure that I've clearly defined what I've done versus what Presto has done so there's no confusion and you can see everything is -- it starts with a wu and I try to document what changes I've made.

Are there any other questions?

THE MODERATOR: For those who are interested in trying to create some of their own stylized documents, is there a reference handy for what kind of commands and language they need to use?

CHRIS SABATO: So it's basically, if you want to do this kind of stuff, what you need to know, basic HTML, which for any of who you have been in this industry long enough, you probably have done this at some point.

Just your basic HTML stuff and CSS. Like I said, W3 schools is a great way where you can tinker and you can click the try-it-yourself stuff and you can play with things. You know, here is 20 pixels, let's make that 50, click run, and now that font is bigger. So this is a way you can play with stuff like that and try and spice up what you're doing.

Just real quick, kind of one more thing I wanted to show, this is an example of another thing we did, these call-out quotes in our stories, basically, I picked an H6 which we never use, ever, and redefined it so that any time we want a quote to stand out no story, we make H6 and it looks like this. There is just another example of something to make your stories kind of stand out a little bit.

CLARK TEUSCHER: Great. We thank you very much, Chris, for sharing your expertise with us today.

We continue to appreciate Capital One's ongoing sponsorship of the continuing education series.

FastScripts Transcript by ASAP Sports

ASAP Sports, Inc. | T: 1.212 385 0297