I've had my site reviewed, ripped and apart and destroyed in many places but I've taken it on the chin and worked through the observations.

 

Some things I haven't changed where it conflicts with the huge amount of user testing I've done. But you may have different opinion.

 

Here it is: https://aerin.co.uk/

 

No bling, no distractions, no Social Media. It's content that Google and visitors to the site like. It's the reason they landed on it in the first place - because the wanted help and advice.

It's good, looks nice. Two points you might want to know about:
The text 'spambot blocker question' and the question are in a colour that is barely visible against the gray background in the contact form at the side.
On a mobile screen, at the end of your blog articles where you have links to previous blog articles (the ones in light blue writing with a darker blue border) - the two links are displaying at two different heights with the borders overlapping in the middle. If that makes any sense. Can't get a screenshot as it only seems to be there on my phone - sorry.

It takes a lot of courage to ask for opinions on your own sites.

I was a member here for years before I dared to ask for criticism of my own page.

It's not because people here are particularly sadistic (at least not to my knowledge ) but there are some very trained eyes here that will spot imperfections right away.

I am guessing you post this to get constructive criticism rather than flatteries so I am going to focus on what you can improve.

 

(Lack of) brand identity:

It looks to me like you are kind of going for a minimalistic look but I see nothing in your design that visually will make me remember or recognize your "brand". In your content you are talking a lot about simplicity. So why no go for a true stylistic minimalist look. If so you need to:

1. Embrace the negative space (whitespace is a powerful design element)
2. Be more cosistent (why is you favicon green when no other of your elements are green?)
3. A page should contain one or two clearly highlighted Call(s) to Action but on most of your pages I am kind of confused about where you want me to go next. The element with the highest contrast is the sidebar which contains a bunch of links. I would suggest you used contrast to highligt a few important elements rather than all those uncategorized links.

Code Quality:

Your page seem to have fine load times but you can improve things even more by:

1. Merging your stylesheets into to one single file
2. Minify CSS
3. You have blocking JavaScript functions in your head tag. Try to avoid loading JavaScript before the page is rendered if possible
4. Your articles looks very interesting. Maybe you should try to mark them up with microdata and vocabularies from http://schema.org/ if you are lucky google will reward that and index your content better and help you reach a bigger audience.

Hope this was helpful

Edited January 26, 201610 yr by Nillervision

It takes a lot of courage to ask for opinions on your own sites.

I was a member here for years before I dared to ask for criticism of my own page.

It's not because people here are particularly sadistic (at least not to my knowledge ) but there are some very trained eyes here that will spot imperfections right away.

I am guessing you post this to get constructive criticism rather than flatteries so I am going to focus on what you can improve.

 

 

Yes - exactly and I may never reach the point where I dare to ask for criticism.

 

Your site loaded really quickly, which is great.

 

Personally, I'm not keen on the grey background and shadows down the sides of the middle bit of content. I'd have gone for all white - but that may not have been the best choice.

 

I feel that the blue of your headings clashes with the blue of the links.

I'm wondering whether you should flip the Yoda image so he isn't looking away from your main text? Not sure. Also the writing in that image doesn't look as sharp as your main text.

Thanks for all the comments.

 

@rhubarblover.

 

Spam blocker text colour sorted and overlap sorted

 

@Nillervision.

 

I'll fiddle with the whitespace, I agree it can open out a site. Favicon is just me being lazy, I'll sort this as well. Calls to action have been added.

 

Most of the code things are sort of doable. I get these sorted. Merging the CSS is a little problematic as these belong to plugins but I will do some investigation. Schema.org makes no difference. I've had this running on a test site for a year and it makes no difference to ranking.

 

@@Jane B.

 

I've removed the background. Do I need to drop the shadow as well?

 

I'll play with yoda

 

The blue is the result of a lot of experiments. Visitor heatmaps show it's not been a problem so I'll leave it for now.

Regarding the spam-bot check. Have you considered using a honeypot instead? It is 10 times more user friendly.

I have had very good results with that technique.

 

You simply hide the form element with the question.

You then accept all submissions which is either:

• Empty
  (most likely human users vieving page with CSS)
