Checkpoint Two

Checkpoint Two

This milestone pertained to the bulk of our coding work it felt like, building all of our pages into their desired structure along with also coding in mobile compatibility. This took me a good amount of time to complete whilst trying to also make it look half decent, this aspect of the process was the largest factor to the amount of time put in.

I added two customizations of my own in the form of utilizing the parallax effect on multiple pages & also using an animated navbar. This helps the attractiveness and appeal of my website, it helps it feel more alive rather than a static block of content.

Pages + Mobile Compatibility

Below I have screenshots of each page at this stage of the design process, I have possibly done too much for this stage of the project but I would rather feel somewhat comfortable going forward than do the minimum.

NOTE: Some pages are not appearing as they do in a browser due to the screenshotting program I used, Our Team has a different shade of blue and the mobile view of Our Services uses a parallax background that follows the scrolling down.

Home

This page had the most development time put into it, this was due to me spending a lot of time attempting to implement a professional looking design. Throughout this process, I have learned some valuable lessons in keeping a sight minimalistic & elegant. The mobile view carries a similar format except for shrunken down & I got rid of the introductory text within the jumbotron header. I think the footer needs more work in mobile view, I, however, did not put time aside to work on this and instead moved onto the other pages.

About Us

This page also took me a while due to the learning curve of working around a parallax effect background whilst also trying to make my content exist in an appealing way. I want this page to be brief but also get across the right feeling to the reader. The mobile transition for this page was rather simple, I just had to ensure it maintained an attractive layout format, the parallax & slideshow remained in a palatable format. 

Our Services

On this page, I experimented with a full-page parallax in where I placed the content of the page on top, making this content remain appealing amongst the backdrop image proved to be a challenge, I opted to use a different colour for each content type. As we can see below the content does not align up perfectly so this needs some work before it will be perfect. In the mobile setup, I put one content type on top of the other to keep them grouped together. The parallax effect works well on mobile & my content adapted to it comfortably as long as I ensured there was correct spacing.

Our Team

My goal here is to professionally display the staff members of the firm, ultimately the placeholder images will be replaced by portraits. The shade of blue I used is different from the one in the screenshot here, I am not sure why it has come out different in the screenshot, the header image is meant to show local land that both the firm & its customers inhabit, creating a sense of companionship between these two entities as viewers land on the page. 

The mobile view was tricky, although not perfect I am happy with it in its current state with the amount of time I had to work with, ideally, I will resize the image for lower resolutions and maintain the same layout format in the larger size page.

Contact Us

My plan for this page was rather simple, just a contact form and a map plugin, my thoughts drifted off into what more I could add to this page. I will consider adding some filler text somewhere & possibly some larger social media links to help complement the social media links in the footer. The map had some issues in mobile view, it's not perfect at this stage but in a real use case scenario would get the job done.

Navigation

For navigation I went with a more advanced technique I have learned in web602, this involved the use of PHP to use the href to route to the correct page. Although it does not have much practical application here it opens up expandability and the possibility for added logic added to navigation if desires. Shown below is all of the code in my index page.

This is a PHP file responsible for navigation routing. dependant on the cmd variable the correct page is opened for the button the user clicked on, a lot more can be done before but this is simply me trying to earn advanced marks by showing some more advanced skills.

Problems

Once again my main problem stemmed from my lack of creativity and also the difficulty of making a website attractive. I found it hard to sit down and focus on this for large chunks of time due to the strain I felt from being unable to make something that was perfect, symmetrical and elegant. It was a bit frustrating but I simply lack the skill at this stage to whip up something highly presentable really quickly. My lack of experience has shown and I have a lot to learn in terms of adding proper polish to a website which makes it looks professional.