EDT4OL/Authoring/Author



On this course, you are not required to learn HTML markup. However there are a couple of handy wiki markup tips you can use to improve page layout. In this section, we also provide tips for improving layout of pages for mobile responsive design.

Images and mobile devices
When authoring online materials it's important to remember that the user may be viewing the content using a different screen size to the one you are using for developing the materials. Bear in mind that the layout displayed on the user's screen will vary depending on the screen size of the display device and as a developer it is hard to predict what screen the student will be using.

Note that images that use the 'Frame' or 'Thumb' attribute in the wiki markup do not automatically resize for different display widths on the WordPress site. Consequently we recommend that you avoid using framed or thumbnail images, where possible, to circumvent this challenge.

Remember that the view port size of mobile phones in portrait view vary. The display width of the average mobile phone in portrait view ranges between 320 pixels and 414 pixels. So to avoid awkward wrapping of text around images on a mobile phone in portrait view, we recommend using an image markup that supports automatic resizing of the image to fit the display port if the image width is wider than the phone display.

As a rule of thumb, we recommend that you use the following markup for the majority of images: