It used to be the case that online learning materials were specified with a particular screen size. At one point this was 800 x 600, then 1024 x 768.
But, these days, unless you’re in a very controlled environment, you really don’t know what size screen your learners may be using.
Some may have 24″ widescreen displays, or larger, with resolutions of 1920 x 1080 (or even greater). Others may be using tablet devices, and some even coming in on their mobile devices.
Any initiative that involves putting materials or applications onto the web, to be viewed via a browser, must take into account the variety of user devices.
It’s not good enough now to expect users to scroll sideways, or to zoom their screens in order to view what you produce.
The current best practice is to use a technique known as Responsive web design.
This has three characteristics:
- The website discovers the width and height of the viewport (or browser window) being used.
- The website is built using a grid structure that allows its contents to reorder themselves to fit into the width of the viewport.
- Images within the page resize automatically to fit into the correct grid columns.
If you’re working with external suppliers, and have a target audience with multiple devices, then make sure your suppliers understand Responsive web design. Ideally they will have adopted a standard framework (a starter set of files) that allows them to focus on your content rather than on the nitty-gritty of making the pages responsive.
If you’re building things internally, then consider adopting one of the many existing Responsive design frameworks.
Examples include:
At the moment, I would tend to adopt Bootstrap as my starting point. It’s built by the team behind Twitter, is extremely well supported, comes with lots of built in functionality, and is very easy to start using quickly.
For more see: A look at Responsive CSS frameworks
Posted: 18 February 2013
Tags: Learning design Supplier selection Coaching