Web Dev | Character Website Dev

Web Dev | Character Website Dev

Character Website Development through Github

Following my Character Website prototype for the UX Design final project, I built my design into a fully working Responsive Website.  My website demonstrates the skills that I have been learning throughout the course.

CSS Reset must be included as well as be validated based on w3c standards. I used industry-standard testing and development tools to refine and optimize website content.

The website was built using the development process of Github and published to the Internet using Github Pages.

https://github.com/maryioa/Hollys-Site.git

https://github.com/maryioa/Hollys-Site/commits/master

https://maryioa.github.io/Hollys-Site/

 

Strategy

The strategy is one of the elements that will show if my website achieved my client’s and user needs and expectations. Based on my user testing regarding my prototype, results showed that they get a clear sense of what the brand is and what my client offers. I designed the website in such a way that it leads the user to the next step. Book a table, learn more about the venue, how to get there by location, or ask for any inquiries.

My website is based on a lounge bar that is very obvious what it’s all about from the time you browse to the website. The purpose of the website is to show the existing or potential clients what kind of lounge it is. A luxurious, classy, glamorous, and even professional venue with amazing food with alternative options and signature cocktails.

The design brings this out with outstanding images of the venue, the dark green background, and the classic fonts. The target audience is in the age group 25-60, all genders, middle and upper class, professionals, and not. For sure, the design will not attract a younger audience.

The website must have an easy way to book and allow the user to make inquiries easily with quick methods, even for non-tech users. The subscription form is very important to be in touch with the customers. They should stay updated with current and new events and offer existing and potential clients. And of course, last but not least, the social media links and Instagram posts for advertising purposes.

Based on my User Testings and all the research around my client’s mission and needs, I came up with the final prototype.

All the headers and paragraphs have the same typeface accordingly. All the buttons are the same shape, typeface, and capitalized. I removed part of the radius from all the boxes so now there is consistency in all the photos, images, and elements. I also included the phone number in the footer and copyright with the date.

Below you will find my final prototype which I used as a guide for my Web Development.
https://marvelapp.com/116db8he

Usability

Speed, security, validation, user-friendliness are some of the considerations that usability is all about. This will help the user find what they are looking for, pages will load faster, all the links will work, the site will work in different browsers and devices, etc. Most of them aren’t visible but there are tools that helped me make the website work more efficiently.

One of the tests I did was the Speed test. It helped me to check the speed of every single page on desktop and mobile devices. All of them were above 98%. The site I used for this test is : https://developers.google.com/speed/pagespeed/insights/

I optimized the images so the page will load faster and therefore the users will not wait long. It’s easy for the user to find any information they want because the links are straightforward and I didn’t find it useful to add a search button. Based on the W3C Link Checker, all the links are correct.

In the footer, I added the address, email address, and telephone of the venue. Regarding the address, a href attribute was used to link to the Location page. In addition, the email address uses an attribute to open up the default mail application. Last but not least, the telephone has an attribute for the default phone application on the system. This is especially useful when the user browses on a mobile device, which can directly call “Holly’s Lounge” with a simple click on the phone number.

Style

The style must be aligned with my client’s expectations, based on colours, feeling, graphics, images, and more. It has to be consistent, memorable, and suit my target group. As per my test interviews on my prototype, most comments were that it’s clean, straightforward, communicative, beautiful, and classy.

I tried to combine all of them in my website development. I managed to align with my brand’s style based on my prototype. Through my website, the style is consistent and suits harmonically with my target group. The images I chose are the correct amount to show the audience what the venue is looking like inside and outside. They are not getting in the way and are not distracting from the rest of the elements and text. It gives a formal and classy feel and I achieved my client’s expectations based on her mission and needs.

Content

The content must be readable and useful. If the content is too small or in a non-proper font or in a colour that can’t be seen, then the users won’t go through and it loses all the importance of readability and in the meantime will be useless.

