Project Case Study

The Train Station WordPress integration

WordPress integration of a two-page site including a drag & drop custom page builder, parallax effects, animations.

  • Custom WordPress Theme
  • Page Builder with Sections
  • Responsive
  • Custom Animations
  • Google Maps
  • Gravity forms
  • Parallax
  • Retina support
Preparation

Design

The design was provided as well-structured Adobe Illustrator files. There were 3 files ( desktop, tablet and mobile ) for each page.

Design

Requirements

The main requirements were for a responsive and full retina-quality WordPress site with parallax effects. The client also needed customizable page sections which could be easily removed or added to any particular website page.

  • Retina-quality WordPress site
  • Parallax effects
  • Responsive layouts
  • Manageable from the WordPress administration sections
  • Options for reusing each section throughout the site
  • Installing the site on MediaTemple hosting upon completion

Clearing up the details

Despite the well-structured and clear instructions, there were some things that our client hadn’t mentioned. We also discussed the following:

  • Was he going to send any designs for the responsive versions?
  • Were there any exact expectations about the animations?
  • Were any additional plugins for SEO optimization necessary?
  • Did the client need additional video tutorials for managing the content?
  • Was the site supposed to be installed on our client's server upon completion?

And we started...

The time frame for the project was 10 Business Days

Management
Step 1

Management

The ticket was posted in our client area, the so-called “Workshop”. After we carefully reviewed all details and clarified the requirements with our client, we were ready to move forward!

Slicing
Step 2

Slicing

We sliced the images and exported them as @1x and @2x for non-retina and retina displays respectively.

Step 3

HTML Coding

We strictly followed our coding standards and created a semantic, bullet proof HTML5 markup.

Step 4

CSS Coding

We created well-structured, commented CSS styles and media queries for the tablet and mobile layouts.

Responsive version
Responsive version
Step 5

Responsive version

The provided designs were self-explanatory. We created the tablet and mobile layouts and applied a nice animation for the navigation menu.



Project preview
Project preview

Most of the sections were pretty standard and we just stacked them for the mobile view. We also tested all buttons and made sure that they were easily clickable.

Step 6

Parallax Animations & Misc

We created a complex parallax effect for the intro section which imitated a moving train, as well as a subtle animation for the secondary image area.

Project preview

We created the blog at our discretion and best judgement. Additionally, our client requested the Disqus plugin which we installed and set.

Step 7

Fine tuning and QA

Once the development was completed, Ted (front-end developer) tested the project on a few different devices and browsers. There were a few small issues which he fixed. After that, the project was 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 pages on a majority 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 noticed a few more things that had to be polished in order to make the project perfect. Ted fixed the issues and finished the improvements.

After being done with the final touches, the project was reviewed by Scott. The WordPress integration phase was about to start.

Project preview
The static site is ready!

WordPress integration

Let’s make the site fully dynamic

Wordpress integration
Step 8

Base WordPress integration

Stan ( back-end developer ) took the completed HTML files and created the skeleton of the WordPress site. The real show was about to start.

Custom fields
Step 9

Custom Fields and Page Builder

Our client needed a way to check off a section for each page and wanted to be able to create new sections on the inside pages.

We started by creating custom fields which we organized in sections, so that each part of the site could be managed super easily and without requiring any special technical knowledge.

Building new pages with ease

We created 4 types of sections:

- Fullscreen Images And Text
- Posts Section
- Map Section
- Text And Image

Each section was made containing various fields:

- Google Map Field
- Image Upload Field
- Repeatable Button Field

Step 10

Final Touches and QA

We paid special attention to the way each section from the site could be managed. We tested the functionality and installed the project on our staging server for a client review.

Voilà!

The project is ready!

Check out the video below the see the whole thing in action

Project preview
Delivery

All the hard work is done

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.

Overall

Project Estimate

Price:
$1222.00
Timeframe:
10 Business Days
Previous / Sweet Blinds

WordPress integration of a 6-page site including an e-commerce store, advanced product filtering, responsive layouts, and retina support.

  • Custom WordPress Theme
  • WooCommerce Store
  • Advaced Product Filtering
  • Color Variations
  • Gravity forms
  • Retina support
Next / ArtSchool

WordPress integration of a one-page multilingual site including responsive work, retina support, custom animations, and parallax effects.

  • Custom WordPress Theme
  • Multilingual Support
  • Responsive
  • Custom Animations
  • Content transfer
  • Parallax
Project preview

This Is Our Web Let’s shape it together!

© htmlBoutique 2008-2016. All Rights Reserved