So it's a that that's kind of the joke. I have this whole other life as a film TV Actor in fact I met someone who lives in a house across the street from where I filmed a Christmas thing But anyway, so Cory had mentioned that last year and people thought I was lying, but in my other life Oh, wait, can you hear me? Can you hear me better? Nice Okay, I'm Andrea Ferguson. Please call me Andy. I'm the president and UX director for Andy sites We are wordpress design and development shop in Chapel Hill and Our hey welcome. Come on in We started a little early It's okay. I'm gonna let these folks get in and visit.  It's okay Wordpress is easy and fun We promise All right all right, um So I'm being told I need to either speak up or how's that even better And a little too much a little overwhelming in it. No, okay. All right Cool, so We are here today to talk about user friendly design tweaks for your wordpress website Here's the question everybody. Yeah, who here has a wordpress website. All right So, do you know what I mean when I'm talking about user friendliness? User friendliness gets interchanged with usability and UX and UI and all of this stuff But basically what user friendliness is and why you care is there are a lot of websites out there. People are very busy People get frustrated easily on the web You want to be sure that your website is user friendly so people go to it. They know what to do right away They have some kind of positive emotional experience And that's that's kind of what we're going for above all you want it to be intuitive You don't want people to have to kind of Figure out, you know, what where they're supposed to go what they're supposed to click Why does this look one way and this heading looks a different way? You want to you want to remove as much of that friction as you possibly can the sort of one of the Bibles is is Don't make me think and this is the this is sort of the first rule in in user friendliness and website usability Are y'all familiar with this book? You read it if you have not read it It is in itself a very user friendly book lots of illustrations very short You can get through the whole thing, you know in a couple of hours if you read every word and look at every everything But yeah, if you get nothing else out of this Go get don't make me think a common-sense approach to web usability He has an updated version that that recently came out and he also wrote a book called rocket surgery made easy Which is a which is a list of steps that you can take to find usability problems in your own website But his whole thing is don't make me think I'm busy. Don't make me think. I just want to go to a website I don't want to have to think about anything. I don't want to have to suss anything out Give me as many clues as you possibly can make your users happy. They like you better. They buy more stuff They get in touch with you more all that Okay, so we're gonna assume for today that you already have a website and you don't really Have the time money or interest in investing in an entire redesign But you just want to make some tweaks to make it more user friendly So we're I'm gonna focus on three easy types of tweaks that you can make yourself color tweaks call to action And that's like buttons links and font tweaks Also known as typography if you like long words so I Hate doing a lot of things that waste my time maybe Nothing is less interesting to me than for example watching paint dry So we're gonna use this website as our example today The whole point is just to remind you that it doesn't matter what your content is it doesn't matter If you're if you have a website that has a zillion pages or only one page It doesn't matter these tweaks will apply to any website. Okay, so here we have our our demo website How to watch paint dry? We've got three categories of Content here tools and equipment the proper procedure what to wear But what I want to do if this is my business. I really want people to get the guide I want people to download this ebook because every time I get somebody to download the ebook I get a bonus from my boss. Let's say So that is that's gonna be our primary thing that we care about However, everything is interesting and we don't want to you know, we don't want people to just see oh my gosh This is how to watch paint dry. I'm getting out of here So that the get the guide is gonna be the thing that we're gonna care the most about All right, so first off color tweaks color is very emotional You can make people feel certain ways with different colors But above all thanks to our big beautiful monitors and technology and everything we can have Vibrant beautiful color on the web now, so you want to take advantage of that as much as you can Color attracts I'm a bird nerd anybody else a bird nerd. Yay. Yay my peeps. Okay Okay, so so in the bird world the males Get all the beautiful plumage and the pretty colors and all of that kind of thing That's because their sole job really is to attract the ladies so that they can procreate and make sure that the species You know survives The ladies on the other hand their job is to sit on the eggs and take care of the babies and all of that So as a result they need to be not noticeable So that they can be more protected, but color attracts Lady birds can see color. They care about these things So that's why in the bird world you see all this beautiful Beautiful colorful plumage. I mentioned the color has a motion. We all know that you may have seen this graphic before Red is excitement, you know green is peaceful. You see a lot of blue in logos because that's kind of the color of trust There are other reasons why people use blue Facebook is blue because its founder is red is colorblind and that was the only color He could really see so there are also other reasons why people use color as well So I'm not gonna get too deep into this whole concept because you intuitively know these things anyway But I just want to mention that that it does kind of Matter so when you are thinking about adding color to your website think about think about the emotions that different colors conjure I'll also mention we're going through a lot of stuff But these slides will be online After the presentation, so don't stress over getting everything down if just start with one color Adding adding color to your website can get really overwhelming because you don't even know where to start but just start with one color and and This one color should ideally be used for those calls to action those buttons those links those things that you want people to See right away. You want to be consistent with that one color so that every time somebody sees that color on your website It means do something This is why you don't want text links to be one color and buttons to be another Anything that is clickable that does something Research has shown that it is it will help your users most if you are very consistent with what that color is So how do you come up with the one color? Well first place to start is your logo if you have a color in your logo Start there Because then you know that the logo is going to be at the top and everything will kind of look good together Unfortunately, our logo doesn't give us a lot to work with You can also see that it's nice and big and bold. They use the make my logo bigger cream Are you familiar with that website? And we know that clients always want the logo to be bigger. It's the first thing you hear so So this logo opted to be really big but not to have any color. Okay Well the good news is now the sky's the limit So the next place I would go to look for color is the imagery on your website So this website has some pretty good images They've got color There's there's a variety So if we know that these are the images that you have on your website I'd start there to try to figure out what your one main color is going to be so This is there's nothing scientific about this part. It's just like what do you see first? What is where does your eye land? So I tend to kind of focus on this area. I Like a powder blue tuxedo who doesn't But that might not be a strong enough color for my calls to action So when I look at that I see The orange All right. So now we've got somewhere to go. We're starting We've got a color that's going to kind of be our sexy color on the website. So the thing is Do you know what I mean when I say web accessibility you're all hearing about it a lot, okay, so In in some situations, it's required your website must be accessible to meet the American for Disabilities Act and all that stuff so what what accessible colors mean is it's colors that It typically colors that have high contrast against their background so that people can discern them easily So there's this website, which we'll see if I can Load What do you know I can Okay, so color safe dot co is a really great website when you're choosing colors You can just click get started you can stick with the stick with the default options. That's perfectly fine Click generate color palette and it's gonna it's gonna Show you little tiles of all the accessible colors. All right, so we know that we want Show me all the oranges So all of these are accessible. I really like this one Because it's kind of a red orange Studies have shown that Red and some people get afraid of red on their website. They're like, oh people are gonna think I'm yelling or red bean stop or whatever So so what we know is that red is the first color that babies see and We know that when people have brain injuries and they can they lose their ability to see color the first color They see again as they're recovering is red So red does have an emotional an emotional pull and appeal to it So I'm gonna go with this kind of red orange here and you can see it'll give me the hex number So I can do my whole thing. All right now Let's see what happens if I do this miracle, okay So so now I have that color so let's return back to our original Website that we're dealing with Nice black and white website Picked my color and let's apply this principle So now I've made the links the text links, which you probably didn't even know were there I've made them and I've made the button That orange so we're already improving it We're already making it user-friendly because we're showing people where where to look And we're teaching them every time you see orange that you can do something now We did put a helpful click me with the thumbs up But people don't read initially when they first see a website. They just feel so that orange is really gonna help us From here you can go into creating an entire color palette. I'm just gonna list these tools Simple ones coolers.co you can enter you can enter hex number and Then you just keep tapping the space bar and it will come up with palettes for you find one you like and apply it to your website Canva comm is really cool too because you can upload an image You know I could have I could have uploaded that image of the paint cans for example And it will automatically create a palette for you. That's really cool too if you are at the advanced level color.adobe.com which used to be called cooler, right Alex? K-u-l-e-r it's Way over my head, but Alex our director digital loves this thing and you can You can create palettes. You can put different rules in you know tertiary blah blah blah all this stuff And you can create palettes that way too Corinne our creation director she and I just like to tap the space bar come up with good stuff And then Alex fixes it All right second thing call to action tweaks So calls to action are those things that just make you want to do something you just want to do something can't help yourself So for our website, it's it's download that ebook. We want to download that ebook so I Have in mind a call to action that is Unfailingly effective No matter what it's not a website called action. Can anyone guess based on this what that call to action is? Hot now I cannot Drive past this sign. I don't care if I have a bone sticking out and I'm on my way to the hospital I cannot drive past this sign it is so Popular and important that if you go to the Krispy Kreme website and do you like the store locator? It will not only tell you what stores are in your area. It will show you what stores currently have this sign on So you can drive out of your way To get the hot doughnuts This is what we want to do with our website We want to have the calls to action on there be so enticing that people can't help but click All right, so this is where we are right now Look me. That's the call to action that we're going to talk about Why size matters?  It's your fingers So Imagine so if you think about think about on your phone and none of us have pencil shaped fingers So we really need to be able to hit those buttons Apple and Google and you know all these folks have they have these sort of Guidelines for how big a touch target should be turns out. They're not big enough MIT did a very comprehensive exhaustive study on finger size and What they discovered is that it's actually 57 pixels is your is your minimum square for a For a finger touch target these these quotes are these are from smashing magazine They took this and sort of made it a real-world thing and if you just Google like touch target smashing magazine, you'll get you'll get this information Thumbs are bigger than fingers Why do we care because sometimes people are doing something with one hand and they're cruising your website with the others So it's helpful if thumbs can touch your your buttons as well Don't stress too much over measuring the button size. The point is make them bigger than you think they need to be Older people will appreciate that because We can't see basically Younger people will also appreciate it because it's just helpful and they're on these they're on their phones all the time kind of things so So so be sure That you make your buttons big so here are just four rules for an easy to click call to action make it big Make it bright Give it room, which means don't squish it up next to a bunch of other stuff. Just make it give a little white space around it and Make it obvious make it obvious that it is a button There are a lot of ways to do this But which we'll talk about but you want to make it obvious that it is a button And you also want to make it obvious what it's going to do when you click that button. So the label of it is also important So here we are with our website again, we apply these principles Small change, but it made a big difference. Okay, it's big much bigger It's bright. We did that already has a lot of white space around it We did that already, but we changed it from click me to download e-books So now I know what's going to happen when I click that button. This is really helpful and You know a lot of times when you get like form Plugins out of the box and the button says submit or whatever if you can Change that text to something like I Don't know anything other than submit send Get in touch Something not that submit is bad, but if you have the opportunity to label a button with exactly what's going to happen Send my form Whatever that that will help your users as well Again, don't make me think what's going to happen when I do this. I'm going to download the ebook. Great. Thank you Last one is font tweaks Typography typography tweaks So here just for Things to think about One is choose two fonts one for your headings one for your body two fonts, it's really tempting To start putting a whole bunch of fonts on your website now. I'm not talking about font weights You know if you within the same font family, it's okay to do bold and you know not bold and that kind of thing But two fonts that's gonna that's Pass that our brains start to kind of go So two fonts make the body text big enough for older eyes and smaller screens You know what I mean when I say body text, I mean the paragraphs the actual information the stuff people have to read make the headings noticeably larger than the body text and This is an issue. It's sort of a hierarchy issue You know, you want your content to have good hierarchy You want people to be able to say this is the organizing principle the heading is What this chunk of stuff under it is about and then under that you can use subheadings These are your h1 h2 h3 All this stuff that you that yeah And it matters for SEO and it matters for a lot of other reasons too, but pure user friendliness pure usability Make sure that it's obvious. What is a heading because we're gonna see your users are gonna scan that page And they're gonna look for what's big and in a different font First so that they know that's the area Where the information that they're seeking is and the last one is keep the case Consistent I'm talking about upper and lower case Don't be all caps in one place and upper lower in another place with your headings If you're being you know artsy and you want all lower case That's cool, too But you know establish that as kind of a design principle throughout your website and make sure that they're all that way There is That's right. Yeah, that's a great. Yeah, that's a great concept You talk about tags when you tag your content just be sure that you keep that case consistent as well everything you do as people look through your content and look at your tags and all of this stuff they're They're gonna sort of fall into a comfort zone of alright It's upper lower case. It's upper lower case if something is all caps. They might feel shouted at If something is just different for some other weird reason because you just didn't feel like capitalizing that first letter of that word They're gonna wonder why don't make them think Everything you do that makes people go. Well, what's all that's weird. What is what is that about now? You've slowed them down again. Don't make them think keep your case consistent. Yeah And comic sans is the other Yeah, that's a great question You know what I I want an opportunity for for Alex to be able to answer your question as well So we're gonna do questions at the at the very end, but that's it That's a great one I definitely want to definitely want to talk about that because this is an issue is that you may tell your client Trust me.  So how do you find fonts?  So there's a there's a website called what the font and You can upload your logo to it. It's it's it doesn't always work, you know But it will get you close enough usually and it will identify what what the fonts are in your logo you can you can find fonts that go well together by going to fontpair.co and It's just like it's got categories like I want serif and sans serif mona space and serif or whatever But it will come up with all of these font pairings and these are all Google fonts or You could just Write your whole day off and browse the Google font library because it's you just it's it's the most Wonderful warm rabbit hole ever There's so much in there right so last night I checked there 877 font families that you can easily use on your website no download required. So here's the thing Google fonts Who who who has worked with Google fonts? Yay Who has no clue what I mean when I say Google fonts? Great. Okay. Sorry. I didn't mean to point at you I was like she you're gonna you're my favorite. I know because I get to teach this to you so So a lot of times when you build a website and especially when you get You when you get like a theme like a template or whatever and we're not we're not dealing so much with like custom websites here But let's just say that you created you created a website and out of the box. It's aerial Great, it's fine Aerials nice times new Roman is nice. Whatever whatever is is there is nice however, what Google did is they took 877 fonts and they put them They kind of put them on their server and Then they put little code things in there So you can point to them on Google server and display them on your own website So with a little chunk of code You can make it you can have access to any of these fonts The the instructions are actually pretty good on there to teach you how to do it So so I apologize for taking all of your time because I but but you're gonna go to here and that's I'm telling you you're gonna love it So if you go to fonts.google.com you can find fonts You can type in your stuff and see what your stuff would look like in that font all of that And then it will give you implementations The best the best news is that a lot of Theme frameworks and templates Now bake Google fonts into them so you can go to theme options like our How to watch paint dry website was built in X familiar with X X is X is a theme framework and it's Like Divi of Aida X a lot of these things when you go into theme options It'll give you a chance to choose like what the font is that you want to use for your headings Take that extra step and go into the theme options and find that little drop down because nine times out of ten It's also gonna include Google fonts So you can go over to the Google website and say I want to use Josephine sands and then you can go back over and instead of having to even know how To implement it, you know with code you can just pick Josephine sands the website's brain will go out to Google Display it on your website It's beautiful your world has changed. All right, so Yeah Right right so That's right, and you can download the Google fonts To your computer to use for print assets as well, and they're pretty good also if it goes the other way around They're also pretty good about Having just about every font covered, you know, if it's not exactly the same You can yes, it's similar enough, but yeah, that's a great point So here we have how to watch paint dry. We have our teeny tiny little nav at the top We've got our tools and equipment proper procedure what to wear Get the guy all this stuff. So Let's apply our typography rules to this To end up with this all we did was change the type Now we've made the nav bigger much more obvious We've actually that old website was all aerial now we have to I can't remember exactly what these fonts are But we but I got them off the font pairing website So now we have our headings in this nice Serif font that works well with our Enormous logo We have kind of a cool, you know a little more curvy text font for our for our body text and it applied I Picked it from the drop-down. It's all I did and it applied all over the whole website so now Bigger upper and lower case Consistent all that stuff I said before So just to review we have taken this website and with just these three tweaks by adding a strong color by by focusing on the call to action making it nice and big and By changing the font We've transformed this Into this I'm not saying that people are going to become more interested in watching paint dry What I am saying is that the people who are interested in watching paint dry are going to be much less Frustrated because they're going to get to your website and they're actually going to know what to do Ideally they're going to download this ebook And you're going to get a bonus from your boss By the way, this website is actually live at how to watch paint dry calm So if you want to see these principles in practice you can you can you can for real go to how to watch paint dry calm The inside pages by the way have lorem ipsum, but they're Bob Ross lorem ipsum It is that it is the happiest friendliest little thing ever so it's all quotes from Bob Ross's shows Well, there is an ebook. It's not about how to paint how to watch paint dry, but See no actually if you if you click on the download new book It just goes to one of our white papers about best practices for launching a website So it's not Not that all right, so that's it. That's me You can yes Yes Yes Fantastic So So this is I know yeah, I Know exact so now I'm somehow going to try to try to try to get So this is so this is Paul Paul is our Paul's our storyteller and our writer editor always good for a story I will mention if you would like to get in touch with us You can see the call to action in the in the top of our website Or if you go to how to watch paint dry and you click contact there You you'll get in touch with us as well. All right, so questions Alex is doing donuts, but we're gonna we're gonna definitely talk talk these by the way We're they may not be hot, but they're only they're only like an hour and a half old so So they should be pretty good. I didn't bring napkins. So you just got to do this Nobody's complaining good gave you a free sugar rush All right two questions in the front. Yes So his question is about black backgrounds and white text that you know, it's so funny because I We go back and forth about this the science We did a website for a company that makes binocular Eyeglasses for people who can't see and they just need they need that help and We worked with the Federation for the blind So it's a website that's super high contrast, you know all of that kind of thing So what the Federation for the blind told us is that white text on a black background is good Once you put that out to actual Users who who don't have that particular who aren't that particular user case It can be tiring. In fact, thanks to Claudia. We made We made a change on our website Recently because we were putting white text On a on a dark background and it was just wearing people out I think it's much easier now. So thank you to Claudia for that. Yes second question color wheels color wheels My head just exploded Yep So I go to these tools that you mentioned a color wheel And I pick up, you know, I put in an RGB color value and I get something in fact but then I'm not The person who should be making those choices potentially Mm-hmm, or I think it I don't know they might give me four colors. Mm-hmm, but then I don't I'm not a Yeah, I think every day of our color right and I'm like, well, do I make that the footer color? Yeah Yeah Right color wheels can be really overwhelming That's why I recommend those first two tools that I you know if you if they've given you a color and they've said We have to have this color in our website, but we don't care about the others go to coolers and just and you'll just find something Also nature tends to be a brilliant palette artist so so a lot of times you can take a photo from nature that Includes that color and use that palette generator tool and it will come up with just colors that just go together magically the the the discussion about How and where to use color on your website is a is a big one? Obviously Alex, would you say I mean just in general your brightest color should be your call to action Yeah Yeah color color is subjective. However, there are There are Rules, you know You you you want to care kind of where the islands first Bonus points if all of the photography and the imagery on your website also reflects those colors You can get crazy and you know go into Photoshop and all that stuff But you don't have to do that when in doubt keep it simple. Just keep it simple It does and try yeah, and again try not to get overwhelmed for your hover color You can just use a lighter version, you know or a transparent more transparent version of what the regular color is so Don't you don't choose it you don't need to do that. It just needs to do something different Perfect perfect so that when it so that when somebody hovers over it it does something letting you off the hook Yeah, totally don't over complicate it. Yes Mm-hmm. Mm-hmm.  They knock the user off track. They're annoying. I Don't know anyone who likes them Other than clients because they just think it's cool that you know You can open up something and something will pop up for something like that, you know like a notification bar up top WP front notification bar. I mean there are billion plugins that do this kind of thing That's better for that kind of information the little slide-in corner things those actually convert pretty well There's a plugin called bloom Which I think is made by elegant themes and they do a really good job with these calls with these like Calls to action these kind of slidey in panels and stuff Take a look at that and you can you can trigger it that you know once you get 60% of the way Do something you can even do you can even make some of these smart enough so that like if somebody's about to click off the page Hey, wait, can I help? That's why they put chat boxes down there. Those tend to be pretty effective Yeah, sure I get Paul Absolutely. Thank you. I Love that you asked that cuz like the two-hour version of this talk, which it was like a few days ago You can use color to organize by category We did a website for the very sexy pollution liability insurance agency of the state of Washington and They're one of their biggest problems with they have all of these forms So what they do is if there's an underground storage tank and it leaks it wrecks the water supply So what they do is they provide help to people so that they can maintain them properly They provide insurance a cleanup resources all of that stuff They also do stuff with wastewater and they do they have all these things so their old website before they brought us on had All of this information So what we did is we we made all the underground storage tank pages have a big green banner All of the petroleum had a big blue banner and then I forget what the third one was but it had yellow I think homeowners homeowners stuff so and then on the on the home page We made three blocks so that people could self-identify and then as they make their journey through the site every page Related to that Topic has that color very prominently Brilliant. Yeah, absolutely. All right, so would do you want to restate your question for these folks? Yeah, so so we use we use the style tile process when we when we design and you know What we do is we try to get a lot of data and a lot of information Get the client's own words and then translate the stuff that they've said into sort of design languages and You know, you can have a really muted palette that you might offer a really bright palette that you might offer and Then as you can as you can help winnow the client and funnel them into making a choice and then just keep reinforcing all the time which is This is a big a big issue something. We always have to do just keep reinforcing. All right when you're looking at this Never say, what do you think? You know, so what do you think? Because then they feel like they have they also feel like they have to say something wrong, you know try to keep your review team very small You know and and help them understand that the website's not for them. It's for their audience So if so so do your research Figure out about color emotion if you can come armed with data and really good reasons why Then you can absolutely say to your clients. You know what? I I love that, you know, when you were in 7th grade you had a aqua t-shirt that, you know, you loved but Maybe we don't want to make your entire website aqua because that might resonate with you But it doesn't necessarily resonate with your users. Here's what we know resonates with people between the ages of 50 and 50 you know, whatever that kind of thing so so the more the more Research and discovery and all of that you can provide that that conversation gets a lot easier and then just keep saying I know But that sounds like personal preference. Be careful. It's that response to your preference and You know and I pretty much every time they'll go, you know, that's that's true I that is really just me and then you'll start to hear in the meetings, you know, it might just be me but So yeah, just know why you did everything that you did. Does that help? Anybody else? Yes, Sarah. Yeah, it's about the same. I mean I I read the same research There was also some research to indicate that now that Now that monitors are so much better We can actually have more of a print like experience on the web So I've seen some really beautiful websites that use Sarah fonts. So when we're talking about Sarah fonts We mean the ones that have the little little serifs little sticky out things on them And sans serif fonts don't have that. They're more rounded. So newspapers magazines all that stuff They use serif fonts and it has been long established the body copy on the web should be sans serif You know, it's I would say if you are going to use a serif font now Correct me if I'm wrong. You want to be sure that the line spacing is high enough you know one one problem that that a lot of websites run into especially with dense copy is Choose whatever font you want, but then the the lines are too squished together. So they I can't kind of You know deal. So one point six M I think is what we usually start with one point, you know, 160 times the Anyway, but just make sure that it's make sure that it's Spread out far enough and make sure you don't have Too many or too few words on a line that can like that we can geek out on that all day in terms of how many words There'd be on a line. Well, now I'm on a phone now I want you know all of this but But the Sarah versus sans serif thing I think I think the traditional knowledge still applies But I can't say that it I haven't seen it Applied successfully otherwise. Yeah, New York Times. Yeah, New York Times is all serif and that's been that's part of their brand too You know, sometimes your brand might be we're we're the New York Times We're serif Deal with it Yeah, but they're but they're able to adjust that so that it works. Well, I've read that too Yeah, absolutely. Yeah, and again, you know typography is another one of those things like color. There's a lot of emotion Attached to typography, you know, you see something nice and slab. That's why you see it on a lot You see slab on a lot of lawyers websites You know things that are for You know preschools or that kind of thing or a little more rounded So so consider the emotion when you're when you're choosing Typography as well because it things feel different, you know, we we try to we try to keep us keep stuff rounded because our whole vibe is friendly But you might want to be a little New you more New York Times a little snootier and if you want to do that Then you can absolutely go with a go with a serif font for everything. It looks very classy Anybody else boy trends ha trends, you know, they say when in doubt left left justify So I we don't follow it on our side. I think we write justified some stuff. We got all crazy but But yeah, it's I think when in doubt left justify, you know centering is the thing you probably want to most avoid Just because centering on it because you can't control it, you know And as as because we're all in responsive design, right? That that's gonna get a little weird looking, you know, so so yeah, it's When in doubt left justify Yes, we do, you know So his question is about the use of premium fonts versus the free fonts the only times we're we're always gonna go with Google fonts when we can You know for one thing you avoid sometimes you'll go to a website and you'll go well This is why is this all in aerial? This looks terrible and the designer will say wait a minute. Why does that? I've done this other thing. Well, that's because they were calling fonts that were installed locally on their computer So you want web-served fonts whenever you can so that's why Google fonts is great because it's free And you can get amazing fonts. However, there are cases where NC State is an exemplar used to be That where you know any web assets that you make for them you have to use their font, which is an adobe font, right? universe so That's right, so NC State is a perfect example You have to use universe on the website Now most of the websites here are being built in-house now Yeah Right Right Yeah, so I had worked in one of the one of the departments here when that Transition was first being made and that was one of the biggest things it was like we don't have universe We're gonna have to go buy it if you have to buy it Because of something like of a branding issue, which is all it usually ever is Then yeah, and the client pays for it and you install it and whatever and you can use the adobe What's it called Alex when you font library? Typekit. Thank you. Such a better word than font library. Yes typekit. You can use adobe typekit to serve those As well now there are plugins that will kind of do it, you know But great just go ahead and buy the font. They're not super expensive. Yes, somebody over here You do yeah, no, there's a commitment Yeah, there's a commitment they you know They don't give that stuff away for free and sometimes if you have to buy the whole library. Yeah, you're in for a grand How important is it to you client to have exactly that font when I can give you this font for free? And the font could go away. Yeah, anyone else have burning questions about user-friendly design tweaks Yes 16 picks Yeah, that's exactly right We start with 16. Yeah, we start with 16 for the body and then you can you can adjust from there, you know, you can Do your headings you can scale up from there, but 16 picks is a good place to start And yeah, it used to be 12 but people weren't looking on phones They looks good Yeah So go see his talk it to and you'll learn Right. Yeah, and in general, you know the whole thing is don't let this stuff worry you You know make some choice. Some choice is better than that first website. We saw Just you know just adding Just adding the color Made a big difference Just changing the font made a big difference, you know These these things are these are small tweaks not it not a single change was made to the content of this website to anything I literally went into the theme options and said Use large for the button size Use, you know Use the orange another thing I did that I didn't mention is sometimes you'll get an option for 3d button So this has a little 3d effect on it The Google Google's material design a lot of people use you know and that and it was because it looks like literal pieces of paper on a desk So the more you can help people we don't do shiny buttons anymore, although I'm dying for that to come back But they used to be yeah, they used to be really shiny It's okay to put a little cool effect like a little hover a little little, you know a Little micro interaction is what they call them, but if you can make people don't make people think that's really that's really it I could have just said that yeah Yeah, so you'll so the first yeah, that's a really good question. So ghost buttons I don't know I haven't checked the trend on that lately, but this is what we're talking about when he says ghost buttons So ghost buttons only have an outline and then they have something in them now We did kind of train web users savvy web users that if you see something like that it might be a button So hover over it and see what it does if you do have a ghost button Just be sure that it fills in or does something I'm not seeing these as much anymore though, you know, I think we I think we may be getting a little a little away from them You have it to look forward to you. They are yeah I can't honestly think of a good UX reason for a ghost button No Can you who likes ghost buttons? Oh All right Yeah, because you're querying Google Google doesn't tend to be slow, but but there are Alex what would you I mean? Yeah Yeah, and one thing I would say too is since there's scripts, you know There are essentially scripts you're calling that if you're finding that your websites hanging it might not be just the font That's causing that it could be that there's another script that's taking its resources Sometimes we'll find that as well But but yeah, but the font Google font should be should be cached Me too on two computers. Yeah, exactly exactly Yeah Yeah, that's it. Yeah, that's it. That's a great use for for a ghost button Did everybody hear what she said so so say you open up your website You have your big hero and you've got two calls to action But one of them is like the really important one look here do this too if you want to but but look here That's that's a great use for a ghost button because you're still satisfying the call to action But you're giving it less prominence and you're telling the user this is less important We really want you to do this pay attention to this first Anybody else did you like your doughnuts?


