That is not a bad start, but it’s not perfect unless the user understands the control they have and how to use it. Nobody ever said design was easy (and if anybody ever did, there ought to be some sort of special laws created especially for punishing this transgression). So really it’s two things. You want the user to have control over the visual interface without having to modify any browser settings (for the purpose of this article, we won’t delve into the needs of totally blind users who are reliant on screen readers, although in a real project you certainly should be considering those needs as well). Then you want the control to be completely intuitive and easy to use, so that it can be used by almost anyone.
Such an idea would be really difficult to implement on a small screen, so to keep it realistic, you probably shouldn’t bother bringing this technology to that particular market segment. It’s a bit ironic that it’s the segment that needs such control the most, but it’s an inescapable fact that you can’t possibly please all of the people all of the time, and there simply isn’t the screen real-estate available on those small devices to support intuitive user control.
1. Start with the content
Since we’re just playing around here to demonstrate a concept, we don’t need to be too elaborate with the content that’s going to be displayed. Let’s just stick with one heading and a couple of paragraphs of text.
2. Add a usable layout framework
There are plenty of options here, including rolling your own, but Bootstrap is good in the sense that it doesn’t require any brains to use. To include it, we only need to first add the stylesheet in the head section:
Then add jQuery and Bootstrap script files just before the closing body tag:
You’ll notice we’re not using the CDN versions of these files, and you shouldn’t either, because CDN hosted script files are a great way to introduce potential problems with very little gain to be achieved.
3. Add container, row, and columns
This is fairly simple. For all screen sizes except “extra small”, we add a 2x gridcol wide column to hold some controls to let the user tweak the interface. If you want to be really fancy and extra user-friendly, you could also add text instructions in the added column. For now we just create the skeleton, like so:
That extra instruction added to the first column to use font-family Mono will give our controls a nice retro first generation 1984 Macintosh look. Retro is always cool.
4. Cut & Paste the page content into the second column
After pasting, we’ll also have to increase the indent of each of the pasted lines, so hopefully you’re using a text editor like Geany that supports this function simply (Ctrl + i).
5. Add user controls
For now the controls don’t need to be functional, but you’ll want to have them in place so you can add some code to them later. Now you have to decide what kind of controls you would use to give the user control over the interface.
Back in the messy old days of HTML4 we would have had to do a lot of work building a custom color-picker control or user sliders for the each of the RGB settings, but fortunately there is a color-picker control built right into HTML5, and your only real challenge will be to convey to the user how to use it.
The method we chose for doing that, which is by no means the only way you could cover it, is included in the downloadable source code for this project. That won’t be discussed in the tutorial, in the interest of maintaining brevity.
Font size can easily be handled with a number control. It won’t work on older versions of IE, but if somebody is using such a browser, not being able to see your number control properly will be the least of their long list of problems.
6. Make the controls respond to actions
It’s not much good having controls if all they do is sit there and look pretty. You need to give them a purpose. Fortunately this is quite easy to do. Attach an onChange parameter to each control and then write a function to handle the action. It’s so easy that the code doesn’t even need an explanation. It explains itself.
7. Test the result
Once you’ve built it, the obvious thing to do is take it for a test drive and see if it lives up to expectations. Just play with all the controls and see what happens.
Application in the real world
As you can probably guess, the number of situations where you could apply this kind of high level user-friendliness is fairly limited, mostly because clients don’t generally care about creating an ultimate UX, just something functional that serves their purpose. Where you actually could employ these techniques is in situations where there is a high level of interaction expected between the user and the page, and where there might be special needs, such as to achieve minimal screen glare.
Extending this idea
You could extend this idea by adding more functionality, for example you might have a button that stops any displayed animations. The idea of this tutorial was simply to encourage experimentation and to bring the UX to life in a way that challenges you as a developer, but doesn’t present any challenge to the user. Good developers need to be constantly innovating and setting challenges for themselves, as in this way your coding experience becomes richer and more useful to you over time. So while it’s unlikely you’d ever use an exact replica of the application created in this tutorial, it could serve as a launching pad for much better ideas you have in the future.
header image courtesy of Jay Fletcher