• Answered correctly
  (most likely human users with screen readers or CSS disabled)

Edited January 27, 201610 yr by Nillervision

Not sure if you are aware, but the sidebar on the homepage in Chrome is dropping under the main content.

That's probably me messing about - should be OK now.

you have a double space after the first sentence "The more complicated the site, the less the chances of conversion"

 

really not feeling the choice of raleway for body copy - hard to say whether it dits in with your brand because it's quite low key (as mentioned above) it's not until you get to the footer that some sort of character appears - have you thought about using your picture at the top?

 

not sure i can agree about galleries - as far as the point about the ship goes (https://aerin.co.uk/stop-using-galleries/) that's what art direction is for though admitedly the ship is so small in the large image it would be quite hard - then again on a mobile you would have to zoom in to it to get the effect anyway! oops got side tracked there

 

on makingbest use of your images you have a typo "reduce the quaity to 72ppi" the 'l' from quality. and 72 ppi (well done for not saying dpi) is immaterial. a 300 ppi jpeg will be the same as a 72ppi jpeg on the web where 1 pixel = 1 pixel (well until you start looking at multiple pixel densities) but it's a pointless step - the only thing that matters are the dimensions in pixels, not resolution.

 

there seems a lot of good stuff on there, so don't think i don't like it because i jumped on a couple of things

 

i like the simple approach but it needs a little finishing with some personality – just a touch – and stronger branding: yes blue links ala Nielsen Norman Group is all well and good but where's the room for a little personality? users are pretty much used to different coloured links as long as they are usable and easily identifiable as such.

 

your favicon could use some work it's green and looks like an old version?

Having had a look at your site I can see what you are trying to do but I think there needs to be many more adjustments

 

The homepage: when I landed on it I thought it was a blog because of the really long text and immediately on the right-hand side in big words all I saw was 'recent posts' along with what I thought was a blog post called 'the not so secret rules of effective website design'. I think here you are trying to keep it so simple three things are happening, 1) you frighten off users who were looking for your services but got so confused to what they saw, they simply leave as they simply do not realise the services you offer were the ones they were looking for. 2) That long squished text itself is frightening them away as there seems to be a lot to read there. 3) Most of the time an image is the best way to capture an audience, you have very little imagery and I think you have taken simplicity too far, as long as images are relevant to the content it helps people quickly make sense of what your site is about, remember an image speaks a thousand words.

 

I have only ever seen one other site use little or no imagery http://rye.agency/ but their website is very concise and immediately there is not much to read so you know who they are and what they do straight away. I would consider one of two things, 1) seriously reduce the text 2) add some imagery.. Either way, white space is your friend, use it to give people's eyes a rest, to relax between reading content, short bursts of content like lists are great but they need to be organised properly as to not scare anyone, also look into kerning and tracking. (sorry but I am not a fan of the yoda either, not very professional although I do see the humour I do not think it appropriate).

 

Next on your homepage is the grey box going all the way down, this is NOT content, this is extra information that should not be allowed to stand out like that. Phone number, needs to be bigger, more prominent, maybe even a different colour to create high contrast (that is another thing, if you are going to contrast, only do extreme contrast.)

 

Design Advice Page: Another long 'boring' list.. I would put each one in sections and add interesting images or relevant icons next to them to help users instantly see what it is you would be telling them about, again, imagery is more than 'clutter' when we talk about clutter we talk about realism effects, like gradients to make buttons seem as if they have been pressed, or shadows that make something look as if it is lifted off the ground here is a good read http://blog.usabilla.com/flat-design-going-far/ - I think the following line is especially true in your case "Minimalism is a fine line however. It is all too easy to overstep the line where minimalism becomes a featureless site".

 

Blog: could do with better organisation, squares are quite popular at the moment.. going straight down is pretty boring, try to jazz it up a bit

 

Testimonials: why are some of these not on your homepage? A snippet of something someone said, with their name and a link to the page would be great, I think that, at present is your biggest asset so take advantage.

 

Contact: well, icons would not go amiss lol.

Thanks both of you for your comments.

 

@@dap

 

I'll fix all those typos later.

 

