I converted Anne Marie's drag & drop site into one that is beautiful, professional and image rich, but still fast. And I got to improve my coding and learn a few new things.
Anne Marie got my name from Anna at reformDublin. Anne Marie had a small site built with the Register365 Site Builder. She wanted a new skin and look to her site but did not have the time to do it. All the content and imagery was ready to go.
I reviewed the existing site and wrote a proposal listing the features of the site and how each could be improved e.g. suggesting adding new images or some effects. I encouraged expanding the site to include a blog and case studies for each client.
As for every client, I created a development site on one of my websites. This allows the client to review my progress and provide feedback throughout the project.
While it is quite easy to maintain content in a WordPress site, I made it it even easier to maintain the testimonials, services and clients pages. These pages display their content in a structured way that would be easy to break so I separated the content from that structure. Now it is practically impossible to break it – the code creates the structure on the fly so there is no need for the site owner to know how it is put together.
The “What We Do” page above is one of those “structured pages” – and the editing (shown below) is very easy – the title, description and image are set and then the order can be changed by dragging the services around.
The site works flawlessly on mobile devices and, while being image rich, it is fast.
When the site was launched I ensured that the old links in Google were redirected to the new pages so that previously earned “SEO juice” was not lost.
It was a pleasure to work with Anne Marie – she delivered images and text very promptly and provided valuable feedback very quickly. We were able to complete the project within a few weeks. I got the opportunity to learn more things and improve my development skills.
Technical Features
The existing site only had a few pages so copying the content to the development site (on my multisite installation) was quick. When recreating the clients page, services page and testimonials page I thought about future maintenance of them. As I like to constantly improve how I do things, I chose to use Advanced Custom Fields Pro (ACF Pro) and its Repeater Field feature to make it very simple to change the contents of those pages. The client will be able to add, remove and reorder the content of each of those pages (see the screenshot above).
With the content stored in a structured format it was easy to experiment with how it was presented.
For the services page, previously a simple unordered text list, I suggested adding a photo and description for each. A few weeks before working on the project I saw some excellent hover effect demos on Codrops. I decided to use the “Julia” effect to reveal the service description on hover.
The site theme is built upon the Parallax Pro theme by StudioPress. Like most Genesis child themes it does not include any unnecessary fancy effects like sliders. This keeps Genesis based sites fast and this is very important. I felt that it needed a little bit of animation so I incorporated the ScrollReveal JavaScript module. It’s reasonably subtle – the specified text blocks fades in and moves upwards as it is scrolled into view.
During development I had a strange problem with ScrollReveal. I had it set to fade in the top menu as well as the main content. When logged in, with the toolbar showing, the menu text faded in, but not when I wasn’t logged in – the menu didn’t appear! I fixed it by limiting ScrollReveal to the main content. I later realised that the menu didn’t fade in because the menu, at the top of the page, wasn’t moving enough to trigger the fade in effect. This is why it worked when logged in – the toolbar, displayed above the menu, allowed the menu move enough to trigger the effect. It was a mind bending problem.
The old site only had 6 urls indexed in Google. I added 301 redirects to the .htaccess file to map them to the new urls (which had nicer urls e.g. http://amforanpr.ie/our-story/4584648859 changed to http://amforanpr.ie/our-story/).