Link to site Human Sightings

Human Sightings is a site for people to come and take a look at some comics and potentially follow a link to purchase some products the site is also there to introduce poeple to the wonderful art of Evelyn Basch. It's designed to replace the previous site they had and incorporate her style into everything, from headers to backgrounds it's all space themed and fun. Users of the site will already be fans of Evelyns or potential new fans.

desktop and background credit: pixabay

• Navigation Bar

  • Featured on all the main pages the navigation bar is the first evelyn themed art you'll see three glorious moons with one of them being eclipsed slightly to show what page you are currently on.
  • This will allow users to go from page to page easily and know what page they are currently on

• About us section

  • Since the page is all about introducing people to Evie this is where they can add information about themselves and who they are.
  • Users will be brought in by this section and start to learn more about them

• Comics section

  • This is the first opportunity for users to be introduced to the wonderful aliens that Evie is known for drawing. These will be introduced as clickable links to take users to the comic pages. There are in total 9 comics but only the first 3 are shown here with an option to view more which links to the comics page.
  • Not only will the user start to learn about the characters and their deep emotional thoughts they will hopefully relate to some and later on that may drive them to buy some of the products that displays some of the funny or deep quotes that lie within the comics.

• Shop

  • This is the first opportunity for users to be redirected to the etsy site where purchases can be made for the products hopefully they would've seen the comics first and known some backstories behind the products.
  • This section is where the user can go if they want to support the creator and purchase some items the creator hand- manufactures

• The Footer

  • The footer contains links to many of the artists different social sites from facebook to instagram and even an etsy link too.
  • The footer is a visual indicator to users that the page is finished and that they can click into any of the links to get to know the artist more.

• Comics Page

  • The comics page is all about comics and meeting the various character and laughing or crying with them as they go through some of the toughest subjects and whackiest scenarios
  • This section is all about users having a look around they are more than welcome to click on any comic and with the template its always going to be easy to add more.

• Shop Page

  • The shop page is all about getting that click-through rate at this point the users would've fallen in love with the aliens and astronauts and are maybe thinking about potentially making a purchase to support the artist.
  • This section is simply a place for users to browse product and click links into the Etsy page.

interactive wireframe

To access the mobile version go to the homepage on the desktop scroll to the bottom and there's a button there saying mobile version do the same to go back to desktop version from mobile.

Homepage comics shop comic page

Homepage comics shop comic page

• I used github to store the repository and version management
• I used gitpod for editing the code and for posting to github

• I used bootstrap for the comic individual pages
• I used Font Awesome for the icons at the bottom of the index, comics, shop pages.

The users are people that simply want to look at comics that have a deeper meaning and to feel how the artist was feeling during the comics. The page is a rollercoaster of emotions from sadness to loneliness to sillyness and immaturity. It's somewhere people can go to know that they aren't alone in a way that they are not expecting. It's not there to directly support but the page is there to just slightly reinforce that it will be okay. It also gives the people an opportunity to support the artist to create more too with links to the etsy page.

• The comics page is free to be expanded on whenever a new comic becomes available.

• The shop page is also expandable as there are always more products being added.

• Potentially add additional pages for each product to give a better description into what they are.

• Opportunity in the future to take purchases directly on the site to increase profits per item and avoid etsy cut.

• Opportunity to also add a log when I'm able to use Javascript to make it easy for the creator to create additional pages.

• Make the page look good on a mobile in landscape mode.

• Header not being responsive

  • Messaged on slack about using a div element instead of header before looking into flexbox.
  • Found my answer on a website: Flexbox How To
  • Messaged to say I found my own answer all good to not waste anyones time.
  • Fixed using flexbox instead of using widths was quite a quick fix in the end.

• Was struggling to make the logo responsive initially

• Issue I was having was that the text would not stay in the same place ontop of the logo no matter what I did and as the image got smaller the text wouldn;t look right so had to figure out how I was going to have the text be the right size on all screens.

• I fixed it by being lazy I added the text to the logo image and no the text resizes automatically as it is now literally part of the logo.

