Checkpoint Five

Checkpoint Five

The final checkpoint has us rounding out our website for full deployment, this includes:

• SEO
• Calls to action
• Advanced features

In this blog, I will describe most of the changes I made to my website to accommodate this checkpoints marking schedule.

Customizations

I made a couple design customization in this checkpoint in order to made my website feel more well rounded, the major ones are as follows:

Social media buttons: I added a circle around the social media buttons in order to place further emphasis on them and make them catch the eye better.

Testimonial text: I've placed red text on the following text in order to further differentiate it from the testimonial itself, the red text is often used in my website to consistently emphasise elements.

Contact Us Title: I also made this text red on my contact us page in order to draw attention to it.

SEO Refining

What I would consider the largest part of this checkpoint was SEO, this was a rather involved process for me because I did not pay much attention to it in previous checkpoints, consequently, I had to redo some of my content text in order to better suit the websites SEO needs.

I attempted to be as comprehensive as possible in the time I had allocated to this task, my results were as follows;

Titles

For page titles, I am using PHP to define them in the midst of my nav controller, as you can see I have set the titles for each page to their unique identity which will aid in users being able to search for the correct page dependant on the type of content they wish to view.

Home

The home page had a fair amount of content to utilize for SEO, I would have liked some more though, if I had more time to develop this project I would consider adding more testimonials to the page.

I chose words that differed from my original brief in some ways but still utilize words that relate to the website & the type of search terms we want to be reaching.

About Us

At this stage I had to do some research to discern whether or not having multiple <h1> tags is good practice, I found from multiple sources that it is okay as long as they are separating different subject matters such as the way I have used it below.

I did some research at this point to identify what good image alt text is made up of, I found that the best way to utilize this text is by using it as a short yet accurate description of the image whilst also incorporating keywords as this is another chance to use keywords which will help attract more hits in search engines.

Our Services

This page offered the opportunity to incorporate multiple heading tags as this page covers many different topics, this page is rather SEO heavy and will carry a large share in the sites overall SEO strength, this is due to it being a core content page where the various services of the firm will be shown and described. 

In a world where I have more time to work on this project, I would have gone into further depth on this page as law firms provide significantly more services than the ones I showed here. To further incorporate this influx of information I would have used dropdown elements that reveal more content, this would be due to the amount of content not being easily palatable all on one page.

I produced a lot of information here, coming up with it all was a challenge, I did draw a lot of inspiration from existing law sites obviously as I have no knowledge of this type of content.

Our Team

Adding headings:

Adding emphasis tags to keywords:

Contact Us

This page carries a small amount of content to utilize with SEO, I covered my bases by including typical 'contact' type keywords & also the city location. 

Google Analytics

Thankfully google makes the implementation of Google analytics quite simple, in each page, I have added the code below, this allows Google analytics to track a wealth of statistics on my page.

Returning to this following website deployment is key to further refining SEO in order to further increase the amount of search engine hits possible.

I tested my google analytics by getting myself and a friend to view my page whilst I was viewing the live overview, this confirmed that I had successfully incorporated google analytics into my website.

Call to Action

Calls to action on my website in some cases are more subtle than normal due to the minimalistic design overall, despite this, I have used the pink-red colour in emphasize elements on my website in order to draw the users eye towards these things first.

My first example, however, does not use this colour and instead uses optimal positioning with shadow and size to place great emphasis. This is used to quickly show the user what type of website they are dealing with, what the profession is, where the company is located.

Here I have utilized the pink-red colour to place emphasis on the Send button, this is used so that the user always knows where to click in order to quickly went their message, this type of offordance allows users to quickly and efficiently identify the elements that allow them to complete the actions they came to the page for, such as purchasing, sending messages etc.

Here I have used the pink-red text to emphasize the employee's position, this draws eyes to it over other text elements so that the user knows the role of the person they are reading about. Seeing that the user is of an important role within the company helps garner interest in the content being presented. Rather than if the position was not listed or it was not obvious to the eye the user may lose interest in it if they think it is just a regular employee.

Here I changed my Nav bar to incorporate some pink-red text above the contact details so that it is nearly impossible for users to not realize the contact details are always present in the nav bar. It sticks out without taking up too much space and demanding too much attention.

Advanced Features

For advanced features, I have chosen a couple different things in an attempt to show that I am worthy of these marks. They are as follows:

Animated Navigation Bar:

Showcased in the video below I have incorporated a navbar that is static and also turns transparent once the user starts scrolling down the page, this adds a great deal to the browsing experience and helps the website feel less static than it is. Keeping the navbar also present is also a good service to the user as they will always have access to the other pages and the contact details without having to put extra effort in, features that increase the ease of use are important to the overall user experience of the website.

                                   

Parallax Effect:

Showcased in the video below I have also added a parallax effect background to a couple of my pages, I did this in yet another attempt to help the website feel less static and bland. As the user scrolls the pages with this feature it feels more alive and dynamic rather than a simple page with content on it. This came with some challenged in selected images that were suitable for this venture. 

Thanks to unsplash.com which provides a huge wealth of royalty free images I was able to find suitable images that helped emphasise the feeling I want my website to capture.

In an ideal world if I was making a website like this for an actual company I would utilize pictures of the company staff & building itself instead of images found on the web.

PHP Incorporation:

From my WEB601 experience, I have incorporated PHP and certain elements of an MVC architecture into my website, I have a controller and views although I did not have a use for a model so I have not included that in my website design. My index code (below) routes the page to the controller which processes the command given by the link the users clicked on and consequently presents them the correct page. If they are visiting without a cmd command they will be given the home page as default.

This type of design opens up the ability to incorporate more dynamic features into web pages such as what I have done with the 'mail' command below, this is utilized by the contact form to process the contact information then present the contact us page back to the user again.

I also used PHP to segment my code into other PHP files, this keeps my views a lot cleaner, shown below I am linking to nav-bar code instead of having the entire block within the views code. This allows for a more digestible code presentation at the root of the pages view.

Features I used this technique for are:

• Footer
• JavaScript
• CSS
• Navigation bar

Issues

Most of my issues in this checkpoint pertained to my ignorance with SEO practices, to amend this I did some research into areas I was unsure of. SEO is still something I am not entirely confident on although I am aware that websites need time in order to produce google analytics data to reflect on in order to further optimize SEO results. 

Another issue that deserves a mention was my time constraints, I would like to have put more time into this website as I can feel its imperfection seeping out everywhere, this may be in part due to how familiar I am with it though.

Conclusion

Overall I am pleased with what I have produced in the amount of time I have dedicated to it, having a little project to reflect on is valuable to my experience going forward. This course has greatly improved my knowledge in terms of implementing enticing design into web pages that help users retain an interest in the website.

I am confident that if I was given more time I would be able to produce an amazing website worthy of a local company, this was a valuable learning experience into the intricacies that go into producing a website that effectively communicated a business to its target audience.