Jump to content
GrahamUK33

Looking for constructive criticism/feedback

Recommended Posts

While being a member of the Web Designer Forum, it has given me some inspiration and help to redesign a website that I did a few years ago. The project was also to help me refresh some of the limited HTML and CSS skills that I have.

The project is still work in progress, I still have a few things to do such as:

  • Social media meta tags
  • A mobile Menu
  • Find a solution for the selector buttons to update on the Slideshow

I have reached the point of asking for some constructive criticism/feedback for some further inspiration. All though I am not a professional, it would be nice to be able to get the website found in a Google search and for it to be functional on all devices. At this stage I am not sure if I will be creating anymore pages, local history is one of those subjects that could lead to many pages being created.

Please view the Newbury History at www.newburyhistory.co.uk

Share this post


Link to post
Share on other sites

Sorry to be the bearer of bad tidings... but it looks like a site from 20 years ago. Mainly because of the shadowed headings.

Anyway, looking past the styling, it does what it says on the can - but could be some much more. The history on the homepage would be much better split into sections and had images.

The image sliders on the inner page would be better as static images with captions. Much better usability. And make every image as big as possible.

Make the timeline simpler - don't use an accordion, just show the whole list - and add images!

I'd also bin the huuuuuuge hero image - it fills the screen on every page and adds no real value.

I've been looking as other history websites and there are a lot of discrepancies. Might be worth mentioning alternate events

However...

It's a great project and has lots of potential. Well done

 

Share this post


Link to post
Share on other sites

ditto what fisicx said :)

the fully justified text doesn't work very well - nearly always best to stick with  left aligned. the line height is a bit on the generous side too i would reduce it a little and add a touch more padding around the columns. in fact i would prefer a centred column of text rather than two columns  - more like medium (like https://medium.com/@the_economist/new-lift-technology-is-reshaping-cities-f86bc51174c1?zv=true ) interspersed with more photos so it's not quite such a wall of text :)

the blue is too saturated - the accordian blue is a better fit! 

seeing as this is a site about berkshire you might liike something like this for the headings https://fonts.google.com/specimen/Berkshire+Swash minus the drop shadows

jpegs for your book pictures not pngs

why 3D text for a history site? ;)

Share this post


Link to post
Share on other sites

@fisicx @davep thanks for the feedback, the last thing I wanted to do was have a 20 year old design, as most history websites already have that image which is what I wanted to move away from with some modern features. I wanted to use blue to reflect the colour that is associated with the town.

 

The shadow behind the headings were to make them stand out a bit more, I’m not sure if this has made them look too heavy. I like the idea of having a different font as suggested for the headings, but only if I can host them locally on the website.

 

The justified text is used in the hope that it would fill the pages neatly like a newspaper, I did make the line height quite large in the quest of making it easier to read, what would be the ideal line height to use?

 

I have done a timeline page on another history website, it has become quite a large page. The idea behind the accordion feature was to help keep the page down without the need of lots of scrolling. I know I can create links to move up and down the page, but I wanted to move away from that.

 

The scrolling images in the header is a feature that I have found used in a lot of modern websites that I liked the look of, this is the main reason it has been included. I suppose the only value is that it shows some views from the past of the town.

 

The slideshow at the bottom of some of the pages was a way of trying to show a bigger image rather than having a number of smaller images which I thought would make it look image heavy and old fashioned. The end target is to convert all the PNG images to JPEG images, and to have captions for the images to explain what the image is.

 

Hopefully the above has given some reasons behind my thoughts on the design. Are there any websites that you have designed to show as an example of design and features that would better display a local history subject?

Share this post


Link to post
Share on other sites

Make the page narrower and have a single column. 12-14 words per line is a good benchmark.

Separate the content into sections: Early Settlers, Middle Ages, Industrial Revolution etc. Or just keep it simple and mark the centuries.

Link out to more detailed pages as you have done but I'd use buttons rather than inline links. Example

Don't use a slideshow - just put full sized images on the page. Example

The header slider is used on a lot of sites but it's ineffective. One good static image is all you need.  And reduce the height so it doesn't fill the screen. Or create a montage of images, each one linking to a page explaining the image and providing more info.

On the homepage you have an image of Newbury Bridge. This should link to a new page with the history of the bridge, more images, a map location and so on. This could then lead to a page about the canal, it's history and influence on the town....

I appreciate this is  still a work in progress but people like to follow links and explore.

Edited by fisicx

Share this post


Link to post
Share on other sites

i often use this asa guide to the right  measure (or line length) https://css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-length-testing/