Alrighty, let's watch this the full first.  I mean, it's it feels like I don't if it's a punch I mean you can you have it through potentially this right? That's something happen on his face could just be him Spitting or something like it through all of this and then wiping his face, but it definitely reads as a forced Push back through the door. You know pushing or punching whatever happened off-screen that totally reads I Think I'd watch out. This is super picky and you will barely see this but as it goes. There's a little bit of Strobie poppiness in that knee. So watch out as it goes into that bend here and then back again And even through here you have big spacing through there and then it kind of locks and then it continues So lock over two frames three frames Then it continues again to the right and then goes back to the left again. So watch out. It's just a bit Strobie messy there You know one seems better. I think overall Overall, it feels pretty good. There's the weight and how he goes back. The only thing I would say is that He gets pretty off balance here, which I'll define is he got pushed and punched But given the speed this in real time how fast he goes back and the amount of off balance You got that overall spacing that put on some on your skin in here If you have this and you kind of look at How far back That body goes and then here suddenly stops goes between to the left and then definitely kind of stays There's it's kind of like Not hitting a massive wall But enough where I go. Well, he must be hitting something to change direction, but this chair seems super flimsy Especially once you get to here you can see how light it is and I like this I like that the chair goes back And he has to hold it. I think that's all a really cool idea. I'm just not quite buying the physics and the mechanics of Him suddenly stopping to go screen rights and back like visually into the space screen right But for the character to go back this way if this was a you like, you know, whatever stone wall Hits this and then sits down. Obviously this would not happen then at the end But then I can buy that right now This body as he goes back if you look at If you track the pelvis here, it just starts to do this basically So you're gonna have to continue to go to the right and it's gonna have to end up being here Or you just move the chair over so he ends up going back into a drop arc to then lands Here so you don't do this, but you do a bit more of that. So you might have to Move everything right. I mean you can you know move him At this point the root over and keep the foot and then lead into this You can move him globally somewhere more left so that he still ends up being here Like whether you wanted to do counters that or make it work or move the chair But then if you move the chair and you have to work on those arms To me, it's just that moment here Feels a bit wonky But again, the recovery is cool There's also something if you're ready. Let's pretend this arc is correct That would already be a moment of bam the chair moving slightly and watch out There's sections there a slight rotation maybe in the chair moving back. This also seems a bit late in when it reacts But that's cool. I definitely like that foot goes back it holds on to it It's the backwards momentum is being stopped by this leg being behind him and pulling or pushing This way which you have and then this one's for stable Stable root there. I think that's all cool the adjustments on the hands are cool, too. I like that Going back a nice arc and it's not immediately gripping which I like to I only have to pay him that impact going back The only thing I would say is here that arm is kind of stuck in space here Even though it might be pushing against the backside of that chair It's for something like a stuck IK arm here that then goes back And then you can see here the chair in the hand lose kind of contact a bit it gets a bit better through there But I wish for someone that's like holding on to it that you would have a really tight grip On those hands for a moment Those we better on that left one Going forward and then holding that's cool there Maybe a bit more for tighter grip on the What's the word on the thumb there? I can see that slap in that screen left arm But watch out it goes down. Well, what is that arm stopping? Is it hitting the thigh here? But that to me is not enough for it to stop on that frame with an overlap on that wrist But then to pop over one frame here unless you're saying it kind of Slaps that thigh, but even then to me that forearm will continue to go this way and be loosened and come out again versus that Feels a bit sharp and fast through there Same thing with the head head going back. Oh right there that down Visually you have again I can put on the skin here You got that chin going down chin going down and then it's on the same level it has a overlap You can see this here in the in the rotation visually with that chin Staying over a couple frames here and suddenly popping up over one frame up and the same thing here you go up here Here here and then has a slight ease in then goes back down again Just those moments and play this again without scribbles in real time I don't mind messiness. I'm all for messiness. That's totally fine. Why not? But it just has a slight harsh Stoppage you can see this in this line and like I said in that chin That's cool. I like that especially the hole and that moving over this way but again this you got The nose here Moving over as a horrible draw thoughts that I'm pointing drawing here, but you can see this I go backwards horribly horribly falling this And then this if I put on your skinning You can see this hits that wall a to it's I'll give it's more of an arc It's a bit flat there an arc and it really stops and goes down into something like this like flat and then down like that So watch out for your spacing there Some Messiness here as it goes a bit. That's a bit messy there Let's move that out a bit. That's fine. It was open. That's fine. I Like that turn in the here, but then he has to push off and as I'm totally fine with the pivot off of here But there's something about that leg Going back and then going back here over what a frame and then stopping and I'm changing direction again. I Wish You just yeah, it's not that it's not like it's a shock killer I understand that this can be slippery He pushes off and that's just enough to get him forward And that's the foot that pushes him off even though that foot rule starts to go off the ground It feels like that feels a bit odd. I'm just looking at either this one Maybe this one even though it can work right now to have a bit of more of a solid footing With the push off where you can feel the weight. It's not constantly moving. I Guess it could work on this one because watch out for your one frame change there direction wise It also gives a bit of a harsh knee wobble what went through there It's not crazy crazy, but that foot move back is I would soften that But that feels like a strange Foot rule up in the air And then for bends watch out you're getting close to bending to camera Versus a slight bend away so you understand the length and structure of that leg So watch out for that silhouette there And even on that exit I would Probably take this arm and start swinging it a bit more so that we're a not stuck in front of that thigh for so long and Here kind of riding that edge But we just get the clearance right at the end that one last frame And I think we can go a bit bolder by we I mean you it's the Royal we by separating this arm out from From the hip section for cleaner silhouette Same thing with this this feels like a stump coming out of his neck Anything where even on this where you want to show a bit more of that arm with the bend and anything where we can See that bend and work on that silhouette a bit more. This feels like a strange silhouette through there That's kind of that It's really cool mechanic. I like it and you said you have reference here 50 ways to sit down Kind of depart from the reference a little bit and push some moments Even animation wise watch out that foot has that angle this way all the way to here If you need to push a little bit maybe a little rotation banking off of this edge With a slight maybe lean or lead with the heel and then Coming down and then rotating off to put this down and it could be either a bit more this way or this way again It feels like very straight towards us the foot this gets better here So wet wise and structure wise, but this is a bit stompy or Stumpy and stompy Where you would see a bit more? And this would help something that's a bit like even that we can understand that structure a bit better than this Straight at us All right, that is that This we have here a sidewalk. It's very cool. I think this all works really well The only thing I have to say this is probably just me if you can trouble check it feels like Spacing in the foot here starts to get bigger towards the end This is extremely boring for you to watch, but if I do So very Sloppy Feels like this gets bigger Probably not also my my points are very messy Something through here if you just double check that this is not getting slower. I feel like my drawings are my dots are smaller space through there To make sure that that is working so there's no slight I just feel like a slight acceleration towards the end slow down in the middle and Acceleration towards the end. It could just be me as you go back We're Whoa, that's me moving my thing We go back with the foot and I feel like we're a bit too harsh on that stop You can see here The spacing is this and then this and then that we're kind of the same spot ish And then move over and I feel like we can continue to go back a bit more It's not that like a crazy backswing, but just a bit more so it doesn't feel like that immediate change I'm just watching this it feels a bit strong And I don't know if that's the foot. I wish that could be a stronger foot roll less than just the toes, but That's tricky. That's quite how that works, but This was a quick going fairly soon Just after that passing into a roll and I feel like that could be just a bit later I'd have to just a root down a bit for that It feels just so we can go a bit further back with her arms I feel like we're stopping right there with a really strong forearms swing forward But I think it goes a bit further back Again, not that it's Like it feels nice like it's not like oh, there's something horribly wrong with the animations for like But like we're just stopping right there. We can go personally a bit further back And at that speed it's almost like having less up and on in the roots. It's a fairly fast ish walk It feels a bit bouncing that head, but I could just be me. There is also a Not this not this either. I'm horrible at moving my own window.  That is really nice So nice fluid arcs there on the side on those on the arms. It might have a little bit of a sudden fast move out That then flattens a bit. I don't mind having a sudden change But it could just be a slightly Continued that are just a bit more to come back into that just a bit feels like a little bit out not a pop It's not that egregious again It's nicely done But even in this view I feel like there's almost too much side to side With the body in the head Mostly in the head. There's something I see rotations up and out in the head But again, almost like it could be a bit smoother given the speed of that walk This is super picky Just like this I will bring in that index a bit much. These are super picky notes. I think it works It works well, it's a nice walk again like the light with the feet are doing a lot I'm just mainly reacting to this little up and downs Being a bit harsh on that head Same thing there. It's almost like she's also leaning slightly backwards almost like a little bit more of a lean a little bit Of a neck forward just a bit Ever so slightly something really straight which feeds into the whole arm doesn't go further back than this I think it's kind of a plank there with this a bit far back Subjectively All right, I'm gonna leave it at that And these are the ones that you show me that's it. All right. Thanks All right, there's an email you can sign up you can start whenever you want You can submit whatever beyond you get 16 submissions either way like and subscribe would be awesome. All right. Thank you


