Revisited Site

My original site, used a mixture of beige colours, giving it the neutral feel and look that most young women wear as an accessory or clothing. As my target audience for this site, was mainly for women aged between 20-35, I decided to keep the essence of the colour scheme which gives it a very luxury feel. I love the idea of having a gallery of clothing and shop-wear, as this would be a draw in for most girls wearing the pieces, especially because it is an independent store. So I decided to keep the layout the same for the two pages. I changed the “about” page to look similar to the “contact” page as the “contact” page had a background colour of a lighter brown, bringing the pages and colour to look more in tune with one another.


The first change i decided to make was to the animation of the pictures, going across the page. Although, I got positive feedback on this slide show, when viewing it from a mobile, the pictures were moving fast, and some of the pictures did not fit in line with the desktop screen and sometimes mobile. You could not stop and start the slide show, so if users wanted to view a particular image, it wouldn’t have been possible. So i decided to add some javascript, making the animation fit into a div container, allowing the user to have full access on each picture. Also, I added a caption of “independent luxury vintage store” to tell the users that this is not a e-commerce site. Originally, I had an animation that typed, visit us in store, but I felt it looked misplaced in the design aspect and got rid of it. The Javascript was used for the dots container and also the arrows, to be able to move the picture from one slide to another. If a user for any reason does not have Javascript available on their device, they will not be able to see the slideshow. I did not know an alternative for this, as I was following many tutorials for this specific feature. So for the next time, I decide to use Javascript on this slide-show I am going to find a substitute. However, when using Javascript on the “contact” page, I have an alternative. For the time feature it would change; to the id I used called welcome.

Moving forward, I made all my files “.php” and used the head, with the meta tags and style sheets, the header, with the navigation and the footer as php includes. This not only helped the coding look more lean but helped organise my files and amend things quicker.

As the layout, on some of my pages are very similar, I used php; for the user to acknowledge what page they are on; using the echo active syntax. I also added accessibility in my html for users to be able to skip to the content and navigation.

I added one more accessibility, in the footer, to skip back to the top of the page. In the footer, I decided to get rid of the contact details that i had, from my previous site, as I felt it looked very messy and pushed in together. I always tend to struggle with footers, and going forward I definitely want to gain an insight on how to create a better footer with more structure. In terms of layout, I also changed the images on the main page from floats to grid. This made my gallery of pictures better with responsiveness than floats. However, on the “about us” page, I changed the flex-box layout to floats, so i could control more of the spacing. I, then changed back to flex-box when making my website responsive; when getting to a certain break-point. I did this so the paragraphs remain in place. When creating my website, I did make the mistake of not designing for mobile-first. This, then made my life harder when trying to down-size and I found the responsiveness to be very tricky. After many hours of things breaking, I finally managed to make my website fully responsive for mobile devices.

After many attempts, I, also managed to create a custom 404 error page. Due to it not working till the very last minute- the design for the custom page was very plain, and I will revisit the design at a later process. I, also did not change much on the SEO, as I felt the keywords were appropriate from the beginning. Lastly, I managed to add a favicon to the website, but I feel images and svgs are still something i am very new too and still getting used to.

Going forward, I would still make several changes to the website. Such as making the navigation, into a hamburger menu, adding a better logo and adding more links to social media.

Overall, I am pleased with the result, considering, I have zero experience in neither design or coding; but still have a lot to learn.

Leave a Reply

Your email address will not be published. Required fields are marked *