Windows 8 and 8.1 Forums


Web designers - Please stop using BLACK backgrounds

  1. #1


    Hafnarfjörður IS
    Posts : 4,376
    Linux Centos 7, W8.1, W7, W2K3 Server W10

    Web designers - Please stop using BLACK backgrounds


    Hi there
    Seems an increasing number of web sites have their background colour in BLACK - this is not a very good choice for large numbers of people - especially if combined with things like PURPLE or ORANGE text.

    If you must use a black background at least give the user some choice of alternative "skin" or "style" - in any case the whole "Black" thingey reminds me of some geeky teenagers Gaming screens!!!.

    Even the BBC is at it now. !!!!



    Cheers
    jimbo
    Attached Thumbnails Attached Thumbnails mars.png  

      My System SpecsSystem Spec

  2. #2


    Posts : 2,130
    Windows 8.0 x64


    Somebody gave me a ZapColors bookmarklet
    Code:
    javascript:(function()%7Bvar%20newSS,%20styles='*%20%7B%20background:%20white%20!%20important;%20color:%20black%20!important%20%7D%20:link,%20:link%20*%20%7B%20color:%20#0000EE%20!important%20%7D%20:visited,%20:visited%20*%20%7B%20color:%20%23551A8B%20!important%20%7D';%20if(document.createStyleSheet)%20%7B%20document.createStyleSheet(%22javascript:'%22+styles+%22'%22);%20%7D%20else%20%7B%20newSS=document.createElement('link');%20newSS.rel='stylesheet';%20newSS.href='data:text/css,'+escape(styles);%20document.getElementsByTagName(%22head%22)%5B0%5D.appendChild(newSS);%20%7D%20%7D)();
    That worked well for me on my old Gateway VX900 monitor.

    Now I only have a Laptop so I use FF Color Toggle AddOn.
    One color set with "allow sites to use their own colors" so the colors are "don't care" and the other set has that option unchecked. I use white for unvisited links, gold for visited links, and a dark blue background. It helps avoid the fuzzy text Laptop issue.

    I agree with you on some of these pages. Some I've seen even have like dark pink background with light pink text. It's like, "for those running my hardware only" sites.
      My System SpecsSystem Spec

  3. #3


    Portsmouth Hants
    Posts : 772
    Windows 8.1 Pro with Media Center


    The BBC Astronomical theme was justified IMO - black space with stars, and clearly legible white text.

    Some folks have a "gothic" mindset, and others are just plain punks, of whom, the more outgoing want to stretch your perception with "dayglo" green, orange and purple, etc., on black, or another glaring contrast. Accept their world, or leave them alone, I think they are saying to you.

    The more conservative of us might want white woodwork and magnolia walls, we are told.

    Then again, you can configure your browser to give you a much different view than the webpage author intended.

    What I would like is a webpage that reflected the viewing area on the device that displays it, without bothering with the color.

    Webpages should be widescreen and multipage, rather than long and scrollable. They should detect the display and fill it accordingly. Instead, I see a lot of dead space and an incessant need to move down or up the page to follow the meaning.
      My System SpecsSystem Spec

  4. #4


    Adelaide
    Posts : 1,338
    Windows 7 Ultimate SP1 (64 bit), Linux Mint 17.1 MATE (64 bit)

    Design Issue


    Quote Originally Posted by jimbo45 View Post
    Hi there
    Seems an increasing number of web sites have their background colour in BLACK - this is not a very good choice for large numbers of people - especially if combined with things like PURPLE or ORANGE text.

    If you must use a black background at least give the user some choice of alternative "skin" or "style" - in any case the whole "Black" thingey reminds me of some geeky teenagers Gaming screens!!!.

    Even the BBC is at it now. !!!!
    So what colour should designers use?
    Just look at Metro with its blinding white backgrounds and light grey text.

    IMO, black provides good contrast with a large number of other colours.
    Obviously it works better with light text colours (just as white works better with dark text colours).

    Click image for larger version

    I think a lot of these combos could work for banners/headings, but they would be horrible to use for the remainder (i.e. majority) of the text.
    Older people need larger text with stronger contrasts, for sites to be comfortable to read (at least I do).

    Quote Originally Posted by MilesAhead View Post
    I agree with you on some of these pages. Some I've seen even have like dark pink background with light pink text. It's like, "for those running my hardware only" sites.
    The real problem is designers obviously don't even check their work, otherwise you wouldn't get unreadable colour combos.

    I've seen sites, which had red backgrounds and light grey writing (or vice versa).
    They were unreadable.

    Quote Originally Posted by fafhrd View Post
    The BBC Astronomical theme was justified IMO - black space with stars, and clearly legible white text.
    Agreed.
    A space background for a space site.

    Quote Originally Posted by fafhrd View Post
    Webpages should be widescreen and multipage, rather than long and scrollable.
    Agreed.

    Quote Originally Posted by fafhrd View Post
    They should detect the display and fill it accordingly. Instead, I see a lot of dead space and an incessant need to move down or up the page to follow the meaning.
    IMO, the problem is that everyone is designing their web pages (and many programs now) for phones/tablets/W8.
    They base their page designs/sizes on the worst possible examples (i.e. 320x240 iPod displays).

    It takes extra time and effort to have auto-compositing sites.
    It's much easy to select the lowest common denominator and design for that.
      My System SpecsSystem Spec

  5. #5


    Posts : 2,130
    Windows 8.0 x64


    The real problem is designers obviously don't even check their work, otherwise you wouldn't get unreadable colour combos.
    Not even neglect. I've posted to sites noting that it's almost impossible to participate due to the text/background lack of contrast. The owner of the site was well aware of it. The attitude was "shows fine on my flatscreen." Like too bad Chad.
      My System SpecsSystem Spec

  6. #6


    Posts : 2,130
    Windows 8.0 x64


    Quote Originally Posted by fafhrd View Post
    Webpages should be widescreen and multipage, rather than long and scrollable. They should detect the display and fill it accordingly. Instead, I see a lot of dead space and an incessant need to move down or up the page to follow the meaning.
    Just from doing my own page it seemed as if the only way to scroll page content without scrolling the navigation pane or page header without resorting to the deprecated Frames was to make them fixed. Perhaps scripting dynamic pages it's possible. But it seems like the fly in the oinment is that the whole thing is a markup publishing scheme with scripting tacked on as fig leaf. People who do it well for a living may feel otherwise. As I say, my experience is quite limited. It does feel like the whole scheme should be rethought though. It's getting old.
      My System SpecsSystem Spec

  7. #7


    Adelaide
    Posts : 1,338
    Windows 7 Ultimate SP1 (64 bit), Linux Mint 17.1 MATE (64 bit)

    CSS overflow Property


    Quote Originally Posted by MilesAhead View Post
    Not even neglect. I've posted to sites noting that it's almost impossible to participate due to the text/background lack of contrast. The owner of the site was well aware of it. The attitude was "shows fine on my flatscreen." Like too bad Chad.
    That joker is probably wondering why people only visit his site once and then never return.


    Quote Originally Posted by MilesAhead View Post
    Just from doing my own page it seemed as if the only way to scroll page content without scrolling the navigation pane or page header without resorting to the deprecated Frames was to make them fixed.
    You can add scrolling by adding the CSS overflow property to the appropriate elements in your CSS files.
    CSS overflow property
    Last edited by lehnerus2000; 26 Nov 2013 at 20:08. Reason: Quote Added, Syntax
      My System SpecsSystem Spec

  8. #8


    Posts : 2,130
    Windows 8.0 x64


    You can add scrolling adding the CSS overflow property to the appropriate elements in your CSS files.
    Thanks for the info. It's been so long since I worked out that problem that I forget the particulars. I see that I did use scroll in another .css file for the site. So I was aware of it. I just can't recall why I did it the way I did it except it was suggested on a web programming forum and it worked. You guys earn your keep. To me that kind of programming is extremely frustrating. But straight ahead coding can be a hair ripper too I suppose.
      My System SpecsSystem Spec

  9. #9


    Adelaide
    Posts : 1,338
    Windows 7 Ultimate SP1 (64 bit), Linux Mint 17.1 MATE (64 bit)


    Quote Originally Posted by MilesAhead View Post
    Thanks for the info. It's been so long since I worked out that problem that I forget the particulars. I see that I did use scroll in another .css file for the site. So I was aware of it. I just can't recall why I did it the way I did it except it was suggested on a web programming forum and it worked. You guys earn your keep.
    I'm currently studying Web Design (I don't work in that area).

    I happened to use that CSS overflow property a couple of days ago (overflow-y: hidden;).
    For some reason, my page had twice the height it was supposed to have (despite specifying the exact heights of all of the divs).

    Quote Originally Posted by MilesAhead View Post
    To me that kind of programming is extremely frustrating. But straight ahead coding can be a hair ripper too I suppose.
    Agreed.

    Layouts using divs are the bane of my existence.
    I waste a lot of time battling with divs (getting them to line up correctly is a pain).

    It doesn't help when browsers include their own hidden styles (e.g. padding).
    You can only find them by battling with inspection tools.

    It's been ~20 years since I last did a lot of programming, so It is a bit of a struggle.
    I feel sorry for the "young'uns", who have (apparently) never done any programming.

    Combining HTML, CSS, Flash, JavaScript and PHP is a lot of "fun".
    Last edited by lehnerus2000; 26 Nov 2013 at 20:10. Reason: Layout
      My System SpecsSystem Spec

  10. #10


    Posts : 2,130
    Windows 8.0 x64


    I happened to use that CSS overflow property a couple of days ago
    I'm not certain. But my guess is that I relied on the contents of the body wrapping rather than having a horizontal scrollbar. Some browsers like FF the horizontal scrollbar doesn't work right if you customize to get more than one row of bookmark toolbar. It probably messed up the wrap. At least that's my story and I'm sticking to it.

    It's been ~20 years since I last did a lot of programming, so It is a bit of a struggle.
    I feel sorry for the "young'uns", who have (apparently) never done any programming.

    Combining HTML, CSS, Flash, JavaScript and PHP is a lot of "fun".
    I've been programming PCs since 1986. But I haven't made a living at it other than a few short gigs and some magazine articles in mags now dead and gone. Now and then I'll do something in C++ if I think there's a real bonus to it such as performance. But mostly I do toy utilities in AHK. They're fun because often you can do things using it that would be a real struggle with compiled tools and API calls. Plus the basic function can usually be done in a day. Fortunately Windows always lacks some hotkey providing the incentive to roll my own feature.
      My System SpecsSystem Spec

