Transcripts
1. Introduction: Hey, guys, on Joshua Stone in today, I'm gonna show you a few of the things I've learned over the years about developing websites around the concepts of content focused minimalism. Now what does that mean exactly? Well, it's about balancing structure and style to really make the content take center stage. It's about designing and developing a website that's easy to understand and to navigate. So end users confined exactly what they're looking for without any hassle. It's about designing a website that will work just about anywhere it's loaded from and making it responsive both that it adapts to different resolutions. And then it actually responds to user input in a timely fashion. So in this class will be covering a few things from deciding what content to include. Deciding how to lay out that content. What to prioritize, we figuring out where we can put flyer in style without going overboard and being too artistic. Distracting users from the content also be going to a little more detail about different ways. You can try to prevent confusion and frustration for people using your site and also a few technical and accessibility considerations you might want to make now throughout this class , I'm actually going to be showing a real world example because I need to do an upgrade. My website now. I also recommend that you follow along and build or at least design a website following these concepts. Now this class kind of blurs the line between Web design and Web development. So at least a basic understanding of H. Melon CSS is recommended. But anyway, I guess that basically covers everything. So if you're ready to get started, let's go ahead and jump right in.
2. Start with the Content: Whenever I'm starting to build a new website, The very first thing I think about is the content. The content is the reason that people are there. It's what they're looking for. It's the whole reason for the site to exist generally. So because of the fact that the content is the number one focus of the site, everything that we do from here is going to be about making sure that it keeps that focus in that it makes the user experience better and makes it easier to find the information that the user needs. So how do we go about thinking about the content? Well, you should already have an idea of what the site ISS for, But let's start to think about how we can break that down to its base constituent elements Now, to give you a better idea of what I mean by that, I'll show you my process in figuring out the content from my new website. All right, so my website is essentially a portfolio page, so the first thing I clearly need is a bio. Something about who I am. I need information on how to contact me as well as my social links. The next thing I would like is to feature my current work. I'd also like a listing of my previous work, my games and miscellaneous projects, and I'd also like some information on help, contribute on my patron page that I have set up. But now that we've got that figured out, what next? Well, we need to prioritize things, and what I mean by that is when you think about what we want people to discover first on our site and if they leave early, what first impression do you want to leave? And what might they be looking for in the first place anyway? Essentially, we just want to make sure that the user sees the correct things first and that everything is just generally in a logical order. So for my website, I've kind of got this already in a decent order because basically, the first thing I want people to see is information about who I am, how to contact me and what I'm currently working on that will all be on the front page. Then I went pages on my games by Miss Lane's projects and a page about contribution. Now it's about time we start thinking about where stuff goes in. That kind of overlaps with prioritization, honestly. But basically what I mean is weaken break stuff down two pages and we can break stuff down within the page were typically going to do both unless it's a site that it just happens built to actually fit everything in one page. But usually you'll have things categorised together on distinct pages, and within that page everything will be grouped together in a logical way, and we definitely want to make sure everything is balanced here. While we do want to use space efficiently and we don't want everything spread out onto a bunch of different pages or just really sparse within each page, we also don't want it to be too compact and dense with data.
3. Balance Style and Structure: all right, So now that we figured out what content we're gonna have on our website and how it's generally gonna be laid out, it's time to think about how it's specifically going to look. And this is largely about deciding on a consistent theme. We want a theme that fits with the content and, as I said, is consistent now getting back to the original topic Content focused minimalism is about keeping things simple, so we want to keep the focus on the content. But we use the design and overall style to complement the content. We just generally want to improve the experience of using our site. So in figuring all this out, I usually start with a basic layout, a simple structure that will contain the content. So again, to give you an example, I'll show you what I'm working on in my sight. I'm essentially going to have everything centered. But with the backgrounds overflowing into either side, I'll have a sidebar with the logo and navigation links in, and we'll have the content right there. The sidebar will stay fixed as you scroll the main part of the content, and when you view on a mobile device or the brows. When we know something, it's thin enough. Ill swap, too, the navigation being at the top and that will scroll with the page so it doesn't block the view content. But overall, it's a fairly simple lout. And the reason I decided to go with that is due to the theme I decided since I'm a game developer that it would be interesting if my sight looked a bit like a menu in a game. Now that thieving isn't necessarily a strict role. But overall, this theme seems to really work quite well with what I'm going for. But anyway, now that we have a basic layout and structure for our content, we need to figure out some consistent design patterns that comes down to color and shape. It's also about the fonts, all those little things that really go a long way to create a consistent theme. And again, we're trying to keep things simple and not distracting. So there's always a balancing act of trying to make sure that the content is accessible, easy to find and where it logically should be that everything looks nice and performs well , so I'll go ahead and show you what I've actually made. Right now, you can see that underlying layout right here. Everything is centered in the background. Spell off to the sides, and navigation is fixed. But I've put a lot of flair onto it, but not too much. Everything is still very simple, not distracting, but it helps add a little bit of that style. And again, it fits with the theme of being a video game menu. There's still a lot of work, any to dio. Clearly these air supposed to be images. I don't have my email here in my quite sure on the balance of all of this. But overall, that gets the idea across. And, yes, I have the mobile version as well. Nothing too complicated. It just collapses down. And as you can see, there's not a whole lot to it. It's really simple elements as you start to break it down. Now, in actually building a page like this, there are a lot of things to think about, and biggest one that tends come up is browser compatibility. Simply put, different browsers support a different set of features, and there will always be newer features that older browsers that people still use don't support. And it comes down to a decision that you have to make about what features you actually need to use and what other ways there are about going about certain things. No, of course, compatibility matters mawr, in some cases in less and others, and this largely depends on your audience. If you're building something that absolutely needs to use some of the latest features, and that's fine, just know that you're not going to be able to reach as many users. But if you're building something that you need to be as compatible as possible, you'll have to make some sacrifices, and usually I try to find the middle ground there.
4. Keep it Responsive: So now that I've covered designing the content and the style and structure for our site, I want to talk about a few smaller things. And the first thing I would talk about is responsiveness. We want to make sure our site can be viewed from as many different places as possible, especially considering the fact that about half of your traffic is probably going to be unmold devices. Of course, this will depend on your target audience, but generally that is going to be true. So how do we do this? Well, the general concept to keep in mind is we want our site be fluid. We want the structure to adapt in different ways, depending on what kind of structure we intend to have. I briefly talked about this in the last part when I showed how my site takes the navigation coming on the left to being on top when I make the window too narrow, and that's what I will do on Mobile. Now, how am I doing a lot of this? Well, the first thing would be about sizing because, as you may know, a lot of phones have a screen that is 12 80 by 7 2019 20 month in 80 or even four K resolutions. How do we make sure that our content doesn't appear extremely small on their device? Now there are a few complicated ways that was done in the past, but nowadays it's really simple and very well supported. And it's the meta Vieux port tags it's called. It's about defining a few properties here that adjust how the browser will render. The content of the page is essentially zooming in automatically to a reasonable level for that device. So, for example, my phone uses a 12 80 by 7 20 screen. But the size the content that actual renders, is as if it was only 420 pixels wide, not 720. So everything appears to be at a more reasonable size that I would expect on a monitor with more typical resolution. Now there are various different properties you can use here. These air just the three that I use that I learned from elsewhere, and it helps to fit the content to specifically what's on the page, not what's being overflowed now. Of course, this doesn't handle collapsing everything down. So how do we do that? Well, we use media queries, which are another feature that is again fairly new, but still well supported. You use this syntax and you pass in a parameter, and here I'm checking for a maximum width of just under 640 pixels so that under that size I'm gonna collapse down into the mobile view. And within it, I could just define rules as I normally would, to adjust everything from the normal out to allow out that fits better for mobile. And then I have a couple more to adjust the size, ings and spacing of different elements. So these two different methods the method Vieux port tag and media queries go a long way to making your site mobile friendly. Now we also know you think about how input is done. And what I mean by that is on a computer. You're generally going to be using a mouse, and that means you'll be able to hover over links on mobile. Clearly, you can't hover on those kind of screens, so you really shouldn't reveal information on a hover event, and I've actually done that in the past without realizing it. I'll go ahead and show you on my current games page. I have these nice tiles representing each my games, and when I hover over them, they reveal the name and that's all great. But I can't hover over them on mobile, so I can't really reveal the name. No, there could be other things and you think about for your site on mobile. But generally that covers just about everything. So I guess that's about it for now. So let's move on to the next part.
5. Prevent Confusion and Frustration: all right now, I want to talk a bit about preventing confusion and frustration for users of your site, and the first point that I want to make is that predictability is very important. What I mean is that, especially when it comes to interactive elements, those interactions should behave the way people expect them to again. It's all back to make sure everything's intuitive. The next point I want to make is about guesswork. You do not want the user to have to guess what certain things do. For example, if you're going to use icons for navigation, if their purpose isn't extremely clear and even if it is, you probably want some sort of tax to be able to explain what it is. And the next thing would be that you want to minimize load times and maximize compatibility . Load times matter in that people don't want to be waiting around for your sights and load. It's good to think about where you actually need images or other multimedia and where you can get away without it. There are many ways you can stylings and CSS that look really nice that don't require images. There are plenty of techniques to keep these files small, even if you do need a lot of images the most simple ways, of course, think about the file types and compression methods. For example, most of time you're going to be using either J Pegs or P and G's P and G's are good for simpler images, ones with more solid colors or partial transparencies. Of course, you can't do that with J Pegs now with P and G's. If you're using 256 colors are less and you don't need partial transparencies. You can actually use indexing much like a Jiff, but it's actually a smaller file size than a Jeff, and I use that technique a lot. And, of course, with J Pegs, it's about determining what levels compression you could get away with will not destroying the image quality too much anyway. There are a few other techniques that I haven't really explored too much, but they are useful to be aware of, and it's about loading different versions of the image that are different sizes, depending on the resolution of the device. Your viewing it on another thing that relates to this is custom fonts. It could be really nice from a design standpoint, built a load, your own fonts to use on the page. But if you're not careful, can get a little out of hand. So usually what I tried to do is keep it down to like one or two custom fonts. And if you could get away with it, using system fonts can be a really good idea. There's a new technique which is using this system font stack. It may look a little long and out of the ordinary, but this is a new way of handling funds that will use the best fonts that operating systems and browsers you know, including now, of course, if you want it to look the same everywhere. Custom bonds are again an important thing for that. And as far as compatibility between different browsers. That comes down to all the stuff that I talked about earlier. Because if someone's using a browser that's not really all that obscure and the site isn't working too well for them. That's not gonna be a very good user experience. You want to make sure that as many people can use your site as possible, but of course, to a reasonable degree
6. Consider Accessibility: Now there's one last concept I want to discuss, and that is about accessibility. Now this covers a very wide range of topics, but I'm going to try to break down to a few of the things I try to keep in mind. The first point would be about contrast invisibility, and that comes down to color, size and shape of objects in the page. When it comes to color choices, you want to think about the difference between the background in the foreground. It's also a good idea to make sure that the colors aren't too sharp and bold and just glaring and hard to see. You want to think about color blindness. There are different tools you can use to emulate colorblindness, and then, as far as size and shape of objects, is just generally about making sure the fonts that you choose our ledge herbal at the size that you intend for them to be. Now these concepts do apply to things of even text, but that is typically the main thing that you'll have to be concerned about. Another thing you may want to look into is supporting page readers on your site. There are a few different techniques you can use to make sure the content is read correctly for blind users that have to rely on programs to read out loud the content of the page. I haven't really worried about it too much in my sights, because the content that I make tends to be visually oriented to begin with. But it is something to think about now. One other thing would be about not requiring precision movements and navigation. You do not want to require someone to have to study of a hand, and that doesn't even just affect people with disabilities or seniors. It's really annoying to anybody to have to navigate through a menu that keeps hiding itself if you move just the wrong way, Oh!
7. Closing Thoughts: all right. I guess that covers just about everything. So at this point, you should have a pretty solid understanding of why I designed about websites the way that I do. And just remember that there are no hard and fast rules when it comes to designing anything . It's just a matter of keeping certain points in mind and figure out what's best for your project. Now, if you've been building or designing something along the way, you'd be great for you to share it down below. So everyone can see what you've been working on, and you don't even have to wait till you're done to be able to share it. You can update it along the way, has made progress and get input from other people following this class. And you can even ask me questions and I'll try to be as responsive as I can. Just remember, I definitely don't know everything when it comes to all of this. I'm just sharing the points that I've learned over the years of building my own websites. So I'm hoping I shared those points well enough. And if you're interested in seeing any future classes that I post on here. Be sure to follow me down below that be greatly appreciated and feel free to make any requests about things you like me to show you whether that's more about Web design development or something about game bone. But anyway, I guess that is gonna have to be a four today, so yeah, I'll see you around. Goodbye.
Joshua Stone, Game, Video & Web Creator
