Posts

Case Study | Jenna Meade

Website: jennameade.com.au
Services: design, develop, deploy, optimise, seo-setup


Design

Jen has been well established as a journalist for years now, yet never had a home to collate all those years worth of writing. Until now!

We sat down and went over everything, and I mean everything. Then we stood back and took a minimalist approach, basically stripping back everything to its most basic form and removing anything that was not absolute in its necessity.

What we were left with was a simple flyer like home and contact page in one. It gets straight to the point telling you what she does and what she’s all about. Let’s you know she’s worked with some top notch publishers and gives you quick access to contact her.

The rest of the site is aimed at providing a pleasurable reading experience for her writing; both on mobile and desktop. The small things add up here, character length of sentences, font choice, size and color contrast for legibility. They all go unnoticed by the untrained eye but affect the users experience on the website.

Develop > Deploy > Optimise

This build began about a month before wordpress 5.0 was released, they always release a new theme alongside it. So to get an insight into what devs from wordpress themselves are doing I grabbed the as-yet unreleased Twenty Nineteen from github.  Digging into its code it’s actually based off the _s theme which is several years old now. It goes to show good coding standards will stand the test of time.

There were a few  minor issues being using a pre-release, namely javascript things. I basically stripped out what I didn’t need and got the site up to speed.

GT Metrix performance score.
The homepage is running really smooth here with a good score. Further improvments to the theme and how it handles images will improve the score even more.

 

Case Study | Emma Power

Website: www.emmapower.com
Services: design, develop, deploy, optimisation, seo-setup


Performance Score for Emma Powers website by GT Metrix. Pagespeed Score 98%. YSlow Score = 93%
There was a lot of tweaking of the server with this website. I hadn’t used siteground as a host before nor the YooTheme framework. It resulted in a number of caching compatibility issues that had to be ironed out.

A minimal design for the amazing Emma Power.

Emma requested a website after seeing sunnycopy.com and fell in love with the simplicity and focus on words. Herself being a speaker, writer and teacher she too needed a website where the copy was crucial.

Who doesn’t love a one line brief?

“simple and easy to navigate”

With her one line brief “simple and easy to navigate” I had a fair amount of breathing space in terms of direction. This kind of freedom can easily be a curse if you don’t take a direction early on and stick to it.

Sunny Copy was a static html website and Emma needed the ability to blog. So I needed a cms and wordpress is my goto for that. Seeing as I’d only been back developing for a short period I’d been reviewing basically every CSS framework under the sun. I wanted a framework that had some bells and whistles but wasn’t bloated. I would hopefully choose the right one and be able to use it for more projects. Then I came across Uikit; it was modular, so it could be lightweight and powerful.

But here’s where I went wrong. The mob behind Uikit also have made a wordpress page builder (yoothemes) for throwing pages together fast. I played around with it, it worked really well. So I decided to use it to build the site. The problem with these kinds of page builders though, is you really paint yourself into the corner. They’re great, until you want to do something outside of the tool-set they built-in for you to use. Being a dev of course I was going to run into this little problem, time, time and time again…

Dev headaches aside; it took longer than necessary to build. However the design took shape quickly.

text and elements fading in for subtle effect on Emma Powers homepage
Subtle animations to the text help bring it to life.

With a focus on the website copy I opted for minimal elements, using animation to bring the text to life.

Animated text on Emma Powers wesbite
Text animates into place as you scroll down the page.

These small touches allowed me to incorporate less images and focus on the words.

To round things up I’d have to say I was pretty happy with the outcome.

It’s beautiful, and I can see how every detail has been so well thought through. – Emma

Emma was happy and she had a professional looking website that communicated her words in a way that represented her honestly.

Tech jargon:
- wordpress cms
- yootheme pro framework
- uikit3 css framework
- acf
- autoptimize & cache enabler
- cf7
- the-seo-framework

Case Study | Sunny Copy

Website: sunnycopy.com
Services: branding, design, develop, deploy, optimisation


Performance Score for the sunnycopy website by GT Metrix. Pagespeed Score 100%. YSlow Score = 90%
Optimising a website can be quite an enjoyable process. If you liken it to working on a motor or tuning an instrument.

This is the website that pulled me back into web after a long hiatus. Sunny Copy is the brainchild of Jenna Meade; a copywriting freelancer targeting other creatives.

Words being the the focus for her work and brand, we agreed on a simple design not only for the website but logo too, conveying her message in a minimal manner.

Using a single page static website gave us the most flexibility and optimal performance. Small touches of javascript animations and a careful touch of colour help bring to life the words she so beautifully writes and all elements tie harmoniously together.

Homepage animations drawing the audience into the text.
Technical notes:
- static html
- css/less
- javascript for animations
- font-awesome icons