OpenRA Website Update Proposal

[Fauntleroy]

Similar to https://github.com/OpenRA/OpenRAWeb/issues/491, I have a vision for and update to the OpenRA website I'd like to share.

Desktop	Mobile

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:

• The logo and headings use Jost, a free and open source typeface with sharp edges and smooth circular forms that mesh well with the points of the star and the curves of the sickle in the logo.
• The body and smaller headings use Inter, a free and open source typeface that is versatile and easy to read.
• Visual noise is reduced by using vector shapes and simple, bright colors. Screenshots (showing OpenRA itself) easily become the focus.
• Visual hierarchy of the page has been tuned to ensure that users progress through content smoothly and easily.
• All of the games on offer are represented, though Red Alert (being the namesake) naturally shows up first.

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.

Tablet	Mobile

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.

• No JS frameworks. This simply uses jQuery like the current website.
• Works without JS. Even without JS enabled the website is still functional.
• Extremely fast and efficient. This implementation is well optimized and scores well in Lighthouse (Note: "Best Practices" lost a couple points for something that is actually an optimization):
• Uses a static site generator (Metalsmith)

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.

[pchote]

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).

[Fauntleroy]

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.

[deleted-user-1]

My first impression is very positive. Noted a couple of things (mobile):

• drawer should lock page scrolling and maybe have a different background to be distinguishable from the content behind
• footer looks a bit chaotic, consider moving legal and copyright to its own row below links and make the section have only one column
• anchor text for social links needs alignment or IMO remove the text next to the logos
• consider removing the border of the news section for mobile
• consider displaying the whole comment feed below the article (nvm if it is the plan anyway)
• Colors accessibility: as a colorblind person with protanopia I can confirm that red on black works, although being hard to look at for a longer time in case of text. I obviously liked the golden highlight on the currentsite better, but that just as a sidenote
• not a fan of the red OS logos but that coukd be because of ^
• great job so far, hope to see more :)

[Fauntleroy]

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:

