WordPress integration of а one-page multilingual site including responsive work, retina support, custom animations and parallax effects.
The design was provided as a well-structured PSD file with layer groups. Items like navigation and popups were prepared in separate hidden groups. All groups were in different colors which made the working process very smooth.
The requirements were clear: the project had to be multilingual and responsive. Additionally, the content and images had to be easy to edit.
The requirements were clear: the project had to be multilingual, responsive and including nice animations. Additionally, the content and images had to be easy to edit.
Our client also had several additional needs:
Our client also wanted the content to be translated.
Despite the well-structured and clear instructions, there were some things that our client hadn’t mentioned. We discussed the following:
After clearing all details about the project, we made a summary of everything we would be doing:
The time frame for the project was 7 Business Days
The ticket was posted in our client area (The Workshop). Scott (project manager) assigned the project to Ted (front-end developer) and Stan (back-end developer) in our internal project management system, and they discussed the requirements. Time to get started!
We sliced the images and exported them as @1x and @2x sprites for non-retina and retina displays respectively.
The project was pretty straight-forward so we didn’t hesitate too much. We stacked the different elements from the page and make them look nice on tablet and mobile devices. We kept the animations as well.
Most of the sections were pretty standard and we just split them into 1 or 2 columns for the mobile view. We also tested all buttons and made sure that they were easily clickable.
The client requested that we applied a parallax effect on the intro section, as well as a subtle animation as the splash page switched to the main content area.
Concerning the gallery, we took an advantage of an existing jQuery gallery plugin which had some nice built-in animations and handy features.
Once the development was completed, Ted tested the project on a few different devices and browsers. There were a few small issues and he fixed them. After that, the project was completed and marked as “Ready for QA”.
Then, Della (QA) started the quality assurance process. She reviewed the designs and the summary of the project. She tested the web page on a variety of devices and browsers and spotted a few bugs.
Overall, she was happy with the result but there were a few issues that had to be fixed. She also noticed a few things that had to be polished in order to make the project perfect. Ted fixed the issues and finished the improvements.
After being done the final touches, the project was reviewed by Scott. The WordPress integration phase was about to start.
Let’s make the site fully dynamic!
We took the completed HTML files and created the skeleton of the WordPress site. The real show was about to start.
We made each section easily editable from the administration.
After making each section editable from the WordPress administration, we moved forward to the integration of WPML, a premium plugin which we used for building multiulingual sites.
Stan created 2 versions of the site: Bulgarian (the default version) and English. Additionally, he populated the content of the English version.
Check out the video below the see the whole thing in action
We created an archive with the source files and uploaded the project to our preview server. Our client received a responsive, multilingual and easily editable WordPress site.
WordPress integration of а two-page site including drag & drop custom page builder, parallax effects, and animations.
WordPress integration of a 6-page site including an e-commerce store, advanced product filtering, responsive layouts, and retina support.
