Responsive layouts in elearning

(Michael) #1

I’m really unsure how to tackle this and what to refer to as good design principles.
I’ve been building elearning at a fixed hype size of 990x540. This is then embedded in an iframe with a total size of 990x660

This size will keep my design viewable on desktops and iPad. I feel that in a lot of cases the need for responsive layout destroys the design. So if I were to only allow for scaling down on lower resolution devices, then i’m unsure of the best approach ie break points, scaling, where to pin elements, all of which is time consuming, so any ideas on how to approach this so that the design works at the default size and lower would be appreciated.

The second issue is once it’s embedded in the iframe, keeping the content and the iframe and the same size.

(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #2

Ha, it totally does. It’s why many modern websites are flat with big goofy banners… a barrage of bootstrap layouts.

But what can you do? :thinking:

With Hype, you can wedge elements to stay in corners or have them stretch across the whole page. That’s what I like to do. It depends on your content. Sometimes you might not need any breakpoints. But, it is a pretty big jump from an iPad to mobile. That’s what breakpoints are for. It lets you create a different layout for different screen sizes. If you feel things are getting too squishy or too stretched, then using a breakpoint is a good idea.

Using iFrames causes a problem. When I place a Hype project in WordPress with iFrames, I typically set the width to 100% and the height to 360 pixels. Here’s an example…

It’s not a renaissance equivalent of web design, but you can see how I used flexible layouts. Every corner has something wedged in there and the text in the middle is centered. It’s an easy way to create a quick project.

You mentioned “elearning” so your requirements are likely more advanced than a simple template project. If you’re in Higher Education, I imagine that there are arbitrary restrictions that prevent you from doing your job easily and / or quickly. As an example, is an iFrame required? Why not just place the Hype content directly on the page? It sounds like it’s because JavaScript is not permitted… which is something that could resize an iFrame based on screen / device / page sizes.

Possible solutions…

  • early retirement
  • new job (This is similar to the “Drupal Exit Strategy”, where the job of upgrading from Drupal 7 to Drupal 8 is so difficult, that it’s just easier to get another job.)
  • spend millions, hire consultants do it

I’m kidding, mostly :smirk:

The point is it’s a common problem for today’s web designers. It sounds like you’re trying to rush something that is a good lesson for you. It really takes a different way of thinking to create modern websites - especially if you want them to look pretty. Battling with this project might take longer than expected. But if you get it right, similar projects in the future could be a lot easier.

(Michael) #3

Thanks Michael for the informative and witty reply.

I can see from your example that if I scale the browser then things get a bit cluttered in the hype you have embedded.
elearning gets embedded in a learning management system which has its own navigation bars etc to deal with altho’ you can set the content to open in a window. Making elearning responsive really puts a lid on creativity. I like to use interactive panoramas and I can’t see how I could make those responsive.

My general responsive design has been that a fixed size of 990 x 660 (keeps your well crafted design in tact) and will work on desktop and iPad/tablet. My responsive to designing for smaller resolutions to date has been you have to compromise on creativity to achieve responsiveness. But, Im interested to hear how others tackle it.

(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #4

Yeah, I noticed that too. I’m working on a new template for tomorrow. WordPress, with the theme I’m using, scales the iFrame based on the size available. This makes it even more squishy.

Once the scene is too crowded, that’s where breakpoints can be helpful to declutter it.