I look after a couple of web sites, one for me and another for a local club that I’m a member of. Both sites are looking very dated, because they are, it’s years since I “designed” them and all I’ve done since then is add content. Can anyone point me to any sources for ideas on where to go in terms of updating them?
I’ve hand-coded HTML and CSS on both sites, they’re both quite simple sites, but I don’t know whether it’s best to try to learn how to do that using modern techniques, or just use some sort of template or framework. I’ve picked a couple of sites recently that look quite modern and done a right-click view-source on them, and they’re massive, I don’t know if I can face the idea of learning what all of that means, and how to apply it. If a template or framework is better, it’ll need to be free.
Neither site is really a selling site, as such. The club site is to raise awareness of the club, show what we do and try to get people to join, so I guess in that respect it’s a selling site, but it’s not e-commerce. The other site also doesn’t really sell - I have a separate site hosted on Wordpress for free that I point people to for that side of things.
I guess the two things I want to achieve are to make the sites look “better” and “more modern” in some undefinable way, and also to make them compatible with mobile screens and so on. In a way I’ve left it so long that most mobile screens are wide enough to display the desktop versions of the sites, but even I am aware that there’s a bit more to it than that.
Any suggestions on where I can read up on stuff would be gratefully received. I’m not asking for a step-by-step guide.
Better to learn what all this means than spend the same amount of time learning how a framework works without really understanding what’s going on under the hood.
There’s nothing wrong with the older CSS and HTML. It’s just that the new tools available are much better. Just look at one thing at a time and you’ll be amazed at how quickly you pick it up. check out Grid and Flexbox first, as they are super useful for layout.
Step 1: Look at the site, a piece at a time. Think to yourself: “This bit looks dated. What do I think it should look like?”.
Step 2: Make it look like that.
Your site doesnt need to conform to any sort of “standards” about how it must look; so it’s all about how you feel it should look.
I suspect this is one of the big problems I’m going to have, I’ve never really been that good at deciding what the thing should look like to make it nicer.
I will look at Grid and Flexbox and see where that takes me.
I think it would be good to formally determine requirements. You say they are not selling sites but that is quite vague.
Do either of them need a database or might need a database in the future? Do either of them require a sign-on or might need a sign-on capability in the future? Is there any reason they cannot be a static site?
Probably a good start is to understand Responsive Web Design as described in the following articles. There are very many other articles on the subjects.
I can’t see that either would need a database for anything. The club site has one PHP page, it’s a list of forthcoming events and I’d intended to make that remove events as the date passes, to save me doing it. Other than that, both sites are basically static, with the odd edit from time to time when I think of something new. I can’t think of a need for a login - I do have another site I’m thinking of putting live which would need a login and a database, but that’s entirely separate and more about the data than the presentation.
As for determining requirements, it’s really just that they look old. The information contained on them is fine, there isn’t much of it, it just looks old. It’s not quite back looking like a Frontpage site, but for example I’ve only edited a few of the files to make them html5, and not completely - they still use older-style markup rather than the more semantic stuff that html5 seems to support. At least, though, I don’t use tables for page layout.
If you can get by without PHP then you can probably create a static site and host it someplace such as Cloudflare Pages, probably for free.
In that Cloudflare Pages page, do not be intimidated by JAMstack. You are not required to use JAMstack. JAMstack does however allow use of any one of many static site generators, over 300. For me, the only thing I need a static site generator for is generating a common menu box or menu bar, but for single-page sites that is not relevant. The problem with most static site generators is that they generate sites that support more than what I need. And be careful about recommendations from people here, I was unable to get a clear answer to what static site generator in JAMstack satisfies the requirements I had. For you, the best solution might be to learn how to use CSS directly (instead of through a library or framework or static site generator or whatever) and then you can develop a site that uses just HTML, CSS and maybe JavaScript.
Thanks, I recall that name from the last book I read on the subject, though that was some time ago. I’ll have a look. I’m not desperate to change the actual content if I can just make it look a bit “better”.
I’m out of touch myself, but first port of call for me would be to look for similar sites e.g. if it’s a golf club site, look at other golf club or sport related sites for a bit of inspiration.
The next stage would be to come up with some mobile/desktop mockups. I have to say not one of my strong points.
As for CSS, would bootstrap not be a good choice? Save re-inventing the wheel? I’m thinking in particular with regards responsive menus that tick accessibility boxes.
If you are looking for a good source for learning up to date CSS though, I would recommend Kevin Powell’s youtube tutorials.
I know there are a few members of these forums that say it is a bad choice, more members here I think are against it than favor it.
I very much understand any resistance to learn CSS. It can be confusing and frustrating. I can understand wanting to use something that gives us the benefit of the experience of others. Unfortunately it is difficult to find something that does what we want without doing much that we do not want.
Really? I know sites do tend to end up a bit samey in appearance with bootstrap, but then the brief is ‘a bit of modernization’, rather than ground breaking.
As mentioned above, I was thinking about things like menus. I have hand rolled those over the years (dropdowns etc) and it can be a bit time-consuming/troublesome when you need to account for multiple devices/browsers.
That said, if @droopsnoot is willing and has the time, hand-rolling the CSS might be a more rewarding experience.
I think where I struggle now is in the decision on what the site should look like. I’m all for learning how to do my own CSS, I just have flashbacks to when I was last trying to learn it and how seemingly very minor changes can make a massive difference to the appearance. I’ve been reading some of the links that have been put up and in some ways it’s inspiring, and some ways daunting. I guess I’m fortunate in that I don’t have a customer to please, but that can be a disadvantage too as the decision on whether any changes are any good or not rests solely with me.
I will continue to try to digest the links and techniques here, many of which I’d never heard of, and I think that’s really what I was asking - I wouldn’t have know what to search for. Thanks again.
I think you should focus on making your sites mobile friendly. Aesthetic appearance.should come second.
To make my community websites mobile friendly I chose to use CSS Flexbox. I was particularly keen to have a number of short ‘articles’ on the home pages with links to other pages for more information. Typically there would be twelve articles: advertising forthcoming club events or giving the results of matches. By using CSS Flexbox, with wrapping of articles, I can use the same HTML and CSS for all screen sizes and so avoid using media queries. Articles can be added or deleted very easily: everything just flows! However Flexbox may not give you everything you want from a layout.
Yes, there was a lot of “this works, unless you’re using x in which case you’ll need to add this in, but that might upset y.”
Mobile is probably an issue. I started reading up on viewports and the like, and stopped at that point. Only a small portion of the site was changed to be html5, and that was only because I wanted alternating background colours on a table without having to specify different classes.
Just on a whim, while my eyes are swimming at the various other things I need to read up on, I thought I’d take this advice and looked up the web sites of a couple of similar clubs. Suddenly I feel a lot better about mine. It still needs to be updated, but it’s not the worst out there, like I thought it was. I guess a lot just rely on FB groups and the like.
