Please review my business software web site

Hi,

I would be really grateful for feedback on my forecasting software website:

http://www.dataperceptions.co.uk

I'm interested in whether it gives a general impression of professionalism, makes the benefits of the solution clear and generates a stimulus to make a relevant visitor want to learn more about the software and ideally make telephone contact.

Many thanks!

Pete

 

No. You're using all of my screen real-estate for content - reading across the whole of a full HD screen is not pleasant, and should be avoided. Use a max-width on content.
There is too much text, and using two columns of text with that long lines does not improve readability. Also, as I said, way too much text. A "get a sale"-text should have 4-5 short, concise points that would tell the customer what s/he needs to know. Then you can add more information about each point via other means (clickable links, etc.)

On the About page, you have "mission" in quotes. Don't. It looks like you're mocking yourself. Just say "Our Mission" (without any quotes).

The overall look of the page seems a bit dated, which is a little weird, given that it seems the software has taken on MS' ribbon-toolbars, and looks rather good. You might wanna improve the overall design of the site - like for instance the demo-page - huge, ugly icons (which already have an explanation writton on them) with text way too far to the right... It just doesn't look modern, it looks like it was made maybe 5-6 years ago, at best.

 

It would be better if you narrow down the screen

 

Way too congested.

Reminds me of rush hour traffic back when I had a 9-5 job.

As a visitor, I don't know what to do - this makes me very confused.

You want to gently guide the visitor through your site, all the way to the sales page.

 

Thanks for the review. You make good points which I shall try to take on board over the next few days. I've already implemented the 'max-width' suggestion and removed the single quotes round 'mission'.

I think I already knew that there was way too much text on the home page. Implementing 'max-width' has probably made it worse for the time being but at least focusses my mind on cutting the text down to the bear bones. Unfortunately the difficulty is that I wrote the software and find it difficult to avoid being over-detailed in describing it! I agree though - I have to find a way of saying less whilst retaining the essence to make people stay on the site.

The 'overall look' of the page is largely bootstrap inspired so I'm surprised it looks 'dated'. Is it my (just) graphics that give it this impression?

Thanks again for taking the time to write the review. It hurts, but it's helpful!

Pete

 

That wasn't the intention... The kick I needed to try to distil the text back to something which confirms the visitor has found the right page (assuming they're searching for sales forecasting software).

Nevertheless, if the current design helped to make you appreciate escaping the traffic it at least has some benefits, albeit not the intended ones!
Pete

 

It looks a little bit old. and also, the mobile experience isn't that great.

 

Illegible fixed metric fonts send me diving for the zoom -- do NOT declare font sizes on your content in pixels, the WCAG says to use % or EM for a REASON! In that same way your max-width or widths should be in EM so the layout is ELASTIC.

The stupid space-wasting image slider seems filled with images that have jack-all to do with the site's content, one of the reasons I would NEVER waste screen space on that type of thing... the centered content with the left justified logo and menu feels like a rendering error (either centering both or aligning the menu to the right would fix that), the 'hide the menu' thing seems to be relying on scripttardery for no legitimate reason and triggering WAY too soon given how few menu items there are, and the addition of proper headings to divide up the content would aid non-visual and/or non-css navigation (screen readers, braille readers, search engines, legacy browsers).

... and that's just a surface inspection. The 116k of scripttardery and 114k of CSS just screams developer ineptitude, and has me thinking you went and used some form of dumbass frameworks which... Yup, jqueery and bootcrap. Way to piss all over the site; the ONLY thing you can learn from "frameworks" is how NOT to build a website. The only thing about them that can be considered professional grade tools are the people promoting their use.

Popping the bonnet.... Yeah, sadly what I expected from the surface inspection. Take your keywords meta:

<meta content="sales forecast software,s op,collaborative planning,sales forecasting software,forecasting sales,forecasting,financial forecasting,forecasting techniques,business forecasting,sales forecast models,demand forecasting,sales forecasting model,demand forecasting software,strategy and forecasting,strategic forecasting" name="keywords" />

Code (markup):

It's called keywords -- not keysentences, not keyphrases, but keyWORDS -- it should be seven or eight SINGLE WORDS -- the exception being proper names -- that exist inside <body></body> as CDATA, that you want a slight upranking on. Preferably totaling less than 127 characters, with most people suggesting 95 or less. Most of what you have there is guaranteed to get the entire declaration ignored. In fact, the abuse of the tag's purpose and general ignorance of how to use it is WHY so many are convinced that it's ALWAYS ignored. (it isn't)

<body style="max-width:800px;display:block;margin-left:auto;margin-right:auto">

