Coding Coding and Accessibility

[Sage 289]

I'm in the process of designing a new skin for my site, and one of my main objectives is to make sure it's optimized for all screen sizes. From high res, giant desktop screens to tiny little phone screens. I have a few members who access the site pretty exclusively on tablets, others on desktops, and more on phones. And let me tell you - it's a struggle! As someone who has pretty much exclusively dealt in coding with pixels only, optimizing my website for screens that aren't my screen size is challenging. But at the end of the day, I'm not coding for me. I'm coding for my users. And I want to make sure they have the best, most accessible experience on my forum.

 

So what advice do you have for optimizing that user experience? What problems do you regularly encounter when you view a forum on a different screen size? What do you wish more designers did to improve accessibility? And what do you do to make your forum more accessible? 

[Morrigan 1,826]

Can the answer be yes?

 

I'm fortunate to have the Initiative on IPS which is already responsive. Some things don't work and those have to be fixed but otherwise it's all me when coding broken items.

 

As for coding for accessibility, you can still still work in pixels. However you have to design what the site looks at at what are called "break points". Break Points are defined in pixels however there are other ways to choose the way items show up.

 

The most common way that people use is "em" which however it's not the only way you can define your items.

 

First and foremost, pick your sizing. Don't mix and match things like em, rem and view width/height. These things will just make things convoluted and complicated for you and will likely make things look extremely odd in some resolutions. View Width and Height are on the rise but I personally still have issues with it as it's so precise it can look really odd depending on the device so take the time to look at the differences for yourself.

 

This will give you more details on the sizing that you can use.

https://www.w3schools.com/cssref/css_units.asp

 

If you choose to go with em (which I recommend for your first responsive skin) then you will want to set the base font size.

 

I never recommend a font size smaller than 13px and I never recommend using a serif or decorative font for your default font.

 

That being said you want to minimize real estate as things get smaller. So the smaller the screen the fewer things on it. If you resize the Initiative on your desktop you can actually watch as things mold and change as you get to smaller sizes. There are a few tablet-phone tweaks that still need to be adjusted, however it's pretty definitive. Disappearing things or changing their look based on browser width is actually very easy and fun with media queries. There are about 4-5 standard break points (media queries) that you should always plan and change for. If you need help I definietely recommend joining the Learn HTML/CSS coterie and asking question there:

 

