29th April 2014
Pushing my boundaries with AndreaToddDesign
Yesterday I launched my most recent project, A brand new website for one of my good friends, mentor and graphic designer, Andrea Todd. I met Andrea in the early part of last year on an ‘Introduction to Web design’ night course at AUB. Since then she has kept in touch and we are currently collaborating on a larger project, working with JigsawPSHE (details coming soon).
Earlier this year Andrea approached me to design her website, something she hadn’t gotten around to doing and had since forgotten how. I was more than happy to oblige and started scribbling. She said she wanted a clean, simple design that had to reflect her design style and show off her portfolio. We went through her portfolio and it was clear a list of her work wasn’t going to cut it. Andreas’ portfolio is quite diverse, with pieces of work ranging in size from small logos to large posters. After abit of research I decided to pitch the idea of using Isotope js to create a masonry style layout that put work together in a brickwork inspired way similar to that of Pinterest. Not only did it solve potential layout issues in a great modern way, it also allows us to categorise Andrea’s work and let the user filter them accordingly.
Throughout the project I emailed Andrea images of my progress and she sent back her edits. Trying to design in a way that reflects her style made this project a tricky at times, as I am used to designing in a way that reflects my style rather than someone else’s.
It was a challenging project, not only due to my knowledge constraints, but also due to the shear complexity of the task. To complete this project I used a variety of languages and technologies to create a unique experience for both the end user and Andrea. The site is built on the WordPress CMS which makes the content easily updatable which was an important aspect to the project. This did cause a few problems as traditionally WordPress lets you upload a list of images in the WUSIWUG editor or create a gallery using the gallery feature. I wanted to have gallery of images in each post but not use the WordPress gallery and wanted to make it cleaner on the backend to add and remove photos.
I use the Advanced Custom Fields plugin on alot of my WordPress projects as it allows you to create custom fields on the backend and link to them on the front end. Its very handy, but it couldn’t solve my problem this time
I opted to use Least js which creates a horizontal list of thumbnails and displays a larger image when the thumbnail is clicked, all fully responsive. It requires 2 file urls (one thumbnail and one larger photo) but I couldn’t find a way of entering these through WordPress. Eventually I stumbled upon the Multi Image Uploader (MIU) plugin developed by Tahir Yasin, a small plugin that allows you to add a number of images, using default WordPress functionality, into to posts and stores them in an array which can be accessed on the frontend. I did a few edits to the MIU plugin and plumbed in Least js and it works beautifully.
Implementing Isotope js took quite abit of work, but thankfully there are loads of documentation on the Isotope website to help out. On the AndreaToddDesign website, the work page uses post thumbnails (or featured images) that are 300px wide and an automatic length (that doesn’t distort the image). This creates images with differing heights that fit together thanks to Isotope. The filters were added later, making use of WordPress categories and some clever php to create the Isotope filters. Its all finished off with my custom jQuery that adds margin to the containers, making them always central. Its taken a few iterations to get right but it really adds to the design.
This was also my first project using SASS (Semantically Awesome StyleSheets) using the terminal as a preprocessor. It does what it says on the box and does makes css awesome. Although I’m just starting out with it and haven’t made full use of mixins yet, I love the nested features and am getting used to nested media queries. I would highly recommend it.
Overall I’m very happy with how the website has turned out and I’m glad Andrea likes it too. I’m still ironing out some of the bugs and will add a few new features of the coming days and weeks.
Heres the release notes:
Version 1.0.0 Released 28/4/14 20:30
- Fully responsive Website using the Bootstrap Framework and built on WordPress
- Static navigation using wp_bootstrap_navwalker
- Latest Work slider created using a WordPress query and Bx-slider
- Semi fixed footer – the footer sticks to the bottom of the browser window when the content isn’t long enough to cover the whole window. It behaves normally when the content fills the page
- Implemented SASS to make css awesome
- Used jQuery to centre align images
- Used Advanced Custom Fields to create custom WordPress fields on the backend.
- Implemented Isotope js to create a masonry style layout
- Used WordPress categories and php to create Isotope friendly filters
- On the work page, jQuery calculates the browser width and amount of content on the page then centre aligns the containers using margins. Margin is recalculated when the browser width changes and the page is relayed.
- Using Least js and the Multi Image Uploader, a mini gallery for each project is created allowing users to see more details with larger images.
- Full Facebook integration – Users can like and share projects or pages. Content is displayed in an Open Graph friendly format.
- Pinterest integration – Users can pin featured full size images to their wall
- Contact Form with Captcha integrated to reduce spam. This makes use of Gravity Forms.
- SEO managed by Yoast for WordPress plugin
Version 1.0.1 Released 28/4/14 22:00
- Fixed bug where images in single projects were referencing localhost rather than their online directory
- Fixed andreatodddesign logo issue on mobile devices so it fits in one line
Version 1.0.2 Released 29/4/14 12:00
- Fixed Facebook share bug
- Fixed page title bug
- Altered form confirmation message
Version 1.0.3 Released 29/4/14 15:00
- Fixed horizontal scroll bug on work page
- Fixed missing exit cross in least js
Version 1.0.4 Released 30/4/14 16:30
- Added 404 page
- Adjusted work category buttons to have active class so will stay highlighted when user clicks elsewhere
- Added link hover animations
Version 1.0.5 Released 30/4/14 18:30
- Major bug fix relating to work page. – Fixed bug that made elements appear off centre in some circumstances and removed horizontal scroll issue
Version 1.0.6 Released 7/5/14 15:00
- Optimised script loads – assets now not loaded where they aren’t needed
- Applied client requested changes
- Tweaked the work page isotope functionality
- Added font anti-aliasing