Code (markup):

If you're declaring static style in the markup, you're doing something wrong. Pretty much ANY time you see the <style> tag, something's wrong... 99.99% of the time you see the STYLE="" attribute, the same can be said as that style is being sent to "all" when it might not apply to "all" -- also 800px isn't 800px friendly, and is WAY too tiny a max-width though again, that should be in EM, not PX so it's elastic and auto-adjusts to user preference.

<div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="index.html" style="margin-top: -10px;">Data<br />
                    Perceptions</a>
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse navbar-menubuilder">
                    <ul class="nav navbar-nav navbar-left">

Code (markup):

Endless pointless DIV for nothing, endless pointless classes for nothing, pointless "data" atrributes NOTHING gives a flying purple fish about, hooks for scripting to do CSS' job with that hamburger icon crap -- yup, that's bootcrap alright. Do yourself a favor and find a stick to scrape that off with.

Just to explain, had I written that same section of code:

<div id="top">
	<h1><a href="/">Data Perceptions</a></h1>
	<div id="mainMenu">
		<a href="#mainMenu" class="showMenu"></a>
		<a href="#" class="hideMenu"></a>
		<ul>

Code (markup):

Which is MORE than enough hooks for the appearance you have so far, those two anchors combined with CSS' :target pseudo-class providing ALL teh functionality that bootcraps scripttardery does. Then people wonder why I call it bootcrap?

Laundry list of how NOT to build a website -- inaccessible font sizes, inaccessible layout methodology, and massive code bloat due to the "framework" rubbish that IMHO has no damned business on websites in the first place.

Hence your total 534k in 11 files doing the job of somewhere around ~6 files in 144k or less.

 

I guess you don't like Bootstrap then?

I'm grateful that you've taken the time to review my site and I appreciate some of your suggestions, which are quite helpful.

However, I'm competing for relevant visitors to my site, not in an html/css elegance competition. I want the site to display quickly (which it seems to) and to look as good as it possibly can (I'm trying but know I can do better, which is why I submitted it to public ridicule on this forum).

You may not like frameworks like Bootstrap/JQuery but hey, you might as well criticise the millions of sites that use them - they work, and a few extra bytes of bandwidth here and there is irrelevant.

I will endeavour to incorporate your more constructive criticisms and suggestions. The site has changed / evolved since Monday when you wrote your comments anyway, though I guess there is still some to do and, truthfully, I guess unless I implement everything you say to the letter it will never get your seal!

Thanks for taking the time to contribute. I do accept that if I choose to submit my site I have to accept the ridicule that may accompany it! And I do.

Pete

 

