let it flow - for better readability (Web_accessibility)
Back to General discussions forum
hi again,
another suggestion for this site. please "let it flow". im talking about https://en.wikipedia.org/wiki/Web_accessibility especially the flow of content/text on this side does not scale well when zooming in and out. ok, fixed width code snippets are not going to automatically line wrap, but anything else SHOULD so i can zoom on and have the text in a size that is easy for me to read . i dont like it when i need to "back off" the zoom because paragraphs are not automatically wraping.
do you know what i mean ?
thanks
Axel, Hi!
Thanks for your suggestion! You are right, I myself am not quite happy with the site design. The main trouble is that I am very poor at anything related to web-design :D
I will try to investigate how this could be improved (though of course the simplest way is if someone can show me proper mock-up of some problem page with zoomable fonts).
Another way to improve this I can think of is to make setting in a profile to allow choosing preferable font size. Though probably this will be clumsy solution...
super! but i think there is no real need to add support for several font sizes, since it can be zoomed in and out by the browser (in firefox by holding STRG + mouse wheel up/down to enlarge text) with no problem IF and only if the site is not desinged for a "fixed width" like this one is.
im not and expert on webdesign too :/ but i think you can manage it if all your content container are not using a fixed width but using a percentage like 80 or 100% with so it always matches the actual browser window width.
https://www.dokuwiki.org/changes does it partly. see main content window and then zoom up. its not perfect there but you can watch how the text "floats" and autowraps when the windows width changes.
And this website covers partly the topic: http://www.sitepoint.com/10-ways-make-website-mobile-friendly/
Here i found an article on "fluid web design" : http://www.smashingmagazine.com/2009/06/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
i hope this helps a bit.
greetings Axel
Axel, Hi!
Thanks you for these details and links, they helped me to made up my mind :)
I've peeked around too see how some other sites do and tried to make some changes, so now it should work like this:
- normally width is limited by some value like
1300for people having wider screens than my old small laptop, haha :) - when you
zoom-inthe width should accomodate to any value less then mentioned above, effectively increasing fonts as you suggested; - as main menu is filled with bit too much stuff, some of less important elements should disappear on zooming to keep the menu bar single line (otherwise it covers part of the text and I did not find out how to fix it right now).
So I invite you to check whether these changes work (I'm not sure about browser-compatibility) and whether they satisfy you.
The main trouble I anticipate is that some pages may include some fixed width elements (especially rudiments of older design) which will be rendered incorrectly on changed page width. I hope we'll be able to fix them by and by, when they are found...
wow cool! that looks WAY BETTER already! but at some point in zoom the top menu gets in the way, overlaying most of the content page.
my regommendation to that is, make it flow too (not static at the top, let it scroll with the page , so it always sticks to the top of the page and does not keep in sight hoging display space for no reason. this would be better for mobile or small devices too i think. since then there is more space to real content.
there might be better or mor sophisticated technics , but im not into web design neither. so if you could fix the top menu thingy i would say its almost perfect ! :)
thanks for your efford Axel
>my regommendation to that is, make it flow too (not static at the top, let it scroll with the page, so it always sticks to the top of the page
Funny thing is that initially (in old design) it worked just as you describe, but when people asked to above design improvements they mentioned this "floating menu" too :)
So I think I'll better research about some way to make it more compact when the screen is zoomed / resized! Thanks a lot for explanation of this point!
UPD I've just found that the fact the menu gets "stacked" is due to some "feature" of the styles framework we use. Sorry, I'll try to disable this :)
UPD2 I've made small updates, after updating cached css (or pressing Ctrl-R) I hope the top menu will behave slightly better.
OH WOW!
Thats WAY better!! now even these gree and pink "bubbles" seem to work well and the top menu is way better even at MAX ZOOM. very nice! the top menu still clutteres some valuable space but hey, its very usable even on large zoom factors and the text is fluid wraping at screen wifth. thank you very much!
OH just realized, that THIS REPLY FORM did not fit inside my screen when zoomed ^-^. i guess its still fixed width ??
width should be 100% instead of pixels so it always fits within any screen.
damn small devices and multi formfactor screens. nothing but trouble ^-^
greets Axel
> i guess its still fixed width ??
Ha-ha, as we discussed at beginning - some elements are expected to go wrong after our small improvement :) But with your hints (and perhaps some other users will join) we will be able to hunt such bugs and fix them by and by :)
UPD I've tried to fix this too, looks like working (after Ctrl-R).
uhm... yes. the form now fits quiet well within the screen width. but the top menu bar for some reason is back covering almost the whole screen when i zoom in a lot. :/ how that come ?
greets Axel
> how that come
Oh, I'm sorry. I've forgot to save yesterday' changes to my repository and when uploaded today's changes from different computer - previous ones were lost. And I failed to notice this wnen checking the result. Thank you very much for this warning!
I believe now I merged these two changesets properly.
yes. works perfect. nice range to zoom in and out while enough screen space is left for the text to flow in .
thanks