The MEGADRIVE.COM

Project Scope:

This site is designed for fans and potential fans of gaming, gaming consoles and retro electronics. The principal aim of the site to atttact and interest fans of the gaming console the SEGA Mega Drive, also known as the Genesis. The site hopes to generate feelings of nostalgia from an audience whom would have originally used the console as a child while also appealing to the current generations who may be interested in gaming and associated pop culture.

In recent years a market has developed retro and vintage technology with the youth market being interested in collectables and pop iconography associated with video games and gaming franchises.

Features Of The Site:

The site consists of the following sections.

• The Load Page - index.hmtl
• The History Page - history.html
• The Gallery Page - gallery.html
• Sign-up Page - sign_up.html
• Shop Page - shop_html
• Thank You Page - thank_you.html
• Header Section
• Footer Section

The Load Page:

The Load Page, index.html, guides you into the various aspects of the website. The colour scheme is dark to match styling of the SEGA's packaging. The page contains a full header and footer and a centre text box with links to pages on the site.

The History Page:

The History Page use a CSS Grid structure which contains grid items. Each grid item acts as a tile and contains text with an associated image to detail the history and life cycle of the console. The principal idea is to make a compelling argument for the historical importance of this console in creating one of the largest entertainment industries in the world.

The Gallery:

The Gallery Page displays a collection of images of the games packaging associated with the cartridges which were used on the Mega Drive / Genesis platform. These images make a vibrant collage and on their own are visually appealing. Such images can invoke interest and nostalgia.

The Sign Up Page:

This is to gather email contact details to use to send 'newsletters' to followers and potential customers. The page contains a GIF image from a popular game as part of a simple quiz to entice viewers to sign up.

The Shop Page:

At present this page is not completed or structured but it offers a platform for the sale of game related merchandise of all types from clothing to games and accessories to consoles.

Thank You Page:

The thank you page displays once the user has filled out the sign up form. This page displays a different wallpaper which is unique to this page.

404 Page:

I have created a custom 404 page to match the overall theme console/computer gaming with a 'Game Over' message on a black screen.

The Header and Footer:

The header and footer are identical across all pages and designed to be modern and non-distracting but visually prominent so as to be borders to the particular page.

Design Stylings:

The background is a white and light grey square pattern which is based on the color scheme used in some of the orignal game packaging. The background is light as to not distract from the items on the page and give the site a cleaner, modern appearance.

The header and footer are black to clearly distinguish them on the back ground. The icons and text are a blue color, rgb(109, 175, 230). This is taken from the blue in the Mega Drive logo. The silver in the logo was too light a color to use.

The color of Header and Footer icons change color on 'hover' , that color is rgb(156, 134, 9), this is a gold color and is abstract to the blue for differentiation purposes. The gold color was inspired by the gold text on the '16 Bit' Logo which was on the emblazed across the front casing of the MK1 Mega Drive case and Genesis.

I have used the font Orbitron from Google Fonts. Originally I looked for a 'retro' 80's computer style but these fonts appeared clumsy and difficult to read on smaller screens. Orbitron has the shape but with a modern finish, cleaner finish.

The shape of the form on the sign_up.html is a silhouette of the Megadrive 2 console. The red submit button is based on the 'power' and 'reset' buttons on that console.

Testing:

I have tested the site on Google Chrome, Microsoft Edge, AVG Secure Browser, Safari and Amazon Silk.

The site was tested on the folowing devices which have varying screen sizes.

• Windows 10 PC with 27" LCD Screen
• Windows 10 PC with 24" LCD Screen
• Samsung Galaxy TAB2 10.1" Screen
• Apple IPAD 2 9.7" Screen
• Apple IPhone 8 - phone
• Motorola Moto 8 - phone
• Motorola Moto 10 - phone
• Amazon Fire Tablet 8"

Apple Iphone 5 Screen Shots.

Motorola G8 Screen Shots.

