Redesigning My Portfolio Website Pt. 2
September 18, 2020
Welcome to the second part of “Redesigning My Portfolio Website.” Previously, I left off with writing project descriptions for each portfolio item. Those are all written now. Below, I discuss further changes to improve my website.
Revising Margin & Padding
Some webpages did not show the designated margin and padding settings I had for my website. Before, the photography pages were made from templates. They would not show the correct margin and padding settings on desktop, tablet, and mobile versions. My solution was to just recreate the photography pages. The photos go in chronological order, so I listed the photos in my Notes app for future reference. I deleted the old photography pages and made new pages. Referring to Notes, I created new media galleries for each photography page in chronological order with titles and dates.
Writing SEO Descriptions & Making New Mockups
I discovered when I shared a link to a page, it was not showing a preview image that I wanted. I researched more about link previews and discovered SEO. There is a WordPress plugin called Yoast that enables you to choose specific images for link previews. Also, they provide SEO tools to enter SEO titles and descriptions. I had 20 pages to go through to add link preview images and SEO descriptions. To start, I made more portfolio mockups to fit the link preview size and write up SEO descriptions for all the pages. Along the line, I added another portfolio item under Albarella Design and had to create mockups from scratch. I designed three mockups depicting different views of a mailer. After each page was done, I debugged the pages through Facebook, Twitter, and LinkedIn Debugger tools. This clears up the cache to show the new link preview image, SEO title, and SEO description. Now, when I share a link to the Contact page or a portfolio item, it shows those details. Another result is when you google search “my linh olsen albarella design,” it comes up with the SEO title and SEO description.
Submitting XML sitemap & Improving Website Speed
In the first blog post of redesigning my website, I had Google Analytics set up. However, I could not figure out how to add my website to Google Search Console. I tried every method they mentioned and tried finding solutions by googling. I finally hired someone on FIVERR, a freelance services marketplace, to set up Google Search console and speed up my website. Through Google Search Console, you can submit an XML sitemap. This enables your website to be in the top google search hits. It is another excellent SEO tool that helps people find your website. According to the person on FIVERR, my scores on GTmetrix were bad. There are many images on my website, so he downsized some images for me. Later, I went back in to downsize all of them to 1500 x 1000 pixels. Along the line, I discovered an amazing tool called GTmetrix to check your website speed. It can also detect other problems that are causing the website to slow down. It is up to you to troubleshoot and solve the problems. This was where I discovered I needed a content delivery network (CDN).
Setting up W3 Cache Settings & CDN on Stackpath
GTmetrix recommended having a CDN to help with website speed. While researching CDNs, I learned it can significantly speed up your website. I chose to go with Stackpath on the basic paid plan. The CDN and SSL setups on Stackpath and WordPress were easy. However, I discovered the importance of caching. My theme came with W3 Total Cache in its default settings. It turns out if you have the right caching settings, it can improve website speed as well. Additionally, I downloaded a plugin called WP Disable. It can help get rid of excess WordPress features. This includes disabling emojis, removing query strings, disabling google maps, etc. It takes some time to figure out what to enable and what to disable. Some settings can help speed up your website while others can mess up your website.
Switching to Cloudflare & Fixing My Original Website
I did some more research on W3 Total cache settings and discovered Cloudflare. Cloudflare is like Stackpath but with some minor differences. The main one for me was that their basic plan was free. I wanted to save money and not have to pay for a CDN. I tried switching from Stackpath myself but almost ruined my website. I hired someone on Fiverr to switch to Cloudflare’s CDN and SSL. After that, I asked the person I worked with if he would be able to fix my previous website (.com). He said he could clone my .co website over to the .com website. I had read that it was better to have the .com URL. Knowing myself, I knew the .co domain name was a temporary solution. He was able to fix this website, add Cloudflare CDN and SSL, Google Analytics, and Google Search Console for XML sitemap.
Concluding Thoughts
I am not surprised at how much I am enjoying website design. When I took a class back in 2017, I loved it then too. At times, it can be imitating. What I do not enjoy about web design is that if there is a problem, it is hard to pinpoint the source. Sometimes you do not know where the problem is and how to fix it. This is when a web developer on Fiverr comes in with their expertise. You need to make sure files and settings are correct or else, they can break your website completely.
All of these things I have done for my website, I knew nothing about beforehand. It has been a lot of trial and error with running on knowledge from just one web design class. However, I am glad I took a second chance with keeping my portfolio website on WordPress.org. I know a few of my design friends transferred over to Squarespace because it involves less coding. They take care of many website speed elements (CDN, expire headers, etc.). I had to figure out and implement those myself. I did think about transferring over to Squarespace. However, I would have missed out on learning more about the frontend and backend of a website. Most importantly, I would not have been able to fully customize my website. By finding problems and searching for solutions with a little help from Google and FIVERR, I have expanded my knowledge of web design.
I have always had an admiration for web designers and developers. Take a second to imagine building a website from scratch. I could not fathom it because it would require so much coding. It’s already taken me an estimated 200+ hours with a premium WordPress theme I bought online. However, I am not opposed to trying with guidance from someone who knows what they are doing. I would have loved to minor in web design; however, my university did not provide enough web design classes. Maybe one day, I will go back to school for that!
