A little over a week ago, I wrote a post about laying out your code base like you'd lay out your house, and posted it to my blog and dev.to.
When I went to look at the post on my phone, I noticed that my site's template didn't handle the wide code snippets very well on narrow screens. I started working on a solution, but when I looked at the clock and noticed it was 0:30, I decided to go to bed and finish it the next day.
I woke up with this email waiting in my inbox:
Hey Frederik,
I came across your site at https://www.frederikcreemers.be/posts/code-layout/ due to https://news.ycombinator.com/item?id=17494218. A sound article.
Just thought I’d let you know you have keyboard accessibility problems with your
site because of your CSS: I was unable to scroll with the keyboard until I either clicked on the page or pressed Tab because the scrollable area was the #wrapper rather than the body.(I’m using Firefox on Windows.)
This problem can be resolved with, I think, no harm, by removing the following
CSS rules:[...]
I suggest going further than this, scrapping #wrapper altogether and merging it in with the body, and dropping almost all of the properties on the html and body as well.
Some on that HN thread report issues with the site on Android and iOS, too, which I’m guessing will be related to this.
Otherwise, it’s a nice, straightforward, lean site. Would that more were like that. 👍
Also, your layout isn’t behaving as you intended at between 1001px and about 1400px for reasons I didn’t investigate carefully; that’s a hazard of using flexbox for layout, particularly with flex-wrap—if you don’t carefully control the flex-basis, flex-grow and flex-shrink parameters it can do surprising things when faced with content different to what you designed it with. You might want to look into Grid, which is pretty well supported these days; that way you can be more confident about the layout.
So, my article had been posted to Hacker news, and got quite popular (86 points at the time of writing) 😲, but users were having trouble using my site on some devices 😔, some of which could have been avoided if I had finished the fix and pushed it live before going to bed. But I'm not going to beat myself up over valuing sleep above a website that works on all devices.
So I looked at Google Analytics, and found out my website had had 100s of visitors. All in all, on Tuesday June 10th, I had 5.6K visitors. Of those about 2.7K were on IOS or Android, meaning they likely had a bad experience on my site 😰.
So I've made some changes to my site's CSS, including the #wrapper change Chris suggested, and I've used CodePen's free integration with CrossBrowserTesting to try and improve the usability of my site on different browsers and devices.
I'm seeing a lot of issues on devices that I am unable to reproduce, and so I'd love it if yo could help me out.
- Go to https://www.frederikcreemers.be/posts/code-layout/ on any device, especially mobile devices
- Take a screenshot and/or describe any issues you may have
- If you have the time and interest, help me understand why the problem is occurring.
Thanks for any help you're willing to give.
Oldest comments (1)
Thx for he link, David :), but I think CrossBrowserTesting offers the same capabilities.