line height depends on several things but asa a general guide 1.3–1.6 is best - the attached is 1.5 (that's a simple multiplier, not rems like you have) but 1.4 would perhaps be more suitable for a fairly narrow measure... nothing wrong with using a generous measure, but too large and the eye gets lost going from the end of one line to the next - using the inspector in your browser will let you edit the css on the fly (without saving it) to instantly test out a value - right click and choose "inspect" or similar or ctrl +shift +i, find the relevant tag .e.g. any p tag and then find the css rule select it and use the up and down arrows  or alt+up or down for 0.1 increments

the problem with using long columns on the web is that you hardly ever view the whole page at once - so you have to scroll back up when you reach the end of the first column to begin reading the second. single column would be better imo with left aligned text. it also seems to somehow have more focus than 2 columns, where  the eye  is distracted to some extent by the other column just being there :)

i think accordians work best when you need to scan the avaible options first and get an overall picture - say a list of FAQs but a history is more of a homegenous entitity and it's more natural to scroll through the whole things as a 'story' rather than dip in and out of years

 

measure.jpg

Share this post


Link to post
Share on other sites

@fisicx The idea of the homepage was to just introduce what the website is about and to give a very summary of the history of the town. It also gives me a chance to advertise some of the pages that make up the project. Another way of looking at it is to tick the box of having enough content, links and alt tags for Google.

I’m interested to know what the advantages of having a button over a link would be apart from when using a touch screen. Apart from the menu, I have some text links and image links to entice someone to select to view another page, which in turn helps with the bounce rate.

As you mentioned the image of Newbury Bridge and the canal, which are both very recognisable for the town. These subjects would both require some research for content to create a couple of pages. For now, the website is 15 pages which should give me something to work with.

I think what I have done is trawled the internet in a quest to find inspiration and found features rather than a complete modern looking design. Thanks for the link to the Triumph TR website as an example, it is of an old-style design that is very typical of a car club, history websites do tend to be the same as well. I suppose most of the audience is of the older generation that don’t mind that design.

I have not achieved what I set out to achieve with the design of the website. This maybe down to not finding a design that I am capable of creating, or finding a modern looking design that would work well to display a history content.

For inspiration I have been looking at sites that contain a lot of articles with text and photos for example: https://www.formula1.com http://www.williamsf1.com http://formula1.ferrari.com I’m sure these types of websites would have a team of very talented people to create and maintain them, and they would be completely out of my league to create.

Share this post


Link to post
Share on other sites

@davep I am going to use a single column of text on all pages and follow the rules of 45-75 characters on a line. Looking at the example on css-tricks.com they are controlling the text size using percentages at different breakpoints, is this a good way to control text size to be viewed on all devices?

 

How to I set the line height to 1.5? do I use 1.5px or 1.5em?

 

I did look at the BBC History section which is where I got the inspiration for the accordion feature. I was looking at this feature to control the length of the page, I don’t know why the BBC have used it as when you full expand their accordion, the page isn’t that long. Here is an example of a timeline I have done for a large website at www.hinckleypastpresent.org/hinckley.html as you will see it a large page, and there is still a lot more that can be added to that page which will increase the size even more. I couldn’t find anything else to use other than the accordion feature to overcome this problem.

 

It is interesting to look through National Geographic to see how they display their images. They use a mixture of pages with lots of images and pages with slideshows. The images that I have are old photos, most of them wouldn’t be of the quality to be show at full screen, they are also a mixture of different sizes. I have edited some to the same size, by cropping and stretching but this hasn't been ideal.

Share this post


Link to post
Share on other sites

usually i use  a range of text sizes sized with rems but essentially larger  for desktop, and a bit smaller for small tablet down. line height set as (without any measurements) it just means one-and-a-half times the size of p and therofore will scale with the size of p. if it is 16px then line height will be 24px, for 15px it will be line-height 22.5px

p {
  line-height: 1.5;
}

the example you linked to would maybe fit an accordian because it is so long, though i'm not sure that's necessarily a problem. on your page it's not anywhere so long so maybe doesn't warrant an accordian

Edited by davep

Share this post


Link to post
Share on other sites
2 hours ago, GrahamUK33 said:

@fisicx The idea of the homepage was to just introduce what the website is about and to give a very summary of the history of the town.

Why complicate things? The only reason for anyone to be on the site is because they want historical information about the town. So that's all they needs to be on the homepage.

The TR car club link was just to show you how you can display images - rather than use a slider. People using tablets and phones are used to vertical scrolling. A horizontal slider is less intuitive.

Buttons work well on small screens as the target is bigger than a tiny inline link.

Forget about the layout/design - they key to success is the content. Put all your efforts into creating great content. People won't care too much about the layout if the content is good.

Share this post


Link to post
Share on other sites

I like the site in general. It's interesting, too. The only off-putting thing for me is the blue, especially the top header, regardless of it being Newbury's colours, as you said.