The deployed site was tested on multiple devices and browsers to test structure and layout across as many devices as possible. Media queries were created and altered to accomodate the various different screen widths.

Changes after Peer-Code-Review and Testing.

Following feedback from the Peer Code Review the following changes were made.

• Layout of footer items were changed to reduce their size on screens less than 400px in width.
• Padding was add to header items to introduce a space between the icon and text.
• I removed an animation effect on the 'logo' image on the index.hmtl and gallery.html which was effecting margins and screen width.
• I reduced the size of images in the gallery. I removed half of each image, the back part of the game packaging which contain alot of small text, and just left the front cover. This result in a cleaner layout.

Image of gallery.html before changes.

Image of gallery.html after changes.

Validator Testing:

• HTML
  • No errors were returned when passing through the official W3C validator
• CSS
  • No errors were found when passing through the official (Jigsaw) validator

Web.Dev Check-up:

I checked the performance of the site through the web.dev website. Image of details below.

There was some variance in the performance rating when tested on different devices from a score of 84 to a score of 94. I am not sure the reason for this.

Deployment:

This was coded through GitPod and deployed to GitHub pages. An outline of the deployment procedure is as follows:

• In the GitHub repository select the Settings tab on the bar, it is the last item.
• In the drop-down menu on left select the 'Pages', this is presently 2nd from bottom on the menu.
• In the 'Source' section at the top of the 'GitHub Pages' select Branch as 'Main'.
• A green box should appear above the 'Source' section with an refreshed ribbon to indicate the site has been successfully deployed and showing the address to which it is published.

Live Link : https://tnolan01.github.io/sega_megadrive/index.html

Cloning:

Click here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

1. Log in to GitHub and locate the [GitHub Repository] https://github.com/TNolan01/sega_megadrive
2. Under the repository name, click "Code".
3. To clone the repository using HTTPS. Under "HTTPS" copy the link.
4. Go to your local terminal with git installed
5. Change the current working directory to the location where you want the cloned directory to be created/located.
6. Type git clone and then you paste in the URL you copied in Step 3.

$ git clone https://github.com/TNolan01/sega_megadrive.git

7. Press Enter. Your local clone will be created.

Credits:

Coded with help from:

• DesignCourse: Youtube channel which I watched to study CSS Grid. https://youtu.be/bam83Xv4VMA
• W3 Schools: Search guide on various topics. https://www.w3schools.com/css/
• Code Institute 'Loving Running' Project: Used the gallery html structure as demostrated in Loving Running, also used the associated Read Me file as a guide.
• Stack Overflow.
• A little help from Slack searches.
• Feed back from the Peer Code Review on Slack.

Content:

• Text on the index_html based on Wikipedia based under a search for 'console war' https://en.wikipedia.org/wiki/Console_war.
• Images from index_html are from wikipedia.
• The book 'Console Wars' by Blake J Harris must also be referenced as its largely where the Wikipedia content comes from. https://en.wikipedia.org/wiki/Console_Wars_(book).
• All the images in the gallery were sourced from Cover Century. https://www.covercentury.com/index.php?p=genesiscovers.
• I used two GIF's from Tenor.com. https://tenor.com/search/sega-gifs
• The background image on the index.html came from https://images7.alphacoders.com/866/thumb-1920-866932.png.

Styling:

• Icon images on header and footer are from Font Awesome. https://fontawesome.com/
• I aslo used an import font, Orbitron, from Google Fonts. https://fonts.google.com/
• The 'Sega Mega Drive' logo at the top of the index_html is from Wikipedia, I have altered it slightly using MS Paint.

Conclusion:

• There are improvements which could be made to the site in terms of additional uer interaction.
• I would approach the design and layout differently on next project. This project was very much designed as it evolved and the IDE is not the correct place for this.
• I would also need to increase the number of 'commits' on future projects. This is aspect of the procedure which I did not fully appreciate.

Please Note : All content used is for the non-commercial site, as part of an educational project and not for any commercial or financial benefit.