The process of reproducing emckelldesigns began with selecting WordPress as my CMS. I needed it to be simple and comprehensive for Emma to make future changes to her website in comparison to her former website. I started by analyzing the (soon-to-be) old website. The first stop was the base menu tree, this was key so I could remake pages procedurally once I had the base template and theme rebuilt. I also analyzed the theme and CSS so it could be recreated later.
Secondly, to create the base template, I used Chrome dev tools. This was to analyze the colours, fonts, asset sizes and text defaults that Emma applied to her old site. Once I had those, I used the WP Astra theme to begin generating the default look of the website. This base theme is where the pages would come to life when it came to content migration.
In turn, with the base theme created and everything matched up to the old website’s CSS, I started on the homepage. This is where I made the table grid to inject a 3 column grid that held the GIFs of her art projects equidistantly. Additionally, I also salvaged and injected her image hover CSS from her old homepage, this was to retain the behavior of the source material.
Page Recreation
As the homepage for emckelldesigns has colour differences in comparison to the rest of the pages on the website, I wrote my own custom additional CSS to override the base theme when the homepage is loaded, this included changing the CSS for:
- Giving the logo a white overlay
- Background Colour
- Header Background Colour
- Footer Background Colour
- Text colours,
- Menu, link and hover state colours.
With the main homepage finished, the remaining pages followed a repeated process of making pages with sections to match the original’s content spacing. The process involved making each page one at a time. It involved the following process:
- Copying and pasting headings and paragraphs.
- Re-making original hyperlinks in the new website in the same place.
- Uploading images and videos.
- Using WordPress’ built-in embedding to ensure external content was properly injected and formatted accordingly across devices.
- Ensuring the content scaled to devices properly with testing on each page using different devices.
Website Build Summary
Overall, the build process of emckelldesigns took no longer than a week of scattered evenings to throw this together, additional widgets and features like a search bar were added to enhance content discovery for readers in the future. I used the original site as a direct reference to rebuilding it page for page. I even retained her original custom CSS for image hover effects so the site was exactly as she left it. The only difference is with this site, the whole thing would scale perfectly to all devices, unlike the legacy site. I was very pleased with the final product and from conversations with Emma, she was even happier! I loved making this site as it taught me more about WordPress and how powerful it is.
About Emma (emckelldesigns)
Emma McKell is by far one of the most talented and underrated creative minds I have had the pleasure of not only working with but also knowing in my life as a friend. Her eye for colour and passion for perfection in her work made helping her rebuild her original vision in a modern building platform such as WordPress an absolute pleasure on the eye.
Emma is an award-winning creative mind with a massive collection of art and design masterpieces. She has worked with popular brand names and is indisputably the right person you need for your projects and needs. Emma’s determined work ethic and constant positive working attitude don’t even scratch the surface on how impressive her work is. I recommend her above any candidate you currently have in mind for freelance or dedicated positions.
See more of Emma’s work by following her here: @emckelldesigns
This website was not built for profit. I wanted to build it to expand on my skillset when it came to web development and website building for potential future application of the skill.