I'm still playing with fonts - just haven't found one I like yet (not that changing the font matters to my visitors).

 

Some of the pages are quite old and I'm working my way through them to update the advice.

 

Yes - I've got to get round to changing the favicon!

 

@@Fuzzy

 

90% of my visitors don't land on the homepage. Most arrive on an inner page via Google searches and most stick around (bounce is around 20%). This tells me the content is good and the layout doesn't put people off.

 

I've played with a while range of colours and settings and it makes no difference at all. Bounce rate stays the same and I get the same number of enquiries. I used to have a lot more imagery and logos and icons and as an experiment I took them all off. Made no difference. I had gradients as well - took them off and it made no difference. I tried squares on the blog as well but this didn't affect visitor behavior either.

 

So everything you suggest is good - but it makes zero difference. The only thing that made a difference was increasing the base font size and the line spacing. Doing that dropped bounce by about 8%.

 

But I agree about the testimonials - there's a neat plugin I use on clients sites that I'll add to mine.

 

PS: I should point out that I'm targeting a very specific client. The whole site has been developing over the years to really focus on their needs. And it does work. It brings in enough new business to keep me solvent, I don't need to grow or expand, it just need enough to pay the bills. and I can do that with 2 only phone calls per week.

 

PPS: this isn't the main money site. I'm keeping that one a secret.

Edited January 30, 201610 yr by fisicx

@@dap

 

I've had another think about galleries and still think I'm right. Full sized images you can scroll through or swipe make for a much better user experience. Doing this means you don't have to faff about with lightboxes and close buttons and whatever. Do you have an example of a site where a thumbnail gallery works better than full sized images?

 

What font do you think would work better than Raleway?

 

@@Fuzzy Logic

 

Going to do some testing.

 

What colour do you think I should use in the sidebar?

What padding/margins would improve the whitespace?

What icons would you use on the design advice page?

maybe open sans or for a serif option, merriweather

 

example site - so many images if they were full size it would take forever to load and to scroll through.

http://haleimu.mbnet.fi/art.php. i suppose on mobile i could have made it without thumbnails at the narrowest view - but @2 thumbs wide in portrait then you can still see twice as many thumbs in the same amount of space

 

imagine you like #44 out of something like 109 (can't remember now how many there were but around that) - if you had to scroll through full size images you would have to go through carefully enough to remember #44 so you didn't miss it. with thumbs you can easily scan for the bronze sculpture outside vaasa university.

 

maybe for fewer images it could make sense to do without a lightbox altogether something to consider according to the scenario

But now try to use that site on a phone. It's now a looooong scroll, the images open in a light box (which isn't full width) and it doesn't swipe. And you still need to click to get the image number. But a full sized image list could have captions and image numbers.

 

And the thumbnails on that site are cropped so you only get a horzintal slice.

 

So as you say, it all depends on the site, the audience and imagery.

 

I've put open sans back to see how it looks.

Edited January 31, 201610 yr by fisicx

Sorry, but in regards to the gallery discussion, I hope you don't mind me saying, but as a user I would actually find it incredibly annoying to have to scroll through loads of full sized images. What if I don't like half of them? I would just leave the website unless particularly determined to find something. For what it's worth, my husband (who isn't any sort of designer) also feels the same way.

Thanks Rubarb. Do you use Facebook? If so are you ok with infinite scrolling?

 

But lets suppose you are looking at a gallery of thumbnails and want to see the full sized images. If the thumbnail opens in a lightbox and you want to look at rest of the images you have to click or swipe to see the next image. Isn't this similar to scrolling down a page with the same images?

 

Over 70% of browsing is now done on a tablet or phone. Thumb guestures to scroll is the norm. Using a lightbox to see images is less intuitive on a small screen than scrolling. Have a look at the ebay app. When you get to a product page it's all full sized images. Rightmove has similar on their app as well.

 

I'm not suggesting a thumbnail gallery is wrong. I'm just saying it's not always right. It depends on your target.

I don't find that 70% figure to be accurate. Maybe on mobile APPs like Facebook but most regular websites (my own included) do not get close to 70% mobile useage. in most cases it is still below 50%. Facebook and Twitter etc skew the 'real percentages' considerably. Look at your own analytics to determine usage percentages.

 

