Australian Cancer Research Foundation
Dedicated to funding promising Australian cancer research projects.
Requirements
We had to implement website based on provided comprehensive technical specification and corresponding design in Sketch. After we received a design, we broke the project into sprints to deliver the Front-End/Back-End, essentially transforming Redfox Media specification and design into a high-quality website.
Our services contain:
- Sketch to HTML conversion
- WordPress Custom Theme development
- Cross browser & device testing
THE COOPERATION
Our team includes 4 people - Project Manager (Krzysztof), WordPress Developer (Karol) and two Front-End Developers (Katarzyna and Marek). On the Redfox Media side, the team was built by Technical Manager/Designer (Lance) and Back-End Developer (Patrick).
Lance has prepared both very detailed documentation for the project and beautiful design. Our team was astounded by his various skills that turned out to be very helpful during the whole process of website development and project management.
communication
Despite the fact that our office is situated on the other side of the globe and we have 10 hours difference, the communication went surprisingly smooth between our teams. Thanks to TeamWork (project management tool) we could organize our work and manage the project tasks without any inaccuracies.
Technologies and Tools we used:
Front-End
- HTML
- CSS3
- SASS
- JavaScript
- jQuery
- GULP
- Scroll Animations
- Parallax Effect
- BrowserStack
- LibSASSerPlate
Back-End
- WordPress
- ACF PRO
- Underscores
- PHP 7.2
- FacetWP
- SearchWP
Time frame
Whole project took us 6 weeks.
Step 1 Materials Gathering
At the beginning of our project, we received specification with design in Sketch. Our first move was to prepare a Style Guide for reusable components starting from Form Styles and plan for Grid system.
Step 2 Management
After managing initial Style Guide, Krzysztof prepared initial Sprints. In general, the project was divided into two stages:
Front-end Development Stage
We always prefer to split front-end development from other phases because it is much faster and has less potential risks of bugs appearing. Especially, when we could use our dedicated tool for HTML&CSS - SASS starter (LibSASSerPlate).
WordPress Development Stage
Once we prepared HTML&CSS + main JavaScript code, we have planned to implement static files into WordPress custom theme.
Step 3 HTML coding
Front-End phase always starts with building Website structure in HTML. We emphasise creating HTML components to be as much reusable as possible. In order to make clean and clear code, we use BEM Methodology to maintain order in project.
BEM Methodology
BEM (Block, Element, Modifier) is an open source technology for developing websites that need to be created quickly and maintained over many years. BEM is used in the front-end development of all Pagepro services.
Step 4 (S)CSS coding
In Pagepro we are using SCCS to writing styles code, as it allows us to achieve great efficiency and reduces risk of future issues on different browsers.
Nowadays, features like mixins or variables for colors, sizes and breakpoints are a “must have” standard in Front-End Development. It makes code reusable and easier to understand for other developers.
Step 5 Responsive version
We always declare Breakpoints values as SCSS variables for different devices that allows us to make them reusable and keep standardization of our templates.
Step 6 First Q&A Stage
We always conduct comprehensive Q&A phase after delivering complete Front-End code. Most of all, we are making sure that particular website is working properly on different devices and on all modern browsers, including Chrome, FireFox, Safari and Internet Explorer.
As a tool, we use BrowserStack for checking compatibility on multiple desktop and mobile browsers. Moreover, we are using real devices to check website functionalities. At least two devices with iOS, two with Android system and two with Windows Operating System.
We always use W3C Validator validator to validate our code. Besides, we are using Pixel Perfect plugin for website’s current layout comparison to the provided design. Our Q&A assistant had been working hard to find all bugs before he handed the code to WP Developer and WordPress Development phase has begun.
Step 7 WordPress Development
As initial action our that our WP Developer took, was to prepare Underscores WordPress Starter for theme development. He had also used ACF Pro plugin in order to make Custom Fields and make almost everything on the website customizable.
Step 8 FINAL Q&A AND UAT
When everything was successfully implemented, we went with the client through the settings and explained how to manage the content. We made sure that everything is clear and meets the client’s needs.
Step 9 Live Deployment & SLA
The whole process of creating the website described above was being made on development environment. Once client is happy with the results and we get his approval, we migrate everything from development environment to production. It is the last step of our website creation process but not least. After that we provide support service to our clients and help them to develop new features to the website.
Should we get it done?
Let's talk about you now!
Tell us about your challenge, and let's get the ball rolling.
Testimonial:
The website was delivered on time and on budget. Redfox Media's multiple touchpoints led to comprehensive communication and a unified vision that is rare for fixed-price projects. Differing time zones led to logistical challenges, but their experience and work ethic compensated for any issues.
Have a similar case? Use our experience!
Talk to our expert and see what we can to do push your project further.
