Complete site update
Premise
There were several goals in this one. First, to update old somewhat responsive and low contrast WordPress website to a modern all-device, vibrant and fully functional website.
Work
I kicked off by designing some simplistic wireframes with Adobe XD. Nothing seriously complicated, just some example lay-outs for the client, rest of the team and especially for the in-house designer to have a gander at.
After agreeing what should be there and what shouldn’t I began the dirty work. Boldly started with Bootstrap 4, which was still in BETA at that point. Luckily it was released during this project so I had a stable base to work on. Phew. All-in-all pretty straight forward project setup with SCSS for CSS compiling, of course.
Browsing and searching the offer pages is done with ReactJS. Data is fetched from same services that the app uses, so data is always same and up to date. Search terms are stored in location url hash, and in state too of course. Some page scroll handling was needed for users with smaller devices so that they can return to current scroll location after leaving the page instead of scrolling from top of the page again, and again, and again. SEO for ReactJS parts of the site is handled by Helmet-component.
Shopify JS SDK integration was used for physical products. Product content fetched with Javascript to the main site, landing and campaign pages. Very beneficial when having the same product in numerous places and also have access to wide variety of useful tools within Shopify framework.
For UI icons I went with FontAwesome-library. Just wanted to play it safe when it comes to maintaining this site in the future. I am a huge fan of :before and :after CSS pseudo-classes, so the site is littered with neat tricks using those in various manner. Surprisingly, FontAwesome icons can be used as pseudo-class content!
Result
As always, it is a continuous work in progress. Nevertheless, I think it looks and works sweet:
cityshoppari.fi/edut/
