You can find the live link here: English with Claudia
English with Claudia is the landing pad website for English learners. The website is aimed at learners of all ages and levels who want to improve or maintain their language skills thanks to the tailor-made and flexible teaching method of teacher Claudia. English with Claudia is a clear and easy-to-navigate website: The aim is to arouse curiosity and lead the student effortlessly to the "Contact me" form.
Considering the educational purpose of the website, special attention was paid to accessibility in order to welcome every student. Therefore, high-contrast colours, minimalist animations and light graphics, among others, were preferred.
The text was tested against common readability indices and refined to be easily understood by most users. The text presenting the English lessons should not be difficult to read, as the intended users are indeed learners.
-
-
- As a First-time visitor, I want to understand if the services are suitable for me.
- As a First-time visitor and a learner, I want the text to be easy to decipher, short and written in a rather casual language.
- As a First-time first-time visitor with an impairment, I want to be able to navigate the website easily to find information, read all the text by myself or with a screen reader, find colours that are not misleading, and find animations disabled if so set.
- As a First-time visitor, I may want to learn more about the service on social media.
- As a First-time visitor, I want to engage with the organisation easily, quickly and effectively.
-
- As a returning visitor, I would like to find information, prices, conditions and timetables that are always up to date.
- As a returning visitor, I want to find the best way to contact the organisation when I have questions.
- As a returning visitor with a disability, I want to find the same or even better accessibility than before.
-
The site is designed with an intuitive layout, it is accessible, easy to browse, with the absolutely necessary information and less invasive images. Balsamiq was used to put "ideas on paper".
Layouts: Desktop / Mobile / Extra small screen.
-
- Colours
- The two main colours used are orange and white. Orange was chosen because is an energetic and attention-grabbing colour, as psychologists recommend here. White was chosen for an optimal contrast ratio between background and text.
- Typography
- 'Oswald' for headings and 'Nunito' for paragraphs and other elements, paired as suggested by Google Fonts.
- Images
- The images are simple and inviting. All images have alt text to maximise accessibility.
- Colours
- Responsive on all device sizes
- Accessible for users with hearing and visual impairments
- Interactive elements
-
Navigation bar
- The navigation bar contains links to the 'About me' section and the 'Contact me" form, the core of the website. The navigation bar is intentionally fixed to the top to avoid distractions and to convey the message of each section as clearly and directly as possible.
-
The landing page image
- The landing page contains a photo with a high-contrast text overlay that allows the user to immediately identify the three main services the teacher offers.
-
About me section
- The 'About me' section includes a picture of the teacher, a welcome message and a brief description of the teacher's professional experience and goals. The picture was chosen to inspire confidence and the welcome message is intended to reassure the users and encourage them to read on. The biography has been deliberately kept short so that it does not become boring. At the end of the bio, there is a prompt to learn more and a link to the social media buttons in the footer.
-
Services section
- This section answers the question that most users/students will ask at some point: "are these lessons right for me?". The section introduces in a few concise sentences the three main features of the teaching service: "tailored", "strategic" and "flexible".
- Each feature is accompanied by an image that matches the page message and website colours. The images are simple, easy to understand and convey a message that is aligned with the website's objectives.
- The times, hours and conditions will be updated whenever necessary.
-
Contact me section
- The 'Contact me' section is intuitive with the promise of a response within 24 hours. The form is on the right hand side to facilitate the natural eye movement of western readers from left to right.
- The form's field are mandatory to fill in and an alert warns the user if some fields are left blank before submission.
-
The Footer
- The right section of the footer contains links to the corresponding social media pages of English with Claudia and the teacher. The links open in a new tab to allow users to navigate easily. -The left area of the footer contains links to the "About" and "Top of page" pages, which are anchored in the header. This area is intentionally located directly below the "Submit" button in case the user wants to return to the relevant information before submitting the form.
- The footer serves to invite the user to learn more about the teaching method and the teacher's biography.
- Other features
- The website has an apple-touch-icon to make the page stand out from other bookmarks, with an orange "C" as a reminder of Claudia (the teacher) and (English) Course.
- The website has a Union Jack Favicon to make the page easy to find among the many open tabs.
- The website has a "Google site verification" to verify the website's ownership as shown here.
- The site has keywords and a description of appropriate length to give the user a brief impression of the site on the browser results page.
- Make the Submit button functional.
- Implement an efficient cache policy.
- Add privacy policy and copyright information.
- Get the website a domain name.
- Google Fonts:
- Google Fonts were used to import the 'Oswald' and 'Nunito' font into the HTML page.
- Font Awesome:
- Font Awesome was used for the social media links in the footer section.
- Gitpod
- Gitpod Dashboard was used to write the code and its terminal to 'commit' to Git and 'push' to GitHub.
- GitHub:
- GitHub is used to store the projects code after being pushed from Git.
- JPEGMiniPRo
- JPEG Mini Pro was used to compress the image and ensure minimal quality loss.
- Balsamiq:
- Balsamiq was used to create the wireframe before the deployment process began.
The website's features were thoroughly tested using some well-known free web testers. Particular attention was paid to SEO and accessibility as the website offers educational resources.
-
Web Responsive
- The responsive feature has been tested using Chrome DevTools and an online Web Design checker. The website's layout has been tested on a range of different screen sizes, from small 320x480 screens (e.g. Apple iPhone 3) to widescreen 24" and their landscape view providing a good user experience. The website has passed the Google mobile-friendly test.
- Note: Images and the submit form have been removed from the small screen layout for better readability and a warning message is displayed instead.
-
Accessibility
- Colours: All colours checked with WebAim have an optimal contrast ratio.
- Reduced motion: All animations are disabled when "Show animation in Windows" is disabled from settings in Win10.
- Colour blindness: Colour-blind webpage filters have been taken into account with Toptal.
- Screen Reader: Texts, links and images' 'alt text' were read with the Google Chrome extension Screen Reader (version 53.0.2784.13).
- Presbiopia: All fonts are 'sans serif' and have a sufficient size so that the text can be easily read without glasses.
- Readability: As the main target audience is English language learners, the text was rated 'easy to understand', as tested with WebFX.
- General Accessibility: has been tested with satisfactory results on:
- Google Light House (mobile and desktop version).
- Power Mapper shows no critical issues.
- Wave.
-
Browser Compatibility
- The website was tested with Power Mapper and no critical problems were found.
- Some layout issues occurred in IE ≤11. Other minor issues encountered in different browsers are not obstructive.
- To maximise responsiveness and browser compatibility, font sizes are set in viewport values but fallback to rem values as advisable.
-
SEO
- The website was tested on Seobility and Seo Site Checkup.
- Tests ran on Google Light House (mobile and desktop version) obtained a SEO score of 100%.
-
Performances
- The website was tested on Power Mapper.
- The general performance was evaluated by GTMetrix.
-
Known problems
- Images in .jpeg format present an optimal compromise between quality and size. JPEGMiniPRo was used to reduce the image size while ensuring minimal quality loss. However, low scores on Largest Contentful Paint (LCP) side were still achieved.
-
Fixed bugs
- WebP format images are partially or not supported on some browser's older versions as shown by Can I use. In order to preserve information and maximase compatibility, .jpeg format was chosen instead despite WebP performs better as shown by Google Developers.
-
Unfixed bugs
- There is a loss of information in the header section when the page is displayed on IE 11 running on Win 10 because the header will not be displayed correctly: CSS property 'display: flex' is not fully supported by IE11. Details are shown here.
- Note: The issue has not yet been fixed as Microsoft will soon be phasing out IE 11 as stated here.
- The :hover property remains activated on touch-screen devices. The issue is well-known and documented here and it's believed that the best solution is to use JS to detect whether the screen has touch capabilities and style the properties accordingly.
-
As a First-time visitor, I want to understand if the services are suitable for me.
- The three courses offered are immediately visible in the welcome image with a high-contrast text overlay.
- The user has two options: Click on the "About me" link in the navigation bar or scroll to learn more in the "About me" section immediately following.
-
As a First-time visitor and a learner, I want the text to be easy to decipher, short and written in a rather casual language.
- The texts were carefully edited using text analysis tools and text editors to make them as easy to read as possible. Inexperienced language users may find long sentences and academic vocabulary challenging to understand and frustrating.
- Texts have been intentionally kept short to avoid information overload. More information can be obtained via social media and by contacting the teacher.
-
As a First-time first-time visitor with an impairment, I want to be able to navigate the website easily to find information, read all the text by myself or with a screen reader, find colours that are not misleading, and find animations disabled if so set.
- Colours contrast with the background and are colour blindness friendly as information is still clear regardless of visual impairment.
- Font sizes are sufficiently large by default and therefore easy to read.
- All text, labels and images are readable with the Chrome Screen Reader extension.
- Animations are disabled when the user sets the "prefer reduced motion" option.
-
As a First-time visitor, I may want to learn more about the service on social media.
- Right after a short bio in the "About me" section, a "find out more" link lands the user to the footer section where a LinkedIn, Facebook and TikTok icons are displayed and open on a new tab.
- The user can also scroll to the bottom of the page till the footer.
-
As a First-time visitor, I want to engage with the organisation easily, quickly and effectively.
- There is a direct link in the navigation bar to the "Contact me" section and the relevant form.
- Right after the teacher's short bio, the user can follow the "find out more" link which lands to the footer. The "Contact me" section will be within the same viewport height.
- The contact me form is logically placed after all the important information has been provided. It is simple, easy to find and fill out. The size is more than sufficient to allow easy completion.
-
As a Returning Visitor, I want to find information, prices, conditions and timetables always up to date.
- The information in the third text area from the top in the "Services" section is constantly updated, as is the "About me" section and anything else that might change.
-
As a Returning Visitor, I want to find the best way to get in contact with the organisation with any questions I may have.
- The "Contact me" link is available in the navigation bar and takes the user to the forms section in the "Contact me" section.
-
As a Returning impaired visitor, I want to find the same as before or even or better accessibility.
- Accessibility remains a top priority for developers.
- HTML
- No errors were returned when running the official W3C validator.
- CSS
- No errors were found when running the official (Jigsaw) validator.
- The site has been deployed on GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab.
- On the GitHub Pages tab, select the main branch.
- Once the main branch is selected, the page will automatically refresh with a detailed ribbon display to indicate successful deployment.
You can find the live link here: English with Claudia
- All content written by developer Claudia Cifaldi - cla-cif on GitHub.
- The text was partly taken from My English Teacher Tom.
- CSS backbone was taken from Kevin Powell's tutorials.
- The icons in the footer were taken from Font Awesome.
- Fonts from Google Fonts.
- All the photos from Pexels.