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
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.
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 (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 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 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.
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.