When it comes to eLearning, there are so many elements of design that have to work together. As the capabilities of mobile devices have evolved and people find themselves working across different devices at work or from the home office, it is often the case that some applications and web-based content struggle to co-operate with your phone as they do when accessed from your laptop, for example. In tandem, the rise of bring-your-own-device (BYOD) policies in businesses and schools also calls for digital education services to be flexible across any device and screen size. The ‘Mobile First’ approach is becoming an increasingly common design tool for businesses looking to develop digital education services and technology enhanced learning (TEL), such as eLearning courses and blended learning programs. Mobile first design is a simple way to greatly improve how content is displayed on varying screen sizes and eliminate compatibility issues across devices.
So, here a few things to know about what this really means and how to make the most of it in your digital content!
Mobile first design is a progressive enhancement strategy in which the design process starts on the smallest screen size first, before working its way up to larger devices. Because of its small screen size it is harder to design apps and digital content for a mobile screen, so by designing for this size first the designer has to carefully consider which information is key and how it can be conveyed and arranged in an effective way. This generally leads to an uncluttered design that eliminates unnecessary information and business – we just don’t have the space to make things complicated!
Mobile first design is a great way to ensure that good content is the main focus and ensures that content and functionality isn’t lost, neglected or simply displayed poorly when converting a full screen design to a smaller screen size.
After the design for the mobile screen size is nailed and tested, the designer can move up to tablet and laptop sizes by adapting the layout, content elements and blank spaces to optimise for a larger display screen. The designer does not need to add additional content to fill space, however it is important to ensure the layout is responsive to the way the device is used. For instance you can tap and swipe on a mobile screen but have difficulty pressing small buttons, whereas you can click, drag and input text more accurately with a computer mouse and keyboard.
The designer can utilise either an adaptive or responsive design strategy to create for different screen sizes. An adaptive design means that there are multiple fixed layouts of varying size and the browser chooses the best sized layout to display on screen. With responsive design on the other hand, the layout is automatically adjusted to accommodate the identified browser width. Either method is valid, provided care is taken to ensure and test that content including the size of buttons, video players, and interactive elements are correctly displayed and functional when used across each device.
When approaching digital education services, it is clear to see how mobile first design can be a very effective option. Not only can you ensure everything is displayed correctly and is optimised for the various devices people will use to access the content, it is also a great way to reduce development costs and drama when you find yourself trying to shrink a lot of content down into a small space.
VMP eLearning are the local elearning specialists in digital education and training services. Why not drop in to say ‘hi!’ or get in touch through our contact page today?!