Post subject: New TASVideos CSS?
Editor, Experienced player (860)
Joined: 8/12/2008
Posts: 845
Location: Québec, Canada
Hey there! I had nothing to do this afternoon so I re-did the CSS of the TASvideos.org homepage. I don't have that much CSS knowledge, but I do think it looks better than the current CSS and could (probably) be easily implemented by admins. It's far from completed, but please let me know what you think! IMAGE LINK: https://dl.dropboxusercontent.com/u/55220482/tasvideos_homepage.png HTML/CSS LINK: https://dl.dropboxusercontent.com/u/55220482/tasvideos/tasvideos.html
Experienced player (690)
Joined: 11/23/2013
Posts: 2232
Location: Guatemala
I think that design could fit better for a mobile version or an Android/iOS app. I don't know about the normal desktop version... it looks fine to me.
Here, my YouTube channel: http://www.youtube.com/user/dekutony
AntyMew
It/Its
Encoder, Player (35)
Joined: 10/22/2014
Posts: 425
One problem. Game Ressources :U
Just a Mew! 〜 It/She ΘΔ 〜
Editor, Experienced player (570)
Joined: 11/8/2010
Posts: 4036
Kurabupengin wrote:
I think that design could fit better for a mobile version or an Android/iOS app.
I like this idea. The new CSS reminds me of Android material design, and also the Windows 8 tablet interface.
Warepire
He/Him
Editor
Joined: 3/2/2010
Posts: 2178
Location: A little to the left of nowhere (Sweden)
Sorry to say but this looks too much "mobile device". I don't find this to be an improvement when browsed on a computer. I do agree with CoolKirby and Kurabupengin: Excellent for a mobile site variant.
Site Admin, Skilled player (1254)
Joined: 4/17/2010
Posts: 11475
Location: Lake Char­gogg­a­gogg­man­chaugg­a­gogg­chau­bun­a­gung­a­maugg
Warepire wrote:
Sorry to say but this looks too much "mobile device". I don't find this to be an improvement when browsed on a computer. I do agree with CoolKirby and Kurabupengin: Excellent for a mobile site variant.
Warning: When making decisions, I try to collect as much data as possible before actually deciding. I try to abstract away and see the principles behind real world events and people's opinions. I try to generalize them and turn into something clear and reusable. I hate depending on unpredictable and having to make lottery guesses. Any problem can be solved by systems thinking and acting.
Noxxa
They/Them
Moderator, Expert player (4124)
Joined: 8/14/2009
Posts: 4090
Location: The Netherlands
feos wrote:
Warepire wrote:
Sorry to say but this looks too much "mobile device". I don't find this to be an improvement when browsed on a computer. I do agree with CoolKirby and Kurabupengin: Excellent for a mobile site variant.
http://www.youtube.com/Noxxa <dwangoAC> This is a TAS (...). Not suitable for all audiences. May cause undesirable side-effects. May contain emulator abuse. Emulator may be abusive. This product contains glitches known to the state of California to cause egg defects. <Masterjun> I'm just a guy arranging bits in a sequence which could potentially amuse other people looking at these bits <adelikat> In Oregon Trail, I sacrificed my own family to save time. In Star trek, I killed helpless comrades in escape pods to save time. Here, I kill my allies to save time. I think I need help.
Editor, Expert player (2329)
Joined: 5/15/2007
Posts: 3933
Location: Germany
I don't understand it when everyone thinks gradients are so yesterday. Right now it's what makes the current page look lively. What I like: - tables (Latest publications etc.) What I don't like: (I know you only played around with CSS but this is what I have to say) - Capitalisation everywhere - Huge empty spaces (The images on the right don't look like they belong to anywhere while on the current page it looks like they belong to the tables) - Search and login input, should be in the center top (last time I checked that is where people mostly look for it) - TASvideos logo/slogan need to be more distinguishable from the menu options (Home, Movies etc.) - There needs to be more space/a border between the tables to make it easier for users to distinguish them. - Instead of "more..." probably it should say what. "More submissions", "more movies" etc. - The news section isn't very visible. Right now it is more visible because of better use of empty space, a third of the horizontal space is used for the news. In your version only an 8th is used. An alternative would be to display the news in an entire horizontal area above the showcased movie. - Login/search functionality should be buttons or links. It should be visible you can click on that.
Joined: 1/26/2009
Posts: 558
Location: Canada - Québec
If anyone want to try a design for mobile, I'll suggest to learn a "responsive" CSS framework such as Bootstrap. You can see some samples here. Try to resize your browser window and see how it fit all together. Basically, each column add up to twelve for a single horizontal block. Of course, there's ton of other examples on the web to make pretty much anything responsive.
Former player
Joined: 6/30/2010
Posts: 1107
Location: Zurich, Switzerland
Mothrayas wrote:
feos wrote:
Warepire wrote:
Sorry to say but this looks too much "mobile device". I don't find this to be an improvement when browsed on a computer. I do agree with CoolKirby and Kurabupengin: Excellent for a mobile site variant.
Current project: Gex 3 any% Paused: Gex 64 any% There are no N64 emulators. Just SM64 emulators with hacky support for all the other games.
Editor, Experienced player (848)
Joined: 5/2/2015
Posts: 696
Location: France
Mothrayas wrote:
feos wrote:
Warepire wrote:
Sorry to say but this looks too much "mobile device". I don't find this to be an improvement when browsed on a computer. I do agree with CoolKirby and Kurabupengin: Excellent for a mobile site variant.
ventuz
He/Him
Player (125)
Joined: 10/4/2004
Posts: 940
I think its nice. Website design code needed to be updated for mobile. "Welcome!" box is really huge on android chrome.
Spikestuff
They/Them
Editor, Publisher, Expert player (2642)
Joined: 10/12/2011
Posts: 6438
Location: The land down under.
Well, you can create a Stylish version of it. *shrugs*
WebNations/Sabih wrote:
+fsvgm777 never censoring anything.
Disables Comments and Ratings for the YouTube account. Something better for yourself and also others.
Player (13)
Joined: 6/17/2006
Posts: 508
I don't understand the current trend with web design nowadays. It's always about giant rectangles with solid color and borderless buttons. Not only does the resulting GUI look exactly like every other website designed with the same trend, but it also looks like we've regressed back to the Windows 1 era. Performance aside, how anybody thinks this is a good idea baffles me, regardless of the platform. What baffles me even more is that it's the same trend that Microsoft used for their Windows 8 Metro interface that everybody hates, and yet every web designer is trying to replicate it. I don't get it.
Editor, Experienced player (860)
Joined: 8/12/2008
Posts: 845
Location: Québec, Canada
I tried my hand at the CSS once again; let me know what you think: IMAGE LINK: https://www.dropbox.com/s/mppp1knco101v44/screencapture-file-C-Users-Cohan-Desktop-tasvideos-index-html-1446319261574.png?dl=0 SUMMARY: -Added a max-width -Changed to a sans-serif font -Each even row has a blue color -General padding for better reading -Fixed width to all table to they align nicely -Hover effect on images
Post subject: Nahoc nameflash
Senior Moderator
Joined: 8/4/2005
Posts: 5777
Location: Away
Overall it's a significant improvement already, but it needs more tweaks. 1. Main menu bar. That vertical text alignment is perfect, and I like that there's no underlines; makes it look a lot slicker. However, using the same thin font as the general text seems counterintuitive; I believe it should definitely be a bit bolder. The items themselves should probably be scaled up a bit: I don't think anyone is browsing with less than 1024 pixel wide screens these days (even phones do that much now), yet the current menu bar seems to be designed around ~900 px. That's definitely some room to grow. 2. The newcomer box. This is probably the most overlooked thing on the entire front page. It's a nondescript grey box containing two poorly-spaced (what's up with that interline, really?) lines of text that I don't expect anyone to notice before they click on something else. 3. Random screenshots. I'm not convinced that aligning those to the right is the way to go. Considering the insane difference in screen width between different platforms and the fact that the next piece of content on the left is also aligned to the left, you're left with a lot of empty space near the center of the page. I suggest either aligning the images with the left margin of the news box (so that the empty space is at the right side of the screen) or upscaling/downscaling them to be the same size as the news box (on front page only, obviously). Is that possible to do? 4. The lists. I think the "(Was XX:XX.XX)" should be aligned together rather than follow the previous text after a simple whitespace. Is that possible to do? Also, how would this look if there was a very long game name or list of authors? Also, "more..." should be more pronounced imo. Also, why is one of them "..." and the rest "…"? Use "..." imo, I believe single-character ellipsis was made for another purpose. 5. The login/logout/search bar. I'm not sure those two vertical lines that separate the username from logout and search links are supposed to be there when neither are present. That being said, why is there no login field? How do I login here?
Warp wrote:
Edit: I think I understand now: It's my avatar, isn't it? It makes me look angry.
Post subject: Re: Nahoc nameflash
Editor, Experienced player (860)
Joined: 8/12/2008
Posts: 845
Location: Québec, Canada
moozooh wrote:
Overall it's a significant improvement already, but it needs more tweaks. 1. Main menu bar. That vertical text alignment is perfect, and I like that there's no underlines; makes it look a lot slicker. However, using the same thin font as the general text seems counterintuitive; I believe it should definitely be a bit bolder. The items themselves should probably be scaled up a bit: I don't think anyone is browsing with less than 1024 pixel wide screens these days (even phones do that much now), yet the current menu bar seems to be designed around ~900 px. That's definitely some room to grow. 2. The newcomer box. This is probably the most overlooked thing on the entire front page. It's a nondescript grey box containing two poorly-spaced (what's up with that interline, really?) lines of text that I don't expect anyone to notice before they click on something else. 3. Random screenshots. I'm not convinced that aligning those to the right is the way to go. Considering the insane difference in screen width between different platforms and the fact that the next piece of content on the left is also aligned to the left, you're left with a lot of empty space near the center of the page. I suggest either aligning the images with the left margin of the news box (so that the empty space is at the right side of the screen) or upscaling/downscaling them to be the same size as the news box (on front page only, obviously). Is that possible to do? 4. The lists. I think the "(Was XX:XX.XX)" should be aligned together rather than follow the previous text after a simple whitespace. Is that possible to do? Also, how would this look if there was a very long game name or list of authors? Also, "more..." should be more pronounced imo. Also, why is one of them "..." and the rest "…"? Use "..." imo, I believe single-character ellipsis was made for another purpose. 5. The login/logout/search bar. I'm not sure those two vertical lines that separate the username from logout and search links are supposed to be there when neither are present. That being said, why is there no login field? How do I login here?
1. Good idea, I'll work on it. 2. I'll work on it too. 3. Sticking the images on the very right of the publication box looks weird; scaling is totally possible, but would look rather bad. Idk what could be done to make this better. 4. I asked adelikat about changing this and it is possible. We'll work on it. 5. This is just a bug because I'm not working directly on the "real" files, so the login/search is messed up. Thanks for your comments.
Post subject: New appearance for TASVideos and/or Forum
Hat
She/Her
Banned User
Joined: 9/3/2015
Posts: 60
Greetings TASVideos people. I already know the visual interface of TASVideos and of this forum, but I would propose modernize these pages (graphically) using CSS. I say this because the current design looks a bit simple. Is just an idea, it would be interesting to see these pages with better style and movement.
Post subject: Re: New appearance for TASVideos and/or Forum
Editor, Active player (297)
Joined: 3/8/2004
Posts: 7469
Location: Arzareth
Hat wrote:
I would propose modernize these pages (graphically) using CSS.
Am I reading this correctly: That is your whole proposal? Modernize them with CSS? You know, the site already uses CSS.
Post subject: Re: Nahoc nameflash
keylie
He/Him
Editor, Emulator Coder, Expert player (2840)
Joined: 3/17/2013
Posts: 392
moozooh wrote:
I don't think anyone is browsing with less than 1024 pixel wide screens these days (even phones do that much now)
Well, according to this site, based on their own log, still 44% browse the internet with a resolution strictly less than 1024 pixels wide.
Post subject: Re: Nahoc nameflash
marzojr
He/Him
Experienced player (761)
Joined: 9/29/2008
Posts: 964
Location: 🇫🇷 France
keylie wrote:
Well, according to this site, based on their own log, still 44% browse the internet with a resolution strictly less than 1024 pixels wide.
That site does not say what you think it says:
As of today, about 97% of our visitors have a screen resolution of 1024x768 pixels or higher:
In the table that follows, it lists 800x600 with 0.3% and "lower" with 2% as the only options with width strictly less than 1024 for Jan 2015; the last time strictly less than 1024 was 44% or more was in Jan 2003 — at least according to this data.
Marzo Junior
Senior Moderator
Joined: 8/4/2005
Posts: 5777
Location: Away
Additionally, I would expect that the other 3%, or at least a major part thereof, belongs to low-resolution mobile devices (and possibly netbooks with 1024x600 resolution). Mobile devices, especially low-resolution/low-density, require particular layout optimizations that in our case basically mean a complete ground-up overhaul. Browsing both the site and forum even on a 8" tablet I use is pretty painful.
Warp wrote:
Edit: I think I understand now: It's my avatar, isn't it? It makes me look angry.
Joined: 5/13/2006
Posts: 283
Plus there are the odd ones like me that don't like browsing with the browser maximized despite having a widescreen... screen. Of course a responsive design could in theory handle the whole spectrum of browser window sizes.
<Zurreco> if so called professional players cant adapt to every playing field, theyre obviously not that great
Site Admin, Skilled player (1254)
Joined: 4/17/2010
Posts: 11475
Location: Lake Char­gogg­a­gogg­man­chaugg­a­gogg­chau­bun­a­gung­a­maugg
kwinse wrote:
Plus there are the odd ones like me that don't like browsing with the browser maximized despite having a widescreen... screen.
Exactly my case. Reading a book that's half meter wide is harder than reading a normal book. The same with web sites/forums.
Warning: When making decisions, I try to collect as much data as possible before actually deciding. I try to abstract away and see the principles behind real world events and people's opinions. I try to generalize them and turn into something clear and reusable. I hate depending on unpredictable and having to make lottery guesses. Any problem can be solved by systems thinking and acting.
creaothceann
He/Him
Editor
Joined: 4/7/2005
Posts: 1874
Location: Germany
feos wrote:
kwinse wrote:
Plus there are the odd ones like me that don't like browsing with the browser maximized despite having a widescreen... screen.
Exactly my case. Reading a book that's half meter wide is harder than reading a normal book. The same with web sites/forums.
That's one reason why I use Tree Style Tab.