Web designers - Please stop using BLACK backgrounds

jimbo45

New Member
VIP Member
Guru
Messages
4,373
Location
Hafnarfjörður IS
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
 

Attachments

  • mars.png
    mars.png
    146.5 KB · Views: 69

My Computer

System One

  • OS
    Linux Centos 7, W8.1, W7, W2K3 Server W10
    Computer type
    PC/Desktop
    Monitor(s) Displays
    1 X LG 40 inch TV
    Hard Drives
    SSD's * 3 (Samsung 840 series) 250 GB
    2 X 3 TB sata
    5 X 1 TB sata
    Internet Speed
    0.12 GB/s (120Mb/s)
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 Computer

System One

  • OS
    Windows 8.0 x64
    Computer type
    Laptop
    System Manufacturer/Model
    Toshiba Satelite C55D-A Laptop
    CPU
    AMD EI 1200
    Memory
    4 gb DDR3
    Graphics Card(s)
    Raedon 340 MB dedicated Ram
    Monitor(s) Displays
    Built in
    Screen Resolution
    1366 x 768
    Hard Drives
    640 GB (spinner) Sata II
    Keyboard
    Built in
    Mouse
    Touch pad
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 Computer

System One

  • OS
    Windows 8.1 Pro with Media Center
    Computer type
    PC/Desktop
    System Manufacturer/Model
    HP COMPAQ Presario CQ57
    CPU
    AMD E- 300 APU with Radion HD Graphics 1.30GHz
    Motherboard
    inbuilt
    Memory
    4GB
    Graphics Card(s)
    ATI
    Sound Card
    High Definition Audio on-board
    Monitor(s) Displays
    notebook
    Screen Resolution
    1366x768
    Hard Drives
    Seagate ST9500325AS
    Google drive 15GB
    Skydrive 25GB
    BT Cloud
    PSU
    external 20v
    Case
    Laptop
    Cooling
    pretty good
    Keyboard
    inbuilt
    Mouse
    touchpad
    Internet Speed
    BT Infinity Unlimited - 80 up 20 down =70/16 really
    Browser
    Chrome Canary usually
    Antivirus
    Windows Defender and Malwarebytes
    Other Info
    no Start menu modifications
    Upgraded with no issues to 8.0 and to 8.1
Design Issue

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).

