Real girls with real lives.

Woodland Girls is a lovely duet of Mom (photographer) and Daughter (model). Inspired by nature, calmness and majesty of the landscape.

Mom - Karina A Polish native, had an amazing time in China, currently based in Germany. She is a Fine Art Master since 2005 related to the fashion, unique image maker, stylist, obsessive lover of artisan moments, timeless storyteller in love with the universe of vintage.

Daughter - Konstantina A Polish and Greek native, child of the forest and sea, adventurer, curator of all happy things, milk lover, fast – moving fairy, eternal dreamer, a rare gem who believes in magic.

The Challenge

Woodland Girls needed fast, responsive, image focused website with easy to manage CMS.

We built a beautiful, responsive HTML5 site from scratch to showcase Woodland photographs. Rather than simply displaying the photos, our team created an immersive storytelling site.

Requirements

After discovery stage we decided to prepare WordPress driven HTML5 responsive website with CSS and JavaScript animations.

Our services contain:

  • PSD to HTML conversion
  • WordPress Custom Theme development
  • Cross browser & device testing

The Cooperation

Marta Staroń (Leshaya) partnered with Pagepro to create modern website for Woodland Girls. Leshaya picked up Pagepro for the fourth time and she is planning to hire us for her futher web development projects.

  • HTML5
  • CSS3
  • SASS
  • JavaScript
  • jQuery
  • GULP
  • Scroll Animations
  • Paralax Effect
  • BrowserStack

Time frame

Whole project took us 6 weeks.

Step 1 Kicking off

First thing was to check if we have all materials. Marta provided us with: PSD & JPG design files, SVG icons, basic requirements and animation examples on different websites.

We've made sure if we have the latest version of the files by presenting her materials summary on FrontendApp (our internal tool), also we've checked if SVG icons are prepared for web-use.

After reviewing the materials, we've prepared list of questions and suggestions, we asked Marta to do the kick off call for making sure if we understand all her specific requirements.

Step 2 Management

The project was actually split in 2 stages - HTML/CSS building and WordPress development.

Front-end Development Stage

We always like to split front-end development from other phases because it is much faster to prepare CSS & HTML using front-end tooling, like our own SASS starter (LibSASSerPlate).

WordPress Development Stage

After preparing HTML&CSS we've planed to implement static files into WordPress custom theme.

Step 3 HTML coding

After planning project architecutre we always start with building HTML. We are making sure if code is split into tiny, easy to re-use HTML components.

BEM Methodology

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

SCSS structure needs to be well designed and should be refactorized during project life time. Using easy to understand variables for colors and sizes is a must have. It makes code reusable and easier to understand for other developers.

Step 5 Responsive version

We used Gridle Breakpoints to create 
the tablet and mobile layouts.

desktop version of the page
tablet version of the page
smartphone version of the page

Step 6 First Q&A Stage

Before starting WordPress development we always do first Q&A stage. At this stage we're testing the website on all modern browsers.

Our Q&A assistant is making sure that everything looks the way designer wanted and works smoothly on all devices. We're doing testing on real devices and on emulated versions using BrowserStack.

This stage is always conducted before WP integration, because it is much easier and faster to do bugfixes on static HTML & CSS templates.

Step 7 WordPress Development

During the WordPress integration we took the static HTML files and created the backbone of the WordPress site. We're using Underscores as a starter for developing custom theme.

We've lunched the website on test server with some prepopulated content just to verify if everything is editable and displayed as it should.

After successful implementation we've prepared short instruction describing steps needed to update content on the website.

Step 8 Final Q&A and Optimalisation

Once the development was completed, we've done Speed optimalisation. We've tested the project on a majority of devices and browsers. There were a few small issues which had to be fixed.

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

Google Page Speed Insights

Testimonial:

Pagepro was my first and the best choice. Their knowledge, skills and experience are very impressive. They pay attention to details and do their best to deliver expected product on expert standard. As a visual designer I can confirm that Pagepro can bring my design to live in the way as it was designed or even better. I truly recommend Pagepro as open-minded specialists with great abilities.

Marta Staroń
Marta Staroń. Freelance Designer

WoodlandGirls

http:// woodlandgirls.com
WoodlandGrils Screenshot