Project Case Study

ArtSchool WordPress integration

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

  • Custom WordPress Theme
  • Multilingual Support
  • Responsive
  • Custom Animations
  • Content transfer
  • Gallery with popups
  • Parallax
Preparation

Design

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.

Artschool designs

Requirements

The requirements were clear: the project had to be multilingual and responsive. Additionally, the content and images had to be easy to edit.

  • WordPress had to be used as a content management system.
  • The site had to be in 2 languages.
  • Fully responsive project (desktop, tablet and mobile).
  • All icons and images had to be retina.
  • Lightbox had to be used for the lessons and the gallery.
  • The form had to be functional.
  • Animations and parallax effects had to be created at our discretion.

Clearing up the details

Despite the well-structured and clear instructions, there were some things that our client hadn’t mentioned. We 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 7 Business Days

Artschool management
Step 1

Management

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!

Artschool slicing
Step 2

Slicing

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

Step 3

HTML Coding

We coded the HTML according to the requirements. We used HTML5 tags and strictly followed our coding standards.

Step 4

CSS Coding

For the CSS building we decided on using PostCSS. Its simplicity and clarity made this super fast CSS preprocessor great for this project.

Responsive view
Step 5

Responsive version

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.


Project preview
Project preview

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.

Step 6

Parallax and Custom Animations

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.

Project preview

Concerning the gallery, we took an advantage of an existing jQuery gallery plugin which had some nice built-in animations and handy features.

Step 7

Fine tuning and QA

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.

Project preview
The static site is ready!

WordPress integration

Let’s make the site fully dynamic!

Wordpress integration
Step 8

Base WordPress integration

We 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 WPML Integration

We made each section easily editable from the administration.

We created theme options, custom fields which we organized into tabs so that it was really easy for each part of the site to be managed without the need of special technical knowledge.

We hoped our client would really like the result.

Multilingual setup

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.

Step 10

Final Touches and QA

We made sure that the functionality worked perfectly and all of the specifications were fulfilled. The project was installed 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

Video cover
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:
$1048.00
Timeframe:
7 Business Days
Previous / The Train Station

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

  • Custom WordPress Theme
  • Page Builder with Sections
  • Responsive
  • Custom Animations
  • Google Maps
  • Gravity forms
  • Parallax
  • Retina support
Next / 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
Puzzle

This Is Our Web Let’s shape it together!

© htmlBoutique 2008-2024. All Rights Reserved