Showing posts with label Responsive design. Show all posts
Showing posts with label Responsive design. Show all posts

May 5, 2025

Melbourne Online Orientation

I redesigned the presentation of the PDF learning guides resources intended for new Melbourne Online students in Module 3: Eight strategies for learning online in the Melbourne Online Orientation Canvas site.

I designed a special responsive element for presentation of the eight PDF guides across different pages, depending upon the screen width of the user's device.

By iterating to discover the optimal settings for the 'flex' property, I was able to achieve desired horizontal or vertical presentation for the image of the guide, the value proposition text, and the download button.

Wide screen horizontal presentation

Narrow screen vertical presentation

March 25, 2024

STM101 banner HTML graphic replacements

I collaborated with OES' senior graphic designer and used my skills with HTML and CSS to develop this mobile responsive banner design for STM101 activity packs in Canvas, QUT Online's prepatory resource for STEM units.

The previous design relied on images only - and was inaccessible for designers and for students. 

The following images represent different Canvas screen widths for Activity Pack 4: Further web development.

It looks great Leigh 😄 I'm happy with the results, always keen to collaborate on responsive graphics.

OES Senior Digital Designer
28 March 2024

December 12, 2023

EDF5770 Designing for interaction and collaboration

I developed a system of interchangeable modular topic content intended to be included next to other relevant learning material.

The modular insertion used Moodle's quiz embedding functionality. I employed a JavaScript linked external CSS file to replace the default Moodle quiz style with the EDF signature graphical style.

Additionally, each modular is interactive, offering students an explanatory 'What is this?' pop-out to explain how the modular content should be viewed and also the opportunity to explore examples in the 'Digital platforms the could be used' accordions.

@Leigh Canny. Pod QA complete. A great interesting unit about my favourite topic - interactivity :). Loved the java too! Comments are in the rubric as usual. Thank you!

OES Senior Learning Designer
6 October 2023

Select each of the following images which capture a sample of the interchangeable modular content topics.

October 28, 2023

Practical / Critical / Purposeful thinking banners (Masters of Enterprise)

I developed accessible and mobile-responsive HTML versions of graphic banners for use in Monash Online Masters of Enterprise units. 

My HTML replaced the previous solution which required the inconvenience of inserting an image each time the one of banners appeared. The banners now can be efficiently inserted using a TextBlaze snippet. 

Since the banners appear everywhere that active learning experience appears in these units throughtout the masters course, my HTML solution was welcomed by the learning design team with enthusiasm.

Awesome! that looks so good I'm happy with that 😊 ... you're a gun at this Leigh,

OES Digital Designer
19 October 2023

Practical thinking

Critical thinking

Purposeful thinking

Leigh, you are amazing!!

OES Senior Learning Designer
19 October 2023

September 1, 2023

Ed banner HTML graphic replacements

For Moodle activities requiring use of the EdSTEM platform, I used my skills with HTML, CSS and Bootstrap to develop HTML activity banners to replace the previously used image elements.

The new banners are mobile responsive and save LDs build time because it eliminates the need to repeatedly insert images. Instead, LDs now only need to insert a code snippet from TextaBlaze, making unit building more time and cost-efficient,  

The following images represent different Moodle screen widths of activities requiring the Ed STEM platform.

That is very cool! Leigh, you might need to show us how you do this whenever we have a moment for some training 😀

OES Digital Learning Specialist Lead
23 August 2023

August 31, 2023

Miro Banner HTML graphic replacements

In order to make unit building more time and cost-efficient, I used my skills with HTML, CSS and Bootstrap to develop HTML activity banners to replace the previously used image elements. 

The new banners are mobile responsive and save LDs build time because it eliminates the need to repeatedly insert images. Instead, LDs now only need to insert a code snippet from TextaBlaze.

The following images represent different Moodle screen widths of reflection activities requiring the Miro platform.

Hey DLS, Leigh has created a textblaze shortcut for the Collaborative Miro board icon. He's done the same for the Personal Miro board equivalent. It looks like the above and saves the need to embed images.
Kudos to him

OES Learning Designer
23 August 2023

July 12, 2023

Modular content for ITO5217 Natural Language Processing

I developed an effective new graphic design for the presentation of learning materials in Moodle's long scroll for Monash Online's ITO5217 Natural Language Processing in TP4 2023.

The following images capture the Moodle pages and display the modular content for ITO5217 Natural Language Processing.