Why is this site's CSS so horrible?
TappedOut forum
Posted on Sept. 6, 2017, 9:28 a.m. by JP-Romero
Hello. I have used this site for my decks for quite a while... but its interface is SUPER ugly.
An example: This CSS rule:.navbar-header > .nav margin: 7.5px 0 0 0;produces the nav with a huge space below the menu and above the icons on the right.
if you remove it, you get a better navbar... so the question is what the hell was it doing there in the first place. The problem is this not an isolated case, as it happens with a whoooole bunch of other rules.
Since I got tired of this, I started doing a css style plugin to skin this website. Tappedout is a CSS nightmare!
emrakulinsmugglers says... #4
Tappedout isn't supposed to be a very stylish website. It's supposed to be functional. If you have a problem, deal with it. If there's so many issues and you really think they should be corrected, go ahead and ping yeago. no one likes being pinged to do extra work if its not necessary.
September 6, 2017 6:32 p.m.
WiltLeafElves thank god you are not developing this site. "It's not supposed to be stylish" is a pretty conformist thing to say. Heck, it reminds me of the horrible "It works, who cares about the usability!" software development mindset that was common perhaps 10 years ago. But back on topic, I have started a github repo with my skin changes if anyone wants it / wants to help with it.
This is how it looks so far: http://imgur.com/a/yvRbh
and this is the link to the repo: http://github.com/romerojp/Untapped
September 6, 2017 7:05 p.m.
emrakulinsmugglers says... #6
the meaning of 'stylish' differs slightly from person to person, and it's near impossible to make a site that all users agree looks good, and not ruin its functionality.People have different opinions, and so you should try to make a site that still looks great, without, for example, making words hard to read. This site is definitely not perfect. much of the site is dark, and making the white words too bright and disconcerting. you seem to have already addressed that in your skin, the orange definitely is much softer, without ruining legibility.
i don't have a conformist mindset if thats what you're thinking.
Your skin looks great so far! You might want to add some more space between the navbar and basically everything under it, as the borders are really close right now. you also have a lot of space above 'Featured Deck'. another thing you can do is to set all username font sizes to the same size. (some people have slightly larger usernames, which are always so annoying to look at). inb4 i know my username is probably slightly annoying too because of the text shadows and borders.
September 6, 2017 8:12 p.m.
Serra_Sentinel says... #7
There are a few unanswered (and unasked) questions here appsles: how big or who is on the development team, what the end goal of the team is, and how much time do they have to devote to the site? If you wanted to change the look or layout of it, you could talk to the dev team about it or see about joining it. Who knows? They might like your ideas.
September 6, 2017 8:19 p.m.
WiltLeafElves the point is not to make it 'stylish' (my use of the word in my original post refers to the Firefox Add-on) the point is to improve its readability and usability... and they can be tested without 'ruining functionality', as you say. These are called non-functional requirements in software engineering.
Serra_Sentinel Thanks for a sensible answer! Indeed, I know very little of TappedOut's dev team, although EmblemMan's comments suggest that the development is mainly done by a single person. I sort of was wondering if there have been any other attempts to address the interface since looking deeper in the code, it is not just the CSS at fault, but the HTML markup as well.
September 6, 2017 8:57 p.m.
grumbledore says... #9
you're complaining about a service that you don't pay for that is written by one person who does it outside of their full time job and family responsibilities. you have the air of someone who is new to the cs engineering world. gui prettiness is always prioritized below functional stability unless the directives are coming from a marketing twat.
September 7, 2017 2:16 a.m.
scrotality Sure, I am complaining, but I am not complaining with my arms crossed. I am asking why is it in the state it is, and I am even sharing my (albeit limited) initial attempts to fix some of the problems.
No, I am not new to CS or software engineering, but that is hardly relevant. And yeah, I agree, "GUI prettiness" as you call it, is obviously generally prioritized below functional stability. That doesn't mean one cannot have the cake and eat it too :)
September 7, 2017 2:35 a.m.
scrotality although I do appreciate you confirming my suspicion, that the tool is built by one single person. It does answer the question "why is this site's CSS so horrible"! thanks!
September 7, 2017 2:37 a.m.
multimedia says... #13
It's not a CSS nightmare, you're being too dramatic. Can it be improved? Yes, a lot. The CSS or design is not interfering with the functionality of the site. Which is very clear that's the priority for the owner here is the functionality. Do I agree with it, no, but I'm not the owner.
The site really needs to look more professional, especially the front page and Deck Builder; the two most important places on the site. The good news is the site is built on framework that's very easy to change, customize or completely revamp to accommodate any new design.
Maybe you're aware, but you can customize the look of the site from your user page or deck pages with CSS and JS. However, you can only do this if you're an upgraded user and I hope you are since you've been with this site for six years. I suggest you take advantage of this feature if you're that annoyed with the design of the site. I thank the owner of this site for having this feature because I've taken full advantage of it.
This is a neat project you're doing making a skin for the site. Your design is much cleaner looking, but it's still the ugly brown. My advice is to get away from brown; use it as a highlight color if at all, not the main color of the site.
September 7, 2017 4:29 a.m.
MillionLittleE says... #14
i mean if you want to get technical there are 148 errors with the code, by the w3c standard. and 307 warnings.
September 7, 2017 9:13 a.m.
PG7m American problems? I am the problem for americans, because I am mexican! :D
multimedia Thanks for your thoughts. I didn't know "upgrading" gave you js and css capabilities. Though rather than fix the problem, that makes some profile look myspacey hahah. I agree, colors need improvement... however I would also need something like greasemonkey to move stuff around client side in order to fix some of the markup... why not fix this stuff for everyone rather then relying on userpage paid-for scripts though?
millionlittlee I specially cringed at !important stuff in random places.
EmblemMan says... #2
Its probably because the tappedout home symbol used to look completely different and was bigger and yeago did not change it because it doesnt matter.
September 6, 2017 2:32 p.m.