[Accessibility] Comply with Responsive Website Design Practices and Improve Usability

[randompawn]

Per W3Schools Responsive Web Design :

"What is Responsive Web Design?

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones)"

Canvas scales down, but fails to scale up. The overall content is justified to the left, not centered, and does not adjust based on screen width automatically. This results in cutoff headings/titles on various items posted to various widgets on the web page. In some cases, the web site fails to utilize over 50% of the screen space.

It is common for monitors to have 2k, 4k, or other resolutions. The prices are cheap and aid productivity when applications support the additional space. In summary, Canvas is not currently fully compliant with Responsive Web Design. The simple techniques available at W3 schools allows anyone (beginner or advanced) to configure responsive web sites on ALL resolutions.

Role: Student

Unable to add images inline to post. I used the camera box to add via URL. I tried pasting directly into the box. Nothing works to display inline. Reference the attachments.

🔎 This idea has been archived. While this idea isn't open for comments, it is an important part of Instructure’s idea conversations and development process. Contributions like this are valuable as Instructure prioritizes work on new or existing features.

[randompawn]

Responsive web site design has been around for a long time. See this post from 2014 12 upwardly responsive websites designed for big screens 

There are a number of examples on that article with regard to website responsive design. There are many options to utilize the extra space:

BEST WEBSITES EXAMPLES OF DESIGNS WITH RESPONSIVE DESIGN 

[dlyons]

@randompawn, thanks for your sharing this feedback. It's a little tricky to keep my response from sprawling because design is a sprawling topic so I'll try to share some high points of why Canvas doesn't respond the way some of the sites you mentioned do.

tl;dr I'm not sure the examples you shared apply to our use case, but there's always room for improvement in our design! I appreciate you sharing such a detailed idea.

---

First, responsive design generally means from some "optimal" design size and downward, not upwards as well. One reason is related to line-length for reading. Essentially, reading an entire book on one long horizontal line is not a good experience, so if we responded to the width increasing without a limit we'd also have to increase the font size (and everything else). That means you'd end up with the same amount of content on screen, it would just be bigger. Some people might like that I suppose. If they wanted to make their browser window fill an entire 32" 8k monitor they could CTRL-+ to zoom and make the content fill the width. For cases like youtube/netflix/twitch no video is too large so they'll fill all the space you give them.

Second, the examples you shared utilize top nav, which means they can center the content in the window and distribute the white space to either side, instead of on one side. They're not really utilizing all the extra space above some limit they've decided (presumably for the reason I mentioned above).

Finally, and this is a tricky one for design to account for, above a certain resolution (currently that's about 1080p or 1440p) we don't presume a user is dedicating 100% of their screen real-estate to a single browser window. As I write this (on a 2k monitor) my browser is only a portion of the screen so I can have other applications in view simultaneously. There are also other considerations like the size of the screen relative to the resolution, accessibility features the user might be using, how they use and distribute their space, etc. Basically, designers have to draw the line somewhere.

As resolutions over 1440p (and physically large screens) become more common maybe "auto-zoom" responsive design to account for reading line-length will become a standard practice but we're not there yet. And who knows? Maybe the space will be utilized in some other way I haven't even considered! Thanks for taking the time to share your idea with thoughtful examples. 😊

[randompawn]

Per W3Schools Responsive Web Design :

"What is Responsive Web Design?

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones)"

Regardless of definition, the website is unusable in larger resolutions with important pieces of information missing on pages.

[randompawn]

@dlyons @KristinL 

This issue with Responsive design is well documented since at least 2014... And, important pieces of information are not displayed on higher resolutions. It is now 2022.

As W3Schools demonstrates, you do not need to hard code various resolutions into the website. Responsive design can be accomplished with relative sizing. They have many examples of how to create responsive websites. A new person coding following their CSS and examples is able to form websites that operate on all screen sizes.

And, as posted above, websites do accomplish this today.