Colour Combos.png

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). :(

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.

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

Agreed.
A space background for a space site.

Webpages should be widescreen and multipage, rather than long and scrollable.

Agreed.

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 Computer

System One

  • OS
    Windows 7 Ultimate SP1 (64 bit), Linux Mint 18.3 MATE (64 bit)
    Computer type
    PC/Desktop
    System Manufacturer/Model
    n/a
    CPU
    AMD Phenom II x6 1055T, 2.8 GHz
    Motherboard
    ASRock 880GMH-LE/USB3
    Memory
    8GB DDR3 1333 G-Skill Ares F3-1333C9D-8GAO (4GB x 2)
    Graphics Card(s)
    ATI Radeon HD6450
    Sound Card
    Realtek?
    Monitor(s) Displays
    Samsung S23B350
    Screen Resolution
    1920x1080
    Hard Drives
    Western Digital 1.5 TB (SATA), Western Digital 2 TB (SATA), Western Digital 3 TB (SATA)
    Case
    Tower
    Mouse
    Wired Optical
    Other Info
    Linux Mint 16 MATE (64 bit) replaced with Linux Mint 17 MATE (64 bit) - 2014-05-17
    Linux Mint 14 MATE (64 bit) replaced with Linux Mint 16 MATE (64 bit) - 2013-11-13
    Ubuntu 10.04 (64 bit) replaced with Linux Mint 14 MATE (64 bit) - 2013-01-14
    RAM & Graphics Card Upgraded - 2013-01-13
    Monitor Upgraded - 2012-04-20
    System Upgraded - 2011-05-21, 2010-07-14
    HDD Upgraded - 2010-08-11, 2011-08-24,
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 Computer

System One

  • OS
    Windows 8.0 x64
    Computer type
    Laptop
    System Manufacturer/Model
    Toshiba Satelite C55D-A Laptop
    CPU
    AMD EI 1200
    Memory
    4 gb DDR3
    Graphics Card(s)
    Raedon 340 MB dedicated Ram
    Monitor(s) Displays
    Built in
    Screen Resolution
    1366 x 768
    Hard Drives
    640 GB (spinner) Sata II
    Keyboard
    Built in
    Mouse
    Touch pad
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 Computer

System One

  • OS
    Windows 8.0 x64
    Computer type
    Laptop
    System Manufacturer/Model
    Toshiba Satelite C55D-A Laptop
    CPU
    AMD EI 1200
    Memory
    4 gb DDR3
    Graphics Card(s)
    Raedon 340 MB dedicated Ram
    Monitor(s) Displays
    Built in
    Screen Resolution
    1366 x 768
    Hard Drives
    640 GB (spinner) Sata II
    Keyboard
    Built in
    Mouse
    Touch pad
CSS overflow Property

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.
:doh:

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:

My Computer

System One

  • OS
    Windows 7 Ultimate SP1 (64 bit), Linux Mint 18.3 MATE (64 bit)
    Computer type
    PC/Desktop
    System Manufacturer/Model
    n/a
    CPU
    AMD Phenom II x6 1055T, 2.8 GHz
    Motherboard
    ASRock 880GMH-LE/USB3
    Memory
    8GB DDR3 1333 G-Skill Ares F3-1333C9D-8GAO (4GB x 2)
    Graphics Card(s)
    ATI Radeon HD6450
    Sound Card
    Realtek?
    Monitor(s) Displays
    Samsung S23B350
    Screen Resolution
    1920x1080
    Hard Drives
    Western Digital 1.5 TB (SATA), Western Digital 2 TB (SATA), Western Digital 3 TB (SATA)
    Case
    Tower
    Mouse
    Wired Optical
    Other Info
    Linux Mint 16 MATE (64 bit) replaced with Linux Mint 17 MATE (64 bit) - 2014-05-17
    Linux Mint 14 MATE (64 bit) replaced with Linux Mint 16 MATE (64 bit) - 2013-11-13
    Ubuntu 10.04 (64 bit) replaced with Linux Mint 14 MATE (64 bit) - 2013-01-14
    RAM & Graphics Card Upgraded - 2013-01-13
    Monitor Upgraded - 2012-04-20
    System Upgraded - 2011-05-21, 2010-07-14
    HDD Upgraded - 2010-08-11, 2011-08-24,
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 Computer

System One

  • OS
    Windows 8.0 x64
    Computer type
    Laptop
    System Manufacturer/Model
    Toshiba Satelite C55D-A Laptop
    CPU
    AMD EI 1200
    Memory
    4 gb DDR3
    Graphics Card(s)
    Raedon 340 MB dedicated Ram
    Monitor(s) Displays
    Built in
    Screen Resolution
    1366 x 768
    Hard Drives
    640 GB (spinner) Sata II
    Keyboard
    Built in
    Mouse
    Touch pad
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).

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. :mad:

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". :sick:
 
Last edited:

My Computer

System One

  • OS
    Windows 7 Ultimate SP1 (64 bit), Linux Mint 18.3 MATE (64 bit)
    Computer type
    PC/Desktop
    System Manufacturer/Model
    n/a
    CPU
    AMD Phenom II x6 1055T, 2.8 GHz
    Motherboard
    ASRock 880GMH-LE/USB3
    Memory
    8GB DDR3 1333 G-Skill Ares F3-1333C9D-8GAO (4GB x 2)
    Graphics Card(s)
    ATI Radeon HD6450
    Sound Card
    Realtek?
    Monitor(s) Displays
    Samsung S23B350
    Screen Resolution
    1920x1080
    Hard Drives
    Western Digital 1.5 TB (SATA), Western Digital 2 TB (SATA), Western Digital 3 TB (SATA)
    Case
    Tower
    Mouse
    Wired Optical
    Other Info
    Linux Mint 16 MATE (64 bit) replaced with Linux Mint 17 MATE (64 bit) - 2014-05-17
    Linux Mint 14 MATE (64 bit) replaced with Linux Mint 16 MATE (64 bit) - 2013-11-13
    Ubuntu 10.04 (64 bit) replaced with Linux Mint 14 MATE (64 bit) - 2013-01-14
    RAM & Graphics Card Upgraded - 2013-01-13
    Monitor Upgraded - 2012-04-20
    System Upgraded - 2011-05-21, 2010-07-14
    HDD Upgraded - 2010-08-11, 2011-08-24,
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 Computer

