How to live during Pandemic in Dublin

Goal for this project

Our life has changed quite a lot due to Coronavirus was spreaded all around the world. Since We are having this new way of life We had to face different systems trying to provide clear information about our situation and actual restrictions. Sometimes the Government's pages contain too much details and it's hard to find out the exact information we need.

On this site I summed up all relevant information in a simple and clear way to make it understandable easily for You! I also collected a few ideas How to keep your physical and mental health during the Pandemic. My goal is to help your everyday life so do not hesitate to make your questions through our form!

UX
Wireframes * Design and Structure changes
Features
- Existing Features
- Features to be implemented
Technologies used
Testing
Deployment
Credits
Acknowledgements

UX

User Goals

A website filled with useful and understandable content from official sources
Provide access to official sources
Easy and clear navigation sections
Website should be easy to use on desktop, tablet & mobile
Appealing visual elements
Design what does not make anyone anxious as it is a tense topic
Form to make any question related to the topic

User Stories

As a user, I want to read the essence of related data in this topic.
As a user, I want to be able to check easily if the information is official.
As a user, I want to use a simple navigation on the site.
As a user, I want to feel calm reading about this tense topic.
As a user, I want to get advices how I can keep my general health during pandemic.
As a user, I want to see a nice and simple design.
As a user, I want to have a from to make my own questions.
As a user, I want to see my local options for testing.
As a user, I want to read about how I can help to end this situation.
As a user, I want to read actual information.
As a user, I want to be able to use the site on different devices.

Site owners Goals

Provide useful information about actual restrictions in a handy way
Help to people stay heathy

User Requirements and Expectations

Requirements

Easy to navigate by using the navigation menu
Relevant content about the actual restrictions
Information provided by official sources
Doable advices for keeping health
Comprehensive information about the situation
Easy way to contact
Easy access to official sources

Expectations

When clicking on links, I expect the page opening in a new tab
I expect that the navigation links work properly so that is takes me wherever I want to go
Clear information about actual restrictions and opportunities

Design Choices

Nowadays all news are about the Coronavirus. It might be exhausting for many of us to see the potential danger everywhere associated with a strong yellow color. In my design choices I am trying to avoid this visual anxiety and to create a harmonic ambience for the user. I have used Adobe Color to come up with a harmonic color scheme.

Fonts

In order to find the exact fonts for my website, I visited Google Fonts to explore the options. For the overall content I have decided to use the Spartan font. In my opinion this font is easy to read and visually appealing. For my headings I decided to go with a different font in order to make them stand out from the main content. The font I choosed for this, is the Julius Sans One font. This is a bit rounded uppercase font what matches with the overall font.

Icons

I have decided to implement icons, using the Font Awesome library. I will make sure that the icons are styled according to the website. I will use some icons to make the website more visually appealing but not to overtake the content.

Colors

As mentioned before, I am trying to create a harmonic ambience for the user with natural but lively colors.

Structure

I have chosen to use Bootstrap to create an overall structure for my website. Bootstrap provides various elements of CSS and Javascript which is very helpful to keep a good structure on your page. As Bootstrap is designed for mobile first, I will be certain that my website functions well on mobile.

Wireframes

I have decided to use Balsamic to create wireframes for my website. First I created a basic wireframe for desktop and later on for tablet and mobile. For my website I have decided to use a 4 pages structure that separate better the information. The website will be easy to navigate by using the navigation bar.

You can find my wireframes below:

Desktop Wireframe

Tablet Wireframe

Mobile Wireframe

Design and Structure changes

I've decided to make several changes to the version I mentioned above. I decided to use a 1 scrolling page structure for my mentor's advice as it fits better for my ideas and for the actual web design trends.

I also evolved my design choices. The reason was that I saw the background image in an online background image library and I got a new idea to build my website as a galaxy guidance. I think the background image suits for the topic as it seems a huge virus attacking the Earth. I tried not using too many colors for keep the content easily readable and all 3 colors I used were picked from the background picture using DevTools.

Features

Existing Features

Navigation

For the menu I have used Bootstrap to create a responsive navigation bar. My goal was keeping it simple with using only a few menu options. When hovering on the menu items its underline to make it visually appealing.

Background

I decided to use one amazing background instead of implementing many smaller pictures. I find this background picture showing our situation perfectly as the planet is facing with Pandemic. It doesn't cause anxiety or include any color scheme used for calling people's attention for the danger.

Website content

For the content I've used Bootstrap grid to make a responsive structure for any devices. I created a narrower column for the content and gave it a darker layer to make it readable while the user can enjoy the background. On mobile and tablet the content fill up the whole screen having the darker layout behind because there is no space enough to show parts only about the background.

For tablets and bigger screens I've used a very similar structure of content. I grouped the general information into 5 parts in 2 rows. 3 parts in the first row and 2 parts in the second row. Using the same layout structure with icons for these 5 items shows well the grouping. On mobile device all of them shows up one after another.

The restrictions part I devided into 2 parts. The general restrictions for people who are living or staying in Ireland for long term and rules for people travelling into Irelaand. I choosed to put them one below the other to give some breathe to the content.