Page 1 of 2 12 LastLast
Related Threads
New here b/c no other forums helped me. so, black out navigation pane in control panels not file explorers, but file transfer windows are black out too, and backgrounds of control panels are in danger too:( PROBLEM IS NOT CONTRAST SETTINGS! Please read the posts on the other forums before...
Hi, I think the title should be pretty explanatory. Essentially, I have made a background with Adobe Illustrator and Photoshop. I have saved the file as PNG with Transparency. Windows Photoviewer shows the transparency but when I set it as my desktop wallpaper this transparency suddenly no...
There's this bugcheck that forces me to refresh install my W8 installation. Everything was normal until I restarted my system and it takes longer time to boot. The screen stays black after boot logo disappearing, until I saw a BSOD. Attached below is last and the only dump file generated while...
Hello All, I am new to this forum and i hope i posted my question in the correct section. I am having issue setting up 2 different solid color backgrounds on a dual monitors setup. I can do the different background pictures on different monitor but not solid color. Does anyone know how to...
I have this weird issues where my games and videos tiles have just "blanked out" if you will, (see screenshot attached).. when i try to click the link it takes me to the store yet when i go to watch a video if i right click on the designated file and open with the metro video app it does work until...
Solved app backgrounds in Customization
hi i had a background added to my apps so for example i click on my photo app i have the picture in the background. i have no idea how to get rid of it and it was a stupid picture, just for experimental purpose :(. How do i remove the house from the back 11748
Hi there why is it Ms's designs these days couldn't be WORSE if they tried to do the most horrible design they wanted to. Messing about with the Spider Solitaire application -- apart from the full screen thingy (real annoyance in most cases) it seems that the whole game seems linked to some...
Eight Forums Android App Eight Forums IOS App Follow us on Facebook