Neurodivergent individuals (such as those with autism, ADHD, dyslexia, etc.) often face unique challenges in daily life. For expats, these challenges are exacerbated by unfamiliarity with the healthcare system, lack of government support, language barriers, and isolation from social networks.
Despite growing international awareness and a significant increase in diagnoses, support for expats remains limited, making it difficult to find professional guidance and community resources.
This site aims to create a community hub for autistic expats and their families in Amsterdam, the Netherlands. With an inclusive approach, it seeks to provide support to individuals from diverse social and economic backgrounds, offering a range of services, from professional assistance by certified coaches to volunteer-led community support and social events.
Live Link to access site here
- To provide the user with information about the services provided by NeuroConnect.
- To foster a sense a community by sharing with the user information about the events organized by NeuroConnect's community.
- To present the user with a website that is easy to navigate and fully responsive, taking into consideration target audience's sensory and cognitive sensitivities.
- To enable user to contact the service for more information on provided services.
- To allow user to confirm their presence in events organized by the community.
For additional information check Project Scope Definition
- As a first time visitor, I need easy navigation and a user-friendly design, including a responsive layout for my device, so I can find information quickly and efficiently without frustration.
- As a first time visitor, I want to see all essential information without navigating to additional pages, so I can easily understand it's purpose without cognitive overload.
- As a first time visitor, I want to know how can I get in touch for basic questions, so I can clear any doubts I might have.
- As a potential member, I want to be able to easily understand which services are provided, so I can decide which service is the best for my individual needs.
- As a potential member, I want to know how to get in contact with them, so I can request additional information or request their services.
- As community member, I would like to learn about events in the autistic community so I can find a safe space and create a social network that understands me.
- As a community member, I want to know how can I participate on activities, so I can build a social network and feel part of a community.
Design choices took in consideration insights from web design research done with autistic individuals. There's a minimal page structure variation and use of imagery to reduce cognitive load.
Research with target audience on preference of information in text vs in image is not conclusive. With that in mind, it was chosen to use images withou excess to convey additional information for individuals that process through images, while keeping a suscint text for those who process through written communication.
While chosing images there was an attempt to chose images with not too many colors or elements with the intent to making them easy to digest.
The colors selected for the site were chosen based on research done with autistic users, where it was pointed out that blues and green where calming colors. The palette was generated by Coolors platfomr and tweaked to achieve contrast values required by WCAG guidelines.
Color Palette
Lexend font was selected for the body font, due to it's readability characteristics. Considering that there is an overlap between autism and dyslexia, having a dyslexic-friendly font was deemed as a must. Roboto Slab was selected as a heading font to help differentiating levels of importance of content. Both fonts are imported via Google Fonts
For additional information check Design Research
Primary Button States
Secondary Button States
Primary Anchor States
Secondary Anchor States
Home
Services
Events
Provides a responsive and accessible navigation bar for seamless access to site sections, improving user experience across devices. The design dynamically adapts to screen size, ensuring intuitive and space-efficient navigation on both small and large screens.
- Click behavior on menu icon on smaller screen are achieve by using a checkbox input that is set to hidden. The icon is set as checkbox label.
- Larger screens display site's name along with logo and display site's section horizontally. Menu icon is hidden using media queries.
- Distinctive color is used to indicate active page. Softer color is used to indicate cursor hover.
- Fixed navigation was achieven using
position:stickytogether with left and top attributes to set its position on screen. - It was decided not to nest
<nav>element in the<header>, due to accessibility recommendations. - To comply with accessibility best practices, a
.sr-onlyclass was created, using the suggested code from WebAIM - Invisible Content Techniques. This will ensure that screen readers can still read the content.
Inspiration: Love Running
Related Commits:
- 5d11e3a: Initial implementation of the fully responsive navigation bar using media queries.
- 129d3c8: Design improvements applied in media queries.
- 488ae1d: Made navbar sticky.
Enhances keyboard accessibility by allowing users to skip directly to the main content, reducing navigation friction for users with disabilities. This feature becomes visible upon pressing "Tab," making the site more user-friendly for screen reader and keyboard-only users.
-
A link to skip to the main content was included to facilitate navigation using keyboard.
-
Link has fixed position with negative top value, making it hidden for users. Link becomes visible if user press tab on page first load due to change on fixed position using :focus pseudo class.
Inspiration: BBC / a11y-collective
Related Commits:
- f2cb5b5: Implements a skip-to-main-content link for improved accessibility.
- ee14f2a: Positioned skip-to-main-content off the screen to avoid accidental clicks.
Establishes the page's identity and atmosphere with a consistent hero banner and relevant imagery across pages. Positioned text overlays ensure readability, conveying each page’s purpose clearly and minimizing cognitive load for users.
- Hero banner uses
background-imageproperty to populate the HTML with it's content using distinctive ids. - Overlay text is positioned near the bottom right corner of the image using
position: absolute. A semi-transparentbackground-coloris applied to the text container to ensure readability.
Service Page Header
Events Page Header
Inspiration: Love Running
Related commit:
- f0de1db: Initial header structureis introduced.
- a7c7f4f: This change ensures a consistent header structure on all pages, aiding in user orientation and reducing cognitive load.
Offers a brief, clear overview of each page's content to set expectations and provide context, specifically benefiting users with cognitive and neurodiverse needs by fostering a sense of structure and predictability.
- All pages have a summary positioned as the first
<section>in the<main>element. <h2>titles were added as hidden to comply with SEO best practices. They were made invisible to reduce noise on pages.
Service Page Summary
Events Page Summary
Related Commits:
- d766516: Created page summaries structure to provide users with clear and accessible content overviews.
Ensures that user gets all the Summarizes essential information about services and events on the homepage, allowing users to access key content at a glance. Responsive content cards support easy exploration and quick access to detailed pages.
- Responsive design was achieved using
display: flexapplied to content cards. - For performance optmization, images on content cards are inside of
pictureelement, with asourcefor bigger screens, another for smaller screens and a<img>as fallback. - Anchor links styled as buttons redirect user to the specific pages within the website.
Related Commits:
- f9a3e5c: Initial structure for content cards implementation.
- e327694: Adapted the design of content cards for medium size screens
- 46b484a: Optmized design of content card used to summarize services and events on the homepage for easier navigation.
Delivers in-depth, structured information on available services, using icons and collapsible sections to reduce visual clutter. This feature is optimized for readability and accessibility, enhancing the user experience for information-dense pages.
- Responsive design was achieved using
display: flexapplied to<main>. - As the page is more text heavy, it was decided to use Fontawesome icons as visual conterparts to reduce visual stimuli on page.
- Feedback of initial design was still deemed text-heavy, so a new design with a collapsible element was implemented. More on issue #25
Inspiration: SVB.nl / Digitalocean / Stackoverflow
Related Commits:
- 737e6ea: Initial service page implementation with media queries for responsive design.
- 5d11e3a: Implemented collapsible sections to streamline service information and reduce visual clutter.
- efca153: Changed collapsible elements structure in HTML to work with click on text instead of only the icon.
Facilitates direct communication for service inquiries, allowing users to specify their needs in a user-friendly, accessible form. Responsive design ensures a smooth experience across devices, and visual feedback supports usability during form interactions.
- Responsive design was achieve using
display:gridon form's container. - Form fields includes:
- Full Name
<input type="text"> - Phone Number
<input type="tel"> - Service options
<input type="radio"> - Message
<textarea> - Method of contact
<input type="radio">
- Full Name
- All fields, except the message is marked as
required. - Pattern was included in phone number field using regular expression to allow only digits.
titlewas included to theinputelement, to show feedback to user about the required pattern. - Style for field
:focuswas modified using aborder-colorand ```box-shadow.
Related Commits:
- e6cbf09: Created initial form structure.
- 3839167: Attempt to provide the feedback on the same page was made using javascript on commit . Attempt is document in issue #9.
- d048ea6: Simplified submission feedback with form leading user to a success page.
- 8ca195b: Styled form for responsive design.
- 48a1d4f: Added pattern and title for phone validation in forms.
Displays upcoming community events with accessible summaries, enhancing user engagement through visually appealing content cards and clear sign-up options. Optimized for performance and responsiveness, ensuring a cohesive experience on all devices.
- Summary of the events is displayed as content cards on Events page.
- Responsive design is achieve by using
display: flex - Content card contains:
- One landscape image to visually communicate the event's activity
- Overlay box using
position: absoluteand semi-transparentbackground-colorproviding events' date and location - Event title
- Short summary of the event
- Button to sign-up for event (small/medium screens only)
- Content cards suffered redesign through out the development process due to negative feedback received by target audience. Process is documented in issue #19
- For performance optmization, images on content cards are inside of
pictureelement, with asourcefor bigger screens, another for smaller screens and a<img>as fallback.
Related Commits:
- 3db2d23: Created initial content cards with iframe element for google maps.
- e98742e: Created a flip-card variant as an alternative design to test it with target audience.
- ec50ab1: Final design for events page with content cards to display upcoming community events.
Enables users to easily reserve spots for themselves and guests at upcoming events, providing a seamless registration experience. Responsive grid design and clear validation ensure a smooth, accessible process for all users.
- Form responsive design was achieve using
display:grid - Focus style used for Get in Touch Form were also used in this form
- Form fields includes:
- Full Name
<input type="text"> - Phone Number
<input type="tel"> - Events options
<input type="radio"> - Spots to reserve
<input type="number">
- Full Name
- All field are marked as
required. - Field destinated for the amount of spots to reserve had additional
minandmaxvalues to ensure that user reserves for at least 1 spot and not more than 10. - One of the events radio buttons is marked as
disabledto indicate that is already fully booked. - Form submission leads to a success page with message and anchor link styled as button to redirect user back to main page.
Inspiration: Boardwalk Games
Related Commits:
- cac6a4e: Implemented 'Join Event' form to allow users to reserve spots for events.
- bec6d98: Styled form for responsive design.
- 48a1d4f: Added pattern and title for phone validation in forms.
Confirms successful form submission with clear guidance on next steps, providing users with a reassuring and informative message. Centered content with responsive design enhances readability on all devices.
- Success pages were created for each form. Initially it was considered to have a single page, but it was later split into two different pages to provide a more specific feedback to user.
- Each page has a success message and indication of what contact to expect next.
- A button redirecting to the home was added at the bottom of the message
- To better position the text in different screen sizes, it was used
display: flexwithalign-items: centerandjustify-content: center. This way, the content would always be in the center of the screen, regardless of the device used to access the website.
Related Commits:
- d048ea6: Initial success page implementation, with generic message and link to home.
- f0799cd: Split success pages for a specific message confirming form submissions and guide users on next steps.
- c5477b7: Finalized success pages design to optmize real state for different screen sizes.
Displays essential contact information, social media links, and a site map in a structured, responsive footer. Designed for accessibility, it allows users to easily navigate to key sections or contact options from any page.
- Footer includes address, contact e-mail, site map and social media links.
- Responsive design of
<footer>is achieve by usingdisplay: grid - Contact e-mail link uses
mailto:to open e-mail server with empty draft
Related Commits:
- 22ca62c: Introduced Footer structure.
- 82a4010: Finished adding content to footer with contact information and social media links to enhance site navigation.
- 8e25bbe: Pushed footer to bottom by making
<main>element take all surplus space.
- Tested all internal links lead to a valid page
- Tested that all external links open in a new window
- Checked for aria-labels in buttons
- Checked for aria-labels in anchors
- Tested form for required fields
- Tested for submission leads to success page
- Tested responsive design using Chrome DevTools, Firefox DevTools and Responsinator.
- Tested multiple browsers: Chrome, Edge, Safari, Firefox
- Tested multiple devices: iPhone, Android Galaxy22, Windows Desktop
-
Accessibility Checker: Avg score 85%. No Critical issues.
-
Lighthouse Scores:
Home Mobile
Home Desktop
Services Mobile
Services Desktop
Events Mobile
Events Desktop
Success Page (Services) Mobile
Success Page (Services) Desktop
Success Page (Events) Mobile
Success Page (Events) Desktop
- Checked if buttons, links and labels used
aria-labels. - Check if all images had
alt-text. - Used Contrast Checker to validate text visibility.
- Checked the usage of Semantic elements.
- Checked visual order follows DOM order using WAVE
- Validated Design for Target Group #3 with autistic friends
- Checked for errors and alerts on WAVE
The code was submitted for peer review in the Code Institute community and also received feedback from friends and acquaintances that match the target audience (autistic community).
- Missing feedback on required format for phone number on forms. Removed phone pattern checked on 351398a and reintroduce with added user feedback on 48a1d4f
- Puzzle pieces might be considered offensive. Fixed on ccd7a82.
- Overwhelming design on Events page. Fixed on ec50ab1. More on isue #19
- Text heavy design on Services page. Fixed on 5d11e3a. More on issue #25
All issues are documented in this Project View
- Jigsaw CSS validator error: unkown pseudo-class :user-valid. Although documentation on it can be found online at W3 School and and Mozilla, I chose to remove it and simplify the form validation experience. Documented on issue #20
- Click on label was not selecting corresponding radio button option on forms. Using the W3 check I found that it was due to duplication of ids on content cards and radio buttons. I renamed the content cards id's to be able to fix it. Documented on issue #21
- Code clean-up lead to home button misalignment on large screens. To fix it I added a
min-heighto the.card-textclass on media query for large screens. Documented on issue #22 - Initial mobile score for performance was around 75. To improve the score I converted images to webp format, set
loading="lazy"and added difference sources depending on screen size using<picture>+<source>. Documented on issue #24 - WAVE flagged label used for burger menu as an error. To fix it, I added a span to add the text "Menu". To hide it from users, I added a class with
display: none. After Code Institute Slack Community feedback, I changed this to asr-onlyclass that positions the content outside of the screen. This will enable screen readers to read it. Docummented on issue #26 - WAVE flagged
alt-textfrom a image on home with an alert. To fix it, I changed the text to remove redundancy of "Image of" and made more concise. Docummented on issue #26 - After changing image cards to use
<picture>with specificsourcefor screen distinct screen sizes, the image on home for the events was broken on mobiles. That was due to a broken url, which was fixed on 61c780d. Documented on issue #27 - WAVE alerted the paragraphs for Date and Location on event content cards as possible headings. Peer review provided feedback on the elements, suggesting using semantic elements. Applying the suggestion eliminated the alert. Documented on issue #29
- Error on HTML validator on Services page:
divcannot be child ofspan. Replacedspanwithdivto fix the issue. Documented on issue #28
- Jigsaw CSS validator warns that due to their dynamic nature, CSS variables are currently not statically checked. As they seem to be working, no action seems to be required.
- WAVE alerts on duplication of links on header due to both the icon/name
<a>element and the first<li>leading to home. It was not fixed due to an understanding that it is common practice to have a logo on the left leading to the home. Particularly for autistic people it is also benefitial to have a explicit link saying "Home".
This project was deployed using GitHub pages. Steps to deploy are as follow:
- Go to your repository on GitHub.com
- Select 'Settings' on the repository top menu.
- Select 'Pages' on the left side menu.
- Under 'Build and deployment', go to 'Branch' dropdown and select 'main'.
- Ensure that the selected folder is /root
- Once done, click on 'Save'.
- You should receive a deployment confirmation, followed by the web address.
- HTML5
- CSS
- Mozilla
- w3.org
- Dev.to
- StackOverflow
- a11y-collective
- Coolors
- Google Fonts
- Freepik
- favicon.io
- FontAwesome
- Pexels
- Tinypng to optmize the images
- Responsinator to test responsiveness
- ChatGPT for site's content feedback (spellcheck, rewrite to fit characther count, etc.)
Content of the page is fictional and created by me. ChatGPT was used on creation of content for consistency of language and character count.
- Favicon design by Freepik and converted using favicon.io
- Social media icons, burger menu and icons used on Service Page are from FontAwesome
All photos on site are from Pexels
Home
- Banner:Leeloo The First
- Services: Alex Green
- Events: Rachel Claire
Services
- Banner: Jorge Urosa
Events
- Banner: RDNE Stock project
- Book Club: Yaroslav Shuraev
- Game Night:RDNE Stock project
- Hiking Trip:RDNE Stock project
- City Trip: Sergey Guk
My mentor Antonio, for his support and guidance.
Code Institute community for the feedback and helpful advices.