Hello, I have a new website for my cartoon services. (I say new, it's been in progress since may but only just finished it) This one is specific to mascot design. My main competitors are to be Fastcharacters and SOSfactory. The key things I would like reviewed are.. 1) The overall design 2) The speed (I think it might be slow to load) 3) The overall message 4) The pricing 5) If you notice any glitches, typos etc. Please be as brutal, negative, praiseworthy or positive as you need to be. Many thanks in advance. Website address .. http://www.designer-mascots.com
Brutal you say? Ok, here's your Gordon Ramsey / Simon Cowell / Charlie Frattini treatment. The fixed width layout is too big for my netbook and a crappy little stripe on my desktop -- which is why as a rule of thumb fixed width layouts are a steaming pile of failure in modern web design, particularly in the age of responsive layout. The mixing of fixed metric (px) and dynamic fonts results in absurdly undersized text for large font/120dpi users like myself in some places, while in others the layout is broken or text is overlapping from the use of dynamics inside fixed containers and/or with fixed line-heights or broken inheritance. If you've learned about print (which it looks like you have) you've probably been told serif fonts are more legible -- and that's true -- for PRINT. The web is not print, and at anywhere from a third to a twelfth the dot pitch serif fonts are difficult to read in the best of times, making a lot of your text even further illegible. Say it with me -- sans-serif for screen, serif for print. sans-serif for screen, serif for print. Well, unless you're printing at anything under 150dpi. In terms of color contrasts large sections also suffer from legibility issues -- there's a set of guidelines for legible text for the web as found in the WCAG, adopted from the numbers IBM, Apple and Microsoft came up with in a joint research project for emissive luminance calculation (as opposed to the reflective 'for print' numbers most paint programs use for YSL -- again, screen is not print). L = 0.3*R + 0.59*G + 0.11*B The results of background and foreground colors should be within 50% of each-other minimum, and ideally more like 75%... most of your grey on greys fall short of those numbers -- for example the "we create amazing mascot designs" text at #BFBFBF ends up 191, which with white being 255 that's only 25% difference and as such illegible to somewhere in excess of 30% the population. You're using Cufon for fonts which makes me ask "what is this, 2003?". I'm not a fan of web fonts for large sections of text since it's a waste of bandwidth and an accessibility mess with most fonts that are, again, mostly meant for print not screen -- but continuing to use Cufon when CSS3 webfonts are real world deployable is a waste of code, time, effort and a compatibility mess. If you've REALLY got your heart set on some goofy illegible poor rendering font instead of the tried and true system defaults you should be using CSS3. (NOT that they're really CSS3 since it works all the way back to IE 5.5) I hate the giant image banner at the top -- I know they're a fixture and staple of "designer" based websites, that doesn't mean they provide anything useful to the visitor. You might be wanting to show off your art, but a first time visitor is left with more questions than answers from the complete lack of text on the page. To that end you have around seven or eight actual content images and 1.3k of plaintext, so what in blazes do you need 21k of HTML, 210k of javascript, and a whopping 23 separate files for? Makes one wonder what in blazes that ungodly 62k of CSS is even for since even the most complex forum or CMS rarely needs more than half that. Of course, it's a turdpress page so under the hood the markup is GOING to be complete and utter trash with all the asshattery that system basically tries to shove down the skinner's throat - all because the people making skins for WP are too stupid to grasp the point of HTML, point of CSS, or more specifically the "cascading" part of Cascading [/b]Style Sheets. Just as Carlin said "Not every ejaculation deserves a name", I say not every element needs a class on it or a DIV around it. Even accounting for WP's idiocy, the markup is a disaster of pointless bloat, endless wrappers for nothing, outdated methodologies -- though even the first line proudly proclaims how out of date it is. Tranny is for supporting old/outdated/half-assed site building... since it basically means the coding practices are in transition from 1997 to 1998. Clearing breaks, clearing DIV, pointless SPAN, SPAN doing numbered heading tag's job, DIV doing paragraphs job, static jquery nonsense inlined in the markup -- it's a laundry list of how not to build a website reeking badly of "Semantics, what's that?". Which of course is why your HTML for the home page alone is two or even three times as much code as it should be. The scripting in particular is bad -- by itself being 40% larger than I would typically allow for an entire page of HTML+CSS+SCRIPTS+IMAGES... and to be brutally frank when you have an ART website where you've got more javascript than you do IMAGES (210k vs. 165k) you're doing it ALL WRONG -- loading up on 'gee ain't it neat' scripting asshattery instead of focusing on what's important, YOUR ART! That's just part of the "content first" approach to web development -- your content is the art so it should be the focus, not the goofy scripted nonsense that makes the site painful to watch load, painful to use, pisses on the very concept of accessibility, and on the whole is the core reason on first load your site took around half a minute to load here. Though some image optimization would help too. Mostly you've got cartoon style art here, which means a general lack of gradients... You've saved images as bandwidth chewing alpha transparency crap when pre-compositing and color reduction could both be used with ZERO noticeable effect on appearance while cutting the file sizes by a third. Consider your 33.5k squirrel1.png: Sure it auto-matches to the background, but on your page it isn't using that for any good purpose -- making that alpha channel a good 25% of the file size that's not doing ANYTHING useful. It's cell shaded style so while Photoshop might 'think' it needs 3500+ colors, in reality you're barely using 128 of them... remove the transparency nonsense and drop it to 128 colors, and it is gutted down to a 8.6k file... almost a 4:1 reduction in size. If you can tell those apart you need to stop pressing your nose 2" from the display. Using a method called "Close enough anti-aliasing" you can even have the transparency if you 'really' need it, as single color instead of alpha without a major effect on the file size: Close enough so as to make no nevermind, still around 8.6k Though to get the file that small you'll have to use a third party png optimizer or something like Paint Shop Pro or the GIMP, since Adobe wouldn't know a optimized for web use file from the hole in their software DVD's -- even if it stripped naked, painted itself purple and hopped up on a table at the local pie shop to sing "Oh look at what a big encoder I am!" Apply said techniques to the eight or so images present, gut out the javascript for nothing bloat, clean up the markup, and there's NO legitimate reason you couldn't be delivering that same page in half the bandwidth and a third the handshakes... turning that half a minute first-load into a second or two. So basically, it needs a LOT of work.
Wow, Thank you for the very in-depth analysis of my site there. I do very much appreciate the time you took to write that out. You have an apparent knowledge of design and programming that goes beyond my knowledge and capabilities. I'm just a cartoonist after all. Whilst you make some very competent points (and I'm not disagreeing with you) I doubt my average consumer will look that in-depth at the site as a whole. I don't think they will look at it and conclude 'well the grey colors fall short of being satisfactory by 25%, therefore I'm not going to order a mascot'. Something more like, 'the header of the page doesn't grab my attention enough to make me want to look at the site anymore and see what it's about' is probably more what I'm after. I probably should have stated that I was after a more customer orientated point of view. Rather than a web designer orientated point of view. Moreover, it seems your analysis sums-up only main page. Did you consider the rest of the content? Thanks again.
My 2 cents worth: 1) I think the header is too plain for my liking. 2) I think the price tag should not be shown on top - might turn people off 3) The site was loaded quite slowly on my computer 4) I don't like the placements of the 2 "read more's"
No, but they might go "I can't actually read this" -- they won't know why they can't read it, that's the technical explanation of the reaction. That's the real concern is much of it is illegible -- and there are rules and guidelines for making sure the number of people that happens to are kept to a minimum. I didn't think the rest of it was working yet -- thought it was a demo page because the menu items I clicked on just took me to the same page... So you've got some redundancies in there too... and the menu seems to be broken and much of the page falls apart scripting off. .. since I browse with scripting disabled as a matter of habit. So do a lot of people -- see most people smart enough to figure out how to use Opera, or the people who download the noScript plugins for Firefox and Chrome. (which adds per site script blocking). Though right now your site appears to be down... as in the server isn't responding to requests.
My opinion: 1: Its very slow indeed. After +-10 sec waiting and some page refreshes its finally there (loading from The Netherlands) 2: The background of the last sub menu item looks like a bug. (different color) 3: I don't like the banner. The hover is annoying and because of the price tag image, it looks like an advertising banner. 4: There is far too much text at the "Read More section" of the banner. 5. The menu looks a bit messy.