I took much consideration for my fonts to be readable, so I chose two font types. The first is serif for the headers and the other one is sans serif for the paragraphs. The size and weight are all working really well after a lot of testing. In the cases where I used text over the image, there is enough contrast to make it eye-catching. I also used a background colour so that the text is readable. The content is all relevant to the venue and all to the point. It’s communicating the purpose of the venue very effectively. I didn’t have any complaints or recommendations regarding the content.

Search Engine Optimization

As Search Engine Journal wrote, “Search engine optimisation and social networking all start with strong website design”. ALT tags must be included in the image description so the search engines can see them. HTML files should also be efficient for better search rankings.

After I checked the site in W3C I realised that I didn’t include ALT tags in some of the images. Now they are all optimised with ALT tags. My coding is efficient with no extraneous lines that should be eliminated. I used all the relevant keywords in title tags, meta descriptions, and heading tags.

I didn’t include a sitemap on the website (in the footer or anywhere else), because it’s not a complex one. It’s very straightforward and the user understands exactly where to go next.

CSS Usage and Optimization

CSS (Cascading Style Sheets) is all about style. When it comes to specifying all the styles for HTML documentation. I used it as an external (separate folder) which is considered best practice. I created an extra folder in the main folder as CSS and I included in it all the CSS files (all.min.css, lightbox.css, master.css, and reset.css).

Through my master.css I included all the styles for my HTML files. This includes id and class selectors for every element. Most of them are for the header, footer, menu, images, paragraphs, forms, lists, headings, the layout structure, and tables.

With all.min.css all the styles for the Favicon used are defined. Favicon is the icon displayed on the browser’s tab.

The reset.css file was included to help the browser reduce inconsistencies in things like default line heights, paddings, margins, font sizes of headings, paragraphs, etc.

The styles for the gallery included in the About Us page are specified in the file lightbox.css file.

Additionally, I used the FLEXBOX layout module for grid layout, which made it easier for displaying and aligning the items, horizontally or vertically.

JavaScript and JQuery

Javascript is a scripting language mainly for websites whereas jQuery is a Javascript library. I created an extra folder in which all my scripts are included (external.js, jquery.js, lightbox.js, lightbox.min.js).

Both of them were used for Lightbox, which is a script to overlay images in webpages. Lightbox was included in the About Us page for the gallery section.

In addition, I included an inline javascript for the copyright in the footer. I wanted to show the current year in my copyright and the easiest way was with javascript.

Good practices

One of the good practices I did, is that I used mostly external files for CSS, Javascript and jQuery.

Other good practices I used include image optimisation, headings, paragraphs, and tables, all with ID and class selectors in every element.

In my HTML, I included Meta tags for page description, language, keywords, author of the document.

I utilised master.css and HTML file comments to separate the sections, i.e body, footer, Instagram, contact us form, subscription.

The appropriate href attribute was added to the address, email, and telephone. This makes it easier to browse to the Location page, send an email, or even call “Holly’s Lounge“.

Areas of Improvements

Considering all the above, my website is efficient, readable, and pleases the eye. All links are working correctly, images are optimised and the content is readable. In conclusion, good usability means a test over the test.

Of course, there is still some space for improvement. For instance, I noticed that in some cases unnecessary files have been added to the git repository, such as “.DS_Store”. After researching further, these files are not part of the live website but rather from MacOS. Therefore, most of them can be safely removed from the Git repo to improve the final site’s size. As another improvement, a “.gitignore” file can be utilized to exclude known patterns of files that are not required to be kept in the repository but will not affect the repository’s functionality.

Additionally, the “.git” subfolder is responsible for the majority of the site’s size (73MB out of 87MB). Another “improvement” can be made here but it is optional since this hidden folder is used by Git. What we can do is to use techniques such as clone or purge to trim this folder. However, if we do so we will be removing the history of our actions (commits, etc) from our repository. At this point I decided to leave it as is, since the site is approximately 15MB and the history is very recent to remove it. However, to be absolutely within best practises this should be dealt with.

Lastly, the mobile version of my website can be more responsive. This will come with more knowledge, research, and improvement of my skills.