Afternoon guys,

 

 

Looking to get some feedback on our new website.

Happy to accept feedback, thats constructive

 

Your thoughts: www.cherry-designs.net

 

 

Thanks

Looking very nice especially, the colours and typography in the main banner.

 

I think the other sections would benefit from a bit more vertical spacing between them. Great job

Looking very nice especially, the colours and typography in the main banner.

 

I think the other sections would benefit from a bit more vertical spacing between them. Great job

 

Thank you it's by no means a finished project and we realised that our old website, was 18 months old a didn't represent us very well at all.

 

The typography, is something we spent a fair bit of time in, choosing the right quotes etc.

Exactly the same situation for us, our website was made over 2 years ago and it's terrible now. Launching the new one (hopefully) this weekend. It's kind of hard to keep on top of your own website when your continually working on clients websites.

The site is looking amazing. The only thing I can think of that might could be improved is the line lenght for the paragraphs on wide screens.

I'm sure you know that for optimal readability line leghts should not exceed 75 characters including spaces. The famous Swiss Style design movement suggested an even lower limit, around 50-60 charaters pr. line.

I think this problem is very common with the popular single column layout that often only works on narrower screens.

I'm not sure if there is a good solution to the problem on your site as there is hardly enough text to break up into columns. The only other solution is to either blow the font-size up, or to add padding/margin which would cause loss of vertical alignment.

Other that that everyting looks perfect

 

EDIT: On the "get in touch" page the google map-zooming makes it imposible to scroll down with the mouse wheel. You could consider adding a class to the nesting div with pointer-events: none; and remove the class again with JS if the user clicks on the map.

Edited October 22, 201510 yr by Nillervision

I agree with what Nillervision says, I've been doing a bit of reading on typography, line lengths, line heights and vertical rhythm and he's spot on.

 

As a general rule based on what I learnt I set a baseline font-size of 16px and a line-height of 24px. - These are browser defaults and well documented as optimal sizes for browser type.

This 24 will be my *magic number* that I use -- it itself and fractions / multiples of throughout almost every measurement on the site. This helps give a pleasant and symmetrical vertical and horizontal rhythm.

$initial-base-line-height: 24px;
$initial-base-font-size: 16px;

I don't use pixels as my general goto unit, I use rems, and for the actual line-height that I specify I use unitless Rems like so:

$base-font-size = ($inital-base-font-size / $initial-base-font-size) * 1rem // 1rem

$base-line-height = $initial-base-line-height / $initial-base-font-size: // 1.5

I then calculate the spacing-unit which is simply adding REM units to the $base-line-height

$spacing-unit: $base-line-height * 1rem; // 1.5rem

For other font sizes say a H1 of 22px we can do

$h1-initial-font-size: 22px;
$h1-font-size: (h1-initial-font-size / $base-font-size) * 1rem; // 1.375rem

I then use `$spacing-unit` throughout the site, margin-bottoms for paragraphs and headlines will get this unit, so everywhere our paragraphs will be spaced out to exactly double the line-height. I use this number for the gutter in my grids and quite literally everywhere. Not only does it look great it saves a lot of time.

Using relative units has two benefits: users can increase the font-size in their browser and everything will change to match.

We can put some media querys on our HTML element to reduce not only the font-size but the spacing throughout the entire site as the screen-size reduces.

For example

$screen-xs: 480px;
$screen-sm: 769px;
$screen-md: 980px;

html {
  /** browser has default font-size of 100% */
  @media (max-width: $screen-md) {
    font-size: 90%;
  }
  @media (max-width: $screen-sm) {
    font-size: 80%;
  }
  @media (max-width: $screen-xs) {
    font-size: 70%;
  }
}

I hope this helps explain how to do this in your projects, and it's something I wish I had learnt much sooner in my career - it would have saved me a lot of time and hastle.

Also applying margins in only a single direction - for more on that read http://csswizardry.com/2012/06/single-direction-margin-declarations/

 

