cmderdev/cmderdev.github.io

Site isn't very mobile friendly

JoshuaKGoldberg opened this issue · 8 comments

JoshuaKGoldberg commented

I mentioned cmder to a friend recently. Their reaction was to look it up on their phone. This was the experience they got:

image
image

😦

JoshuaKGoldberg commented

Some thoughts on ways to improve this:

  • Use HTML elements + CSS to create the window in main.jpg
    • ...then use JavaScript to animate someone typing in random commands, maybe? That effect always looks cool...
  • After ^, hide the background image on mobile
  • Use flexbox for the three column layout, turning it into three rows on thin windows
  • 👍1
samvasko commented

Would you be interested on working on making the site more responsive @JoshuaKGoldberg ?

JoshuaKGoldberg commented

I would, if you're willing to wait a little while. I'm taken through the end of the summer...

schaazzz commented

@JoshuaKGoldberg @samvasko
I'd be willing to put in some to time help make the site more responsive :)

  • Why not make life easy and just switch to Bootstrap? Easy to integrate and is responsive out of the box!

  • A terminal session GIF (recorded using, for example, Screen2GIF) can also be used to show commands being typed.

    • ...alternatively, a static image can be shown initially, which can be replaced after a few seconds with the GIF using JS.
samvasko commented

@schaazzz It currently has a grid system and I think it just needs bit of tweaking for different viewports. And give a the gif a try! I am happy to add to to main project README as well. 👍

DRSDavidSoft commented

@JoshuaKGoldberg I wrote a fix in #22 by replacing lemonade to the new bootstrap, which uses flexboxes.

I've also been working on a HTML+CSS recreation of the window, instead of the current jpeg file.

I currently have a working demo that you can have a look at in my rewrite branch here:
https://github.com/DRSDavidSoft/cmderdev.github.io/blob/gh-pages/.workspace/cmder-web.html

The discussion has been moved here: cmder-site/rewrite#15

I think this approach is better than simply embedding a gif file, as it won't look good on >100% dpi displays, takes a lot of useless disk-space space and bandwidth, and most importantly is not responsive. Instead, I've used jQuery Terminal to actually display a terminal with text.

I hope @samvasko approves! he doesn't seem to work on Cmder these days. I wonder if he's still on Windows, or switched to Linux/macOS.

Anyways, as @schaazzz suggests, we can use an image polyfill at first, and after the terminal window is created, replace it with that. But it won't be needed as these days everybody seems to have Javascript enabled. It's enabled by default on Android/iOS, Chrome & Edge on Windows.

I'd like to work on the website and make it look better and more intuitive for the user in summer, as well.

So, if @JoshuaKGoldberg and @schaazzz have time to work on the website (and they're still interested to), please collaborate on the rewrite branch instead of creating a new fork.

  • 🎉1
Stanzilla commented

What would making sure of that entail exactly?

DRSDavidSoft commented

@Stanzilla I've explained it here: DRSDavidSoft#12