Two recent projects
A complete overhaul of EMC2 Property
EMC2 Property is a website which provides news, guides and property for sale from around the globe. They approached me requiring a complete redesign and restructuring of their website.
Overview
The website was generating 98% of it's traffic organically. Of this traffic, around 90% was to the articles.
The remaining 10% of traffic was landing on the "for sale" pages. However to compete with the likes of Zoopla and Rightmove, something needed to be done to increase this portion of traffic.
The problems
Goals - A faster, higher performing website
Prior to project start, we agreed upon meeting the following goals.
Built around 3 core principles
Simplicity
Minimalism
Performance
Planning - Crucial for a live website
All current URLs were noted down and were mapped to their future paths with 301 redirects - I suggested trimming the content of the website (for SEO reasons) - many pages would return a '404 not found' error if this stage was skipped - not good at all in the eyes of Google.
Decisions & development
Every decision made had the end goal of ensuring that the final website would be high performing with an easy to navigate interface.
Some key decisions/requirements
Next.js & React framework was chosen to provide a significant boost to performance with a maintainable codebase compared to the old WordPress version.
Consistent design accross the site with articles converted to markdown files, displayed on the frontend with reusable components for simple editing.
A simple method to add structured meta data for SEO to the articles and pages.
Roadmap of the process
1. Planning
Mapping URLs & planning the following stages
2. Wireframing
Logical, simple wireframes to test layouts
3. Basic file layout
Ensuring all files were structured and manageable
4. Content conversion
Old WordPress posts converted to markdown files
5. Page setup
Initial development of each main page
6. Component dev
Development of layout, mobile nav and various other components
7. Styling & animation
All pages styled and brought to life
8. SEO content
Meta data input to static pages. Dynamic data pulled from .md files
9. Accessibility testing
Testing that the website was accessible to a screen reader
10. Tweaks & setting live
Codebase tidying. Build configuration setup. Website exported to GitHub and deployed on server.
11. DNS & hosting
Domain pointed to new server. Old public cache flushed.
12. SEO & next dev
SEO maintenance and development of future features.
Design - Minimalistic and bold
I aimed to create a final design which would be clutter free and easy to navigate.
The previous colour scheme didn't seem to work well, so I redesigned the lot - Logos, icons, layouts and colours. To give more emphasis on headlines and provide more depth to the design, a serif font was chosen for h1-h4's and a sans-serif font for all other body text.
The final website and results
The outcome, final design, performance and technical spec.
The technical specification
- React & Next js
- Current databse - None
- Future databse - MongoDB
- Full accessibility - ARIA functionality
- GSAP animations
- Article format - Markdown
- API for all posts
- Rich meta data
- Excellent performance on mobile devices & 3G connections
- Dynamic JSON markup for every page
- Prerenderred - instant page transitions (no loading)
Old vs New
A comparison of the old homepage and the updated design
Performance
Poor performance was holding EMC2 Property back. The new site is exceptionally fast considering the size and quality of the images used on the site - moving away from WordPress to a more modern and secure framework has helped solve this.
PageSpeed Score
YSlow Score
Load time (London)
Load time (Vancouver)
Page size
Requests
Old
94%
88%
2.4s
6.7s
1.39MB
67
→
→
→
→
→
→
New
97%
97%
0.7s
0.8s
0.98MB
44
Explore the site
Simply posting more images doesn't give you the feel of the website - go check it out to see the design and performance for yourself.. just remember to come back here after and fill in a contact form to get your own high performance website 😊 Click here to go to EMC2 Property.
Let's discuss your project
A strong online presence is vital, especially in present times.
Don't compromise on your website or online presence - Give your business the best chance for success and have peace of mind that you've chosen a professional, dependable and reliable service.
A web app in development
Apex legends player tracker which integrates two 3rd party APIs.
This React application is currently in development.
The first API is integrated on the homepage to update all worldwide server status and responses in real-time.
The second API is used on two pages - the weapons page, which displays all information regarding each weapon available in the game, and the second, more complex use is on the player tracker page.
The player tracker page accepts two inputs - the platform (currently PC or PS4) and the player's name. This information is sent as a request with a base URL, which returns various player information such as:
- If the player is online.
- The most recent game character played.
- The most recent stats.
- Their level and rank.
- And various other information.
As the web app is in development, ping me for the development URL so you can take a look.
Let's discuss your project
A strong online presence is vital, especially in present times.
Don't compromise on your website or online presence - Give your business the best chance for success and have peace of mind that you've chosen a professional, dependable and reliable service.
