The explosion of mobile options has led to almost limitless choices when it comes to screen size, resolution, and screen quality. For those designing mobile learning experiences and mobile performance support, screen design used to be easy—iPhone or iPad. However, as of this writing Android, not iOS, is the top operating system and there are now over 30 possible combinations of screen size and resolution.
In this tutorial I’ll address coding for multiple screen sizes using a technique known as responsive design. Responsive design is a combination of HTML and CSS used to plan for changes in the visual appearance of a document due to screen size limitations.
Start by loading the sample HTML document in to the browser and examining its appearance. You can download the file here.
Using your browser’s Open File feature, load the HTML into the browser. Without the benefit of CSS styling the content will appear something like Figure 1.
Figure 1: The sample file, without any CSS styling, looks like this in a browser
When no styling information is applied, the browser styles the document based on the default style sheet. We’re going to add some CSS styling information to improve the look of the document. Traditionally documents were styled for desktop or laptop browsers—so that’s where we’ll start.
Tip: Many designers recommend that when designing learning for digital consumption you start with the mobile design and then make adjustments for a traditional desktop or laptop screen.
We’ll embed our stylesheet in the head of the document. (If you haven’t worked with stylesheets before, you might want to check out my tutorial at http://www.learningsolutionsmag.com/articles/844/development-tips-a-little-css).
Here’s the code you should enter:
Note that only the