Responsive design

Share ideas and post helpful tips and solutions.

Responsive design

Postby Kataleena » Thu Jun 18, 2020 12:19 am

Hi Clifton,

I have to update an existing course and I need to make it responsive so it can be played on PC, Tablets and mobiles. I was wondering if you had any examples of responsive desgin using PowerPC, or if you have any advice or tips that could help me.

The course is a series of videos then Multiple choice questions.

Thanks
Kate
Kataleena
 
Posts: 49
Joined: Sun Feb 23, 2014 10:05 pm

Re: Responsive design

Postby Clifton » Thu Jun 18, 2020 6:27 am

An example of the PowerPac being used to help make ToolBook pages "responsive" is our main LearnToType description page also the screen shots page that link from the main page below:
https://bit.ly/LearnToType
View the page on various devices or just shrink the browser window and you will notice that the elements change/resize/etc. as you do so.

Responsive pages begin by writing a framework CSS stylesheet which tell the browser what to do as the device viewing the content changes. Things can get a little complicated. With the ToolBook-based page above, I accomplished this by using the XML <make> tag to create the framed elements at the top level of the HTML document, rather than in the ToolBook page itself.

I suppose you could do this at the ToolBook page level as well, but you would have to not only write the CSS stylesheet, but you would have to change all of the size and positioning properties for all of the ToolBook objects. ToolBook's authoring environment works on the premise that everything is set in an absolute size and position. This does not work in "responsive" design. Here are the key steps:
  1. Write a responsive CSS stylesheet for your content. There are different levels of responsiveness. Your stylesheet is the control-center to define the results you wish to achieve.
  2. Do not use question widgets directly as they are likely too complex to ever achieve "responsive" design. Instead, only use them indirectly and use PowerPac's tbfunction_pgTBObjset() function to manipulate them based on user interaction with "responsive" elements.
  3. When each page loads in your course, step through all of the ToolBook objects and assign class names from your stylesheet that force positioning and sizing for "responsiveness". This usually means that instead of this ToolBook exported HTML:
    <span id="sys42" style="left: 100px; top: 100px; width: 200px; height: 100px;">Hello world!</span>

    You may need to dynamically change this to something like:
    <span id="sys42" style="" class="mySettings1">Hello world!</span>

    . . . the above removal of inline styles forces all manipulation of this element to use the settings in the class name "mySettings1" from your stylesheet. While this is an over-simplification, it demonstrates how "responsive" design works in any webpage.
I've theorized writing a basic "responsive" design template, but it would mostly handle the parent element of the ToolBook page and leave the rest of the design to the developer.

If you provide a specific example of something you are working on, I may be interested in assisting you with the basics to get you started. In the long run, this may be beyond the scope of what can be discussed in a forum article. While all of this sounds complicated, it is not impossible. Creating "responsive" pages can become involved no matter what programs are used. That is why "responsive" framework templates generally come with a price and even then require end-user modification to achieve the specifics they are looking for. I believe ToolBook + the PowerPac has the basics already in place to make this work. It already makes pages HTML5 compatible and sets up the basics for mobile-friendly viewing.
 
Clifton
Site Admin
 
Posts: 731
Joined: Tue Jan 14, 2014 1:04 am

Re: Responsive design

Postby Clifton » Fri Sep 17, 2021 12:42 pm

Hi Katleena,

Did you get something to work for responsive design?

I have a PowerPac version which makes the ToolBook page frame respond to mobile device rotation. Works with all ToolBook content. It works by dynamically manipulating the viewport <meta> tag and by detecting the device screens size and comparing it with the ToolBook page. This is not exactly the same as responsive design based on media queries in CSS files. This can be done too, but the PowerPac cannot create the media queries automatically as every developer's page design is their own.

If you would like to try out the new PowerPac version (unreleased at this time) let me know.

Thank you,
Clifton
Clifton
Site Admin
 
Posts: 731
Joined: Tue Jan 14, 2014 1:04 am


Return to General Discussion

Who is online

Users browsing this forum: No registered users and 1 guest