As for the gallery you also have to consider server load and user bandwidth. if you are going for infinite scroll then you MUST use lazy loading otherwise any spike in traffic your servers are going to struggle big time, and then you want to be careful if the page is very large as the DOM becomes insanely large as you keep in adding new content, you have to start removing components from further up the DOM tree. This is where a framework like React shines.

Whereas with a lightbox gallery you are only loading in thumbnails until a user completes an action - you can still lazy load this stuff to but then it's even easier on the server. If it's well designed the mobile UX should be fine for clicking/tapping on a touch device - again don't use plugins--build something specific for your use case.

 

I am neither for or against a lightbox but with these things you also have to consider performance.

Edited January 31, 201610 yr by rbrtsmith

I totally agree with your comment regarding galleries. There are loads of different way to display images, all I was suggesting in my article is that you don't head straight for a gallery/lightbox combination. Test, test and test again.

 

With regards mobile usage - I'm also around the 50% mark on many of my sites. Some are a lot higher. But these aren't my stats, they come from Ofcom and other sources. I see if I can find the report with the figures. One stat I do remember was that most women use a tablet to browse - it's this that pushes up the figures.

Edited January 31, 201610 yr by fisicx

Even 70 % of all internet trafic is handheld devices a lot of that traffic would be apps, location updating, social media etc. I doubt many users would open opera mini and browse through a artists portfolio on a 470 x 320 screen (and if they do they would probably not be expecting a mindblowing experience).

I doubt many users would open opera mini and browse through a artists portfolio on a 470 x 320 screen (and if they do they would probably not be expecting a mindblowing experience).

You would be surprised. Maybe not on a phone but tablet use is massive and as I said above, people are used to swiping down. It's really only in the last 12 months that things have changed. And a lot of people do use a phone to browse, especially now they have much larger screens.

 

Note: I regard mobile as being portable devices: phone and tablets.

Traffic to most of my sites has tablet useage below 10%. mobile around 40%. I don't find tablets to be that popular at all really. Almost everybody has a smartphone that they often use to browse while they're commuting or on a break - although like Niller said the vast majority of that is social media. Only a handful of the many people I know have tablets. I have one for testing, I never use it aside of that.

You would be surprised. Maybe not on a phone but tablet use is massive and as I said above, people are used to swiping down. It's really only in the last 12 months that things have changed. And a lot of people do use a phone to browse, especially now they have much larger screens.

 

That is my point. If the screen is large enough then it isn't a problem. Many Tablets today have a 1024×768 resolution or higher so they will surely have room for 3-5 thumbnails in each row. The problem you are addressing with the lightbox showing the images in the same size as the thumbnails is only an issue for portrait orientation on small phones. For those you could simply disable the lightbox in your media query:

.thumb {
  pointer-events: none;
}

Edited January 31, 201610 yr by Nillervision

You can still use columns even on the smallest phones. If the grid allows for scalable guttering (mine does ) then there's space to show rows of 2 columns on screens as small as 320px wide.

More females use tablets than men. Two of my sites have a primarily female audience and I'm seeing up to 80% tablet usage. One of those site is image heavy. When I switch from a thumbnail grid to a scrolling gallery all sorts if usage stats improved.

 

As I said, there is nothing wrong with thumbnails. But there is nothing wrong with full sized images either. You won't know which one is better until you test.

 

<edit> The very fact we are discussing the merits of galleries means you don't have much to comment about the site. Which is hopefully good news.</edit>

Edited January 31, 201610 yr by fisicx

@rbrtsmith: I have a question regarding lazy loading. Most of the techniques I've seen are replacing a blank placeholder image with the original image when the element is in the viewport. But wouldn't that have a negative effect with search engines. I mean search crawlers do not have a "viewport" so even if they were to execute JS the source attributes would never change and the only image that would be indexed in the document is the blank placeholder image.

@rbrtsmith: I have a question regarding lazy loading. Most of the techniques I've seen are replacing a blank placeholder image with the original image when the element is in the viewport. But wouldn't that have a negative effect with search engines. I mean search crawlers do not have a "viewport" so even if they were to execute JS the source attributes would never change and the only image that would be indexed in the document is the blank placeholder image.

 

