PSD to HTML conversion of 10 pages with Bootstrap including responsive work, retina support, custom animations, parallax effects and some more JavaScript features.
The design was provided as 10 PSD files - 1 PSD for every page. The design files also contained information for the different states: dropdowns, mouse-overs, tooltips, popups. Everything was retina-ready and all layers were well combined in groups.
This project was for online design contests - users could apply for different design competitions. The design was pretty cool and it had to be modern in terms of looks and functionality.
Our client needed 10 PSD files to be converted into Bootstrap HTML/CSS templates. The requirements that she provided were the following:
Most of the project details were clear. However, we had discussed with the client only a few points, for example: how the templates were supposed to look on bigger screens ( about 1920px wide ), what animations were expected to be done and if the filtering was going to load data from external files.
We prepared some examples with animations and screenshots for how the project would look on bigger screens. They were exactly what our client had expected as a final result. Concerning the filtering, she decided that it would be best if we used our best judgment.
We also discussed a few less important points:
After clearing up all the project details, we made a summary of everything we were about to do:
Everything was approved and we were ready to proceed with the development.
The time frame for the project was 7 Business Days
The project was big, interesting and modern. We assigned it to Paul (a front-end developer), highly specialized in development with Bootstrap and a solid background in JavaScript and animations. However, the filtering functionality was prepared as a separate script by our experienced JS developer Ethan.
For this project, our client preferred slicing the icons and implementing them with sprites ( @1x and @2x ) instead of preparing icon fonts. Besides the icons, the other images that we had to slice were the actual images ( projects' thumbs and users' pictures ).
We coded the HTML according to the requirements - we followed our coding standards and we used Bootstrap’s grid and other features. For this project we used SSI ( Server Side Includes ) which we usually would do for all projects. Since it had 10 pages, the SSI allowed us to use the same header and footer files for all of them which was great.
For the responsive version we pretty much followed the Bootstrap default grid. However, we did a lot of updates in order to make the pages look perfect on different devices. We added touch/swipe support for the sliders and the other features that were accessible through the mobile/tablet version.
For the mobile navigation we prepared a custom burger button turning into an arrow when pressed. This animation was supposed to indicate how the navigation could be closed.
For most of the other content areas - we did some rearrangements and resizing in order to fit the content in the screen and make it readable.
We added some subtle animations on the landing page. The elements were made fading and moving a little when they appeared in the viewport. We decided to apply these only on the homepage since it was the only presentational page.
The animations were not suitable for the other templates since they were more functional and the users would need them to load faster.
Regarding the filtering, we decided to load the whole projects list from external JSON file with AJAX. The data that we hosted in the JSON file was: name, description, rating, category, etc ( actually the whole information that could be seen on the pages ).
We did the filtering based on the selected category and we rebuilt the pagination below the list according the selection. We also added a subtle animation in order make the functionality more user-friendly.
Paul completed the development and tested it on a few different devices and browsers. There were some different bugs because of how the browsers interpreted the styling and he fixed them. After that, the project was completed and 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 number of devices and browsers and spotted a few bugs.
She was happy with the result, but there were a few issues that had to be fixed and she also noticed some things that had to be updated in order to make the project perfect.
She passed on her comments to the developers and they resolved all issues and made the final touches that Della requested.
After Della made sure that all of the updates were properly done, the project was completed.
Check out the video below the see the whole thing in action
We built the CSS modules and uploaded the project on our preview server. The client reviewed the project within a few days and requested a few small additions which we did in good time.
PSD to HTML conversion of a one-page Bootstrap project including responsive work, retina support, custom animations and parallax effects.
PSD to HTML conversion of 4 pages including responsive work, retina support, custom animations, parallax effects and some more JavaScript features.
