I solo develop (with no mentor involvement) Team 236’s (the TechnoTicks) website, located at https://team236.github.io/, and I’m just looking for any general feedback of things that I can improve. Anything’s much appreciated 
8 Likes
Could you put all the buttons that lead to different pages into a navigation bar that’s always visible at the top instead? On mobile this can be condensed to a hamburger icon that opens a menu with all your nav items
4 Likes
Smart, will do!
3 Likes
I will say I very rarely use an actual computer when looking at websites so I can say there is some weird sizing things on mobile
On your home page none of the pictures fill up the black box:
On your team history page the robots are either oddly cut off or when explaining the game as small as physically possible
In your about us page the YouTube video is oddly cropped as well
5 Likes
And this is the exact kind of feedback I’m looking for! turns out that I might need to test it on more than just my laptop 
3 Likes
You can test mobile sizes on your laptop. Open your browsers developer console (ctrl-shift-i or right click and “inspect”) then find the mobile size tool. Here it is highlighted in Firefox:
6 Likes
Hey, another Firefox user nice to see it! I kinda knew this existed (as in I’ve seen the button before just didn’t know what it did), but never thought to actually use it, will do
5 Likes
Hey, last year I was head of the “web” in my team, some of my projects are linked here:
FRC Team website - https://www.excaliburfrc.com/
Our code library docs - https://excalib.excaliburfrc.com/
Our scouting system - https://scouting.excaliburfrc.com/
and more, like a finance management system or strategy dashboard.
I found the best way to make your website “elegant” and “nice” is by generating a layout from AI tools.
I looked at your website, and it’s an awesome way to start - but getting to a perfect product is very hard and takes a lot of experience and time. So, for your case, I would work with ChatGPT for making a detailed prompt for your website structure and layout, then giving it to a website generating model like Bolt or Lovable - they do a fantastic job at creating websites that look nice and have really good “visual context”.
Notice that they often use languages and frameworks like TS, node, vite, and tailwind - that are not just plain HTML, CSS, and JS. This does require learning and\or having experience to edit them (I guess you don’t want just to vibe code it 
).
If you need any assistance, you can personally contact me on chief (or via out teams email) and I will gladly help with whatever you need.
4 Likes
if you are looking for new things to add to you website. I recomend that you look some other teams websites (like 1678, 4481 or 6328) and see what they did and just get a littel of inspiration from them and make it the way you would like to have it.
4 Likes
On that note, If you’re ever looking for inspiration like I was, the best FRC team website I’ve seen is probably 245, Adambots
I do think design is really only 50% of the role here, with actual maintenance and wiriting/photos worth spending time viewing being the other half, but thats deviating from the topic a little.
Good luck! I love to see cool team websites
3 Likes
Like others are saying, definitely test your website using browser inspector tools. I’d try it out on both Firefox and Chrome, and Safari if you have access to a Mac/Macbook. (While I use Firefox as my daily browser, I use Chrome for web-dev as it has better tooling.)
Still, there’s a TON of useful tools in any browser. In the Network tool, you can see the size of every single resource that your browser receives on page load. The Robot Archive page is particularly egregious: it’s pulling 170 MB due to all of those embedded Google Slides.
I would try replacing those with a button and a smaller, compressed copy of an image of each robot. Once you click the button, it will “summon” that particular Google Slides embed in the page. This will require some JavaScript.
Here’s another method: add the loading="lazy" attribute to each <iframe> tag. This will defer loading the iframe until it’s scrolled into view. This is automatically done by the browser: no JavaScript required.
One more suggestion: keep large paragraphs (and lists) justified left, and cap their maximum width. This makes it easier to read.
Good work so far!
3 Likes
In super non-technical terms (my coding knowledge comes from a book published in 2017 and Chat GPT), how would I go about capping their maximum width while effectively using different screen sizes? (so not just putting a big old margin next to it like I normally do)
2 Likes
Hey, somethings from this thread that I can actually figure out how to implement (or at least it’s google-able enough that I can probably have ChatGPT help me with it)
1 Like
This comment has a bunch of good and knowledgeable feedback. I should probably look into using a framework as it would probably fix a lot of my issues, but that might be farther out in the future because my knowledge of coding is not very good 
. In terms of vibecoding it, I’ve used the AI model DeepSite a little bit no, I’ve gotta say I’ve not been thrilled with its results because it loves writing code that I have no clue how to read. (Really, having a Bajillion CSS attributes for one button is a little over the top for what I need. 
) Anyway, the general comment is that it probably needs to be rewritten and something slightly more elegant, and that’s not off the table, that just might be a little while.
1 Like
Probably also doesn’t help that I have everything on the site loading as a PNG (I’m not an expert and I don’t know how much that matters but I would guess that it’s probably not a particularly efficient format)
1 Like
I think the easiest fix I’m gonna try first is just having it get rid of the margins when it detects mobile. (probably not a very good long-term fix, but it should be a good patch for now)
1 Like
OK, people, it looks like it’s time for me to make a bunch of forks and pull requests (or more accurately, probably spend a lot of time watching a bunch of YouTube tutorials)
1 Like
Here’s a good place to start with lazy loading:
(edit: forced link to be in English)
As for maximum width, go learn about the difference between the CSS attributes, width and max-width:
I recommend those two sites, as well as MDN’s Web Docs, for all your basic HTML/CSS/JS documentation needs:
3 Likes
Lazy loading is implemented now on the Robot archive though I didn’t bother implementing it on the main page because I figure that that I figure that iframe is always going to be loaded anyway. (if there’s some advantage of having it there too, please somebody let me know)
1 Like
I’m gonna go ahead and also change those images to be .webp but wanna use the < picture > Element to fall back to PNG in older browsers (JPEG would probably make more sense for this, but I don’t feel like converting everything for a third time soo…). I’m got some personal stuff coming up so I won’t probably be able to work on this for a few days, but rest assured it’s in the works.
1 Like