Mom Lifehacks is a website presenting 10 work-life balance ideas to working mothers. It aims to make their lives less stressful and therefore happier. The lifehacks can be useful for home stay mothers, fathers and other child caretakers as well.
This is the first Portfolio Project in frames of Code Institute Full Stack Web Developer Course Assessment. It is for educational purposes and the main programming languages are HTML and CSS. Further tools and languages will be implemented for the consequent projects.
Below you can see the image of the website on different devices, as well as further information about how it was developed, tested and deployed.
Navigation bar on the top right of the website allows the user to find all the main sections of the website. Hovering over the navigation items highlights it to white text on brown background indicating to the user that the link is ready to be clicked on.
Navigation bar has fixed positioning for mobile devices and staying on top of the page along with scrolling.
Jump to a Lifehack section helps the user to quickly jump into reading the lifehack they are mostly interested in without scrolling through all of them. A valuable feature for working parents, who have limited time to read this webpage.
Jump to a Lifehack section adapts the number of colums to adjust to the device it is being viewed on.
Top button that is fixed to the bottom-right of the page no matter where scrolled. This navigation item will lead the user back to the start anytime during the reading process.
An introduction to the main content telling about importantce of work-life balance for mothers. This is the first out of three sections of the website (About, Lifehacks, Contact). The user expects to find out what the Lifehacks are about.
Medalion inspirational images are placed above every lifehack. The content changes the number of columns to adapt bing convenient to read on mobiles, tablets and desktops.
Contact form with a submit button. This form is providing the user a possibility to contact the website author by giving a feedback about the lifehacks. All the fields, except the Last Name are mandatory to be able to fully submit the form.
After successfully submitting the feedback, a new 'Thank you for Contacting' page opens to reassure the user that the message has been recieved and will be responded to soon. The user has a possibility to continue surfing the website using the navigation menu buttons that lead back to the main page sections.
Social media icons with links to correspoding social media sites. As this project is currently for the educational purposes and there are not 'Mom Lifehacks' community pages, the buttons simply lead to the corresponding social media homepages instead.
This page opens in case there are broken links or the user requested a page that does not exist. As with the 'thank you' page, the user has a possibility to further navigate to the main website.
Some videos demonstrating several lifehacks can be potentially valuable added feature.
The following to-do list made it possible to consequently plan the project and execute it.
-
read project requirments
-
brainstorm about the idea
-
find content
- sources
- images
-
create the site skeleton
- basic layout
- write text content
- add images
- create css structure rules
-
design
- design wireframes
- choose basic colours
- design the mood board with colours and themes
- apply the colours to the css
-
create a repository on GitHub
- setup
- basic structure
- initial commit
-
deploy to GitHub pages
-
edit the Readme file
- introduction
- the title image (4 responsive formats)
- describe the sections and attach images to each
- testing and deployment details
- credits to content and media
-
finishing touches
-
test
- check for errors
- validate html
- validate css
- manual testing on devices
- acessibility
- performance
-
-
go through the requirements checklist
-
submit the project
The so-called site skeleton was created by adding basic html and css, as well as assets folders to the repository. A basic layout of the head-body-footer and a connected file with css structure rules started off the project.
In order to identify and get to know the website user, Persona method was chosen. This method helps 'bringing to life' a real individual with personality traits, favourite choices and preferences. Jane Smith is a working mother that loves biological products and natural tones. She will enjoy the website design and hopefully find the ideas on the website useful to impelment in life. The persona summary is created with a tool called Xtensio that helps to conduct a virtual UX analysis. Additionally, a customer journey tracking was conducted to follow Jane's navigation and make it to her most convenience.
Wireframes were created to present a rough scetch what the future website structure would look like on different devices. Basic colours choice was conducted by extracting colours from the images and making sure they complement each other, as well as provide necessary contrast for the content readability.
Mood board with colours and themes gave a general idea what the website would look like in terms of the font choice and overall visual impression. Then these colours were applied to the style.css and responsive.css stylesheets to unify the project design.
The wireframes have been slightly alterated during the actual project creation. It turned out more visually appealing to add rounded images above each lifehack section. On the image below the general device responsiveness planning is evident. The column, as well as the navigation layouts have been scetched at this stage.
There is no limit to applied accessibility, however the following aspects were adressed:
- Semantic Html - The tags of the html document were named semantically to make sense. Header, Navigation, Section, Paragraph, Footer, to name a few.
- Text Content - headings, paragraphs, lists in hierarchic order to be analysed by screen readers.
- Page Layouts - title, url, headings, using site keywords, such as Lifehack, Mom in the paragraph texts, image Alt attributes for visually impaired, site Meta description in the head section.
- Form Labels - label, id, for.
- ARIA attributes- aria-labels to anchor tags for navigation.
Aria
Alt
Contrast
Website responsivity to different device sizes is achieved with CSS Media queries. The following breaking points were taken:
-
Large screens and high resolution desktops (min-width: 1281px)
-
Laptops and Desktops (min-width: 1025px) and (max-width: 1280px)
-
Tablets and Ipads in portrait orientation (min-width: 768px) and (max-width: 1024px)
-
Tablets and Ipads in landscape orientation (min-width: 768px) and (max-width: 1024px)
-
Low Resolution Tablets and Mobiles in landscape orientation (min-width: 481px) and (max-width: 767px)
-
Most of the Smartphones Mobiles (min-width: 320px) and (max-width: 480px)
A series of testing actions have been performed during and after coding. Main methods:
- manual testing on different devices (Large monitor, Laptop, iPad, iPhone)
- testing through VS code live view in Chrome Developer Tools, in particular, through Media Queries and Lighthouse tools.
- contrast check with WebAIM contrastchecker tool
- accessibility check with WAVE Chrome extension.
Chrome Developer Tools and Media Queries
Lighthouse Performance check
WAVE extension for Accessibility testing in Chrome browser
The files index.html, form-response.html and 404.html were tested through the W3C validator.
The files style.css and responsive.css were tested through the Jigsaw validator.
All the bugs and errors have been addressed and fixed. After fixing the errors, a CSS validator badge was awarded.
Most of the errors and bugs have been adressed and fixed. However, depending on the time of the day, Google Developer Tool Lighthouse perfromance showed Performance results varying from 73% to 90%. The lowest percentage of about 73 indicated slow performance. especially for mobile devices. This result mostly occurs due to the images being larger than recommended for a quick web performance. This will be taken in consideration for future image resizing and better optimisation.
Deployment to GitHub was done at the very beginning of the project for convenience of the current version control. After creating a new repository based on Code Institute's project template, in settings, the 'pages' option was chosen. After choosing the branch and confirming, the page was published on GitHUb server available for live public view. Potential placement on an own server is possible in the future.
The current live version of the project can be seen here: https://annagabain.github.io/Mom-Lifehacks/index.html
How-to references: https://www.w3schools.com/
Lifehack icons: https://fontawesome.com/
Practical advice about UX: Book - Praxisbuch Usability und UX - Was alle wissen sollten, die Websites und Apps entwickeln (in German) by Jens Jacobsen, Lorena Meyer, Rheinwerk Computing, edition 2017 https://www.rheinwerk-verlag.de/praxisbuch-usability-und-ux/
https://www.themuse.com/advice/13-life-hacks-for-careerloving-moms-and-dads
https://www.withlovebecca.com/working-mom-hacks/
https://theeverymom.com/life-hacks-for-working-moms/
https://www.sleepcycle.com/how-to-fall-asleep/how-to-power-nap-like-a-pro/
https://www.theodysseyonline.com/4-reasons-your-family-best-support-system
https://www.lifehack.org/734000/ways-working-moms-balance-work-and-family
https://www.mentalhealth.org.uk/a-to-z/w/work-life-balance
https://defeatingbusy.com/10-tasks-moms-consider-hiring-out/
https://en.wikipedia.org/wiki/Divide-and-conquer_algorithm
https://callemmy.com/morning-routine-for-working-moms/
https://www.pexels.com/@tatianasyrikova viewed on 15.05.2022
https://www.pexels.com/@karolina-grabowska/ viewed on 14.05.2022
Mood board creation on https://www.canva.com/ platform on 17.05.2022
Wireframes creation software: https://balsamiq.com/learn/ on 16.05.2022
Colour palette selection with https://colour.adobe.com/create/color-wheel on 17.05.2022
'Persona'bord creation with https://xtensio.com last edit on 02.06.2022
Contrast check with https://webaim.org/resources/contrastchecker/
HTML Validator: https://validator.w3.org/
CSS Validator: https://jigsaw.w3.org/css-validator/
Chrome Developer Tools
Adegbenga Adeye - Code Institute mentor, that helped with conceptual directing, sources and how-to-s.
Jakob Lövhall - author's partner providing babysitting support during longer working hours, as well as giving constructive feedback about the project.