• I later used this trick again with every moon link on the page

• No external resources were used to find this fix

• Used Adobe photoshop to edit images

• Having trouble implementing the horizontal scroll menu

• Read up on it here: horizontal Scroll Menu

• Fixed my issue implemented the correct code, code NOT copy and pasted.

• Had to toggle between using a flexbox and horizontal scroll so had a quick reminder on how media queries worked info found here: Media Queries How To

• I have tested the website on every screen size from 250px to 2560px and the website is responsive and readable at all sizes. The way I did this was by using google chrome and using all the default devices and also sliding slowly the responsive section to and checking as I slide.

• I did all the validation tests and encountered a few issues

  • issue 1 was that I had used aria-described by instead of aria-label (this was an easy fix just replaced every mention of describedby with label)
    • Info on fix found here: aria-label/labelledby
  • issue 2 was that I had used aria-labels on my icons at the bottom of the page after a quick look into what I should ideally be using it was a quick and easy fix credit goes to font awesome accessibility page
  • issue 3 was that on the individual comic pages I had used an ID for the comic title (which I then copy and pasted 3 times per page to be displayed at different locations depending on the screen size) this casues another issue on the HTML validator again another easy fix changes the id to a class on style.css and all affected html files
  • issue 4 was that on the individual comic pages I mustve not closed the uppermost DIV which I wasn't aware was an easy fix to close the div just above the body end tag.

• I uploaded the link to my site to slack and asked for any advice from my fellow peers

  • I had one reply from SuzyBee_lead "Having a quick look on mobile at it looks great! Well done!"
  • I also sent the link to the website over to my friends and they all loved it too asked them to try their best to break it none succeeded although there were comment into the usability of the comics pages on a mobile phone in landscape mode. I agreed but am yet to implement a fix.

• I did my best to break the site myself only succeded on sizes less than 250px wide which nowadays is unusual and not something I plan to fix or improve going forward.

• I went on my mobile and used my screen reader software to test if it works and the whole website has detailed descriptions for every single image and text also reads out well so can confirm everything is accessible to the visually impared.

• I used google lighthouse to generate a report and spotted a few problems

• Firstly the best-practices were low so took a closer look and spotted that I hadn't put noreferrer on the external links which can be dangerous in some situations as it allows the site I have linked to the opportunity to use the site I have created to steal user info. I understand this is extremely low risk and low probability of causing issues as firstly users cannot input info into the page I have created at any point and secondly it's extremely unlikely someone is going to specifically target such a low traffic page. Still though it's better to be safe than sorry.

• I also spotted the SEO wasnt 100% due to not having meta tags so was an easy enough fix to implement.

• I also saw that google said background.png came back with a 404 error had a look into my css and it was an absolute link instead of relative so corrected the issue

• I also noticed font was coming back as error 400 so corrected code.

• google lighthouse gave a few scores in the end Mobile:

• Performance 84%-99%

  • This is due entirely to the images I have used I could've edited every single image and turned them into next gen-formats but I don't have that kind of time to dedicate to this project.
  • Google also hints at using preloading to fix this issue but the icons are in the footer so if it takes an extra 0.3s to load it's not essential for the first 0.3 seconds of browsing so theres no reason to delay loading the main content of the page for that in my opinion.

• accessibily 100%

  • This is something I hope all my websites will always say

• best practices 80%

  • Google states the site has a vulnerabilty to cross-site scripting (XSS) attacks I currently do not know how to implement a fix for this will read into it for future sights
  • Issue logged in a panel seems to be about the loading of the fontawesome.css file I wasn't sure how to implement a fix for this and this project has run out of development time it doesn't affect usability at all so no percieved issues there.
  • The other issues are due to the images not being perfect aspect ratio. This is a simple fix for the future when I revisit the page for now though the aspect ratio is off by a very small amount undetectable and doesnt look stretched so no time will be given to fix this right now.
  • It also says about resolution being low on a few images again very easy fixes but like many of the other issues that google has found that don't necessarily take away from the user experience and lack of development time means that they will have to stay that way.