• I replaced all of the YouTube embeds with the much lighter <lite-youtube> embed. Functions the same as you would expect.
• I noticed there are some green boxes (see: https://openra.kempf.dev/news/playtest-20200426) hardcoded into the markdown of the news posts. Unless this is hardcoded to work with feed readers or the like, I'd prefer to make this a re-usable element.

News List (https://openra.kempf.dev/news/)

Desktop	Mobile

News Detail (https://openra.kempf.dev/news/release-20200503)

Desktop	Mobile

@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.

[IceReaper]

No JS frameworks. This simply uses jQuery like the current website.

Thats easy to get rid of actualy :-P If you want contact me, did professional web development for over 10 years, so im willing to help out here if you need a hand.

[dragunoff]

I like the overall direction here. I have some suggestions regarding the visual design.

Link styles

I 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.

Footer

The 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 menu

I 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 👍

[Fauntleroy]

I've added a couple of new pages to the website:

Server Browser (https://openra.kempf.dev/games)

Desktop	Mobile

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 master.openra.net included the map name, this could be easily avoided. I think that's the right approach towards this issue, if it's possible.

Player Statistics (https://openra.kempf.dev/players)

Desktop	Mobile

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 .rrd data in a browser. A lighter, more easily style-able library could be used, but changes to activity.openra.net would need to be made, and that's out of scope.

The Background Image

The background image has been changed from strokes to fills. Personally, I lean more towards the strokes, but this works well.

The Slide Out Menu

Links 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 Effect

I 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 Hosted

I 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!

[dragunoff]

The new link style looks better 👍 I think the background with solid logos works well because it's less busy 👍

Here are some notes and suggestions in no particular order:

1. These list items seem too close together, I'd suggest adding some margin between them:

2. Image captions could have a different style to distinguish them from the main text. The current markup is not suited for that so there is also an opportunity to properly mark them as <figure>:

3. The link hover effect perhaps should not be applied to inline links as it doesn't really work with line breaks:

4. Such links should have a display: inline-block so the hover effect can wrap the whole image:

5. The hover effect animation should be disabled for users that have enabled "reduced motion" (see https://developer.mozilla.org/bg/docs/Web/CSS/@media/prefers-reduced-motion).

[dragunoff]

On the code side of things, here are some suggestions:

1. Before a ton of CSS has been written I highly recommend that we use SCSS to break index.css into partials (Jekyll supports SCSS out of the box). I see that you're using BEM naming convention which is great. I suggest you break each BEM block into it's own SCSS partial file and also break the base and utility styles into partials. I'd also recommend to follow the ITCSS convention (see https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) for structuring and layering the partials.

2. I suggest keeping media queries in context - i.e. near the selectors that they affect. SCSS makes that easier because it allows media queries to be nested in the selector. This makes sure all the styles relevant to a block are in the same place. For example:

   .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;
   }
   }

3. SCSS also allows selectors for BEM to be written like this:

   .site-header {
   
   &__main {}
   
   &__menu-toggle {}
   
   &__logo {}
   }

[Fauntleroy]

@dragunoff thanks for the great feedback! I've gone ahead and addressed a few of the things you brought up:

• I've moved the images and videos of the last couple posts into <figure>s with <figcaption>s. The style is only a little different, but it does clean up the code in the post quite a bit.
• The hover effect for the OS logos has been fixed
• Major motions, such as the carousel effects and the link hover effect, have been disabled for users who prefer less motion.
• I've begun moving the CSS to SCSS. Right now it's just rudimentary file splitting, nesting, and media queries, but I'll get to work cleaning up the rest soon.

These changes are live on https://openra.kempf.dev

[Fauntleroy]

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)

Desktop	Mobile

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 playtest key and the playtest option will be un-disabled.

Community (https://openra.kempf.dev/community)

Desktop	Mobile

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 Tags

I 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).

Slack	Twitter

Remaining Work

This 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:

• About page
• Legal page
• 404 page
• Sitemap (is this important to y'all?)
• Ensure RSS feeds work
• Ensure public URLs in use by other things (like the "game news" in OpenRA) are there
• Experiment with small videos in front page carousel
• Google Analytics and other third party JS integration
• Final cross browser check
• Final lighthouse score check
• Documentation

If there's anything else you have in mind, let me know.

[dragunoff]

This looks promising 👍 I have some comments on the visual parts, again in no particular order:

1. The selected radio button does not differ enough from the unselected ones. There should be starker visual contrast so the user can see at a glance which is the selected option.

2. I think that hiding the playtest behind a radio button toggle is not good because it decreases the visibility of the playtest and this is very much not desired for a playtest. I think the current site does this better. You can look at how other games/products do that, I don't have any examples of the top of my head.

3. I think the headings could use some more margin (or a variation in the style). Since the font size is similar these headings almost reads like one sentence.

4. Having the download links and info by the side and wrapped in a box makes them look a bit like an aside. As if that block doesn't have a direct relation to the main content in the left column. I'd suggest to keep it all in one column and going from most to least important information:

[dragunoff]

On the code side of things:

1. Please be strict with BEM - there is little value in applying a convention only partially. The main idea behind BEM is very simple and is well documented: http://getbem.com/. Of course you can choose not to follow a convention or follow a different one.

2. I'd suggest you follow a stricter convention with regards to splitting SCSS into partials and that is: one block (component) per file (this doesn't pertain to utility, type or other global and generic styles). Because again there is little value in splitting because the partials keep growing and we end up with long sheets of SCSS that are hard to debug and maintain.

3. Atomic CSS has been seeing more and more use and gaining more proponents so this is also an avenue to explore. But for a small project like this it may not be too appropriate. I'd stick to styling components with some utility classes sprinkled over.

4. You can create custom radio button styles by using this technique. That way you won't have to rely on the native radio controls which vary wildly between browser and OS and you can hook to the browser native pseudo-classes:

   <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
   }
   }
   }

[Fauntleroy]

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:

• A simple grid based design
• Center aligned content with support for a variety of sizes
• A great deal of refinement and polish on various interface elements
• Performance improvements