This is an expository talk on monstrous moonshine. It's based on some old slides I found from a talk in about 1998. So it's definitely a historical talk rather than one based on current research. The first wheel just quickly describe what the monster simple group is. So the monster simple group is the largest of the sporadic simple groups which has this ridiculously large order. Here it's given in factorized form as a product of primes. If you want to write it out explicitly it's this rather impressive number here. This number is rather more than number of elementary particles making up the earth for example. So it is some idea of its size. It lives as a group of symmetries in various dimensions in particular the smallest dimension in which you can represent it as a group of symmetries is this number 196883. The next dimension is 21296876. So on the other hand, there's something called the elliptic modular function in complex function theory which is this used to be a rather obscure function that most people hadn't really heard of and it has a power series expansion. So the first coefficient is 744 the next is 196884 and so on. And one day John Mackay had been, he used to work in finite group theory and decided he would move on to Galois theory where the elliptic modular function appears. And he knew this number 196883 from group theory and when he started looking at complex function theory he noticed this number 196884. So he had this rather remarkable theorem says 196884 is 196883 plus one and even had a t-shirt with his theorem written on it that he went round to at conferences. Mackay told several people about this and the general reaction most people was this was complete nonsense. The point is there are lots of sporadic groups. They have lots and lots of different dimensions of representations. There are lots of variations of modular functions which have lots of coefficients. And if you have a whole lot of numbers then a few of them are going to be roughly the same as each other just by coincidence. So there's a whole area of crackpot nonsense called numerology where you find meaningless numerical coincidences by looking at lots and lots of numbers noticing that some of them are about the same. So general reaction to most people was to dismiss this as meaningless. However, I think it was John Thompson then noticed there were some other coincidences. For instance, if you take this coefficient of the elliptic modular function it's the sum of the first three dimensions of representations of the monster. And John Thompson noticed that if you went on you got more and more coincidences by this time it was clear that this wasn't a coincidence at all. Then John Conway and Simon Norton took this over and found more and more relations between the monster group and elliptic modular functions as I'll describe in a moment. And John Conway coined this term monstrous moonshine for this. So that's what this talk is going to be about. So next I'll talk very roughly about the construction of the monster. So the monster, the existence was suggested in the 1980s by Fischer and Grice. And I think most people thought it was going to be hopeless to construct it since much, much, much smaller groups required computer constructions at that time. People since found hand constructions of most of them. And the trouble with the monster is that it's smallest, the dimension of its smallest representation is so large that it was way beyond what computers at the time could cope with. Even today, 30 years later, computers have a certain amount of trouble handling matrices of this size. And so much smaller groups took very difficult computer calculations. Robert Grice absolutely astonished everybody by managing to construct this, the monster by hand. So it was not only far bigger than all the groups people are constructed by computer, but he wasn't even using a computer. The reason he was able to do this is this 196884 dimensional representation of the monster turns out to have a product on it. It's actually quite unusual for small representations of sporadic groups to have algebra structures. So in some sense, Robert Grice was really lucky. So Robert Grice constructed this commutative product on this space of dimension. I guess he was actually working the space of dimension 196883 rather than four. And this product is commutative and doesn't seem to satisfy any other particularly easy identities. And Robert Grice's construction was ferociously difficult. What he did was he split up this 196883 dimensional representation into a sum of three pieces. So one piece is dimension, a symmetric square of 24. Another has dimension, half a number of norm, four vectors of the leach lattice. And the third has a sort of spinner representation tensed with the leach lattice. What the reason he was able to do this is the centralize of an evolution and the monster has this rather special structure. It's got something called an extra special group here with Conway's sporadic simple group sitting on top of it. And these are all closely connotations of Conway's group. So anyway, he had to construct an algebra product on it. And this was really complicated. For any two of these spaces, he had to construct a product going from those two spaces to the third space. So there are about a dozen different products. He had to write down and then he had to make these all compatible so the monster would act on them. Then he had to find an non-obvious automorphism that generated the monster. And his construction is about a hundred pages long. It's since been simplified considerably, but even today it's, there's no really easy construction of the monster. So the word moonshine originally means foolish talk or unrealistic ideas, which was partly why Conway chose the term because the original idea of monstrous moonshine seemed silly. So famous quotes by Ernest Rutherford says that, anyone who expects to get power from Adam's splitting is talking moonshine. It also refers to corn whiskey, especially in that produced illegally. So this does have a bit of a problem that if you try searching for moonshine on Google, what you get is a lot of recipes for distilling alcohol rather than talks about the monster. So the monster is a rather large sporadic group. So in order to understand it, we can start by looking at some much smaller groups. So this is the smallest non-Abelian simple group is a group of symmetries of an icosahedron. And it's got 60 symmetries and 60 is a rather big number to handle. But fortunately you can classify these symmetries into conjugacy classes. So for example, the icosahedron has five different conjugacy classes. You can fix everything or you can take this axis here and do a one third rotation around it. Or you can take this green line here and do an axis and do a 180 degree rotation. Or you can fix this red axis here and rotate the icosahedron by one fifth or two fifth of a rotation. So all together, although there are 60 different elements of this group, you can classify them into five different conjugacy classes. So we're gonna do something rather similar to that for the monster. So for the icosahedron, it has 60 symmetries, five conjugacy classes and lives in three dimensions.  The monster by comparison has about eight times 10 to the 53 symmetries. So you cannot possibly store all these even on the biggest computer you can imagine. Fortunately, we don't need to because the number of conjugacy classes is astonishingly small compared to the size of the group. There are only 194 conjugacy classes. And that's a little bit too much to do by hand, but a computer has no trouble with these. Finally, it lives in one, nine, six, eight, eight, three dimensions as opposed to three dimensions. Well, one, nine, six, eight, eight, three, obviously you can't write down a matrix of that size by hand, but it does more or less fit onto a computer. If you've got a gigabyte or so of storage, then you can quite happily store one element of the monster as a matrix over the field with two elements. When you're handling groups on a computer by hand, you don't write down a multiplication table for any group with order more than about four or five because it's too ridiculously big. What you do is you write down something called its character table. So here's the character table of the group of order 60. So on the top row, you list the conjugacy classes of the group. So we have five conjugacy classes of the group. Each of the other rows tells you something about an action of the group on a vector space. These are the so-called irreducible representations. So the group can act on various vector spaces and you can sometimes split these vector spaces up into smaller vector spaces. And if you can't split it up further, that's called an irreducible representation. And this group of order 60 has exactly five irreducible representations. These numbers here are their dimensions. So you can see it lives in three dimensions, which is the obvious action on rotations of Nycosahedron and it also has a few others. The other entries are given by the traces of various conjugacy classes on these vector spaces. Obviously the trace only depends on the conjugacy class. So instead of having to write out a 60 by 60 matrix, all you have to do is to write out a five by five matrix. And it turns out this gives you most of the information you need about the group A5. Anyway, the monster is actually one of the sporadic groups. So I'll just give some quick background about this. So the classification of finite groups was finished. Well, actually it's not quite clear exactly when it was finished. It was announced that it was finished in 1983 by Goronstein, but he'd been slightly misinformed about one of the pieces that still hadn't been finished, that was finally finished off by Aschbacher and Smith in about 2004 or so. So anyway, the classification of finite simple groups, it's so long nobody actually knows how long it is. I've seen estimates of 10 or 20,000 pages, but this doesn't include some very long computer calculations that were needed to verify the existence of groups and so on. So nobody really knows exactly how long the classification is. Anyway, so it says that all finite simple groups either cyclic or alternating, which are the ones you come across as undergraduates, all their Chevalet groups and various variations of them like Steinberg and regroups. A typical example of this are matrix groups over finite fields like general linear and orthogonal groups. And finally, there are 26 sporadic groups left over of which the smallest is M11 with about 8,000 elements and the largest is the monster discovered and constructed by Fisher and Grice. These are a real puzzle. Nobody has really come up with a good explanation for why we have these sporadic groups. And so all the other groups fit into neat infinite families and these ones just seem to be left over and not only do we not have any easy proof of why they exist, we don't have any simple explanation of why we get them. So the character table A5 looks like this. The character table of the monster is 1, 9, 6, 8, 8, 4 by 1, 9, 6, 8, 8, 4. And here is a piece of the top left hand corner of it. Maybe if I try zooming in a bit, you might just about be able to see that this entry up here says 1, 9, 6, 8, 8, 3. So this column here gives other spaces, dimensions of other spaces that it lives in and these give traces of various elements of the monster on that space. This is about 3% of the monster character table on this slide. If you want the full character table of the monster, you can find it written out in the Atlas of Finite Groups by Conway and his colleagues. So that's enough about the monster simple group for the moment. Now I want to talk about elliptic modular functions for a bit. So the elliptic modular function can be defined as follows. The special linear group in two variables over Z, which is SL2Z acts on H, the upper half plane of all numbers tau with positive imaginary part, as these fractional linear or mobius transformations. SL2Z is generated by these two particularly simple transformations. You can take tau to tau plus one or minus one over tau and a modular function is just a function on the upper half plane, preferably holomorphic, that is invariant under this action of SL2Z. So modular function just satisfies this equation here. There are no easy examples of modular functions. The simplest example is the so-called elliptic modular function turns out to, it's so-called because it's classifies elliptic curves in some sense. You can actually write this as an invariant of an elliptic curve and two elliptic curves over the complex numbers of the same if and only if they have the same elliptic modular invariant. There's no particularly easy way to construct it. The simplest way is to construct is E4 cubed over delta, where E4 is the simplest Eisenstein series given by this series here. And delta is the, this sort of interesting product here whose coefficients look like this. So these coefficients are called the remanagen tau function and the tau in the remanagen tau function has nothing to do with this tau here. E4 and delta aren't quite modular functions. They're things called modular forms which satisfy a slightly different form of identity. Instead of being invariant under SL2, they transform up to a power of C tau plus D. The reason they're called modular forms is that if this exponent here is a two, then that's more or less the same as a one form that is invariant under SL2Z. So these are modular forms of weight four and 12 where the numbers four and 12 are this exponent here. So if you take one of weight four and qubits and divide it by one of weight 12, you get one of weight zero, which means it's just invariant under SL2Z. So that's roughly where the elliptic modular function comes from. If you want to know what the action of SL2Z looks like on the upper half plane, well, Escher drew some rather nice pictures of it. So this is a picture of, well, it's not quite SL2Z acting on the upper half plane. It's a slightly different group. And instead of the upper half plane, it's acting on the circle is conformally equivalent to the upper half plane. So the action of SL, so the action of groups on the upper half plane sort of looks like this. So all these angels and demons are really the same size because the metric on this is really a hyperbolic metric and you can't really embed this in Euclidean space very well. If you embed it in Euclidean space, then things get distorted. So this gives us a group, there's a group which takes each angel to any other angel and a modular function would be something like a function on this circle that is invariant if you transform any angel into any other angel. So here's a rather nice picture of the modular function. From the book, Yanka and Emda, who I think this book is about a hundred years old and they drew these absolutely amazing pictures of various complicated transcendental functions. And you must remember they were working long before computers were invented. These are not computer graphics. These were all carefully drawn by hand by some rather brilliant draftsmen. So this is not quite the elliptic modular function I was talking about, but it is in fact a very similar function. So this is the upper half plane. Here we have the real axis and of here we're going off to infinity. And along the real axis, you can see the function gets very complicated. It's got all these poles. So it's got poles here at minus one and one. And roughly speaking, it has a pole at every rational number where the pole is bigger if the denominator of the rational number is smaller. Actually, these poles are all really the same size because they can be transformed into each other by elements of the modular group. They just sort of look different sizes because we've had to put them in Euclidean space. The actual elliptic modular function looks a bit different because it has a pole at i infinity over here, whereas this modular function vanishes at i infinity. And here's another view of it where this time you're looking from i infinity and again, the real axis is now this line here. So, well, there are quite a lot of elliptic modular functions. J of tau that we've been talking about is in some sense the simplest one. First of all, we're using the group SL2 of Z which is one of the simplest groups. There are lots of other groups you could use. You would take a subgroup of SL2 of Z of finite index. And it turns out that the elliptic modular function is actually an isomorphism from the upper half plain modular SL2 Z to the complex numbers. What this means is that any other elliptic modular function for SL2 Z is actually a function of J of tau. So it really is the simplest option to doing silly things like adding a constant or whatever. It has some other rather astonishing properties. One rather famous one is that J of tau is an algebraic integer whenever tau is an imaginary quadratic irrational. A particularly spectacular example of this is when you take the imaginary quadratic irrational to be one plus i root 163 over two. I mean, in this case, it's not just an algebraic integer but it's an actual integer given by this number here. The reason why it's an exact integer is that J of tau is an algebraic integer of degree equal to the class number of a certain imaginary quadratic field. And the imaginary quadratic field generated by this number here happens to have class number one. It's the biggest imaginary quadratic field of class number one as was shown by Hayden and Stark and Baker a few decades ago. Anyway, it's exactly this integer. And if you work at the elliptic modular function it has this power series expansion. Well, this is some really large number because it's about e to the pi root 163. This is an integer and this is a really tiny number because although one nine six eight eight four is large q is incredibly tiny because it's e to the minus something big. So this number here e to the pi root 163 is very, very close to an integer. If you look at this, you find there's this whole train nine's as well. There are various other, I mean you can stick in various other numbers other than 163 and quite often, well not very often but occasionally it turns out to be very nearly an integer. Incidentally, you notice 74 3.999 is very close to 744 which is the 744 here. And that's not a coincidence because this number here is divisible by lots of small primes and in particular it's divisible by a thousand. So you can actually see the constant coefficient of the elliptic modular function in this large integer here. So the moonshine conjectures by Mackay and Thompson stated that there should be a natural graded representation of the monster such that the dimension of these, the pieces of the representation should be given by coefficients of the elliptic modular function. Now, this was an example of finite groups acting on graded representations related to modular functions. So this was a really astonishing conjecture.  So to give the conjectured teeth, you've got to say more about this representation. And John Thompson suggested that what you should do is look at the so-called Mackay-Thompson series where you take the trace of an element of the monster on this graded representation and see what sort of function it is. And what they did was they guessed what these representations of the monster were and were able to work out these traces from the character table of the monster and found the astonishing fact that these functions here were helped modules or at least seem to be for all conjugacy classes of the monster. So a helped module is an isomorphism from the upper half plain modulo sum group to the complex numbers for some subgroup of SL2R. Now, if you take a random subgroup, usually there won't be an isomorphism from this quotient to see because this thing will be a Riemann surface of genus greater than zero. So what Conway-Norton discovered is all these functions are associated quotients that have genus zero rather than some higher genus. So the question is, can you construct such a representation? Anyway, so I said that Thompson suggested that the trace of any element of the monster on this grade representation should be a helped module for some other group. So here are a couple of examples for type two A and two B, the first few coefficients look like this. So for example, here we get 4372 as the coefficient of the help module for this group here, which is the normalizer of gamma zero of two where gamma zero of two is given like that. And this turns out to be almost the dimension of a representation of a baby monster. And it's also the trace of an element of type two A of the monster on one, nine, six, eight, eight, four. So these astonishing coincidences keep on going. And by the way, an earlier observation about the monsters due to Og who noticed that prime divided the order of the monster if and only if the normalizer of gamma zero of P was a genus zero group. Well, Conway-Norton's conjecture about the monster was proved by Atkin, Fong and Smith. And what they did was they did a big calculation. What you can do is you can show that something is a representation of a group just by checking a lot of congruences. So since the representations are given by coefficients and modular functions, what you have to do is to check enough congruences between coefficients and modular function. And then you can show that things are representation. Well, strictly speaking, when you show their virtual representations, you also have to check some positivity condition, which is not too difficult because the coefficients of the elliptic modular function are so huge that it's not that hard to show things are positive. So that sort of verifies the original Conway-Norton conjectures, but it leaves you a bit unsatisfied because it doesn't really explain what's going on. It's just a sort of verification. And in particular, it doesn't really give you a very satisfying construction of the representation of the monster. It just sort of says this representation exists because we've checked all these congruences. So Frenkel, Lepaskin, Merman managed to actually construct an explicit graded representation of the monster using vertex operators. And they were able to show that this graded representation has the right degrees. And this leaves a bit of a puzzle because we now have two graded representations of the monster. We have one whose existence was shown by Atkin, Fong, and Smith by checking a lot of congruences. And we have another graded representation of the monster construct by Frenkel, Lepaskin, Merman which we have an explicit construction of. However, the problem is we don't know these two representations of the same. So this representation is nice because you can do things like construct algebra products on it. And this representation is nice because it's related to modular functions. And you would really, really like to know that these two representations are the same. So the problem is the problem of proofing the monstrous moonshine conjectures is to verify these two representations of the same. In other words, what you want to do is to construct the, sorry, calculate the trace of elements of the monster on this representation here. This turns out to be easy enough to do for some elements if they commute with a certain element of order two, but the construct of this representation is so complicated, it seems almost impossible to calculate the traces of other elements of the monster directly. So calculating the trace of elements has to be done indirectly. First of all, the advantages of the Frenkel, Lepaskin, Merman representation over the one constructed by Atkin, Fong and Smith is you can find an algebraic structure on it. It's something called a vertex algebra. More precisely, it's something called the monster vertex algebra because it's acted on by the monster. Now to verify that it's the same as the Atkin, Fong, Smith representation takes a few steps. First of all, you use string theory in 26 dimensions and something called the no ghost theorem in string theory in order to construct a Lie algebra called the monster Lie algebra that I'll talk about a bit later. This is an example of something called a generalized Katz Moody algebra which I'll again, I'll describe a bit later. The next step is to use something called the Vaal-Katz denominator formula in order to extractation about the traces of elements of the monster on the Frenkel, Lepaskin, Merman formula. In particular, they have a property called complete replicability, which was originally defined by Simon Norton. Finally, you can show that any function that is completely replicable is a Houtt module. The original proof of this was a very messy and ugly calculation, but fortunately, Martin and Cummins and Gannon managed to greatly simplify this and were able to find a more conceptual proof that completely replicable functions are Houtt modules. So finally, we find the trace of any element of the monster on the Frenkel, Lepaskin, Merman module is indeed a Houtt module. So now I'll talk about a bit more about vertex algebras and so on. And so the question is, what is a vertex algebra? Unfortunately, there is no easy answer to this question. The problem is that it is basically a provable theorem that there are no particularly easy non-trivial examples of vertex algebras to study. Probably the least worst introduction to vertex algebras is the book, Vertex Algebras for Beginners by Victor Katz. The title of this book is a bit of a joke. It's not really for beginners at all, but anyway.  It's a sort of commutative ring, except it isn't. So let's suppose you've got a commutative ring acted on by a group. Then we can form expressions like u to the x times v to the y, where u and v are in the ring and x and y are in the group and u to the x is the action of x on the group u. And if we fix two elements of the group, this gives a map from the ring, sorry, if we fix two elements of the ring, this gives a map from the group times the group to the ring. And a vertex algebra is similar except that the maps from the group times the group to the ring sort of have singularities as functions of x and y. In particular, they might not be defined when x and y are the identity elements of the group. And this is a real problem because in order to find the ring multiplication, you need to define this when x and y are the elements, are the trivial elements of the group. So it's sort of like a ring, except the ring multiplication isn't defined in some rather weird sense. Instead of the ring multiplication, all you've got are these, you might think of them as being rational functions on the group, which pay us if they were given by this formula here, except instead of being a regular function of x and y, it's some sort of strange function with singularities. So there's an easy way to construct lots of vertex algebras. You can just take any commutative ring acted on by a group and this will give you a vertex algebra. These are the trivial vertex algebras. They're just commutative rings with groups acting on them. The more general vertex algebras have strange singularities all over the place as fun as a group. And no finite dimensional examples of them. The point is that once you've got a singularity like a pole of order one, then you can automatically generate singularities of higher and higher order. So you can get poles of order two, three and four. And so you can get poles of any possible order. And this means you've got infinite dimensional spaces. And so there are no, so any finite dimensional vertex algebra is automatically just a commutative ring with a group acting on it. Next, we move on to generalized cat's moody algebras, which as the name suggests, rather like cat's moody algebras, only more so. So as motivation for generalized cat's moody algebras consider a finite dimensional reductively algebra. For instance, just the le algebra of N by N matrices. And we're going to be working over the real numbers. And it has the following four properties, all of which are very easy to check for the N by N matrices. First of all, it's got a nice invariant bilinear form, which in this case is given by the trace. Secondly, it's got an involution. You can just take the transpose or rather minus the transpose or something. Thirdly, it's graded. And there are lots of ways of grading it. For instance, for N by N matrices, you can just grade things by their distance from the diagonal. And rather obviously all these graded pieces of finite dimensional because the le algebra is finite dimensional. The involution acts as minus one on the zero piece of degree zero. That's sort of important. Finally, this bilinear form isn't positive definite, but it becomes positive definite if you twiddle it by this involution. So it's a sort of slightly twisted bilinear form with a positive definite property. So for a generalized cat's moody algebra, all you do is you very slightly weaken these conditions here. You allow the le algebra to be infinite dimensional, but it's still had to satisfy all these conditions except for N equals zero. So you allow this bilinear form to be indefinite on the degree zero piece. If you insist that it should be positive definite from the degree zero piece, then you get the finite dimensional algebras and you also get the affine cat's moody algebras which are very widely used. The basic theme of generalized cat's moody algebras is they have many of the good properties of finite dimensional simple le algebras. And for example, suppose we take SL2 with coefficients that are Laurent series. This is the simplest non-trivial example of an affine cat's moody algebra. Now finite dimensional le algebras have a vile cat's denominator formula. The vile cat's denominator formula for infinite dimensional affine le algebras turn out to be well-known identities. For instance, the vile cat's denominator form of SL2 is this formula here, which is the Koby triple product identity. There's a sort of historical remark about the McDonald's identities that I want to make. There's a famous paper by Dyson called Missed Opportunities in Science where he describes where he was looking at identities for powers of eta functions. So the cubithy eta function is a very nice classical identity due to Jacobi, I think. And Dyson said that he found similar identities with various powers of the eta function. So three, eight, 10, 14, 15, 21, and so on. And he was very puzzled by this. Couldn't figure out what was going on. Turned out that this had already been explained by Ian McDonald, who pointed out they were just dimensions of representations of le groups. So for each power, each dimension for le group, Ian McDonald found an identity for the corresponding power of the eta function. These are the famous McDonald's identities. And McDonald actually showed that these were essentially the denominators of the formula for cat's algebra. As if cat's moody algebra might been invented at the time. They were invented very shortly afterwards by cats and moody who pointed out that McDonald's identities were just the cat's file formula, the denominator formula for these algebras. So what we're going to, however, the monstery algebra is also a generalized cat's moody algebra. So it has a denominator formula. And the denominator formula is this rather striking identity for the elliptic modular function. The, who discovered this identity? It's a bit difficult to sort out because none of the people who discovered it seem to have published it. So Simon Norton and Don Zagius seem to have known about it in the 1980s. And Koiki sort of had a proof of it that circulated in a preprint that was never published either again sometime in the 1980s. So, I don't know, one of these three may be the first to discover it but it's difficult to sort out exactly who did it, when, because as far as I know, none of them ever published it for some reason. Anyway, so if we compare the coefficients of P to the NQ to the B in both sides, we obtain lots of relations between the coefficients. These relations are quite complicated. For instance, the simplest relation to the elliptic modular function is the following relation between the coefficients of Q to the 4, Q to the 3 and Q to the 1. You see, this number is equal to that number plus the sort of alternating square of this number. So these identities are really quite complicated. And Norton defined a function to be completely replicable if it satisfied identities coming from this infinite product. Actually, Norton didn't state it in terms of the infinite product but in terms of some rather complicated recursion relations. And Norton and Koike didn't actually write this identity as infinite product. They both just worked with the rather complicated relations you get by expanding out this infinite product. Anyway, you notice this infinite product looks just like the vial to form this. So the vial denominator form that says an infinite product over positive roots of a Lie algebra is equal to a sum over the vial group. So for the monster Lie algebra, the vial group is order two and this is a sum over its vial group. And this is just a product over the positive roots of the monster Lie algebra. Simon Norton also had some generalizations of the moonshine conjecture called the generalized moonshine conjectures. So the original moonshine conjectures gave a representation of the monster. Simon Norton pointed out that for each element of the monster there seems to be a projective representation of its centralizer in the monster on some other space here. So instead of having a modular function for each element of the monster Simon Norton suggests there should be a modular function for each pair of elements of the monster and these should give projective representations of centralizers of elements in the monster. And they should satisfy some identities like this. And this is rather nice because the group SL2Z acts on pairs of commuting elements of a group. So the group SLT is acting not only on modular function but on pairs of commuting elements. And Simon suggests that these should also be help modules. At the time I originally gave this talk these conjectures were unproved although some cases of this have been done. The first breakthrough was made by Gerald Hearn who managed to prove the conjectures for type 2A in the monster by a very ingenious way of constructing a representation of the baby monster. Don and Mason were able to prove it for whenever G and H generated a cyclic group. And Don was able to prove two of the conjectures whenever for all G and H. Finally, the full conjectures were proved by Carnahan a few years ago by extending the construction of the monster, the algebra to construct a large number of other somewhat more complicated lee algebras. An example of the generalized moonshine conjectures is if you take the trace of an element of type 2A on the monster, it's coefficients look like this. On the other hand, if you take the baby monster it's the centralize of an element of type 2A or at least this double cover is and it is this order. So it's pretty huge not nearly as big as the monster but still rather formidable. And it has representations of these dimensions here. And if you look at these dimensions you say they're very similar to these coefficients of this modular function. And it turns out the double cover of the baby monster actually graded vector space with these dimensions. So the trace of an element of type 2A and the monster gives you a function which is the same as the function given by the dimensions of the representations of an element of type 2B. So there's this funny connection between the representation of the monster and the representation of the baby monster. Incidentally, you might guess that this representation of the baby monster also has the algebraic structure of a vertex algebra. However, it doesn't. In particular, there's no nice product from V2 times V2 to itself as you would need if this was the vertex algebra. Well, Alex Shreber observed that, so I said that you don't get a vertex algebra corresponding to baby monster. Well, in fact, you do. Alex Shreber noticed that you don't get a vertex algebra in characteristic zero, but if you reduce mod P, then you sometimes do. So if we take an element of prime order of the monster then we can take the cohomology group of that element on the monster, and it turns out that this cohomology actually forms a graded vertex super algebra. So for some elements of the monster, these give you vertex algebras over finite fields, so you can get a vertex algebra and for other elements, they give you super algebras of finite fields. So we have this strange phenomenon that characteristic zero representation of the monster give you vertex algebras, and if you take cohomology, this gives you vertex algebras over finite fields that cannot be lifted to vertex algebras in characteristic zero. I'll finish by describing two open problems. It says three open problems here, but that's because these slides are out of date, and one of these open problems has actually been more or less solved. So here's a brook had this question. Is there a 24 dimensional monster manifold with written genus given by the elliptic modular function? If so, this might give another explanation of the monster vertex algebra. There's been some progress in the process by Hopkins and Maharwald, who managed to show there was indeed a manifold with this as its written genus, but last time I checked, nobody knows how to construct an action of the monster on this manifold. Lian and Yao pointed out that there are mirror maps for K3 surfaces that seem to be related to monstrous HALT modules. One example of this is there's a mirror map given by the inverse of the elliptic modular function. So whether that is related to the monster seems to be open. The third problem, which has actually been solved, is this weird observation by John McKay. He pointed out the monster has nine conjugacy classes of elements, and the third problem seems to be open. He pointed out the monster has nine conjugacy classes of elements of the form G, H, where G and H are products of elements of type 2A, and their orders are 1, 2, 3, 4, 5, 6, 4, 2. And these are exactly the numbers you get on weights of the affine E8-Dinkin diagram, and they're also the dimensions of the irreducible representations of the binary icosahedral group, of the simple group of order 6D. Well, it's not quite clear if this is a coincidence or not, but then you notice the baby monster and the fisher group, which is more or less a centralizer of an element of order 3 in the monster have similar properties, except these are related to the E7 and the E6-Dinkin diagrams, or possibly the F4 and G2-Dinkin diagrams. It's a bit hard to tell because F4 is a sort of folded version of E7 and G2 is a sort of folded version of E6. So, in this case, the baby monster is a 3, 4 transposition group, which means that the product of 2 involutions can have order 1, 2, 3, 4, or 2, and the fisher group is a 3 transposition group, which means the product of 2 involutions is ordered 1, 2, or 3. And these correspond to representations of the binary octahedral and the binary tetrahedral groups. And these observations were sort of more or less explained in terms of sub-algebras of the vertex algebra of these groups by Hearn, Lamb, Yamada, and Yamauchi. Finally, after this original talk was given, there's been some very interesting new ideas about umbral moonshine creating representations of M24 and nemylatases to various mock theta functions. And I think that's a good topic for another talk.