-
Notifications
You must be signed in to change notification settings - Fork 36
OpenRA Website Update Proposal #493
Comments
I think this looks great, mostly. Something about the background image rubs me the wrong way, but I don't have any specific suggestions on how to change it. If we move forward with this IMO we should put some effort into obtaining new images (or maybe videos?) for the image carousel. I would be interested in seeing your visions for the other pages too! An updated player stats page could could perhaps tie in with the old plan of surfacing some of the information from the system info database (fraction of people on windows/mac/linux, fractions of played mods, etc). |
Do you mean this image? I'd love to keep it around (it's inspired by the background on the current website, harkens back to the good ol' days where every website had a silly tiling background, and helps reinforce the idea of OpenRA being pan-game), so let me know if you can figure out what bothers you about it! Also, I'm planning on vectorizing and adding the 3 faction logos from Dune 2000 if my proposal is accepted. I'll be working through the other pages now that I've got the website building through Metalsmith. Expect to see those pages within the next couple days. As for player stats, I'm interested to know what your wants/dreams are around that. Would you like to surface current player information on the front page (like CNCnet?). Just let me know what you're looking for, anything's on the table. Also, forgot to drop a link to my working repo: https://github.com/Fauntleroy/openra-web . When complete I can easily make it into a pull request for this repo, or whatever works best for the project. |
My first impression is very positive. Noted a couple of things (mobile):
|
I have updated my version of the site with all of the news posts from the current website. I've replaced Metalsmith with Jekyll as discussed in discord, and made sure all the permalinks match up. Some notes:
News List (https://openra.kempf.dev/news/)
News Detail (https://openra.kempf.dev/news/release-20200503)
@matjaeck I've taken a look at the things you mentioned, and taken care of a few of them. I used a protanopia simulator to take a look at the site and I can completely understand what you're talking about. I'm not sure how much I can do since, no matter how I look at it, the primary color should be red (Open Red Alert and all). I'll keep working to ensure that the site is accessible, and will refine the elements of the front page (github, discord links & OS icons) closer to the end of this update. @pchote How are posts authored? I see that they're all markdown files, but there's also a LOT of html going into them. Are they manually written and added to the repo? Up next: further refinements and content pages. |
Thats easy to get rid of actualy :-P |
I like the overall direction here. I have some suggestions regarding the visual design. Link stylesI think red doesn't work great for text and on black doesn't have sufficient contrast so it's not very readable even for people without visual impairments. I'd suggest using a golden color for the links - this really pops up on dark backgrounds and is still fairly distinguishable from regular text. It is also present in the logo. I'd suggest not using bold links in body text. It's OK in lists or other parts of the site but in the main content area bold should be used only for emphasis. Red works fine for buttons though. FooterThe footer seems a little busy. It repeats the header menu and the logo in the same style as the header. I'd suggest using a monochrome logo (maybe also smaller in size) in the footer and perhaps getting rid of the main menu duplicate. Here's a quick mockup with a grayscale logo (a proper monochrome version should be created): Responsive menuI suggest using a drawer style menu for the small screen sizes. Users are familiar with this interaction paradigm and a stacked list is easy to use on touch devices: I will have some comments on the code side of things but more on that later. Keep up the good work 👍 |
I've added a couple of new pages to the website: Server Browser (https://openra.kempf.dev/games)
First up is the Server Browser. I haven't written anything this complex without a framework in quite some time, but I made sure it's rock solid (and avoids any possible XSS from weird mod names). Servers are grouped by mod, you can filter by status, and you can sort by column. There are join buttons and lock icons for private games. I'll probably come back to this and add a couple more fun features at a later date. As for map data... I omitted it because the requests for map data can become super heavy, especially if the "empty" filter is checked. If the response from Player Statistics (https://openra.kempf.dev/players)
The Player Stats page isn't really any different than the existing one. Some elements were moved around, and some styles were changed, but it's basically the same. I thought this might be a good candidate for optimization, as flot and the supporting plugins are all quite heavy, but flot is the only game in town when it comes to presenting The Background ImageThe background image has been changed from strokes to fills. Personally, I lean more towards the strokes, but this works well. The Slide Out MenuLinks are once again stacked. I'm not too keen on making the menu stretch to fit the height of the window, as this interface is designed to smoothly adjust to any window size (not just hitting precise device breakpoints). Throwback Hover / Focus EffectI spent some time figuring out how to create an effect similar to the highlight cursor in Red Alert. The CSS is a bit intense for this one, so let me know if it isn't working for you. Fonts and jQuery are Locally HostedI added the fonts and jQuery as static files. No more extra requests to Google / jQuery! Thanks for all the replies and feedback, y'all. Even if I don't respond directly to your feedback, do know that I am reading everything and keeping it in mind while I work on this. Up next are the rest of the site's pages! |
The new link style looks better 👍 Here are some notes and suggestions in no particular order:
|
On the code side of things, here are some suggestions:
.u-centered-content {
max-width: 1100px;
margin: 0 auto;
padding: 0 2.5rem;
@media screen and (max-width: 680px) {
padding-left: 1rem;
padding-right: 1rem;
}
@media screen and (max-width: 1000px) {
padding-left: 2rem;
padding-right: 2rem;
}
}
.site-header {
&__main {}
&__menu-toggle {}
&__logo {}
} |
@dragunoff thanks for the great feedback! I've gone ahead and addressed a few of the things you brought up:
These changes are live on https://openra.kempf.dev |
Hey y'all, it's me again. This time we've got two new content pages; Download and Community. Download (https://openra.kempf.dev/download)
This is basically the same as the existing download page, with a different layout. There are two radio button groups which let you toggle the various operating systems and builds. Through great emotional toil I learned enough Ruby to generate the content for this page via the GitHub API. If a playtest id is added, the script will add a Community (https://openra.kempf.dev/community)
The current community page is a bit sparse, while the OpenRA community itself is... expansive. Therefore, I rebuilt this page from the ground up to try and elucidate on just how many ways there are to participate in the OpenRA community. If there's anything important I missed, let me know. Note: I intentionally left out the webIRC link for Freenode since the Discord is much more active, and better serves those who do not use IRC already. OpenGraph TagsI went ahead and filled out the OpenGraph tags as simply as possible. This means that links posted to services like Facebook, Twitter, Slack, Discord, etc will "unfurl" and display some extra information. These can be customized per-page if necessary (but they are not at this time).
Remaining WorkThis implementation is almost complete! There are only a few pages remaining, then it's all down to detail work and ensuring feature-completion. Here's what I'll be working on next:
If there's anything else you have in mind, let me know. |
On the code side of things:
<input type="radio" id="radio-button" class="radio" /><label for="radio-button">Turn on the radio</label> .radio {
// hide the input (you could use another, more accessibility friendly technique to hide it visually)
display: none;
+ label {
&::before,
&::after {
// use pseudo elements to create the custom radio input
}
}
&:selected + label {
&::before,
&::after {
// change the style of the custom input when the real one is selected
}
}
} |
Due to limitations with the previous design, I went through a longer, iterative design process to come up with the current design. It's quite close to the original, but with a few improvements:
Home (https://openra.kempf.dev/)
The home page has seen a serious optimization pass, along with some design updates. It's basically the same as it was before, but more refined. News Archive (https://openra.kempf.dev/news/)
The news archive is largely the same as before, but sorted by year. About (https://openra.kempf.dev/about/)
The about page is finally here! This is simply an adaptation of the existing about page, but I've made various edits here and there. Still working on a way to handle the screenshots on mobile. Download (https://openra.kempf.dev/download/)
The download page has been moved around according to user feedback. The OS selector is big and evident, and download instructions include buttons for both release and playtest. You can link directly to one set of instructions using a hash link: https://openra.kempf.dev/download#free-bsd Server Browser (https://openra.kempf.dev/games/)
The server browser is largely unchanged, but has seen some polish. Community (https://openra.kempf.dev/community/)
The community page has seen a small layout change. Legal (https://openra.kempf.dev/legal/)
I've added the legal page. I thought it would be nice to include the license on the same page, but if it's a problem it is quite simple to move it back. 404 (https://openra.kempf.dev/cnc-5/)
There's a 404 page! I thought it would be fun to make a Windows 95 style dialog box, so I did. I'd love to include some "blooper" videos or screenshots to pad out the page and keep it interesting. Alright, what next?There are a few things here and there for me to complete on the website, but I could use some help finding/making screenshots and videos to use in the carousel/about page. As always, let me know your feedback! |
@Fauntleroy The new design direction is great, I think you're on the right path. I have some suggestions design-wise, mostly minor things:
|
I second the request to keep a fixed content width in the background. Also, bug: the games list does not count spectators in the player numbers! |
|
Looks good to me 👍 I agree that we shouldn't show tibsun there until we have a public release for it. |
I have started filing issues on https://github.com/Fauntleroy/openra-web to cover my last nits (and maybe PRs once if I get on top of the learning curve). If anyone has any major issues with this design can you please speak up now? |
I quite like the design. Maybe there are a few very minor nits but no blockers. I'm not too fond of the CSS though 🤔 For better maintainability I think it needs a more logical organization, better component breakdown, maybe some more utility classes and stricter adherence to the BEM naming convention. Addressing all of that can take a while so I don't know whether we should be dealing with it now (or at all). |
One thing I noticed is that the "Resources" link in the menu/nav bar probably wants to be renamed to "Map Center" or something like that. Just "Resources" imo doesn't really convey that it just links to maps. (It could be basically anything just by the name, game guides, mod files, ...) |
I have made some final minor wording tweaks and have implemented the release automation, so this is now ready to go as far as i'm concerned. This is live at https://pchote.github.io/openra.github.io/, and when we are ready we can move the repo into the OpenRA org and switch the deployment config to OpenRA/openra.github.io. I would like to deploy this along side the new release hopefully this coming weekend, so can we please some go/no-go confirmations from @OpenRA/core? There are many things that could be improved further, but the key thing for now is to be happy that this is significantly better than the current website. We can continue to iterate and improve after the initial release. |
and https://www.gamereplays.org/openra/ is missing |
https://pchote.github.io/openra.github.io/legal#license is missing a space: Also, that EA modding FAQ allows modding, but not redistribution. It does not cover that case at all. It should be mentioned in another context. |
I've integrated fixes for most of the issues @Mailaender and @dragunoff have raised, and finished a fairly exhausting polish pass going back through all the news posts to convert figures to the new format and fix dead links (mainly to the changelog and forum). |
and... done! https://github.com/OpenRA/OpenRAWebsiteV3/ |
Similar to #491, I have a vision for and update to the OpenRA website I'd like to share.
There is an incomplete live demo here: https://openra.kempf.dev/
Motivation
After looking into the current state the website and speaking briefly with the team in Discord, I came up with some ideas on how to improve it. My goal is to maximize the quality, speed, and developer experience of the OpenRA website.
What's This Cover?
Visual Identity
I created a design to emphasize "open" and "modern" nature of the OpenRA project. Here's how:
Mobile Compatibility
The website was designed with mobile devices and tablets in mind. The simple layout is versatile and easily adjusts to work with devices of any size.
Simplicity
I built the website to be a simple as possible while still feeling modern. This helps bridge the gap between the time of the classics, where websites were just simple html pages—and today's world.
Focus on the Games
The carousel on the front page is considerably larger than the one on the current website. This draws attention to the mods/games on offer, and helps new visitors understand the nature of the project (as the carousel goes through the mods/games). This will serve as an entry point to the "About" page, and will auto scroll to whichever game they clicked on.
Closing
Ultimately my motivation is to build a website which works best for both the project and the team. I want the website to be the best it can be while being simple and easy to manage for the team. I am also interested in sticking around and maintaining the quality of the web related parts of the project moving forward.
The text was updated successfully, but these errors were encountered: