Developing my portfolio

Web development

Tuesday, Nov 7th 2017

Research

To start development for my portfolio, I began by researching different design techniques, this is so that I can see different design techniques that are popular. Also, it gives me a visual representation of what my website could look like, making the build process easier and faster.

The first design that caught my attention was a full-screen style where each section would take up the entire user’s viewport, with many sites using jQuery to scroll smoothly between sections. The drawbacks to using this design style are the user can end up scrolling too much and it may not look well on unusual viewports, so I continued my research.

The second design style that I liked used the parallax effect, where sections of the website would scroll at a different rate than their respective backgrounds. Unfortunately, I didn’t end up using this approach because the drawbacks are similar to the full-screen style and also, according to Dan Brown’s blog post, it is not mobile friendly at all.

So, the design style I set my eye on was right in front of me the whole time on my mobile phone, which was material design. Google introduced this concept with Android 5.0, and I believe it competes with Apple’s flat design style. I love this design style as it is very simple and minimalistic and there is no need for too much code, therefore making the website load faster.

Design

Although my drawing skills are awful, I began the design phase by sketching some low-res wireframes to give me a visual idea of where my content would go.

Low-fidelity wireframes for Homepage and blog page

I wanted to add a little uniqueness to my design so my initial plan was to have angles on some sections to make them look less like a rectangle. I got a few friends to review my design to see if it was good and they felt that the website would be too long so they suggested I simplified it a little.

So, my second design merges the about me and CV section and I made the elements in the portfolio section go down, making it differ from the blog section. Each blog page will have the same general layout with the blog post overlapping the hero image.

Build

The build process is my favourite part of developing websites as I get to see the website come to life. I started by getting the main 'HTML' elements setup so I have the structure of my portfolio ready. Then I validated the code to make sure I didn’t make any errors, and once it passed, I converted the page to 'PHP'. To do this, I placed both the header and footer in separate files so I can use includes on each page, which makes it easier to make future improvements and it utilises less code.

For my CSS, I used 'rem' to size my elements as it is a relative unit which is better than using the conventional 'px', as this is an absolute measurement. I didn’t use 'em' because although they are scalable, it is based on their nearest parent which can lead to many problematic calculations whereas 'rem' is based on the root font size. In a very detailed article by Zell Liew, he states that the 'rem' unit is “built to provide some relief the 'em' computational problem that many faced”.

As most browsers use '16px' for the default font size, I set the root font size to '62.5%' which is equal to '10px', this means every 'rem' can be a nice value and would be very easy to work out the pixel equivalent. I used a percentage value rather than setting it to an absolute value as some users may have changed their browsers default font size. This means that if I used an absolute value, it would override the user’s selection which may lead to some usability issues.

Before and after screenshots of this website on a 4K screen

Finally, with displays getting better and more affordable, more individuals are having higher resolutions and many websites do not scale past the standard '1080p'. That leaves these users to manually scale the page by using the browsers built-in zoom function just to see the content easier. To save them the trouble, I used some media queries to increase the root font size so the website will automatically scale well for these users.