Posted by Kim on December 7, 2022, 9:00am
Okay, admittedly this Excellence topic is a bit niche -- but this one goes out to all you style designers out there.
Did you know...
- about half of the traffic on the RPR is people accessing the site from their phones?
- about 15% of people in the US are smartphone ONLY internet users, who don't own a desktop or laptop computer? And that that number is growing steadily?
- certain bits of CSS can render parts of a character profile invisible to people using screen readers?
Making Character Styles Mobile Responsive
Ready to make your styles work for all those folks who are reliant on their phones?
As with all CSS, it's a game of "The selector that's the most specific gets highest priority. If two selectors have the same specificity, the one that comes later will overwrite the one that comes earlier."
This means that we can have our mobile styles override the desktop styles that we designed by putting them at the bottom of our CSS. Everything we wrote for the desktop will still apply, so we just have to find the bits that don't work for mobile and override them for smaller sizes. In practice, that might look something like this:
Code:
@media screen and (max-width: 800px) {
.mobilesupportenabled .col-11, .mobilesupportenabled .col-10, .mobilesupportenabled .col-9, .mobilesupportenabled .col-8, .mobilesupportenabled .col-7, .mobilesupportenabled .col-6, .mobilesupportenabled .col-5, .mobilesupportenabled .col-4 .mobilesupportenabled ,.col-3, .mobilesupportenabled .col-2, .mobilesupportenabled .col-1 {
float: none;
width:100%;
padding:0;
box-sizing: border-box;
}
}
The above says "When the screen is 800 pixels wide or less, start making the columns stack one on top of the other so mobile users don't have to do any horizontal scrolling."
You'll notice that not only do I wrap all of this in the directive to only apply it to screens 800 pixels or less, I also put the selector ".mobilesupportenabled" in front of all of my selectors -- this is a class applied to the HTML body for users who have not chosen "Prevent re-sizing to fit smaller screens" in their display settings. This has two benefits. 1) It makes my column selectors more specific than any I had previously, because it adds another class to the chain that needs to be matched. 2) This enables us to provide a great experience for mobile users, AND to let those few who want to always see the desktop version, even on their mobile phone, keep the desktop experience, because the overrides are only being applied for people who have the .mobilesupportenabled class.
You can keep adding as much as you need to your 800px wide or less section. Let's say I had the width of the profile set at 1200px for desktop, but I need to make it resize for whatever the screen size is of the mobile device. That might look something like this:
Code:
#sitecontainer {
background: white;
width: 1200px; /* This sets the width for desktop */
padding: 25px 50px; /* This creates some padding between the edge of the content container, and where the text starts */
margin: 0 auto; /* This centers the content in the screen */
}
@media screen and (max-width: 800px) {
.mobilesupportenabled #sitecontainer {
/* I still want the background to be white, but since that was applied on the desktop version, I don't have to do anything to have it also apply to the mobile version */
width: 90%; /* This overrides the desktop width, making the content 90% of the width of the window. */
padding: 10px 5%; /* This overrides the padding we used for the desktop, making the left/right padding be 5% of the size of the window. */
/* I still want my site content centered on the screen, and I don't have to do anything to make that happen -- the CSS that made that happen for desktop still applies here, so I just don't override it. */
}
.mobilesupportenabled .col-11, .mobilesupportenabled .col-10, .mobilesupportenabled .col-9, .mobilesupportenabled .col-8, .mobilesupportenabled .col-7, .mobilesupportenabled .col-6, .mobilesupportenabled .col-5, .mobilesupportenabled .col-4 .mobilesupportenabled ,.col-3, .mobilesupportenabled .col-2, .mobilesupportenabled .col-1 {
float: none;
width:100%;
padding:0;
box-sizing: border-box;
}
}
You can take this even further and add a further level of overrides for extra-small screens. Maybe that 5% padding eats up too much of our limited space if the screen is only 450px wide? That might look like this:
Code:
#sitecontainer {
background: white;
width: 1200px; /* This sets the width for desktop */
padding: 25px 50px; /* This creates some padding between the edge of the content container, and where the text starts */
margin: 0 auto; /* This centers the content in the screen */
}
@media screen and (max-width: 800px) {
.mobilesupportenabled #sitecontainer {
/* I still want the background to be white, but since that was applied on the desktop version, I don't have to do anything to have it also apply to the mobile version */
width: 90%; /* This overrides the desktop width, making the content 90% of the width of the window. */
padding: 10px 5%; /* This overrides the padding we used for the desktop, making the left/right padding be 5% of the size of the window. */
/* I still want my site content centered on the screen, and I don't have to do anything to make that happen -- the CSS that made that happen for desktop still applies here, so I just don't override it. */
}
.mobilesupportenabled .col-11, .mobilesupportenabled .col-10, .mobilesupportenabled .col-9, .mobilesupportenabled .col-8, .mobilesupportenabled .col-7, .mobilesupportenabled .col-6, .mobilesupportenabled .col-5, .mobilesupportenabled .col-4 .mobilesupportenabled ,.col-3, .mobilesupportenabled .col-2, .mobilesupportenabled .col-1 {
float: none;
width:100%;
padding:0;
box-sizing: border-box;
}
}
@media screen and (max-width: 450px) {
.mobilesupportenabled #sitecontainer {
width: 100%; /* This overrides the desktop AND larger mobile width */
padding: 10px 2%; /* This overrides the padding we used for the desktop AND larger mobile size, making the left/right padding be only 2% of the size of the window. */
}
}
As you can see, it's just a game of overriding your existing code when the window width gets smaller than a certain "break point."
The hardest part might be figuring out which selectors you need to target, but usually it's the same selectors as you used in the desktop version -- just with .mobilesupportenabled in front of it.
There's more example code for making your styles mobile responsive here.
Being mindful of screen readers
Certain CSS makes an element completely vanish for those reliant on screen readers, most especially "display: none;"
Sometimes you DO want an element to be completely hidden for everyone, sighted and unsighted. But imagine that you have created a fancy image banner to replace the character name at the top of the profile, so you set the character name to display: none; and then some fancy CSS to put the image you created into the background of the header. Oops -- now people using screen readers can't hear the name of the character at all, because the screen reader can't read the text embedded into an image.
No worries - there are a variety of ways to hide the character name from sighted users, while still making it accessible to screen readers. For example, you could shove it off the side of the page so that no one will ever see it:
Code:
h1#characterName {position: absolute; left: -10000px}
Or you could leave it right where it is, but change the color so that it won't be seen but can still be read by screen readers:
Code:
h1#characterName {color: transparent;}
How cool is that? Knowledge is power!
Other Accessibility Concerns
There are plenty of other ways that you can be excellent to users of your styles with a little bit of knowledge and thought.
For example: animated backgrounds can look amazing, but depending on what you pick, they can also be a safety issue for photosensitive epileptics. They can also make reading long passages of text very difficult by just plain being distracting. Use animation sparingly, with great care and fore-thought.
Or, maybe you're squishing your navigation links super close together because you have a lot of them. This can make clicking on the right one very challenging for folks with motor issues, such as tremors. Consider instead of squishing close horizontally, creating multiple lines of navigation links that have some nice margin between them to make it harder to missclick!
The user-run Accessible Styles group has a lot of discussion of different ways to make styles ultra-accessible to all kinds of users.
Getting Help
Want to upgrade your styles, but all of this is making your head spin? Never fear! The style design community (including me!) are eager to help you with all your CSS puzzles.
One of the most common methods of getting help with CSS is to simply put your code and your question on the Art & Creativity forums.
There's also a fabulous new group for RPR style designers that focuses especially on creating robustly accessible styles, and you can get lots of info from their pages, as well as ask for help in the forums there: the Accessible Styles group
Every five kudos you write this week will earn you a special winter candle accolade to display proudly on your profile, available only during FOBETEO.
Remember, to be eligible, a kudos needs to contain a clear "why" explaining what makes your friend so special! Don't just say "He's awesome!", tell the world what makes your friend so awesome. Click here for the complete kudos guidelines.
Post tags: FOBETEO FOBETEO 2022
Comments
Oh yes, this is really interesting as well! As someone just starting out at trying to code css, this is an important concern of mine. Aesthetic and everything aside, I've been thinking a lot about the idea of a switch button that might function as a way to change every profile to a really simple version. Ranging from text size to colors looking similar to other colors, as much as they look nice, there are styles that look pleasing but are not easy to work with. I'm not sure if that kind of "override" switch would be possible or even wanted, but I have seen websites where some pages simply never made sense to me bc they could be coded by the person running it, and there were a lot of things from display errors to flashing movement or just unusually tiny text that there was no chance for me to read anything of the information there. And I don't even have the difficulties of people who might need screen readers and other helping things.
The irony of the bullet list being impossible to read on mobile is pure gold, I hope it was intentional, I got a true giggle from it.
Otherwise, this is a ton of helpful info as a designer, and a project for me to tackle when updating my styles for mobile users. I look forward to the challenge.
Otherwise, this is a ton of helpful info as a designer, and a project for me to tackle when updating my styles for mobile users. I look forward to the challenge.
Kim
December 7, 2022
9:45am
@Sin-fonie Yes, such an override is indeed on my list!