Task 3 – Produce a Website – FINAL PIECE

Standard

My final design for this project can be viewed below and the live website can be found using the link provided.

vitalcraft-homeLink: http://www.vitalcraft.co.uk


 Why Vitalcraft?

I decided on creating a community website for a Minecraft server that I own called Vitalcraft and host myself as this would be a great way to get a working and hopefully well built website for my server.

How was it done?

After researching for the best way to integrate Minecraft into your website and how to build a website tailored for Minecraft I came across a website system software called “Nameless MC” which seemed to provide exactly the kind of integration and features I was looking to have and it is built using bootstrap which was a massive bonus due to the inherent responsive style.

The software itself was built in php using bootstrap and it came with a variety of themes pre-configured.
I (of course) opted to build a tailored theme myself instead using CSS and code edits to accomplish my desired look and functionality.

I decided I wanted it to be a visual styled website after researching various examples and seeing which elements I liked. I wanted to add a large background image from the start which meant that the design would need to be placed within a container.

After experimenting with a lot of different implementations I created the style and logo (not including a lot of tweaks) that can be seen on the live site and the screenshot above.

The logo itself was created using Photoshop and features a cutout of the main character for the server to the left.

The websites CMS included a forum which I activated and populated with posts/categories and Social media integration was added by embedding the Twitter feed onto the homepage.

Final thoughts / reflection

Overall I am quite happy with how it turned out in the end, although, due to my perfectionists ways I feel like I will never finish tweaking the website until the unfortunate day that Vitalcraft ceases to exists.

Thanks for taking the time to read this post, please feel free to leave a comment below.

Task 1 – Platforms for mobile sites

Standard

There are two standard options for creating a mobile website, one being a separate website that only shows for mobile browsers and the other being making your existing website responsive.

There are benefits to both, so it can be difficult to decide whether you want to build a separate site or modify your current site to be responsive.

Separate website:

A separate website has some advantages although currently responsive is gaining more and more popularity due to how versatile it is to create and use.

One reason to choose a separate site for mobile visitors would be that it is built from the ground up to be compatible with most major mobile browsers and operating systems which in turn guarantees compatibility and ensures that buttons, banners and text is easily legible when viewed on a small screen.

As it is a separate mobile site it also means that the code is optimized to be as light in footprint as possible and pages tend to load quicker if you are browsing using a mobile network as you do not need to load the entire desktop site.

A separate site for mobile would normally however require more maintenance and upkeep as content won’t automatically match that of your main website.

Responsive Design:

The main benefit from choosing a responsive design is that it will automatically adjust/scale to the resolution and device that your visitors are browsing with which will always provide them with a similar experience to visitors browsing on a desktop computer as no content is changed but merely adapted to fit.

Another benefit is that your website will have a single URL as sometimes mobile sites are hosted separately and therefore will need to be marketed and optimized in terms of SEO seperately as well.

Responsive sites are usually also cheaper to build depending on if your main website is compatible and responsiveness is added into the design from the start.

What to choose in 2015?

Ultimately I personally would always opt for a responsive way to deal with mobile visitors as it just offers so many benefits in terms of SEO and simplicity that this definitely seems to be the way forward.

Responsive also seems to be gaining more and more popularity and nowadays some of the issues such as legibility have been entirely solved by correct styling depending on the amount of pixels in your browser window and the usage of Bootstrap among other ways to create a website.

Workshop 1: Embedding slider using jQuery

Standard

In this task we were shown how to add a sliding banner using either images, text or a combination of both.

We used the “Anythingslider” script with the default tutorial images and slides.

First we created a new blank project and once this was up and running we copied in the javascript, styles and images into the project folder.
We then added the scripts and styles to the header as can be seen in the screenshot below

adding-code

After this we copied over the html for the slider itself into the page and when viewed in the browser it worked exactly as expected.

sliding-jquery