We can see clearly now a weakness with designing in something like photoshop. Imagine in a particular instance I want to go with a slightly larger base-font-size and line-height. I can simply manipulate 2 variables and everything will just neatly line up. Doing this in photoshop could take many hours. ** I am not advocating for no designers, designers can help a developer design in the browser**

Edited October 23, 201510 yr by rbrtsmith

Morning guys,

 

Thanks for all your help! Its the first project we've done with our new full-time developer. So, there will be a few bumps I expect. I agree 100% about the font, we are working with a content writer to make our copy better..

 

The get in touch page, we thought would be cool, tuns out in hindsight, it's not practical

 

We've got a few changes to be made, to the whole structure, as well, we are launching our own "client area"

 

Thanks for all your help.

Get your new developer to read my post above, i seriously wish I'd learnt that stuff about typography and stuff a lot sooner!

Thanks ill et him to take a look.

Looks very nice Cherry

There's quite a few performance improvements that can be made on the site.

• Minify CSS
• Compress icons, image assets. The image in the header is very nice, but it's 1mb in size. The one on the contact page is close to 5mb, which is unacceptable.
• Favour SVG sprites instead of icon fonts. On a similar note, be conscious that you're only using what you need from Font Awesome. It's a massive file size, and it often doesn't make sense to load the whole file in.

A handful of other points.

• The hover effects on the work page feel too slow. I'd also ensure that hover effects are used consistently across the site. The hover's on the services section do not behave like the work ones do, for example. You can save some mark-up by doing this, and it makes the site feel a little more polished.
• The Google Map should have the drag feature disabled. Otherwise it's a nightmare on mobile because you can't scroll the page any further. Instead load the maps UI elements back in on smaller devices so that the user can navigate using these.
• There's a few resources failing to load. You can see these in the Javascript console when browsing the site.
• Buttons on the services detail template hang over the container (Ready to challenge us? View examples of this work).
  

^^I never thought to mention any of that performance stuff Good advice though I agree with it all.

 

Generally I set a performance budget of 500kb on the initial page load, of course you go for as low a number as possible, but 500k is the maximum unless there's some major reason why such as a video in the main banner or similar.

This number should be attainable based on the content on your page you're at around 2mb right now.

Follow Jack's advice, and use the Chrome dev tool to see which assets might be causing bottlenecks. The y-slow plugin is very helpful here

^^I never thought to mention any of that performance stuff Good advice though I agree with it all.

 

I've been tasked with a lot of performance based stuff this week, so it's on my mind. One of them included optimising a site that was taking over 10 seconds before content would appear. I managed to get it significantly down, and the content appears at around 140ms with the entire page shortly after. Even print screened my results I was so pleased. This was a single page site with a lot of icons and three large background images too, not plain text.

 

 

The new updates to the Chrome Dev Tools are amazing.

They are indeed. I don't know why anbody develops in anything else (right now) as the Chrome Dev tools are light years ahead of anything else any they're so useful.

Website looks nice to see and simple design can attract people.

Usage of icons, images are good

Thanks for the feedback, this is very much our first version and the performance tips will be looked at thank you.

 

Agreed about google maps, look great in aesthetic but not very functional.

Thanks for the feedback, this is very much our first version and the performance tips will be looked at thank you.

 

Agreed about google maps, look great in aesthetic but not very functional.

 

There's a Google Maps static API which generates an image, or a 2X image. I've been using that lately and clicking through to Google Maps. I find it isn't worth the performance hit in some cases. Google Maps adds a tonne of requests to your page, and you also have the latency between your server and theirs. They reference a bunch of third-party services like Double Click along the way too. We saw that users would never even interact with the map, many would just scroll past, but I guess it depends on the type of website.

Overall website looks great. the menu at the top seems to be to big as we scroll down. i think it should be a bit small so we can more focus on the content.

Thanks, we spent a bit of time thinking about this but if I'm honest, I don't think it would work if it was small..