Last week I spent some time with my boyfriend’s Mum, Patricia, who really struggles with scrolling and empty space on web pages. The two things combined conspire against her making it a real effort to get to the link she wants. She’s mostly a Facebook user which is confusing at the best of times but if she zooms in – so she can see better – she becomes utterly lost and then stuck because she can’t get the mouse on the scroll bar.
What’s really heartbreaking is that she thinks it’s either her fault, “I broke it!”, or that she is stupid. She is of course no more stupid than she is able to break the Internet but it still really knocks her confidence when browsing (and yes, I’m shaking my fist at you Facebook).
This is a problem I hear about a lot and is due to horizontal toolbars forced to appear when pages are scaled in a browser. It also poses problems for users with access technologies such as screen magnification and will be familiar if you browse on your mobile.
When a page is magnified to the extent where you can only see what is a credit card amount of the page on your screen it is really easy to get disorientated and lose context. This is explained much better below by Johann De Boer from AbilityNet who is a screen magnification user himself:
I’m using Opera where I can scale the full page up 900% by selecting the icon on the Status bar along the bottom of the browser. By doing this I’m replicating the screen size that some screen magnification users may have.
By scaling 900% a horizontal scroll bar appears at the bottom of the page and white space on the page starts to dominate. When scrolling it becomes tricky figuring out where you are and where in the page you want to be.
There are a couple of different Views that you can access via the View menu on your toolbar: ‘Small screen rendering’ and ‘Fit to width’ which give two slightly different renderings of your page.
Small screen rendering
By selecting ‘Small screen rendering’ from the View menu you immediately get the web page content presented in a single column layout as shown below.
‘Small screen rendering’ is intended to replicate how a page may appear in a mobile browser by doing the following:
- Disables style sheets, colours, spacers and corner images (not larger images)
- Table cells are set to display:inline
- Embed, applet, object and iframe are set to display:none
- Fonts scaled and structure retained
- Maximum of 140 pixels width
It’s a good way to test how pages look in a mobile browser but also an excellent tool for preventing a horizontal toolbar appearing when you scale the page up. Unlike ‘Fit to width’ – described below – it also removes empty space.
Fit to width
‘Fit to width’ resizes page elements such as columns, text areas and images so that they are no wider than the actual width of the screen. A key benefit over small screen rendering is that it doesn’t change the layout of the page but instead simply wraps content when it is scaled so there is no need for a horizontal toolbar. Effectively you’ll notice nothing change about the page either zoomed in or out.
Take your pick
I can’t really recommend one over the other as both have befits depending on the circumstances. Having played around with these features with Patricia she preferred ‘Fit to width’ as the page retains the layout she is familiar with. When the page is scaled she’d rather retain the context of the page and live with the white space while doing away with the horizontal scrolling.
For me however I often use ‘Small screen rendering’ when reading blogs where line lengths seems to stretch endlessly across my screen making it difficult to follow. You can also use ‘Fit to width’ and simply make the browser window smaller too. Browsing on a mobile I also often switch my settings to single column layout (or Mobile view in both Opera Mobile and Opera Mini) so I don’t spend time zooming in and out.
So if you know someone who gets frustrated with zooming, scrolling and getting lost in space try these out and see what you think.
Disclaimer: I suppose it would be unsporting of me to not mention that other browsers offer various solutions given I work at Opera but I happen to like ours best…(she says cheekily).