- ABOUT MOONUP
- INITIAL WIREFRAMES
- UX (USER-EXPERIENCE)
- WEBSITE OVERVIEW
- WEBSITE SCROLL-THROUGH
- LOGO & HEADINGS
- HOMEPAGE
- NAVIGATION
- MOONWATCH PAGE
- MOONSHOTS PAGE
- SIGN-UP PAGE
- CONTACT US POP-UP
- MAPS PAGE
- RESPONSIVENESS
- TECHNOLOGIES USED
- VALIDATOR TESTING
- MANUAL TESTING
- BUGS
- KNOWN ISSUES
- DEPLOYMENT
- CREDITS
- CONTENT
- CODE
- MEDIA
MOONup is a website created for a small group of amateur astronomers based in Cork city who wish to share their knowledge with as wide a range of people as possible. Astronomy can be appear intimidating to a novice, they'd like to change that. They're focused on the moon because, as our nearest celestial neighbour, it's something everyone is familiar with, it's visible from most sites throughout the year and can be enjoyed just by eye or a standard pair of binoculars. However they've found that the moon can be taken for granted, even by people who already have a passing interest in the night sky, but it doesn't take much to change that mindset. When viewed through a telescope the usual response is just: WOW! The aim of the website is to develop a community, build-up numbers and get lots of sign-ups to the newsletter. Over time the moonshots page will contain more pictures from attendees and from the various moonwatches, meet-ups and other events.
- Rough wireframes created in Balsamiq
- Tell the user about MOONup
- How to take part
- Upcoming events. What type of event, when and where they take place
- How to get to the event sites
- Sign-up to the MOONup newsletter
- Add astrophotography or event photos to the moonshots gallery
- Contact with any queries
- Links to social media feeds
- For the site to be easily navigable and look appealing on a range of screen sizes and devices
- To make it easy for people to find out more information about MOONup and what they do
- For it to be easy to ask questions or find when the next events are on
- I want to be able to find out more about MOONup
- I want to be able to navigate around the site in a logical way
- I want to be able to find any social media feeds
- I want to be able to ask some questions
- I want to be kept up-to-date on events
- I want to be able to ask more questions or make suggestions
- I want to be kept up-to-date on events
- I want to upload some photos to the moonshots gallery
I wanted to keep a simple, clean layout. I removed some headings above the fold section from my original wireframes as I thought it looked too busy on the page, especially when I started resizing to mobile screen sizes. I chose a colour scheme that complemented the lunar theme with whites and greys mainly but with a yellow, from the occasional yellow moon, to add a splash of colour and interest. This signature colour could be easily changed to suit any unusual lunar activity throughout the year e.g. when there's a blue or red moon.
- I created the logo and headings in Adobe Illustrator, outlined the Rubik Moonrocks font, and exported as .svg
- The main page is an image of a full moon, animated so it zooms in to tie-in with the main heading's simple question that will hopefully intrigue and get the viewer to explore the rest of the page.
- The main heading is in a circular container to keep with the moon theme and the yellow is eye-catching against the white/grey/black lunar colour scheme.
- The about MOONup section will briefly explain the groups goals, where they meet, what an attendee needs to bring.
- Also includes some links in the text content to other sections or pages with more detail.
- The beyond the moon section will briefly expand on what else MOONup can show people and provide dates and locations of some upcoming events.
- This section will be updated as events are completed and when new events are added through the year.
- MOONup logo on left that always links to home page.
- Links to other pages on right.
- Bold white on active.
- Yellow and bold on hover.
- Different colour for visited links.
- Collapses to hamburger menu at smaller sizes.
- Used a pseudo :focus class to help accessiblity with keyboard navigation
- Twitter, Facebook, Instagram, YouTube in the footer along with a contact us link.
- Turns yellow on hover.
- All open in new windows.
- Added some event details, plus logo and header images to social media pages
- Added a Back To Top link above the footer.
- To keep the them consistent the moonwatch page is similar in style to the homepage but with a new image and no animation.
- Another simple question for the main heading that will lead the viewer to explore the rest of the page.
- The why, where and how but without being overly complicated.
- It will also have information about the upcoming moonwatches.
- This section will be updated as moonwatches are completed and when new moonwatches are added through the year.
- A simple calendar showing the Moon Phases for the remainder of the year and into 2023.
- A gallery style page that will expand over time when attendees send in their own images after events are completed.
- This page is where people will sign up to the MOONup newsletter so they can be notified of all the latest events and see photos and details of previous events.
- As well as signing-up the user can also upload any images for the Moonshots gallery.
- The user will be requested to submit their full name, email and mobile number.
- All fields have a placeholder showing the format required for entry.
- Used the Code Institute form-dump details for testing but it was mentioned on Slack that it'd be better practice to change to a Thanks page after confirming it worked.
- Nested in the footer with the social media links is a contact us link.
- Opens in a new page.
- Contains a text area for any questions or messages the user may have for MOONup.
- As on the Signup page I used the Code Institute form-dump details for testing but changed to a Thanks page after confirming it worked.
- Just some embedded Google maps showing the 2 main locations used for observing.
- Not a page in the navigation bar but has links to get you back to the main content.
- screenshots for widths 360px, 375px, 390px, 412px, 600px, 820px, 912px & 1280px (Samsung Galaxy S8+, iPhone SE, iPhone12 Pro, Galaxy S20 Ultra, Blackberry PlayBook, iPad Air, Surface Pro7 & Nest Hub Max)
- HTML
- CSS
- MARKDOWN
- BALSAMIQ - to create wireframe website mockups
- GITPOD - to create the website and version control
- GITHUB - to save and store the files for the website
- ADOBE ILLUSTRATOR - to create the logo and various headings
- ADOBE INDESIGN - ran the readme text through InDesign's spellchecker
- AM I RESPONSIVE - to display the website on a range of devices
- RESPONSIVEDESIGNCHECKER.COM - to check the display of the website on a range of devices
- FONT AWESOME - for icons
- FAVICON.IO - to create a favicon
- CONVERTIO.CO - to change jpgs to webp format
- BULK RESIZE PHOTOS - to resize webp images
- PEXELS.COM - for stock images
- PIXABAY.COM - for stock images
- GOOGLE DEV TOOLS - for troubleshooting and testing fixes
- W3C HTML & CSS VALIDATORS - to test HTML and CSS code
- SLACK, STACKOVERFLOW, YOUTUBE, GOOGLE, W3C Schools - for help with troubleshooting errors
- COOLORS.CO - to check colour contrast
- W3C SPELL CHECKER - to check website spelling
- FREECONVERT.COM - to compress mp4
- EZGIF.COM - to convert compressed mp4 to gif for README
- RECORD IT PRO - for screen-capturing video and converting mp4 to gif
- No errors were returned when passing through the official W3C validator.
- No errors were found when passing through the official (Jigsaw) validator
- I used coolors.co to check the contrast levels of the colour palette selected.
https://coolors.co/contrast-checker/112a46-acc8e5
- I manually tested each link on each page in different browsers and at different sizes.
- I checked responsiveness using web dev tools in Chrome and Firefox. I manually resized each page to check flow and behaviour. I also viewed the site at various sizes: desktops to mobiles.
- I also used https://responsivedesignchecker.com to check the website performance on a range of devices.
- I tested that the forms pages submitted correctly using the Code Institute form-dump info before changing to Thank You pages.
- I used the W3C SPELL CHECKER to check website spelling.
- EXPECTED - on smaller screens the hamburger menu would appear and give links to the various pages when opened.
- TESTING - launched website using terminal, tried various mobile screen sizes in web dev tools.
- RESULT - once opened the hamburger menu links appeared underneath the main background images on each page.
- FIX - I added a Z-index to the hamburger menu to bring it to a level above the background images.
- EXPECTED - placeholder text to show the required format to enter the phone number. I chose a 3 3 4 number format ([0-9]{3} [0-9]{3} [0-9]{4}) e.g 086 333 4444
- TESTING - launched website using terminal, tested the feature in web dev tools and on an iPhone X and Samsung S8.
- RESULT - I couldn't enter the number as required as there was no option to put spaces between the numbers on the phones I used.
- FIX - I changed the placeholder and required format to 10 digits without spaces ([0-9]{10} instead.
- EXPECTED - only difference was font/background colors between about moonup and about moonwatches section, wanted the font to have the same weight and size.
- TESTING - launched website using terminal, tested the feature in web dev tools at various screen sizes.
- RESULT - when scrolling through the website and between pages I noticed the white text on a grey background looked bolder.
- FIX - from what I could find researching the problem it seems to be linked to font smoothing, may just be a Mac issue as well.
Screenshot below showing before and after -webkit-font-smoothing: antialiased; applied. Viewed using Chrome on iMac.
- EXPECTED - the website to display with CSS applied to all pages.
- TESTING - launched website using terminal, tried navigating the website using the menu links.
- RESULT - a number of the pages were appearing without any CSS being applied.
- FIX - I checked the pages in question and saw they had absolute paths to the CSS file, changed links to relative paths.
- EXPECTED - links with paragraph using inline to appear italicised.
- TESTING - launched website using terminal, scrolled to the relevant section to see appearance.
- RESULT - the links didn't change to italic.
- FIX - created em {font-style: italic;} in CSS to correct.
- EXPECTED - moonup svg logo to appear in top left of website in navigation menu bar.
- TESTING - launched website using terminal, scrolled to the relevant section to see appearance, tried multiple browsers.
- RESULT - on certain browsers the logo wasn't appearing.
- FIX - defined a height as well as width.
- EXPECTED - placeholder text used as guide to fill out the form to be subtle but legible.
- TESTING - launched website using terminal, went to the relevant section to see appearance, tried multiple browsers.
- RESULT - because of the background and transparencies used the default placeholder text seemed too faint to my eyes.
- FIX - changed the colour of the placeholder using some code from w3schools. https://www.w3schools.com/howto/howto_css_placeholder.asp
- EXPECTED - the form on the sign-up page to be centered in the browser window on a desktop view.
- TESTING - launched website using terminal, went to the relevant section to see appearance, tried multiple browsers.
- RESULT - the form wasn't centering as I wanted it to.
- FIX - found this code when researching the problem: https://medium.com/swlh/how-well-do-you-know-css-52290217ff6e top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%)
- EXPECTED - website to resize and look well on mobile screen sizes down to 360px width.
- TESTING - launched website using terminal, opened web dev tools, browsed through website to see appearance using various small screen mobile sizes.
- RESULT - working ok in portrait mode but the moonup homepage and opening page of moonwatches didn't fit well in landscape format.
- FIX - created a media query for small mobile screens in landscape format.
- EXPECTED - sign-up page form to resize to almost fit on a small mobile screen by using max width query.
- TESTING - launched website using terminal, opened web dev tools went to the relevant section to see appearance using small screen mobile sizes.
- RESULT - wasn't fitting as well as I'd hoped.
- FIX - created a new media query using max height instead of max width.
-
As of June 23, 2020, all major browsers — Chrome, Edge, Firefox & Safari (14+) — support the WebP format but I've noticed that it doesn't work on older versions of MacOs/Safari. I was going to try and set up a fallback using jpgs for these older OSs. The picture tag was recommended as a solution e.g.
<picture> <source type="image/webp" srcset="assets/images/full-moon-silhouetted-branches-david-dibert 720px.webp"> <source type="image/jpg" srcset="assets/images/full-moon-silhouetted-branches-david-dibert.jpg"> <img src="assets/images/full-moon-silhouetted-branches-david-dibert.jpg" type="image/jpg" alt="dark black sky with large full moon with silhouetted tree branches by david dibert"> </picture> -
I had some difficulty getting it to work though, with the jpg over-riding the webp in all instances. I discussed with a Code Institute Tutor and they suggested just sticking with webp as: There has to come a point where older browsers aren't developed for anymore and webp has been around for some time now. Most of the world is using a Chromium based browser or Firefox.
- Given more time I would have like to severely edit my CSS code to make it leaner and remove any unused code.
-
The site was deployed to GitHub pages
-
The steps to deploy are as follows:
-
Go to GitHub and select the repository for the project
-
Navigate to the Settings tab
-
Select Pages from the left hand navigation window
-
Select Deploy from a branch under the source drop-down menu
-
Select main from the Branch dropdown menu
-
Make sure the /root folder is selected and press save
-
The site has now been deployed, it may take a few minutes before it is live
-
Here is the deployed link: https://frapplecat.github.io/moonup/
- Thanks to the Code Institute Tutors who helped me. Oisín and Scott for their advice on a couple of issues and Ger for fixing a Gitpod/Github sync problem.
- Thanks to Kera Cudmore for her talk and pointers on creating README files.
- Big thank you to my CI Mentor, Mitko Bachvarov, for his support, excellent advice and eagle eye for detail.
The paras on Binoculars and Telescopes on the moonwatches page were taken from the NASA website section on observing the moon.
- I based a lot of the layout on the Code Institute Love Running initially. I changed the hero zoom slightly to better suit what I wanted.
- I moved away from the Floats to a Flex model which seemed to work better for me especially when making the site responsive. Thanks again to CI Tutor, Oisin, for pointing me in that direction to fix a centering issue.
- I found this youtube video by Luke Peters very instructive as well with regard to responsive columns: https://www.youtube.com/watch?v=-pcMxrugSbs
https://alvarotrigo.com/blog/hamburger-menu-css/
- This was an excellent run-through of various style and options. I adapted one of them so it extended a bit further into the page and didn't partially block my logo Also amended the colours and removed some lines.
https://stackoverflow.com/questions/14477265/css-white-text-on-black-background-looks-bolder
body { -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
- I found the above or variations thereof in a few places but used the one from a stackoverflow chat. The last one of the four is the one that seems to work.
https://medium.com/swlh/how-well-do-you-know-css-52290217ff6e
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
- I had some hassle with centering on the sign-up page, used the above code to fix the problem.
Changed the colour of the placeholder using some code from w3schools, adapted to suit my colour palette. https://www.w3schools.com/howto/howto_css_placeholder.asp
- The photos used throughout were mainly sourced from Pexels.com with some from Pixabay.com. I've kept the photographers names in the alt description when available.