That blue kind of reminds me of the original default blue for url links, or that of a Bic pen.

Each to their own of course. But the site is lovely and simple to use, and it's great for people wanting to know about Newbury, especially if it's their town, or they grew up there and moved away, etc.

The sitemap won't be noticed by people, I don't think. People want to see the options they can click on or be informed or entertained by more obviously.

I personally don't enjoy shopping much, but I found myself searching for shops. Maybe to get a feel or look at life from that normal street-life perspective. It's always interesting to see those kinds of photos for everyday life.

Nicely done. It should be interesting to see how it develops.

Living or moving away from home or the past has helped me to understand how important memories are, and it's great to look back fondly or proudly at places and times. So, I'm sure your site will have a deeper impact along the way for some folk.

(Sorry if I reiterated what others said. I didn't read all of the posts. Just wanted to give my 2 cents.) 

Edited by Grant Barker
typo

Share this post


Link to post
Share on other sites

Update

I have been looking at all sorts of modern designs to better show the subject of local history, I haven't found anything suitable so far. What I have done is to try and improve on what I have until I find a design that I can use. The changes I have made have reflected on some of the feedback given.

The hero image at the top of the page is staying, it’s a feature I like and shows three locally well-known areas from the past. I have increased the width to make it viewable at 100% on more devices.

The colour scheme has changed, the blue now used is much more softer. The background colour has a very light blue on the left/right of the page that merges in to white in the middle of the page, this is to help draw the eye to the middle.

The headings have had the 3D shadows removed to make them a bit more clear to read, they are also a percentage of the main text size, ie H1 is 250%.

I have changed the font, and made the text column much more narrow, this is to reflect the practice of 45-75 characters per line along with a line height of 1.5. Following this practice should make the text much more easier to read now.

Some work has been done for the mobile menu to make it work better on mobile devices. I couldn’t work out how to include a close button on the menu, would visitors expect to see a close button?

The 3 adverts have now a 'read more' buttons to help to show that these areas can be clicked on to view another page. This is a feature that I have a few variations of on many company websites that seem to work well.

I have not found a better solution for the timeline page that is using the accordion feature. This feature works nicely using a mobile and gives the visitor a bit on interaction to view a section of interest. This page is most likely to grow a lot more with dates/events.

Also the slideshows have not been looked at yet, I have noticed that some companies use slideshows to display their images. Looking at this in another way, having a slideshow could increase the amount of time a visitor stays on a page.

Share this post


Link to post
Share on other sites

  • Similar Content

    • By Dassin
      Hey. I'm here here, i wanted to ask if there's any category/subcategory where i can share my website's code and get opinions, do and dont's etc?
    • By CoinStaker
      Hey guys,
       
      my team and I have been working a couple of weeks now on an ad for our new Buy/sell Bitcoin comparison tool. We are very aware that the ad is still ugly, but we don't know what exactly to make better.
      Here is a link where you can preview our ad in a couple of different sizes.
       
      We are very grateful for any kind of suggestions and feedback and thank you in advance!
       
    • By ivanoung
      Dear all,
       
      Hi I'm Ivan, started an online shop for the honey that I loved from Manitoba, Canada. I'm quite scrappy and plus I'm low on available resources so I've decided to build the website myself. However, with the lack of proper training and the eyes of the experience, I failed to deliver an effective design.

      Major challenge: not converting any clicks into dollars.
      Major confusion: Is my website understandable and intuitive enough?

      Here is my website: https://ivanoung.wixsite.com/yesdear

      Any kind of critiques are welcome, I appreciate that in advance.

      Regards.
    • By DNGR.Tyler
      The car rental company, JMA, is located in Bali.
      Bali is a tropical gem and one of the most popular holiday destinations in the world.
       
      The concept: Letters J, M and A (JMA) shaped to form waves
       
      -Dan


    • By bedmal
      Good afternoon,
       
      We have spent the last 6 months working on our website www.flux.ooo - which is a WebGL website designed to bring our logo to life and create a social interaction with the public all intrinsically linked to our tag FULFIL INNER POTENTIAL
       
      There is an awful lot of animation and design work gone into creating the website, so I would like to invite critique. At this stage we can still change things, but we are due to launch our product page in the early part of 2017.
       
      Please explore the concept, read some of the content posted by the public (drawn in through facebook ads since the recent launch of the beta) and add your own pixel to see the full animation and WebGL experience.
       
      All feedback will be greatly received and I appreciate your time.
       
      Regards,
      L Smith
       
      p.s happy to review anybody else's site; just ask
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      57,548
    • Most Online
      4,970

    Newest Member
    FredsHead
    Joined
  • Forum Statistics

    • Total Topics
      65,738
    • Total Posts
      455,458
×