Jump to content

BCAL Consulting Website


sivsy
 Share

Recommended Posts

www.bcal.co.uk

A website redevelopment for a UK based civil and structural engineering practice. The previous site, built with classic asp, was looking old and was not responsive. The client, however, was very happy with it and it took some persuasion to get them to agree to a new site.

This new site is one of my first Processwire sites - two more are in development and due to go live very soon.

The main focus of the site is the 'Projects' portfolio which displays projects randomly in a carousel and the list can be filtered by sector and/or discipline.

Each project can have a slideshow and be tagged to specific sectors and disciplines.

The website also includes current vacancies (with online application forms), latest news articles, sector descriptions, discipline descriptions, map and directions, and narrative pages.

PW Version: 2.6.7 with uikit - used Formbuilder for application forms.

post-3163-0-99311300-1455700749_thumb.pn

www.bcal.co.uk

Any comments, issues, or suggestions welcome.

Paul (www.keywave.com)

  • Like 7
Link to comment
Share on other sites

Hi,

Nice looking site :) Thanks for sharing.

The only "strange thing" is the 'Projects' portfolio section which is confusing to use and it is not actually something to "browse" but asking for random items so it is rather hard to find something specific. The result of the filter looks like a slider (it is), but functionally speaking it is not a slider, so this sort of presentation is confusing too. When we have only 3 items (or less) in the result set, the arrows are not dimmed nor removed so they appear to be nonfunctional. Or I might be missing something...

Link to comment
Share on other sites

Thanks @szabesz for your comments. Much appreciated.

The idea to use the responsive slideset (a uikit component) was to allow users to browse through projects either with mouse or touch but without revealing all projects down the page in a grid. When viewing in tablet portrait, only 2 items are shown at once and with mobile phone, you get one at a time. It would be nice to not show the nav arrows when the number of items is less than/equal to 3 (or 2 for tablet, or 1 for phone) and I hoped the uikit Slidenav component would do this but unfortunately it doesn't. I will be looking at how this could be achieved. Throughout the site, we use image slideshows or slidesets for consistent navigation through what could be an unknown number of images that the client may wish to use to illustrate a project, a sector or a discipline.

The idea of having random ordered items is to mix up old and new projects and ensure the same projects don't always appear in the same order. If users want to 'search' for specific projects they can use the sector and discipline filters which are also linked in to specific sector and discipline description pages.

Cheers

Paul

Link to comment
Share on other sites

Hi @sivsy, you got a nice clean site. I kinda agree with @szabesz. Maybe on desktop, you can list the projects like you listed the news? 

One other thing, I missed a active item on the left nav items. It's easy for a user to be a little confused where (s)he is if she only look at the sidenav. Maybe something like this (just a quick example): :)

post-367-0-46851900-1455716245_thumb.png

Link to comment
Share on other sites

More quick suggestions, now about performance. If the project has still budget, you can quickly improve a lot on this area.

// IMAGES

- Compress images. Just on the homepage, you have 1.5MB of images being downloaded. This is too much! I did a quick compression and the results are:

Logo: from 11.3kb to just 1.25kb. 

One carrousel image: from 178KB to 86kb.

Images are attached.

// CSS

- You can inline the content of these 2 small css files inside the homepage, to avoid http requests, as they are very small:

slideshow.css

slidenav.css

- And inline this one on contact and career pages as well:

form-select.min.css

- Minify bcal.css

// JAVASCRIPTS

- Concatenate all these javascript files into one: 

uikit.js (or at least minify this one)

slideshow-fx.min.js

slideset.min.js

slideshow.min.js

lightbox.min.js

- Move jquery to the end of the file

- Is add this truly necessary on the homepage? By removing you got less js being loaded. And I suggest change the position of the icons below the sidenav on the other pages. People won’t look at the footer the share something.

---

UPDATE: I just notice that I compressed the logo too much. I set it to 4 colours. Should've being 8.

post-367-0-31870200-1455717992_thumb.jpg

post-367-0-10308000-1455717993_thumb.png

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...