[Solved] CINF362 Week 7-RWD Part II and Usability/Accessibility

Agenda

• Responsive Web Design Part II
  • More Tips
  • Responsive Page Assignment
• Usability/Accessibility
  • What are they?
  • Page Usability/Accessibility Evaluation
• HTML Quiz
• Next Week

Responsive Web Design Part II

More Tips

With RWD, our focus must be on the screens real estate which the area we are able to work with when displaying our content. Users will visit websites on any number of devices: smart phones, tablets, desktops, etc. It is important to take all these devices into account. However, we should never build our website for any specific device. The best thing to do is to build our website and then determine where to add breakpoints to ensure a smooth transition from larger screens to smaller ones, no matter the device.

There are two main approaches to RWD which are often expressed as progressive enhancement or graceful degradation. Progressively enhanced websites may be developed for mobile devices first and then higher resolutions are targeted after. This allows you to start small and then add features as larger screens can fit them. You might start with the core features and then add things like image carousels, modals, etc. for larger screens when the space becomes available. Graceful degradation is the opposite in that you start building for desktop devices first. As the screen gets smaller, you remove features and other things that arent entirely necessary for the design. This could be removing images, extra text, etc. so that your core features are more accessible for users.

There are other approaches to RWD but these two are some of the most prominent ones. For this courses term project, we will most likely have users access our content from desktops. As such, it might be worthwhile to embrace graceful degradation for the project. However, the approach is entirely up to you and what you are comfortable with.

Additional Reading

• https://thenextweb.com/dd/2015/10/19/10-rules-of-best-practice-for-responsive-design/
• https://uxtricks.design/blogs/ux-design/responsive-design/
• https://neilpatel.com/blog/mobile-design-best-practices/
• https://medium.com/@JuliSudi/mobile-first-design-vs-desktop-first-design-vs-element-first-design-5d1015632a61

If you havent done so already, please read the Creating and Viewing our Web Pages.docx file on Blackboard. You will not be able to submit anything for the assignment without completing that portion first.

Responsive Page Exercise 2

Download the Responsive-Page-Exercise-2.zip folder from Blackboard under the Lecture Notes for this week or in the Assignments folder. Inside of this zip folder, youll find an HTML file and a CSS folder with a stylesheet inside of it. Using these files, your task is to make the news-page.html page responsive down to 400px. This means that your page should work on screen resolutions as small as 400px (I will not check anything below this). You can approach this however youd like and even change the underlying HTML tags. No content should be removed from the page though. You can change tags or alter the CSS, but all the text content and images should still be present in the HTML. If you choose to remove things with CSS, that is fine (display: none, etc.). There shouldnt be a horizontal scrollbar present when I shrink the browser width while checking your assignment.

Responsive Page Exercise 2 Tips

• Make sure the correct meta tag is included (present in class example)
• Use percentages for widths
• Use the max-width property where appropriate (when used on images, it helps them scale down better)
• Look at what is floating on the screen
• Adjust font sizes, padding, or margins on elements so they fit better in smaller screen sizes
• Keep your media queries simple (max-width will probably be best here)
• Remove floats (float: none) so elements end up in one column (if thats your goal)

To receive credit for this, submit a link to your responsive page by Wednesday, March 11^th at midnight. The assignment with be called Responsive Page Exercise 2 in the assignments folder. It will also be accessible through the Lecture Notes for this week.

Usability & Accessibility

What are they?

These are concepts that are very important to the success of all websites on the internet. When we develop with usability and accessibility in mind, it enables users to get through our content easier which could potential result in higher visits/revenue. If these concepts arent integrated into our development process, there is a greater chance that users will be frustrated with our website and leave. Depending on what your websites purpose is, there could also be legal ramifications. Although they are often used interchangeably, they have different meanings in the context of web design. Ive borrowed some definitions from w3.org below and will expand on them with a metaphor using a hypothetical toy.