It just means those images wont get indexed by google images. because Google has no idea about the pixel contents of an image then it makes no difference. I provide a blank.png image with the appropriate alt text and use JavaScript to replace the src with the real image. I also populate data-attributes with the real image dimensions then I can use JavaScript to build a placeholder element that has the same aspect ratio of the real image - this means the page won't grow in height as you scroll down (That results in a full page repaint) improving scroll performance.

 

Generally you should be providing a <noscript> fallback, and then Google can index that**

Edited January 31, 201610 yr by rbrtsmith

 

Generally you should be providing a <noscript> fallback, and then Google can index that**

That is a good and simple solution. Thanks

So did a bit of testing yesterday evening. Admittedly the sample was only 3 people but it gave me a starter.

 

All 3 were female and using a tablet. Two of the sites were ecommerce and one was entertainment

 

The ecommerce sites displayed the category images in a grid. Each image was medium size had captions and pricing information. So in a way this could be regarded as being a gallery but none of the images link to a lightbox, they all linked to a product page as you would expect. The product page had a range of images all of which displayed full sized on swipe. So no real surprises.

 

The entertainment site had the images in a scrolling page, again they all had captions and they all linked to a lightbox. But because they were large images the users was just scrolling.

 

In all three cases, the users browsed by scrolling. I asked them to try a site with gallery+lighbox and none of them liked this format. I them showed them the same site on a laptop and the were more comfortable with clicking through a lighbox., So it seems the device may dictate the better layout.

 

I looked at a number of other entertainment and news sites and they was a preponderance of large and full sized images.

 

I then had a look at various artist sites and it was a mixed bag but very very few used thumbnails, images were medium to large. Some I must admit were awful to navigate and use. But that's because they are artist not webdesigners!

 

Wedding and other photographers had lots of medium to large images, again very few used a thumbnail gallery.

 

So my 2 hour investigation showed a right mix of layouts (which is good), almost no thumbnail galleries but a lot of medium and large images artistically displayed. Those with captions provided a much better experience.

 

This is worthy of further investigation...

Direct user testing can be good but you need a much larger field than 3. Make sure you have no relationship with these people. Friends and family are not a good test pool for a product / idea.

 

But also do AB testing. It's very powerful as you can then test features with 1000's of users and using analytics you can see how the users behave accordingly. It's a lot cheaper than direct user testing and gives you a larger pool of people to test with.

 

Worth noting that faceook uses the lightbox on all devices. As too do instagram.

Edited February 1, 201610 yr by rbrtsmith

I agree I need a larger pool but 3 was all I had on a Sunday evening.

 

The facebook, instagram and pinterest lightboxes provide a much richer experience than just opening a box with a image and direction arrows. It has feeds and comments and all manner of other features. If you use the FB or Pinterest apps (as many do) then the lightbox doesn't even look or feel like a light box.

 

So back to my original thoughts: a thumbnail gallery + basic lightbox as a default is not always the best experience for your visitors. Experiment and test and try different things.

Edited February 1, 201610 yr by fisicx

This is why I suggest to build your own so it is suitable for the user experience. Although the standard lightbox where you swipe through images - if done right isn't disliked by users generally speaking. It feels natural because so many are used to doing the same with the likes of Facebook Instagram. I am one of those. I don't think all the social extras make it any easier to navigate through the images, it's just most plugins suck. and are npt suited to specific use cases.

Edited February 1, 201610 yr by rbrtsmith

This is why I suggest to build your own so it is suitable for the user experience.

Exactly.

 

As an aside, I don't like the FB image lightbox thing but I rarely use an SM site so I'm probably not a good person to use a reference material.

 

But back to my site...

 

Apart form a disagreement over the content of my article, was there anything else that stood out as being so wrong it's a wrong thing thing in the shop of wrong things?

I thought the title near the bottom "Linky Things" sounded quite amateur which if you are selling yourself to fix people's websites, I'd personally try to keep it professional - maybe I've been working in the corporate world for too long though!