This website aims to educate on medieval facts and knowledge for users interested in the Battle of Grunwald an important event in the history of the region part of the "Northern Crusades".
My goal is to create a functioning, responsive and informative site detailing an important event.
Click Here To View The Site Live
I recommend opening any links in this document with Ctrl + Left mouse button.
The purpose of my project is to create a front-end only website for an event in history, which is regarded as an important battle in the history of Poland and Lithuania. My target audience for this project are users interested in the medieval history of the region.
-
New users looking to.
- As a new user I want to access easily read information.
- As a new user I want to access the different pages consistently via navigation.
- As a new user I want to find out more with social media and embed video links
- As a new user I want to learn about the event and its history.
- As a new user I want to easily contact the page to find out more.
- As a new user I want to easily view images and consistent content layout.
-
Returning users looking to.
- As a returning user I want to see new content.
- As a returning user I want to see layout and style improvements.
- As a returning user I want to see new social links and resources.
- As a returning user I want to be directed to new projects.
- As a returning user I want to engage in more ways with the website.
- A landing page with facts, images and information.
- A glossary page with important leaders, an artefact and fun facts.
- A contact page with a contact form and embedded video.
- A header with Title, hero-image and navigation bar across all pages.
- A Footer with Social links and image across all pages.
- The Manrope font is used for headings in the site.
- Roboto font is used for the main text as it compliments Manrope, I also have a fall back of sans-serif as this is a general font that works well and is easy to read.
- Font Colour I have used is #080808 for headings and text.
- Images that have been used fit with the purpose of my site and the event and time period displayed.
- Font size for the site is larger than normal for most sections this is why I was happy with the contrast ratio below.
- #080808 For text in body across the whole page to keep consistency.
- rgba(152, 152, 152, 0.3); For overall site background with a 0.3 transparency to reduce intensity.
- #ff8080 For hover function on navigation bar to enable user to see where they hover.
- #989898 For form background-color to make the form stand out.
- rgba(255,255,255, 0.5); For div elements in index.html and glossary.html to improve visibility and design.
- Using #080808 colour text against rgba(152, 152, 152, 0.3); background I have a contrast ratio AA 6.9:1 pass for accessibility.
- I created my colour scheme in hex but I wanted to have specific opacity, instead of two lines of code I changed them to rgba values
- I fixed the active hover from #ff8080 to an underline to aid in accessability.
- The title indicates what the page is about at a glance.
- The title is responsive across Desktop, Tablet and Mobile.
- Includes a responsive navigation bar with Font icons.
- Has hover function to help user know location of cursor.
- Fully responsive across Desktop, Tablet and Mobile
- The footer shows an appropriate image to the time period
- Social media links for twitter, facebook, instagram, youtube and wikipedia.
- Includes logos for respective links.
- Social Links open in new tabs to improve UX.
- Every page shares the same image to keep the website consistent.
- This image was picked due to portraying important historic characters and is part of the visual storytelling for the site letting users imagine what they are reading.
- The home page contains the battle timeline and useful information as well as facts.
- Grid-box layout has been used to help the content stay responsive across multiple screen sizes.
- The home page is presented as a grid of two columns and two rows and is reduced to one column and one row with smaller device screens such as mobile to aid in viewing.
- Appropriate images have been used in each section to keeping in theme with the battle and timeline.
- The Glossary page shows important characters for Poland, Lithuania and the Teutonic order. with icons, images, facts and information about the characters.
- The Glossary page shows the Two swords of Grunwald artefact presented to Poland and Lithuania as a mocking gift.
- The Glossary page has a "did you know?" section showing some interesting facts for the time period.
- The page uses Grid-box to help with responsiveness as the number of columns reduce according to screensize.
- The contact page includes a contact form to be notified about future content.
- The contact page contains an well put together embedded video made by Kings and Generals relating to the Battle of Grunwald and can help further knowledge for someone that prefers a moving visual representation.
- The contact page is fully responsive across Desktop, Tablet and Mobile.
Warning regarding section headers on a section that held my hero image I removed this section as it didn't need to be there.
Desktop Test 1
Mobile Test 1
After the first Lighthouse test I identified issues with mobile performance that were caused by the hero and footer image being too large and this decreased performance.
I improved this by creating new versions of the images with smaller sizes for mobile screens of 800px and below via media query.
I also found that my original favicon decreased performance so this has been changed.
Desktop Test 2
Mobile Test 3
The changes implemented above have helped to increase the performance of mobile considerably, after a family member noticed text on the home page was not aligning on his device I implemented fixes to my media queries and resolved the issue. I re-tested on lighthouse and my changes yielded a higher score on performance.
After all of these changes the desktop test stayed the same.
-
Personal Devices
-
All elements showed up as they are supposed to aswell as being responsive and good performance in loading.
-
Social media and navigation all worked as expected, Social media opened in a new tab,
-
Text stayed inside containers and was well aligned.
-
Form element validation worked as intended and an action was made.
-
-
Iphone 12 pro max (1284 x 2778).
-
iOS Safari
-
Iphone 11 pro max (1242 x 2688).
-
Chrome mobile
-
Samsung S20 Ultra (1440 x 3200).
-
Chrome mobile
-
Samsung S10 (1440 x 3040).
-
Chrome mobile
-
Samsung S9+ (1440 x 2960).
-
Chrome mobile
-
One Plus 7 Pro (1440x3120).
-
Firefox Mobile
I did not personally have these devices available to test with but within chrome dev tools they behaved the same as above.
- Moto G4.
- Galaxy S5.
- Pixel 2.
- Pixel 2 XL.
- Iphone 5/SE.
- Iphone 6/7/8.
- Iphone 6/7/8 Plus.
- Iphone X.
- Ipad.
- Ipad Pro.
- Galaxy Fold.
- Surface Duo.
-
Tested on a windows 10 desktop and a screen of 2560x1440, 27".
-
After testing on all the browsers below.
-
All elements were aligned properly and text did not escape its div.
-
Images appeared as they were intended to.
-
All social Links worked as intended and opened a new tab.
-
Navigation worked as intended taking me to required page.
-
Form element validation worked as intended and an action was made.
-
-
- Google Chrome
- Google Chrome Dev tools
- Firefox Browser
- Microsoft Edge
- Opera Web Browser
Internet Explorer 11
My site does not align properly on Internet explorer 11, this is due to my use of grid-box within my site content grid-box is not fully supported. As Internet explorer 11 has had most software support dropped on November 30th 2020 and will be fully discontinued on July 15th 2022 with 0.85% users. I decided to not support this browser for this project.
I encountered a bug whilst improving responsiveness for mobile devices, I found an edge case between 420 and 440 px I had a difficulty with one character dropping on my h3 tags in the glossary.html making it look less than desireable I fixed this by increasing the font size temporarily with a media query to make more than one character drop to slightly improve design as there might be phones with that px size in the future.
I had an issue testing my responsiveness on contact page with iphone 5/SE (320px) where the content inside the form would not align how I would like, I created a media query to change the width to auto and this change made it look more in line.
- The site was deployed to github Pages, below are the steps.
- In the github repository navigate to "settings"
- Scroll down to the "pages" tab
- In the github pages from the source drop down select main/master both are correct.
- Once you select main/master the page will automatically refresh and a link will be available with succesful deployment.
Live link to the site -- Battle of Grunwald--
Facts and Information - I used wikipedia for my information on the battle.
Wladyslaw II Jagiello - Information about Polish King.
Vytautas the Great - Information about Vytautas.
Grunwald Swords - Information about Grunwald Swords.
Ulrich Von Jungingen - Information about Grandmaster of the Teutons.
Hero Image - Image source.
Embedded Video - Embedded video on contact page.
Footer Image - Footer Image.
Polish King - Portrait of Wladyslaw Jagiello by Jan Matejko.
Lithuanian Grand Duke - Portrait of Vytautas the Great by Adomas Varnas.
Two Grunwald Swords - Wojciech Kossak 1909
Ulrich von Jungingen - Christoph Hartknoch Altes und Neues Preussen 1684
March into Prussia - January Suchodolski - 1849
Grunwald Battle - Artur Orlionov
Aftermath of Battle - Alfons Mucha 1924
Code Institute - Teaching and preparing in HTML and CSS.
Kings and Generals - For content in embedded video and knowledge.
Youtube - For embedded video.
Grid box - Helped me implement and improve responsive design.
Avex Design - Blog article on making youtube video responsive.
Favicon - I used this site to download and link a favicon to my site.