It's gotten a lot better, but I still think you're using too much screen real-estate (the content is too wide) - I would make it so the main div-container is about 60-70% of the total width of the page (granted, I'm viewing this on a full-screen browser on a full-HD-screen) - might wanna adjust that for smaller screens, but when it starts getting to full-HD or more, the content is too wide.
As for the images in the slider - you really need to lose the grey background on the sides. It looks less professional.

 

Hi,
Thanks for revisiting my site and the latest comments. On the slider, do you mean the grey bars on either side? If yes, I will have a go (at removing them)!

I was uncertain whether to go for a maximum width in pixels or percent. I changed it to 1024px earlier in the week and liked it (though the horizontal bar menu stayed left-justified and didn't look great). Today I changed max-width to 80% - which I guess is what you're not liking. I'll have another think... barring any further useful suggestions here!

Thanks again!

Pete

 

What kind of resolution do you have on your monitor? Because it might differ from what I'm seeing, and while we're discussing this, I'm talking about how it looks on a widescreen, full-HD monitor. While a full-HD monitor might benefit from a slightly narrower width, a 1366x768-resolution monitor might not. Hence why we have @media-queries in the CSS.
And yes, I was talking about the grey "bars" on either side.

 

I don't know how many times I've promoted these guys, but they surely should be grateful that I have. I use this tool to see how my sites look in all screen widths (whether computer or mobile). Here's your site:

http://quirktools.com/screenfly/#u=http://www.dataperceptions.co.uk/&w=1024&h=600

And yes, you do have grey bars on wider screens.

 

I'm running at 1920x1200 but tend to have my browser running at half the screen width - i.e. 960*1200, which tends to make most web sites (er.. including mine!) more readable.

I looked at your site at http://www.junkfoodjunkie.no (I think that's yours) and I see you have gone quite narrow on the text column. However, at 960*1200 I have to say that the text is a bit cut off:


It's truly a difficult one to get right given the range of screen widths we have to support. Maybe I should set the max-width back to a number of pixels (1024) rather than a percent, in order to address the issue you've identified?

I think I fixed the issue with grey bars on either side of my carousel yesterday. If they are still showing then either I have a cross-browser issue or you need to clear your browser cache?

Thanks again.

Pete

 

Thanks for the link but I'm sure I've removed the grey bars. Your link (run this morning) shows no grey bars. Maybe you're still seeing the version in your browser cache?
Many thanks for taking the time and trouble to respond - appreciated.
Pete

 

For me the problem remains that you are declaring font sizes in pixels, and widths in percent. BOTH are flawed if you care about people actually using the site. Your fonts should be declared in % or EM, with your widths declared in EM.

EM automatically adjust to the host OS or browser default size -- values that the user can change from the browser and more and more people are using as resolutions climb while screen size does not. (see 4k displays on 20"+ sizes, and 1080p/higher on tablet/smaller).

That's the "fixed metric" fonts I was bitching about earlier. Set your max-width in EM, so it's based on the font-size. STOP declaring font sizes in pixels and use EM, so they ALL auto-scale in size.

Which is why I'd axe the image rotator scriptardery and find some other way of putting images into the page; those aren't exactly design elements compatible with accessible design no matter how many artsy-farsty types crap all over websites with them.

Right now using % for width makes it USELESS on smaller displays as the massive padding doesn't use up enough of the screen.

It's why I was so harsh on the code, all those code issues I was pointing out -- including the pathetically broken bootcrap -- lead to these types of accessibility issues. It's broken methodology that's making a relatively simple page needlessly and pointlessly convoluted and difficult to use... Other code issues like the overstuffed keywords meta with zero content relevance are going to cost you search rankings, whilst the broken/gibberish use of numbered headings can cost you non-visual accessibility AND search rankings.

Like-wise that time-wasting animated fade-in jquery garbage is just a waste of bandwidth... even just simple things like the pointless TITLE tag on the plate image is a waste of bandwidth on nothing. 99.99999% of the time people put TITLE on tags like IMG, they're doing something wrong! In this case the same goes for your anchors since if the text inside the anchor isn't delivering that message, there's something WRONG with the text inside those anchors.

Your subpages also have major design flaws -- the screenshots page for example with the attempt to make equal height boxes. If you declare content boxes as a fixed height, you're guaranteeing they'll be broken -- which is why the text on one of those items is blowing clean out of it's container and overrunning the footer. Inline-block without equal heights for legacy browsers and flex-box for modern browsers would be the most obvious solution on that, though techniques like faux-columns could also be leveraged there.

Basically you've got 14k of markup doing 5k's job, 168k of CSS doing maybe 24k's job, 116k of scripting when apart from the slider that I'd axe I see no legitimate reason to even HAVE scripting on the page (and even then said slider should NOT be taking more than 10k of JS and 1k of CSS to implement), and said slider having massive poorly optimized images I'd not even put on the homepage of a website thanks to their filesize alone.

Since I'm waiting for response back on my current project from another developer, if I have time this afternoon I'll toss together a rewrite of a couple of your pages to show what I mean -- as well as to show you a bit better a way of implementing your template since you've got a bunch of static pages that share like appearance. I do these rewrites from time to time when it's clear the person has good concepts and a grasp of the basics, but just needs a nudge the right direction in methodology.

 

yeah, I know - the site is in the midst of a transformation (new design, and I did some testing on the existing theme, which didn't really work, and I couldn't be arsed fixing it again - the site is a bit dead atm, so I haven't bothered) I should probably remove it from my sig for the time being.

 

Hi, I would have to subtly agree with the comments the design is dated and way to much info. you could do with using toggles and tabs to hide info and you could do with using some images to visually get your message across instead of just screen shots. Look at the number one players in the game and see how they market there products as the saying goes if it aint broke dont fix it. Its working for them so it should work for you.

 

Hmmm, OK - thanks for your comments. I thought my site had a bit of a 'Bootstrap' look and therefore looks reasonably modern but I seem to be in a minority! I hate the 'Blocks' fashion which is just that. I find design tough (I think it shows!) - I'd hoped Bootstrap would help me maintain a good look whilst being able to author the content myself.

If I compare with the number one players in my market I like mine better than some - but perhaps that's inevitable? See http://www.forecastpro.com (which I feel looks worse / more dated) or http://www.vanguardsw.com/sales-forecasting/ (which I accept looks better).

It's been an 18 year work in progress. If you think it's bad now you should have seen what it was like back in the day!
Pete

 

It doesn't diminish the value of your feedback whatsoever.
Cheers!
Pete