DESIGN
– Responsive Website: This is a feature that before starting the master I had no idea of it’s existence and it was something I loved to explore given the range of possibilities we have to modify the design (either in small or large scale) depending on the screen size.
My idea from the start was to keep the side menu I had created, so I automatically realized that I would have to make a different layout for smaller interfaces than desktop. Even though I knew the importance of mobile first design, as I had already designed the desktop version I decided to start on this version and finalizing with the mobile version, but it became much more complicated. I realized that in fact, it is much more logical to start building the website from mobile design, as it creates a line of process for a more cohesive construction of a website. I began to had a better idea of how I could organize the different elements in a way that there is a syntony with the type of interface and utility of those same elements. I chose the standard measurements for the media queries, ending with the 1800px of width. At a certain point I thought of starting the mobile version with 320px instead of 375px, given now the rise of the folding phones (altought it was more used before given the size of cell phones at the time), but given the generality, I decided to continue with 375px. Regarding the menu, the best solution in my opinion was to transformation it into a toogle menu, given the amount of webpages to access. About the headings, I noticed that it would be more favorable to build another version – in this case for interfaces with width between 786px and 1200px – because I felt that the first heading in between these widths was with too much whitespace. At the same time, it wasn’t the right time to switch to the desktop version just yet since there wasn’t enough space in between the elements, and so I took the opportunity to do one more layout to the header.
Typeface: Although previously some of the main typefaces that I’ve choose only worked with some browsers, I discovered the possibility of transforming the file of the main typefaces so that they are compatible with all browsers. The remaining tyfaces of each font-stack continue as the same. In order to harmonize with the styling, I decided to use less main typefaces throughout the website – like with h2, for example.
Colours: Keeping the same thought of that I has with the different main typefaces, I removed the background pattern from h2, changing it to the color beige, and also changed the background color of the figure’s captions – and kept the beige in order to harmonize with the different elements.
Depth: Since I wanted to keep the fixed heading, based on the learning I did on material design, I thought it was necessary to highlight the different “boxes” and some buttons, giving the feeling of leveling, and at the same time set the content more apart from the background image. I used the shadows to get that same effect.
Favicon: I wanted it to represent something symbolic, easy to perceive and with a design in in accordance with the title’s styling. So I chose to put the letter “a”, with the same typeface and colors.
JAVASCRIPT
I decided to apply it on two elements:
– Menu: We can see the presence of this element in the minimum length media queries between 375px and 1200px.
– Opening Hours, present on the homepage and footer. Although I could use the same element, I decided to create two versions, since on the footer version I wanted to give the message that the shop is open from Monday to Friday. In the homepage I already mention this information in the sentence above the JavaScript. The interactivity of the phrases with the time varies as follows:
- Closing (dawn and day): “We are now close! We’ll open the store today from 11am to 7pm”;
- One hour before opening: “We’ll be opening soon, at 11AM :)”;
- Opening: “We are now open until 7pm!”;
- One hour before closing: “We’re almost closing, at 7pm”;
- Closing (night): “We’re now close! The store will be open tomorrow from 11am to 7pm”;
PHP
I chose to use php includes for the header (h1 + menu) and footer. Also added on the copyright.
SEO
Sitemap.xml: http://sc2g.uk/content-management/smallbusiness-revisited-final/sitemap.xml
Robots.txt: I allowed only the crawl of the small business website. The disallow was also specifically applied to the php includes, 404 error page and, consequently, root folder.
Google Search Console: I monitored the website where although in the space of time I didn’t get much useful information, it allowed me to make sure all the webpages were indexed.
Meta-description and Meta-title: I created one according to the context of each webpage.
Keywords: I chose to make a great use of the word “thrift”, since according to the research I’ve done, it’s a word that is in growing trend.
Including the website name and city (London), I added other words from the same sphere, like “vintage”, “fashion”or “retro clothing”.
404 page: When it comes to the design, I followed the same styling of the page, but I found great difficulties in creating the page just for the small business website. I ended up having to use CPanel to create the 404 error page for the entire domain.
.htacess: Besides including the 404 error page, I chose to insert the code in order to remove the extensions from the URLS . Also, snother goal was to also prevent the hotlinks so that Google doesn’t crawl the images.
ACCESSABILITY
I changed the caption of the images to something more complete in order to be more enlightening.
– I inserted the landmarks roles according to the mapping. Since I had the element h2 inside a class to which I had already assigned the banner role, I decided to assigned an label for it – aria-labelledby=”banner2″. I also added for the hamburger icon and close button in order to make the navigation even more easier.
Although it took longer than expected due to the design, I loved doing this project and it was very rewarding given the amount of learning and clarification of techniques I had throughout the process, where I think it wouldn’t have been the same otherwise!