• SEO 100%

• Happy with this result.

• google lighthouse gave a few scores in the end Desktop:

• Performance 84%-99%

  • This is due entirely to the images I have used I could've edited every single image and turned them into next gen-formats but I don't have that kind of time to dedicate to this project.
  • Google also hints at using preloading to fix this issue but the icons are in the footer so if it takes an extra 0.3s to load it's not essential for the first 0.3 seconds of browsing so theres no reason to delay loading the main content of the page for that in my opinion.

• accessibily 100%

  • This is something I hope all my websites will always say

• best practices 87%

  • Google states the site has a vulnerabilty to cross-site scripting (XSS) attacks I currently do not know how to implement a fix for this will read into it for future sights
  • Issue logged in a panel seems to be about the loading of the fontawesome.css file I wasn't sure how to implement a fix for this and this project has run out of development time it doesn't affect usability at all so no percieved issues there.
  • The other issues are due to the images not being perfect aspect ratio. This is a simple fix for the future when I revisit the page for now though the aspect ratio is off by a very small amount undetectable and doesnt look stretched so no time will be given to fix this right now.
  • It also says about resolution being low on a few images again very easy fixes but like many of the other issues that google has found that don't necessarily take away from the user experience and lack of development time means that they will have to stay that way.
  • the reason for the score difference is due to a resolution issue. This is due to comic 9, to make the comic work on a mobile I had to make the image a little bigger than the origional by 25px. This is after resizing the image to work better on a mobile but I resized it to a midrange mobile so a mobile with a bigger screen stretches it by 25px relatively easy fix but not one I have time to make right now future versions of this site will avoid this issue.

• SEO 100%

• Happy with this result.

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

The individual comics page can be quite hard to implement AND make responsive so adding new pages may prove time consuing in the future I look to create a few templates to the artist can easily add her own in the future rather than contacting me to add them everytime.

Not so much a bug but a preference that is against the nrom when it comes to naming conventions. Using naming patterns like 1slide1 1slide2 1slide3 enables me to absolutely fly through adding extra content as long as I have a template for the layout of course. To create all the comic pages correctly all I have to do is update the first number so lets same I go from page 9 and add a page 10. I copy and paste the HTML file and all I need to do to add a new slide is to change four numbers and of course the previous/next links and the title.

This allows for rapid deployment in the future. The system really is quite intuitive also due to each page being named comic-1 comic-2 so you know that 1slide1 1thumbnail are for comic-1 etc.

comic page doesnt look great on landscape mode on a mobile

I was using github as the repository for the whole project so when I wanted to create a live page it was very easy to do.

• The site was deployed to GitHub pages. The steps to deploy are as follows:

  • In the GitHub repository, navigate to the Settings tab
  • From the source section drop-down menu, select the Master Branch
  • Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
  • Make sure to select root before saving.

• The site was deployed to GitHub pages.

The live link can be found here - Human Sightings

Below are the sources of all the media and content

• If I was struggling with anything I would simply go to website that I have linked below and read up on how to use the specific code and then I would simply use the code correctly.
• all websites used are linked below:
• Flexbox How To
• aria-label/labelledby
• Media Queries How To
• horizontal Scroll Menu
• google fonts
• Code Institute mentor also sent me a link to a template of a README.md to create a structure I changed everything and kept structure apart from the steps to deploy as there isn't anything to change added a bit about making sure it was root as docs brings up an error message for me saying failed to build.

• The text for the about us section was from her origional site origional site
• Shop links are from etsy and so are the images (with artist permission of course) Etsy page
• The icons in the footer were taken from Font Awesome
• How to do aria-labels for font awesome icons font awesome accessibility page
• Bootstrap was used to create the comic pages although I should've used a custom grid with more columns for greater customisation. bootstrap

• The photos used were either from my own illustrations (background and moons) or from Evie's many comics
• Shop links are from etsy and so are the images (with artist permission of course) Etsy page