Hello everyone! I'm not a fan of the new offline page design. In particular I dislike the new banner for two reasons:
- It seems to compress pretty badly no matter what resolution or filesize you adhere to, because it resizes the banner for a 1280 pixel wide browser and then proceeds to blow up the image for any wider window resolution.
- It doesn't properly fit the page body width, and as a result you get this nasty overhang if you have a solid banner taking up the whole space.
Fortunately, there is a way to work with this if it bothers you. While a neat offline page banner won't magically get you viewers, it is ultimately part of your brand and it might bother you if it looks awry like it bothered me.
Anyways, the solution is that the banner accepts transparency in the design. Any areas that are transparent will reveal the Profile Accent Color behind it.
The tl;dr is all you need to do is make the right side of your banner be transparent and end your banner a little early given the space provided. If you do it right, your banner will seamlessly blend into the rest of the background color that extends to the right of the page body. No more overhang! This is approximately what it looks like when I leave the entire banner transparent with the exception of the face on the right and the logo on the left.
Regarding the rest of the banner, there's a little bit of space to work with on the left side. If you place some sort of image between the left boundary of the banner and the left-center console, it won't break in any way if someone maximizes the window on a resolution greater than 1920×1080. I recommend designing your banner for 1920×1080 in mind first, since the better majority of users still use 1920×1080 monitors. This is for you 2560 or 3440 or higher folks when you're testing your banner. If it looks good at 1920×1080, it will probably work for higher resolutions too.
That being said, the higher the resolution the window goes, the more Twitch will blow up the image to fit the higher resolution. It blows up the compressed 720p banner so it's unfortunately hard to get clear quality compared to what your design actually is. When it starts blowing up the banner, it will stretch it from the right boundary while the left boundary stays anchored. The result is that some of your image will now dip behind the page body and will no longer be visible. It's pretty extra to design for people with larger resolutions in mind but it's not too hard and it's fairly satisfying? One fun idea that does come of this though is that if you have a banner that has an image completely hidden in the center-left console you can make it peek out when the window size increases since the cropped-enlarged banner appears more zoomed in but those two consoles don't increase in size with the banner. ･ᴗ･
Even if you follow Twitch's banner size guideline though, just remember that some of your banner will bleed into the topnav and the page body. You'll only get your full banner height back once you shrink the browser window width to 1280 pixels or smaller, at which point the width of the banner is actually too long for the browser and bleeds into the leftnav if you have it expanded. Though at that point if you were working with any logos or images in your banner, they'll be obscured at this point by the two center consoles. You can also see in that image that I opted to use gradient transparency to make it look a bit cleaner when those parts show, though I could also just increase the face size to touch the top boundary and not have to worry about that.
This is unrelated, but I also took /u/ferretbomb's idea of putting a link to VODs in the bio links to shorten the trip to one click. A very nice idea.
Lastly I made this reference in like 2 minutes (so the precise dimensions are a little off) here. Hope this helps!
- [Guide/Analysis/Comparisons] Nvidia Image Sharpening : Guide to Squeezing Higher Frame Rates with Minimal Visual Compromise
- Tip: If you play on performance mode on the PS4Pro, try letting your tv do the upscaling by forcing the Playstation to 1080p.
- I’m bad at description so I made an environment page
More about Gaming NewsPost: "[Tips] Making your channel banner fit the new Offline Page" specifically for the game Gaming News. Other useful information about this game:
- What are good side quest design principles?
- Nic Kelman: “I am a gamer, and games helped me survive cancer – mentally, emotionally, and economically.”
- More and more I’ve come to respect developers whose major female characters don’t fall into one of these three tropes: Useless Damsel, Flawless Beautiful Strong Genius, or Wizened Mother Figure
- Ethics in games journalism is pretty awful, but Gamer gate has made it so no civil discussion can happen.
- Can we talk about the Last Guardian?
Top 7 NEW Games of February 2021
Looking for something new to play on PC, PS5, PS4, Xbox, or Nintendo Switch in February 2021? Here are the notable video game releases.
Top 20 NEW Open World Games of 2021
2021 will bring us tons of open world games for PC, PS5, Xbox Series X, PS4, Switch, and beyond. Here's what we're looking forward to.