System One

  • OS
    Windows 8.0 x64
    Computer type
    Laptop
    System Manufacturer/Model
    Toshiba Satelite C55D-A Laptop
    CPU
    AMD EI 1200
    Memory
    4 gb DDR3
    Graphics Card(s)
    Raedon 340 MB dedicated Ram
    Monitor(s) Displays
    Built in
    Screen Resolution
    1366 x 768
    Hard Drives
    640 GB (spinner) Sata II
    Keyboard
    Built in
    Mouse
    Touch pad
Yeah odd backgrounds, font colors can be a pain. I use custom user css styles on my browser for pages such as this, but I can understand your pain if you can't.

But the worst for me is the use of plugins for absolutely no reason whatsoever. Why the hell does a PC manufacturer site have to use flash in its intro page without anyway to bypass it for example ? This is more and more frequent. I can understand their use for websites that demand interactivity but any professional one where visitors only browse to get information/downloads should avoid plugins or at least provide a simpler alternative link. I don't want cute or pretty, I want functional and fast. Guess I must be the only one.

Another annoyance is the use of HTML5 video/audio that autoplay automatically and can't be disabled in many browsers, since they aren't considered plugin content and bypass plugin-blocking (I've tried ff/opera and ie 8/9, not sure about others). I hate having anything start playing without my autorization.
 

My Computer

System One

  • OS
    Windows 8.1 (x64)
    Computer type
    PC/Desktop
Yeah odd backgrounds, font colors can be a pain. I use custom user css styles on my browser for pages such as this, but I can understand your pain if you can't.

But the worst for me is the use of plugins for absolutely no reason whatsoever. Why the hell does a PC manufacturer site have to use flash in its intro page without anyway to bypass it for example ? This is more and more frequent. I can understand their use for websites that demand interactivity but any professional one where visitors only browse to get information/downloads should avoid plugins or at least provide a simpler alternative link. I don't want cute or pretty, I want functional and fast. Guess I must be the only one.

Another annoyance is the use of HTML5 video/audio that autoplay automatically and can't be disabled in many browsers, since they aren't considered plugin content and bypass plugin-blocking (I've tried ff/opera and ie 8/9, not sure about others). I hate having anything start playing without my autorization.

Agreed. :(

There is too much pointless Flash and JavaScript included on a lot of sites.
As a result, I hate using browsers that don't have script blocking (i.e. FF + NoScript).

Why are so many sites now demanding that I run "googletagservices.com"?
They didn't require it a few months ago.
It doesn't seem to serve any function apart from p****** me off.
 

My Computer

System One

  • OS
    Windows 7 Ultimate SP1 (64 bit), Linux Mint 18.3 MATE (64 bit)
    Computer type
    PC/Desktop
    System Manufacturer/Model
    n/a
    CPU
    AMD Phenom II x6 1055T, 2.8 GHz
    Motherboard
    ASRock 880GMH-LE/USB3
    Memory
    8GB DDR3 1333 G-Skill Ares F3-1333C9D-8GAO (4GB x 2)
    Graphics Card(s)
    ATI Radeon HD6450
    Sound Card
    Realtek?
    Monitor(s) Displays
    Samsung S23B350
    Screen Resolution
    1920x1080
    Hard Drives
    Western Digital 1.5 TB (SATA), Western Digital 2 TB (SATA), Western Digital 3 TB (SATA)
    Case
    Tower
    Mouse
    Wired Optical
    Other Info
    Linux Mint 16 MATE (64 bit) replaced with Linux Mint 17 MATE (64 bit) - 2014-05-17
    Linux Mint 14 MATE (64 bit) replaced with Linux Mint 16 MATE (64 bit) - 2013-11-13
    Ubuntu 10.04 (64 bit) replaced with Linux Mint 14 MATE (64 bit) - 2013-01-14
    RAM & Graphics Card Upgraded - 2013-01-13
    Monitor Upgraded - 2012-04-20
    System Upgraded - 2011-05-21, 2010-07-14
    HDD Upgraded - 2010-08-11, 2011-08-24,
Back
Top