sivsy Posted February 17, 2016 Share Posted February 17, 2016 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. www.bcal.co.uk Any comments, issues, or suggestions welcome. Paul (www.keywave.com) 7 Link to comment Share on other sites More sharing options...
szabesz Posted February 17, 2016 Share Posted February 17, 2016 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 More sharing options...
sivsy Posted February 17, 2016 Author Share Posted February 17, 2016 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 More sharing options...
Sergio Posted February 17, 2016 Share Posted February 17, 2016 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): Link to comment Share on other sites More sharing options...
Sergio Posted February 17, 2016 Share Posted February 17, 2016 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. 2 Link to comment Share on other sites More sharing options...
Sergio Posted February 17, 2016 Share Posted February 17, 2016 Forgot to mention to enable gzip, you can save 74,5% on the page weight: http://checkgzipcompression.com/?url=http%3A%2F%2Fwww.bcal.co.uk%2F 1 Link to comment Share on other sites More sharing options...
sivsy Posted February 17, 2016 Author Share Posted February 17, 2016 Many thanks @Sérgio for your suggestions and advice ! Kind Regards Paul 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now