After nearly a decade of sitting on a shelf, after two false starts and the passing of two of the people that were supposed to help me with this... I've got the bloody site up and running! http://www.cutcodedown.com Custom "Poor Man's" CMS since I don't need no goofy WYSIWYG nonsense, I used disqus as a shortcut to get commenting working, FINALLY got the blasted post counts to work on the home page... ... and the whole thing is running atop PHP 7 using a good deal of functionality that didn't even exist in PHP 5. I believe I've dotted all the t's and crossed all the i's in terms of accessibility, usability, and general design. The menu alignment is off for now as there are three more subsections that should get added by end of month. But any opinions, ideas and feedback are always welcome. I'm trying to use the "flat plus" mix of skeuo and flat design nnGroup talked about in a recent article... since pure flat greatly compromises usability, while Skeuomorphism can distract from what's important on the page -- content. Oh, and @KewL, that new version of the logo work better on high dpi devices? I'm using a lot of apple-style double-resolution images with background-size, using media queries to apply them with a fallback 'normal' resolution image for IE8/earlier. There is more stuff I need to implement, I'm still waiting for Google approval to tie it into G+, and I'm going to have like/share for both G+ and FB on there despite the scripttard code bloat that goes with them. MY stuff is small and fast, so bloating it with their stuff won't be as disastrous. Laughably, I was writing the part in "what's wrong with your website" about how webfonts compromise usability, the same time I was adding the "permanent marker" font to the site. Do what I say, not what I do!
Site almost awesome but in look wise it appear as a classic design which is generally use in directory site. so please change your design if possible and add modern look with best color combination.
The site loads fast on my slow connection. I think the name CuteCutDown.com would be more appropriate.
All I can say is YOU, USING ADSENSE???????? 1. Why are your links and text centered on the left- and right-hand side? Especially the text in the bottom box on the left. Kind of amateurish. 2. I agree adding FB, G+, Twitter sharing buttons as opposed to the "visit us on FB" button is a good idea. Why would I want to visit you on FB when I already know what your site/service is all about. 3. The buttons at the top reek of 1998. You know those types of buttons: 4. Misspelled incompetent here: http://www.cutcodedown.com/articles/ 5. You have this link that says: PHP 7.0.0 Released, and we're running it here! My question would be: Does your site even need to be written in PHP to run? I don't see the significance of pointing that out.
Unfortunately, "Modern look" is very vague, and means different things to different people. If there is a "classic look" to it, it's that I followed accessibility guides like the WCAG, functionality and usability guides like those to be found in nnGroup's articles, and interface design guides from back in the late 1990's that were based on actual user research instead of some artist pulling something out of their ass and calling it "design". Pre-launch I had a few friends who are under the delusion they are designers propose layouts and colour schemes, and not one of them passed WCAG AA, much less AAA. This passes AAA and has proper "balance" of elements. If that makes it dated, so be it. Though if you have some direct changes or proposals on what to change other than "make it modern" I'd love to hear it. A LOT of people seem to think modern means "make everything flat to the point you can't tell what anything does" -- and I'm not going there. NNGroup has a really good pair of articles on that subject: http://www.nngroup.com/articles/flat-design/ http://www.nngroup.com/articles/flat-design-long-exposure/ That's good to hear -- I was worried the advertising and disqus stuff would disastrousyl impact that, though I imagine like anyoene on a slow connect you are running adblock or something similar. It's a laugh that the advertising scripttardery Google uses ALONE is twice the size of the largest page on the site. :/ But both the adverts and disqus are async loaded and don' populate until after onload, meaning the page should be up and useful in a quarter of a second on a average connection given the size and filecounts of the page itself -- the discussions and adverts taking another 3 to 4 seconds not being a big deal if the actual content of the page is already showing and styled... and again that's mostly an issue on firstload as sub-pages will have (or at least should have) cached by then. Part of a statistical experiment actually. 1) want to see if advertisers are still sleazy scumbags that can't be trusted, 2) I've sunk some tendrils into its code transparently to try and track what percentage of my vistors are running an adblock. I was VERY hesitant to put it on there for a variety of reasons. Not the least of which being that between it and disqus it doubled the file count and quintuples the page size... which again is just proof that so many of these off the shelf solutions are bloated and poorly written. I'm actually playing with disqus codebase as I'm seeing if I can perhaps write a leaner version to interface to their servers; only problem is that's a violation of their terms of service so... I really want to use a off-site service though for that as I'm hosting this on a shoestring. Left justified due to the wide looked far, far worse, and it matches the old UX guidelines that are based on usability and functionality, not the art faygelah BS alleged "designers" use today. I was thinking on opening them up wider at about 70EM of screen width to change the alignment to left justify or even outright justified (fill the line width), but that leaves a lot of gaps in the smaller items. (though at that point I might make things like the tags list go to four columns intead of two - though that means switching to axis instead of scope) Some people prefer to get news updates via that route -- same reason I'm also going to be adding RSS feeds to it. Though Twitter is not going to happen; I can't fit a damned thing into their ridiculously useless max post length. Don't understand how/why anyone can, much less would use it. It's just not my bag. I kept trying to leave them flat, (much like the social buttons below) but I kept butting heads with usability and clarity; much less balance. Hot spot tracking was showing way too much trend to the bottom-left instead of center with them styled simpler. I'm still playing with that though. I'm thinking just dropping the inset box-shadow and going with a lighter background is all it needs -- but I'm worried about that breaking WCAG AAA contrasts. I still have to play with it. DOH, great word to misspell! Means it was also wrong in the <title> tag for that page. Fixed. PHP is being used to handle the user friendly URI's, the entire templating system (since PHP IS a templating system, hence why running crap like smarty atop it is idioitic nonsense), creation and tracking of tags, It's a pretty significant part of the site behind the scenes... As a news item originally I had a blog entry about PHP 7 that I took down and am now editing to be a bit more interesting. I linked it to the official announcement about 7 as a placeholder for now. PHP 7 being final is pretty big news, and really that's what that spot is going to be for, linking to articles about what's new in the industry or new articles/features on the site. (I really need to get that blog entry punched up/corrected and live again -- spelling in it was atrocious as I typed it on the laptop from a hospital bed) Though saying "yes, this site is on PHP 7" is me flipping a double-bird at all the people who are still sleazing by on 1998 style PHP. There are SO many people out there right now saying it makes "too many unneccessary changes", "it's so hard to convert to", and "We can't be bothered" it makes me want to puke. Particularly when all of those claims seem to be 100% BS if you bothered paying attention the past DECADE on what they've been telling us is coming. Hence why 99% of the code I've written the past six or so years works unmodified in 7, while most every forum software in circulation falls apart miserably. ... another reason I asked in one of my blog posts and why I'm gonna ask this again here: Anyone have a suggestion on a forum software that DOESN'T inhale upon the proverbial equine of short stature? Xenforo, UBB and vBull are bloated crap that would take me a year to drag the markup alone kicking and screaming out of the 1990's. phpBB wouldn't know accessibility if it stripped naked, painted itself purple and hopped up on a table to sing "Oh look at what a dynamic font I am", much less I still have zero trust for them since the whole nevernosanity incident... My old favorite SMF has gone and shit their bed by crapping all over their software with jQuery while STILL failing to drag their markup out of HTML 3.2 land, myBB's templating system leaves me wanting to punch someone in the face, and most everything else I've looked at leaves me wondering "Do these people even know what a forums is?" I'm probably going to end up giving phpBB another look to see just how much work it would be to fix it. It's been over 14 years since that bridge of trust was burned, let's see if they rebuilt it yet. I'm not sure I've the health or the time to homebrew an answer, though that increasingly appears to be the only correct answer. All in all -- good points all around. I'll keep them in mind pressing forward.
You know, I think I need to write a blog entry or article on the site about caching models and page load speeds; particularly how I've managed to incorporate disqus and adsense without impacting the first-load render time of the content. It's what their scripts are MEANT to do but rarely are able to with the other stuff people put onto their sites.
Actually, you're right when it comes to the "for others" text area. The other sections look really crappy left or right aligned, but that one part in the "for others" area really sucked... It didn't look too bad originally, but I added a lot more text to it prior to launch and that banjaxed it. Amazingly (much to my surprise) justified alignment actually looks pretty good. I'm used to it creating massive gaps as I tend to use long words, but for that area with it's current content? That looks pretty darned good.
Alright, made some changes -- went more flat with the menu buttons but gave them a drop-inset like the social icons below them (placement of which will look better when the other three menu items are in place), added more stuff to the links page, and changed the articles page so the sub-pages of articles indent with a different bullet. I also changed the style on the readmore links to be more flat, but I retained the 1px border for clarity. Again, see that nnGroup article I linked to on how going "too flat" can compromise usability. The articles page will make more sense once there's enough of them (20+) that pagination kicks in, which is when the tags section will start to be useful. On the tags section -- should I axe the table and make that a tag cloud? Is it good to show the numbers or should I not bother? I like knowing how many they are and a proper organizational structure, but I'd be interested in hearing other's opinion on that as I'm not married to it.
Another question: The "featured articles" part -- should I add underscores to the first line to make it clear they go someplace? Right now I get the feeling it reeks of "ambiguous UI" -- I know all the artsy fartsy types have been stripping them off links to make sites useless for ages, and I don't want to go down that road, particularly with NNGroup's articles confirming my suspicions on that. I dunno, is it clear that those are actually links, or should I add the visual queues?
Don't worry about that. It says above: Featured Articles. That's sufficient. Most people will know that the links are clickable. I would however make them the same color. I've never seen the same link to be blue, brown, normal and bold all at the same time.
Sadly most usability studies say they wouldn't... particularly in touch environments where there are no hover states. Yeah, the tagline/fist in the face/insult line in red (odd you're perceiving it as brown) clashes with the theme too much. Was supposed to draw attention, but not at the expense of the actual title. I think I am going to underline the first line, and axe the red.
I would keep the table, it fits with the classic approach that I really like. As for links I am traditionalist. A link should look like a link and stuff that is not a link, should not look like a link. They are too important for usability to be screwed with. That should not surprise you. It is a common symptom of red-green shift color impairment. A condition that 7% of the male population has to one degree or another. With it there is great difficulty seeing the difference between red, brown, and darkgreen, because those who have it see red as much darker than than it is. May do not even know they have the problem and their brain has adjusted, for most things, but web pages are a real problem because of the way color is generated dynamically instead of be static on a fixed surface. There is an article on my site written by a colorblind web develper
Gah, Protanomaly -- You are quite correct that shoudln't have surprised me one blasted bit. I'm fully aware of it and I didn't even consider it. The blue green background tint would have further enhanced the colourshift, which is why I typically restrict myself to a single hue "skew" site-wide. I kind-of figured that since I meet WCAG AAA it wouldn't have had as big an impact, but that's about "can you read it" not "can you perceive it correctly". Runs deeper than that, it's the difference between an emissive and a reflective light source. The majority of things people look at in a day are all reflective, it's what the brain is used to. TV's and monitors are one of the few emissive colour sources we look at apart from the sun, moon and stars, and process entirely differently. Hence why the primary colours for emissive are red, green, and blue, instead of the cyan, magenta, and yellow of reflective pigments. (and not that red, blue, and yellow bull they pack kids heads full of in gradeschool) eB + eG = C eB + eR = M eG + eR = Y eB + eG + eR = W rC + rM = B rC + rY = G rM + rY = R rC + rM + rY = K
LOL. Sounds like total bull to me. But maybe it is not. On the other hand it could be that my laptop "sees" red as brown. Sometimes the dark red on my laptop looks like light-red on my cell phone. I just came up with this color scheme. Does the brown look like red on your device? If not, then everything is fine with my eyes.
Those are all red except MAYBE that last one... and I pass every chromia test for colourblindness; in fact my LACK of colourblindness is why things like colour syntax highlighting is an illegible acid-trip for me. Well, let's do the math on those. Your first set is: #FF0000 -- pure red #E50000 -- also pure red, no green channel #AF0000 -- ALSO pure red, brown is NOT "dark red" Your second post: #A52A2A -- equal balance of green and blue, so that's STILL just red. (though X11 incorrectly calls it brown -- they're full of ***) #691818 - ALSO equal balance of green and blue, so that's STILL just red. #4A2222 - even this one is still just red. BROWN would be where the hue is skewed more towards green. Brown is not dark red or desaturated red. When the dominant colour is red and there's no skew in favor of green or blue, that's RED. See your CGA/EGA/VGA 16 colours: 0x00 #000000 black 0x01 #0000AA dark blue 0x02 #00AA00 dark green 0x03 #00AAAA dark cyan 0x04 #AA0000 dark red 0x05 #AA00AA dark magenta 0x06 #AA5500 brown 0x07 #AAAAAA light grey 0x08 #555555 dark grey 0x09 #5555FF light blue 0x0A #55FF55 light green 0x0B #55FFFF light cyan 0x0C #FF5555 light red 0x0D #FF55FF light magenta 0x0E #FFFF55 yellow 0x0F #FFFFFF white Laughably the signal sent by the CGA card was filtered to create the brown inside the monitor, not on the video card, which is why some monitors would "incorrectly" show color # 0x06 as #AAAA00 yellow-ochre instead. EGA monitors connected to a CGA card did this as the EGA actually had a full 6 bit rgbRGB lines (allowing 64 colours max) instead of the CGA's 4 bit RGBi. Do the math. Brown is not dark red. Nor is it red desaturated by increasing your other two colour components. Though you might be confused by the X11 named colours as their browwn is #A52A2A, which most decidedly is NOT brown and has been complained about over and over by people who study colour and the perception of it. You can tell it's bullshit since on a hue scale "fireBrick" is the same hue. How did the X11 colours end up so screwed up? It's called X11 after X Windows, the *nix Workstation system that xFree86 and x.org are based on. On the original classic hardware They used 5500k monitors instead of the 9500-10000K that is the standard today, so everything was skewed 20% towards green. Ever notice that some older CRT's and even LCD's have a colour option for a 5500-6500 vs 9500-10000 colour set? Yeah, that. ... and it also made it impossible to get a proper white out of those systems. You had to send it pink to get an off-grey. :/ Hence why there's differences in colourspace ranges between yBCrCy, PrBrCr, sRGB (5500k everything is shifted to favor green), wRGB/VGA (10000 aka white is actually white), etc, etc... Hence why you have this formula for sRGB: Y = 0.2126 R + 0.7152 G + 0.0722 B ... and this one for VGA (the luma component of BT.601 YCbCr): Y = 0.299 R + 0.587 G + 0.114 B The latter being the formula used in the VGA specification, Apples' old usability interface guidelines before they went and pissed on usability with OSX, the NTSC standard, and of course the WCAG. The former is closer but not exact to PAL... Which is part of why classic PAL TV recordings look washed out when converted to NTSC without colourspace correction. Thankfully the ITU-R BT.601 and BT.701 standards for standard def and HD have removed that problem, which is why new British shows like the Doctor no longer look as drab as the "Coal overcast" of the 1880's when viewed in America. It's why the named X11 colours were never part of the HTML specification (despite widespread browser support), and why most people will tell you not to trust them or use them. They're based on a outdated monitor standard that nobody outside the "big iron" world really ever used. Gets worse with a lot of cheaper "16.2k colour displays" that are actually 16 bit (4 bits blue, 6 bits green, 5 bits red) that try to trick you with dithering into thinking that they have a deeper colour depth than they do.... where suddenly your off-white #EEEEEE is tinged yellow and colors that should be blue end up purple. Thankfully the LCD's with that problem have mostly left the market and common use.
I really then need to adjust the colors on my monitor. It's lacking something. Thanks for the thorough analysis DS. Still, I wouldn't call (intuitively, not technically) what seems to be brown - red. By the way, you're spelling color as colour. Is it a habit or are you a Canadian?
Worse, New Englander; doesn't help most of my favorite authors spell it that way too. My old man drew dashes through his Z's so as not to confuse them with 2's. Do you have any idea how hard it is for me to not misspell it in CSS? Might not be your monitor, as CobolDino mentioned around 7% of men have a mild case of protanomaly that may not impact day to day, but comes up in strange corner cases like this. Part of why I follow WCAG AAA, even if it didn't look like a 'proper' color to you, you could still at least read it, right?
Not to keep beating the dead horse here. Nothing is wrong with my color perception. I understand that AA5500 is your classic brown. No question about it, but if you go shopping for a wall paint, for instance, you will quickly realize that there are dozens of shades of brown, that will range from almost darker red to your typical brown and dark brown. Same as true for a hair or lipstick color. Hell, the base for any brown color is red, black and yellow. I could rest my case right there. But if someone believes that AA5500 is your classic brown and designs a web page using it here and there, well, I guarantee you your page will look like someone sh*tted on your page here and there too. I call it poopy brown: Any source you go to, even though it may say that A52A2A is red-brown it is universally accepted as brown(ish) not red(dish). I guess it's a matter of semantics, honestly. What you call brown, I call poopy brown. What I call brown is what I use while designing a page (if it requires a touch of brown). What I call red, to you it is probably red-red (bright red, light red, true red, etc): FF0000 or EF0000. Adios amigos. No more brown discussions for me.
Whereas to me, that "red-brown" has no brown to it at all, it's red. It's just as red as X11 Firebrick... Which is a stunning comparison since firebrick is spitting distance numerically and the same ratio of red to non-red. #B22222 is spitting distance from A52A2A, and are the exact same hue. There is NOTHING brown about A52A2A whatsoever when that's RGB(165,42,42) -- there's too much blue in it to qualify as brown. "Colour" is mostly about hue, with saturation being how much colour and lightness drawing the line between base name and bright-name; brown in a RGB colour wheel sits between orange and red; 1/4th the way between red and orange. HSL(255,152,104) is red since the hue is red. Assuming you don't move the hue the only other colour it can qualify as is pink when the lightness breaks 144. Hence the colour wheel and saturation/lightness graph for 255 hue: There is not one single colour in that SL graph: I'd call brown... because the hue is pure red... the light cyan circle on that is around X11's alleged brown. On that chart, do you see anything you'd call brown, because I sure don't; there's red and pink. (though we're treading into the white and gold dress territory). If the hue was 8..36 (on a scale of 0..255 with 85 being pure green and 169 being pure blue), THEN I'd consider it to be brown (with the high intensity being orange) Also, the colour I was using on the page was #CC0000, and that's just red channel. Dark red is NOT brown. Particularly if the ONLY colour component used is, well... red. Didn't even have green or blue involved. But again, this is an old argument that has three sides; print folks, modern "white" display folks, and legacy X11 green shifted folks. Just google "Display Color Temperature" 9300-9500k has always made the most sense in my mind as it is the closest you can get to luma being a straight line -- look at the animation on the Wikipedia page: https://en.wikipedia.org/wiki/Color_temperature the 6500 low end always looks muddy to me.