Accessibility: addresses discriminatory aspects related to equivalent user experience for people with disabilities. Web accessibility means that people with disabilities can equally perceive, understand, navigate, and interact with websites and tools. It also means that they can contribute equally without barriers.

Usability: is about designing products to be effective, efficient, and satisfying. Usability includes user experience design. This may include general aspects that impact everyone and do not disproportionally impact people with disabilities. Usability practice and research often does not sufficiently address the needs of people with disabilities.

If we have a toy that is in good condition and is in within our reach, we would say that it is both usable and accessible. If this toy was in poor shape but still within reach, it would be accessible but not usable. A toy that is not within reach (on top of a taller bookshelf) but in good condition would be usable but not accessible. A toy that isnt within reach and in poor condition would be neither usable or accessible. In general, if something isnt accessible, we would consider it to not be usable as well.

There are many ways to incorporate these ideals in our web pages and Ive provided links below to expand on what Ive written above. On Blackboard in the Resources > PowerPoint Slides folder, Ive included a PowerPoint file with some information. Also, there is a checklist in the folder with todays Lecture Notes. These files along with the links below will give you a better idea of why theyre important and how we can implement them.

Heres a list of basic things to do that will set you on the right track with usability/accessibility:

• Use alternative text with images
• Identify page language (lang attribute in html tag)
• Use HTML to convey meaning and structure (semantic tags)
• Use labels with forms
• Structure content appropriately
• Include appropriate roles for elements
• Make all interactive elements keyboad accessible
• Use a skip to main button
• Use easily identifiable and accurate links (click here isnt descriptive)
• Ensure color contrast is high
• Dont use flashing or blinking elements
• Dont use HTML tables for layout
• Give users enough time to read content in slideshows or other interactive items

Additional Reading

• https://www.w3.org/WAI/fundamentals/accessibility-usability-inclusion/
• https://www.usability.gov/what-and-why/user-experience.html
• https://www.usability.gov/how-to-and-tools/methods/writing-for-the-web.html
• https://www.usability.gov/what-and-why/visual-design.html
• https://www.nngroup.com/articles/usability-101-introduction-to-usability/

Page Usability/Accessibility Evaluation

Visit 3 websites of your choosing and evaluate their usability and accessibility based on the information provided above in addition to the files located on Blackboard. Is the website youre looking at usable/accessible to you? Why or why not? Defend your evaluation with items mentioned above or below in a write up of at least two paragraphs (at least 5 sentences each) for each website, but feel free to write more. Specifically, Id like you to consider some of the following ideas:

• Is the site easy to use?
• How is the information architecture?
  • Does a clearly established hierarchy exist?
  • Can you tell where the main navigation is?
    • How do they handle their navigation on smaller screens?
  • Can you use your keyboard to navigate the website? (try to press tab)
  • Does the website work well on a mobile device?
  • Is the color contrast high enough?
  • Does it let you accomplish the tasks it says it will?
  • Can you identify the websites purpose from the homepage?

Page Usability/Accessibility Evaluations Tips

• Use websites that have a lot of content
• Make sure to mention principles or concepts mentioned in class notes or the articles provided
• Use various web tools to aid your evaluation
  • https://webaim.org/resources/contrastchecker/ (plug in color values)
  • https://wave.webaim.org/ (copy and paste link)
  • Google has a built-in accessibility audit (inspect the page, go to the Audits tab all the way to the right. Uncheck everything except Accessibility and then click Generate Report
• Use complete sentences and avoid colloquialisms as this will be graded for grammar

If you arent sure where to start as far as websites go, you can use any of the ones listed below:

• Atari Best Electronics
• Yale University School of Art
• Feed Music
• CNN
• CSS Tricks

To receive credit for this assignment, submit your write up to Blackboard by Wednesday, March 11^th at midnight. The submission area will be titled Page Usability & Accessibility Evaluations and will be in the Assignments folder in addition to this weeks Lecture Notes. You can submit it as a word document, text file, or even as a comment.