Peer review Webtech lab 193
The group that we arereviewing is called "Peppa Pig Web Development Team".
Upon reviewing their implementation, we found that there were several elements of their
design that were well executed, but also several areas for improvement. First, we would like
to mention the results of running the W3C Validator on their HTML. Overall, the validation
returned several errors, primarily related to the use of the "view" tag, which is not a
standard HTML-tag and is not recognized by the W3C. Additionally, there were several
instances of missing closing tags, and issues with the use of the "style" attribute.
These errors can be fixed by replacing the "view" tag with standard HTML elements such as
"div" and ensuring that all tags are properly closed and that CSS is separated from the HTML
in an external stylesheet. In terms of accessibility, the team made a good effort to include a
variety of different elements that improve accessibility, such as the use of "alt" tags for
images and "abbr" tags for acronyms. However, there were a few areas where the team
could improve. For example, the text color used on the website is a pale pink, which does
not provide enough contrast for users with low vision. Additionally, there were several
instances of text being placed over images, which can be difficult for users with visual
impairments to read. To improve accessibility, the team could consider increasing the
contrast of text against the background, and ensuring that text is not placed over images.
The team also did a good job of ensuring that the website is responsive to different devices.
The website is designed with a mobile-first approach, which means that it is optimized for
smaller screens and then progressively enhanced for larger screens.
This approach allows for a consistent experience across all devices, and the team made good
use of responsive design to ensure that elements are rearranged and resized correctly on
different screen sizes. However, we did notice that the text size on the website is quite small
on mobile devices, which can be difficult for users with visual impairments to read. To
improve this, the team could consider increasing the text size for smaller screens.
The team also made good use of semantic markup throughout the website. They used
appropriate elements such as "header", "nav", "section" and "article" to structure the
content, which makes it easier for users and search engines to understand the organization
of the website. They need to take this into consideration. However, there were a few
instances where the team used non-semantic elements such as "div" and "view" to structure
the content, which can make it more difficult for users and search engines to understand the
organization of the website. To improve this, the team could consider using semantic
elements whenever possible.
In terms of accessibility, I took several screenshots to demonstrate what works and what
doesn't work about the team's implementation. One screenshot shows that the team did a
good job of using "alt" tags for images, which makes it easier for users with visual
impairments to understand the content of the website. However, another screenshot shows
that the text background color used on the website is a pale pink, and the navigation bar
uses a blurred finish, which does not provide enough contrast for users with low vision.
Additionally, there were several instances of text being placed over images, which can be
difficult for users with visual impairments to read.
In terms of actionable feedback, I would recommend that the team address the errors
returned by the W3C Validator by replacing the "view" tag with standard HTML elements
such as "div" and ensuring that all tags are properly closed and that CSS is separated from
the HTML in an external stylesheet. Additionally, the team should consider increasing the
contrast of text against the background, and ensuring that text is not placed over images to
improve accessibility. Lastly, the team should consider increasing the text size for smaller
screens to improve the user experience on mobile devices. This would better the experience
of the viewer.
In terms of responsive design, rather than using the responsive design provided for media
queries, the team used a flexible box design in order to allow users to access the site on
most devices of different screen sizes. I think this is a very good design concept. However,
we believe that it would have been a great improvement to the user experience and the
adaptability of the site if the flex layout had been supplemented with a media query
responsive design. Different pages could be configured for different screen sizes in different
zones.
In subsequent testing of the site's responsive design, we used the website TestSize.com to
check the site's compatibility with different screen size devices. Their responsive design
seemed excellent to me, with almost all elements, header, lead bar, introduction, images,
QA and contact details automatically centred at mobile, tablet and computer screen sizes, or
react to different sizes of screen and perform reorder, allowing the user to read all
information without swiping left or right. However, these tables do not respond to the size
of the device. When I tried various screen sizes, I found that only at 1920x1024 or above
were the tables automatically placed in the middle of the page, in all other cases the tables
were placed to the right, forcing the user to swipe to read the rest of the information. I think
this is worth further optimisation to maximise the user experience.
In terms of mobile-first versus desktop-first, we believe that we should refer more to
mobile-first in our future designs, the reason being that we now, everyone has a mobile
phone and mobile sites contribute even more to 52% of internet traffic, according to the
survey. A mobile-first website can help us improve overall user engagement and give us a
higher ranking on search engines to better grow the site.
We believe that the team chose a desktop-first design approach because, based on our
compatibility testing of the site, it has the best desktop compatibility and the best user
experience. For mobile, on the other hand, there are some minor flaws that could be
optimised in the future to ensure that elements are rearranged and resized for different
screen sizes, for example, text size could be increased for smaller screens.
In conclusion, the Peppa Pig Web Development Team has done a good job of ensuring that
the website is responsive to different devices and making use of semantic markup
throughout the website. However, there are several areas for improvement such as
addressing the errors returned by the W3C Validator, increasing contrast and text size for
accessibility, and ensuring consistency in text size across different screen sizes. Overall, this
experience has taught me the importance of separating HTML and CSS, the importance of
accessibility and the importance of consistency in text size across different screen sizes.
Screenshot of responsive design
Desktop: 1280x1024
Mobile: 800x600
Screenshots of accessibility
Navigation bar and pale pink background color
Alt tags for image