For the prevention I have decided to use bigger icons to demonstrate the prevention actions better and to make the content diverse. These icons are placed beside each other for tablet and bigger screens but on mobile it shows up as a 2x2 square grid.

The physical and mental health are two important question in this topic and it has to be practised together in a balanced way to achieve success so I put a balance symbol between them and placed it the middle for tablet and bigger screens. On mobile it shows up as a divider image. I provided the help lines information below them to end this section and make this information visible enough.

I decided to implement a Bootstrap form in the end to provide an option to make any questions about the topic and sending it. For mobile devices and tablets it is in the very end of the webpage but on larger screens its sharing the row with the vaccination information as both don't need that much space.

Generally I was about to write a simple and clear code with not using complicated solutions for simple things. I tried to resolve most of the issues with Bootstrap classes and using CSS only for making the components visually fitting to my idea and making my website unique.

Features to be implemented

A Google Maps iframe to showing the testing centers in Dublin.
When the form is submitted, the message should be send to the email account of the website owner.

Technologies used

Languages

HTML
CSS

Libraries and Frameworks

Tools

Testing

Navigation bar

Plan
I wanted to include a navigation bar which will be fixed on top, including the title on the left side and the menu options on the right. Whenever clicked on one of the navigation links, it should take the user to the appropriate part of the page. To be more handy for mobile and for tablet the menu options group together into a droppdown menu.
Implementation
I used Bootstrap to implement the navigation bar. This helps to give an overall structure and lay out to the navbar. I have used CSS to overwrite the default settings and to make the navbar suitable for the webpage's design.
Test
To test the navigation bar, I have click all the links to make sure it works properly and checked if the dropdown menu is working on mobile and tablet devices. I also tried if it is working in different browsers.
Result
The navigation bar shows nicely like expected on all browsers and devices. All the links work fine taking the user to the right section.
Verdict
The test has passed all the criteria and works like planned.

External links

Plan
I wanted to provide all the official information through external links for the users to proove they are reading a trustworthy website and help them finding the exact parts between the many links and documents available on governemnt's pages.
Implementation
I used conspicuous links to provide the exact information all opening up in a new tab when clicking on.
Test
I tried all the links twice.
Result
Links look great, suit to the overall style and works well showing to the right pages or information.
Verdict
The test has passed all the criteria and works like planned.

Contact form

Plan
I wanted to create a form for users to be able to send their questions related to the topic or telling what part they don't understand and it would need more details, improvement etc. I wanted this form to be useable in a simple way for everyone asking only for the necessarry information to keep in touch.
Implementation
I used Bootstrap to provide the contact form to make it responsive. I changed the default styling in CSS to make it suit for the overall design.
Test
I tried it many times for mobile, tablet and desktop screen sizes checking the highlighted borders when it focused on, the notification for the required information and the submit button working.
Result
The form works well with all the features planned.
Verdict
The test has passed all the criteria and works like planned.

Bugs

Navbar dropdown menu

Bug
When I created the navigation bar the dropdown menu wasn't working well, I couldn't place the menu items on the right side or fix it to the top.
Fix
For the dropdown menu I added the Bootstrap Javascript link to the end of the body because I forgot to do it. The CSS styling issue was caused of trying to overwrite not to appropriate Bootstrap class. Using Google DevTools helped me to find the correct class to overwrite.
Verdict
Bug was resolved and form now works as planned.

Form background when focused on

Bug
When clicking on and typing in any input of the form the background changed back to the default white one with black font color.
Fix
It took me a while to figure out that I was using the wrong pseudo class for this action. Correcting it to :focus resolved my issue.
Verdict
Bug was resolved and form now works as planned.

Prevention icons

Bug
The 4 icons in prevention issues were not showing in the proper way on mobile devices.
Fix
Instead of using a Bootstrap table I decided to go with the simple grid system which is easier to use and does work perfectly.
Verdict
Bug was resolved and form now works as planned.

Title

Bug
I gave a long title for my website. On mobile or tablet devices it wasn't showing the whole title.
Fix
After my mentor's explained me how to use clamp property and sent me a few videos to learn about it, I could change the title font size properly.
Verdict
Bug was resolved and form now works as planned.

Deployment

This project was deployed via GitHub by executing the following steps. After writing the code, committing and pushing it to GitHub:

Navigate to the repository on github and click Settings.
On the left hand menu choose Pages and find Source section.
Select master branch on the dropdown menu, and click save.
Now the website is live on https://antalmelinda1116.github.io/how-to-live-with-covid19/
Any time commits and pushes are sent to Github, the Github Pages site should update shortly after.

To run the project locally:

Click the green Clone or Download button on the Github Repository
Using the Clone with HTTPS option, copy the link displayed.
Open your IDE, and ensure the Git Terminal is open.
Change the working directory to the location where the cloned directory is to go.
Use the "git clone" command and paste the url copied in the second step.

Credits

Content - Media - Inspiration

I have used the following websites to gather ideas and information for the overall content of my website:

Acknowledgements

I would like to thank Anouk Smet (AnoukSmet) for the great template for my first Readme file. It was a great help for understanding how does it work in practise.

code-institute-submissions / how-to-live-with-covid19 Goto Github PK

how-to-live-with-covid19's Introduction