For a last quick thing (and you can ask me to expand on whatever you want, I do not recommend going image heavy. In fact I recommend starting to implement things like Font Awesome for icons instead of images. They obey font size and they are easily colorable to make different skins for your site without having to re-generate images. You can find out about adding font awesome to your site here:

 

 

 

Let me know if you have more questions and feel free to tag me.

[Josie 198]

@Morrigan says great things.

 

In addition, if you want to preview how something will look on another resolution, you can use this website: 

http://quirktools.com/screenfly/

 

It's options for phones and the like aren't any good and do not accurately reflect how it will look, but the desktop previews are spot on.

[Sage 289]

These are all really helpful! @Morrigan That w3schools link definitely helped with a lot of questions I had. Changing my thought processes from px to em's and %'s has been tough, but now I think I thoroughly understand it all. I now see the benefit of working with em's instead - especially since a lot of users in general complain about small font size. And I totally agree about using Font Awesome. It's something I've been doing for a while now and it's so easy to use. Plus, it really helps with load times! 

 

@Josie that is a SUPER helpful tool. I'm lucky in that I have a million phones and tablets to test things on, but the only desktop screen I have is 24" so it's really nice to be able to see other screen resolutions. 

 

Another helpful tool I found was google's responsive web design class. I like it because it really walks you through how everything works and emphasizes the "mobile first" objective. It also gives  you some basic guidelines of what you should and shouldn't do for newbie designers. It gives you common layout patterns, page weight/cost breakdowns, and more things to help you understand why responsive layouts are important. I'd suggest giving it a read if you've got a hot minute to get into it:

 

Google's Responsive Design Fundamentals

 

Learning responsive coding has been hard, but really worth it. I'm sure I'll come back later with a lot more stuff to add here, too. And plus, it makes everything look great no matter if I'm on my laptop or on my phone. (Plus it makes the skin do cool things when I change my phone from portrait to landscape view  )

 

[Sage 289]

I'm gonna, uh, double post here because I finally finished my responsive skin and implemented it onto my forum! The response from my users has been amazing - even though jcink has a mobile layout available, not everything transferred well before, especially when it came to custom BBcodes and templates that I'd created for the site. Now, though, almost everything is completely mobile friendly and scales accordingly. I've had such positive feedback on the new mobile layout and I'm so proud of myself for accomplishing this. 

 

I think the thing I like the most though is that I no longer have to zoom in and out to read posts or view templates. And it's so nice. Like before I was zooming in and out on things like crazy and it was a lot of effort that I didnt realize I was making just to read a post. Now I don't have to do shit. Everything is the size it needs to be. My life is so much easier now. So worth it. And it's really promoted posting on the forum itself. Since the upgrade, people have been writing like crazy because they can do it so easily from their phones. Our post count went up by almost 1000 posts in the past 2 weeks since the switch. So I'd say all the effort I've been putting in with my crazy schedule has been worth it.

 

That said, there are still some kinks I'm working out and some bugs that need fixing, but those will come with time! I'll come back with my trials and tribulations of making a responsive forum as these kinks get worked out.

[Tessatore 10]

Thankfully, all of my skins are built with a Bootstrap platform, so mobile responsiveness is super simple as I just define the columns needed.

 

But, to bring up something here, if you develop in chrome, you don't need to check your site on another website anymore for responsiveness. Just look for this button when you right-click/inspect element:

 

That will toggle your chrome browser to a responsive viewport in a variety of layouts that you can define by pixel width/height or by using the dropdown to pick some of the more popular device options out there on the market. (This is what I do at work pretty often instead of having to keep a thousand devices around.)

[Morrigan 1,826]

5 minutes ago, Tessatore said:

Thankfully, all of my skins are built with a Bootstrap platform, so mobile responsiveness is super simple as I just define the columns needed.

 

But, to bring up something here, if you develop in chrome, you don't need to check your site on another website anymore for responsiveness. Just look for this button when you right-click/inspect element:

 

That will toggle your chrome browser to a responsive viewport in a variety of layouts that you can define by pixel width/height or by using the dropdown to pick some of the more popular device options out there on the market. (This is what I do at work pretty often instead of having to keep a thousand devices around.)

 

This isn't one hundred percent spot on unfortunately. Chrome tests these at the resolutions those screens are in, not in the coding they use. As such, while it's helpful, it's not always accurate or useful.

 

One thing to note is that Chrome and Safari are two of the most difficult browsers to code for on the Internet.

[Tessatore 10]

2 minutes ago, Morrigan said:

 

This isn't one hundred percent spot on unfortunately. Chrome tests these at the resolutions those screens are in, not in the coding they use. As such, while it's helpful, it's not always accurate or useful.

 

One thing to note is that Chrome and Safari are two of the most difficult browsers to code for on the Internet.

 

Nothing is ever perfect, but considering there's well over 200+ Android devices alone, it's nigh impossible to get everything spot on. However, bouncing between multiple sites to check responsiveness can be a pain as well and still has glitches. No one has really had an issue on my IT team at work using Chrome's inherent responsive browser tool other than a few times it didn't update properly here and there, which just means refreshing the browser to kick it back into gear.

 

I'll also say that Chrome is easier to code than Internet Explorer and hardly anyone uses Safari/Opera anymore if you look at long-term usage trends. It's generally advised to check Chrome, Firefox, then IE, with checking Edge compatibility especially since the free Windows 10 update happened.

 

But, since we're talking mobile responsiveness, some phones have their own types of browsers that aren't any of the above.

[Morrigan 1,826]

Mmmmm... I disagree primarily because Android may be a very highly used mobile device it doesn't hold the corner market on it. iOS is still extremely large and so are mac computers.

 

Safari is default both on iOS and Mac devices. While you can get other browsers they still behave differently on the alternative platforms.

 

So like I said. While Chrome is good for Chrome. It's mostly good for Chrome. I say this as an IOS device user personally and one that codes for all mobile platforms.

 

Again, it's a great tool, but should NEVER be the only tool you use. Nor the only browser.

 

Edit: I'm not trying to argue the semantics of it FYI, I'm just pointing out that it's not the end all be all and it's certainly not the only place to check your responsiveness. Using sites that are capable of doing this is an important step to being sure things work correctly across multiple platforms.

Edited September 16, 2017 by Morrigan

[Deep Sea 326]

Another designer piping up - I personally prefer using percentages and ems. I do like using pixels though, when setting a maximum size for an element. I can't stand forums that stretch all the way across my monitor, entire paragraphs end up being two or three ridiculously long lines.

 

Some things I wish more designers did:

• add height and weight into image tags. That way, even when images don't load on my paltry bandwidth, at least the site looks okay because everything is floated the way it was intended to be.
• Use alt text!!
• Less images. I mentioned my bandwidth earlier, right? There's lots of boards out there that honestly never finish loading on my connection. Too many gifs, too many scripts, too much... everything!