Hi Folks,

 

I'm in the process of going over our corporate website with a view to improving on-page optimisation, layout, design and user experience and I would like your feedback on what you think I should improve or change. Some of my ideas include:

• Restructure Home Page to Better Show Our Services
• Possibly Add a Slider to the Home Page (I know engagement rates with these are generally low)
• Restructure the Course Pages Completely (https://purplegriffon.com/courses/itil-training/itil-foundation-training/itil-foundation)
• Restructure the Events Pages Completely (https://purplegriffon.com/event/2028/itil-foundation)
• Improve & Streamline the Booking Process
• AJAXIFY the Booking Process
• Improve Responsive Elements

I'm also interested in conducting user testing before I go ahead and make any changes.

 

What are your thoughts? What would you change? Thanks.

 

Gaz

Your homepage has a lot of information in it, way too much

 

For the homepage I would simplify, what is the most important information, why are they on your site in the first place, I would remove things like the big "bogoff" sign, I would remove the reviews, most the special offers and only show one or two, I would improve the menu so it does not have so much in it and is cleaner, especially confusing is the fact you have two horizontal menus, needs to look a little less scary. They need to see what you can do for them and what to do next on the homepage and that's it, without so much text, anything else can be put elsewhere. Test your accessibility with your audience, what is it they want to see? I see its a business site but make it a little more personal, lend that connection with your audience to get them to feel they can trust what you teach.

 

Oh look, just found your phone number on your homepage.. why did it take me so long? it does not stand out enough!

 

Why is the site so crowded? that is so off putting, as is row upon row of text, I just look at your text and think "I am not reading that lot"

 

My personal pet peeve is the massive 'everything' why is everything so BIG? are your users blind?

 

Seriously, you need a designer, its not the worse website I have seen by far but for a professional business, especially one that offers your type of services in that trade, its not good, it could be so much better..

Hey Fuzzy Logic,

 

Thanks for your feedback and I tend to agree with most of your points. I appreciate you taking the time to look over things. I'll be making improvements over the course of this week, so I'll report back as and when I change things.

 

Gaz

Fuzzy has already pointed out a lot of good things so I won't cover them

 

Your mobile nav doesnt seem to work.

 

The whole responsiveness doesn't work well at all, items overlap and it just seems to be a hacky way of getting things to fit. I suggest you also design a mobile UI,

 

A random number is being logged out to the consle. console logs cause errors in older versions of IE, they are only needed during development and should be removed after this.

 

A good thing is that you are concatenating and minifying your scripts and css, good job there. That said the weights are pretty large, 170k of css seems huge for a website of fairly simple complexity. So too wuith the JS lloking at the bad file here - plugins is 322 alone. Consider writing your own js rather than using bloated plugins.

Hey Robert,

 

Thanks for the heads up on the mobile menu. I was changing some JS yesterday and inadvertently broke it. It's fixed now.

 

I've removed all logging of console errors, though I do have some JS in there that suppresses/avoids errors in browsers that do not have a console.

 

I've reduced the size of the plugins.min.js file now too.

 

I do need to clean up the CSS, which I'll move on to now, I'll also be going over the responsive bits and bobs too.

 

Cheers for the feedback.

 

Gaz

Hey,

 

Could you give me some examples of where things overlap on mobile at all please? I can see several issues but just want to make sure we're on the same page, so to speak. Thanks.

 

Gaz

 

Fuzzy has already pointed out a lot of good things so I won't cover them

 

Your mobile nav doesnt seem to work.

 

The whole responsiveness doesn't work well at all, items overlap and it just seems to be a hacky way of getting things to fit. I suggest you also design a mobile UI,

 

A random number is being logged out to the consle. console logs cause errors in older versions of IE, they are only needed during development and should be removed after this.

 

A good thing is that you are concatenating and minifying your scripts and css, good job there. That said the weights are pretty large, 170k of css seems huge for a website of fairly simple complexity. So too wuith the JS lloking at the bad file here - plugins is 322 alone. Consider writing your own js rather than using bloated plugins.

Thanks for the responses guys. I'm slowly improving the layout and design. Let me know your thoughts. I have a few more bits to add to the home page but it's getting there now.

 

https://purplegriffon.com/ (CTRL + R or CMD + R)

I'm pretty busy right now so will make this brief, firstly it's looking much cleaner now good job.

 

The carousel you have, the text should be actual text and not part of the image, think SEO, screenreaders etc. Also content is severely lacking in mobile, the carousel should still be there,

Here's an example of a banner that works well at all screen sizes that I made a few months ago. http://cajsas-kok.se/

 

 

Your mobile nav now works, but why does the dropdown appear so far down the page? this won't be visible to mobile users. This is how I tackled the problem of multiple tiers of navigation in mobile: http://bartenderbolaget.se/ I've also written a blogpost about this: http://rbrtsmith.com/2014/12/a-more-robust-dynamic-navigation-system/

 

 

 

I'm sure the others can give you further feedback on things I've missed.

Edited January 29, 201511 yr by rbrtsmith

Ok, its moving

 

Remove the shadows around the banner, put some icons to course types under it and add a big "search for your course" search bar under all that those are my suggestions so that first they see who you are, then what you can do for them and then search for the course they want (call to action)

 

also the banner seems a little low to me, maybe take everything, including the logo and phone number up a bit

 

Edit: just looked again, its still too much and too large.. simplify!

Thanks again folks.

 

Robert

 

The slider works well at mobile screen sizes but I feel it's not very useful on smaller resolutions. I will be converting the image text to actual text tomorrow also.

 

I've sorted the menu now.

 

Fuzzy

 

I'll try the slider without the shadows but I quite like it. I've updated the page to include info on our main offerings below the slider and I like the idea of a big course filter. So I'll incorporate that tomorrow too. Cheers.

Thanks again folks.

 

Robert

 

The slider works well at mobile screen sizes but I feel it's not very useful on smaller resolutions. I will be converting the image text to actual text tomorrow also.

 

I've sorted the menu now.

 

Fuzzy

 

I'll try the slider without the shadows but I quite like it. I've updated the page to include info on our main offerings below the slider and I like the idea of a big course filter. So I'll incorporate that tomorrow too. Cheers.

 

thats cool, just to let you know though, a key part of design is to remove the useless 'fluff' (referring to the shadows) that means nothing and only keep the things that are essential, design is not about being 'pretty' its about being usable.

I do agree Fuzzy. Completely.

 

 

thats cool, just to let you know though, a key part of design is to remove the useless 'fluff' (referring to the shadows) that means nothing and only keep the things that are essential, design is not about being 'pretty' its about being usable.

 

thats cool, just to let you know though, a key part of design is to remove the useless 'fluff' (referring to the shadows) that means nothing and only keep the things that are essential, design is not about being 'pretty' its about being usable.

 

I'll add that that also removing the code that produces these kind of things that have no real use is a good thing.

Less code means

• Less maintenance
• Lower probability of bugs
• reduced development costs,
• improved performance

Everything on a webpage must serve a purpose, and if it cannot be coded in a sensible way should be removed / modified to allow you to do that. Just because something can be coded does not always mean that it should.

 

Not that a box shadow is hugely complex but once you multiuply many of this kind of fluff you can get the picture

 

By the way the issue still persists on the mobile nav, when you click on training the drop down should appear directly below, the sizing of the dropdown is also too big, and those triangles also too big.

Edited January 29, 201511 yr by rbrtsmith

Yeah, I agree completely with what you are both saying.

Don't dismiss the box-shadows, if used correctly. Google's Material Design makes good use of them. They're not necessarily useless 'fluff'.

Don't dismiss the box-shadows, if used correctly. Google's Material Design makes good use of them. They're not necessarily useless 'fluff'.

 

Designers, especially graphic designers are beginning to realise that graphic design does not operate in the real world, there is no need to operate in a 'real world' way. Shadows, Gradients and anything else created simply for 'realism' effects are now seen as pointless junk that only gets in the way of the content, although if used correctly they can be used, an example of this is how Google uses theirs, they use it to allow a user to see a hover effect thus improving an experience and not trying to enhance a design for 'prettiness' or realist effects. Graphic design is not about being real any more, its about being simple so the content speaks for itself.

 

A great example of this type of work is in Swiss design, as that is where the inspiration for flat design comes from but leading the way for online is apple, just check the differences in their calculator for example

 

 

In my last post the box-shadow was just an example all these things used in the right context can be useful (As demonstrated in the very good articles linked by @Wynn). But they should serve some sort of purpose, like anything else.

Well folks, you're probably getting bored with this now but other than the course search Fuzzy suggested I'm pretty much getting there now and I've made some more adjustments to the nav and fixed up the event and course pages somewhat. Still a bit more to do but we're getting there now.

 

https://purplegriffon.com - Home Page

https://purplegriffon.com/courses/itil-training/itil-foundation-training/itil-foundation - Course Page

https://purplegriffon.com/event/2028/itil-foundation - Events Page

 

I've also improved the load time too and it loads in around 1 second now.

Looks much better than it did, much cleaner, I have some designers opinions about some of it but what you have done is a positive change

 

One issue I have noticed

 

 

Cheers dude. I'll fix that up.

 

Looks much better than it did, much cleaner, I have some designers opinions about some of it but what you have done is a positive change

 

One issue I have noticed

 

screenshot.jpg

Agreed with @@Fuzzy, you've made some substantial improvements there incl the performance stuff. poor performance is my pet hate and it's rare to see websites that consider performance beyond the absolute basics, good job!

Thanks Robert. I've also now written some code to dynamically minify the HTML output too. Just a few more speed optimisations and Pagespeed should indicate a green light. Mainly image optimisation. https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fpurplegriffon.com%2F&tab=desktop

by HTML minification I assume you mean GZIP? You should be using GZIP on all of your assets, if you are using some html minifier pre-gzip then it doesn't serve much purpose really.

 

Also make use of the Chrome Y-slow plugin to get a good overview of page speed.

 

Also on the crome dev tools you can use the timeline tab to view run-time performance. Handy for seeing where javascript or animations could be slowing down your run-time speed of the page. Ideally things should be 60fps or better.

Edited February 2, 201511 yr by rbrtsmith

No mate I mean HTML minification, I'm already using GZIP compression on all of my assets. If you click 'View Page Source' you'll see what I mean. Essentially minifying the HTML output, like you would with CSS and JS, by removing comments, white space, carriage returns etc.

 

I'm not using a HTML minifier, I've written some PHP that does what's required via REGEX when the response is returned to the browser.

Here's an example:

 

Route::filter('minify', function($route, $request, $response)
{
    if (Config::get('minify.html', false) !== false)
    {
        if($response instanceof Illuminate\Http\Response)
        {
            $filters = array(
                // remove HTML comments except IE conditions
                '/<!--(?!\s*(?:\[if [^\]]+]|<!|>))(??!-->).)*-->/s' => '',
                // remove comments in the form /* */
                '/(?<!\S)\/\/\s*[^\r\n]*/' => '',
                // shorten multiple white spaces
                '/>\s{2,}</' => '><',
                // shorten multiple white spaces
                '/\s{2,}/' => ' ',
                // collapse new lines
                '/(\r?\n)/' => '',
            );


            $output = $response->getOriginalContent();
            $output = preg_replace(array_keys($filters), array_values($filters), $output);
            $response->setContent($output);
        }
    }
});

Yeah, I use Y-Slow and Chrome dev tools extensively.

 

by HTML minification I assume you mean GZIP? You should be using GZIP on all of your assets, if you are using some html minifier pre-gzip then it doesn't serve much purpose really.

 

Also make use of the Chrome Y-slow plugin to get a good overview of page speed.

 

Also on the crome dev tools you can use the timeline tab to view run-time performance. Handy for seeing where javascript or animations could be slowing down your run-time speed of the page. Ideally things should be 60fps or better.

I don't get why that HTML minification would help anything. The browser receives the Gzipped html (which is more than minified) then unzips it on the fly. So how would html minification help speed this up?

Hi Robert,

 

Removing things like comments, white space, carriage returns reduces unnecessary extra bytes of information in the document and when combined with GZIP can reduce the document size even further. GZIP alone is great but combined you can get further savings, anywhere from 6% to 17% of the original GZIPPED file in savings. It's something Page Speed recommends, and it does seem to further reduce file sizes.

 

The same applies to CSS and JS. You minify the document and then apply GZIP to it for further reductions.

 

Bare in mind, while the browser receives the GZIPPED document, it then has to uncompress the resource, which includes uncompressing unnecessary data, i.e. white space, comments, carriage returns. It does improve load times.

 

So essentially, you have the original document at X size. You then minify it which reduces it and then you apply GZIP to that reduced size. You then have a two-fold decrease of file size, while reducing the time it takes to uncompress to the original state.

 

Check out this articles on the subject, http://madskristensen.net/post/effects-of-gzipping-vs-minifying-html-files

Edited February 3, 201511 yr by Gareth Daine

Thanks for posting the link Gareth. I shall have a read into this and see for myself what the benefits are =)

 

As for comments I tend to write mine in php, then they don't get sent over the wire. Minifying the html would mean I'd have to re-structure how I work so I will have to see if the benefits make that worthwhile.

 

Gzip itself is such a fantastic compression tool, especially when you get things being reused throughout, like classnames. Which in a sense means mixins in sass that generate repeated code aren't bad at all, as the code at source is not repeated, only the complied version has that repetition, which gzip deals with. I had 50kb of CSS gzipped to just over 10. that's impressive.

No problem.

 

Yeah, GZIP is awesome, and of course, necessary.

 

With regards to the HTML minification, it's pretty easy and can be done on the fly with PHP, something similar to what I posted above. It all depends what you're working with really. As you can see, 6% to 17% is quite a saving.

 

Setting up APC and Varnish is a good way to reduce load times even further too. Something I'm going to do shortly on the PG site.