Home (https://openra.kempf.dev/)

Desktop	Mobile

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/)

Desktop	Mobile

The news archive is largely the same as before, but sorted by year.

About (https://openra.kempf.dev/about/)

Desktop	Mobile

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/)

Desktop	Mobile

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/)

Desktop	Mobile

The server browser is largely unchanged, but has seen some polish.

Community (https://openra.kempf.dev/community/)

Desktop	Mobile

The community page has seen a small layout change.

Legal (https://openra.kempf.dev/legal/)

Desktop	Mobile

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/)

Desktop	Mobile

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!

[kingo55]

"404 - Silos needed" or even "404 - Unit lost" springs to mind...

[dragunoff]

@Fauntleroy The new design direction is great, I think you're on the right path. I have some suggestions design-wise, mostly minor things:

1. It would be good to always include the separator between sections of different widths to avoid such glitches and to justify the width change:

2. IMO it may be better to stick to a single width for sections and avoid changing the width altogether. The separator can stay but to simplify things keep all sections at the same width.

3. Checkboxes and radios don't have a focus state, consider using the technique I outlined in https://github.com/OpenRA/OpenRAWeb/issues/493#issuecomment-655020065:

4. Perhaps these two links should have an external link indicator:

5. I'd suggest keeping the selection effect only in the header and footer. It has issues with buttons (due to the combined animation effect) and inline links spanning multiple lines. Having it in the header/footer would still provide significant aesthetic value.

[teinarss]

Looks awesome!

Just one thing, it would look better IMO if the content width was kept the same.

[pchote]

I second the request to keep a fixed content width in the background. I sadly think that we are unlikely to find people willing to contribute a selection of good images for the carousel, so I suggest removing that and redesigning that part of the home page to be more like the current website. This would get us significantly closer to a releaseable form.

Also, bug: the games list does not count spectators in the player numbers!

[Fauntleroy]

• @pchote I've spent some time recording a "demo" video of my own to place in the carousel. If my attempt is good enough, I'll go ahead and make a few more for the other games (but maybe not tibsun?). Please take a look and let me know what you think: https://openra.kempf.dev/
• the stripes on the left and right sides of the content are now always lined up, due to popular demand
• I've modified the header slightly and made it fixed

• +

  have been modified to better work inside news posts

• Spacing has been modified across the board
• I've added an affordance for spectators to the games list. It is similar to the one on the current games list: https://openra.kempf.dev/games

[pchote]

Looks good to me 👍 I agree that we shouldn't show tibsun there until we have a public release for it. It would be great if we could try and deploy this with the next release (likely in late january / early feb), so i'll aim to start going through the pages with a finer toothed comb and make suggestions.

[pchote]

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?

[dragunoff]

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).

[abcdefg30]

If anyone has any major issues with this design can you please speak up now?

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, ...)

[deleted-user-1]

If anyone has any major issues with this design can you please speak up now?

The style of the top headings reminds of MS Word Wordart:

(First in third row)

[pchote]

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.

[Mailaender]

I like it a lot. A minor bug: when searching with Google Chrome the font is doubled/distorted:

[Mailaender]

and https://www.gamereplays.org/openra/ is missing

[Mailaender]

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.

[dragunoff]

I like it a lot. A minor bug: when searching with Google Chrome the font is doubled/distorted:

This is because the text has a shadow applied with CSS. I don't think there is a way to remove that for search highlights because there is no selector for that in CSS. So this is a wontfix.

I noticed that clicking on the slider buttons causes the page scroll to jump to the top. I guess the intention was for the user to see the changing text above the slideshow but ultimately it feels jarring. This is due to an oversight in the click event handler (a call to event.preventDefault() is needed to stop the href of the link from activating).

The menu in the footer has an underline on hover that together with the selection box gives it a cluttered look. I thnk the underline can be removed.

I think the main menu should highlight the current page (e.g. highlight "News" menu item on "News" page).

These are all minor nits. Altogether the site is great :+1: :zap:

[pchote]

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).

[pchote]

and... done! https://github.com/OpenRA/OpenRAWebsiteV3/