Responsive Design - Tips & Tricks
June 8, 2017 12:00 AM
I'm currently creating a Responsive course in Lectora Online and would love to know if anyone had any tips and tricks to help make the creation process smoother. So anything like:
- Known errors/issues
- Work arounds/solutions for common problems
- Blogs
- Testing processes
- Design tips
- Best page sizes
- Best font sizes
Some things I have run into are:
- Pages re-arranging themselves when I make an edit in a different view
- Unable to choose 'inherit page size' in mobile/tablet view as it automatically un ticks the box whenever I click it
- Align from bottom buttons dropping off the screen on mobile/tablet devices
- The Tablet portrait view being too wide for iPads
- Not being able to change the width of pages
- Unable to select 'align from right/bottom' as it automatically un ticks it, unless I click on every view or save immediately after
- Objects dragged off the screen having an impact on page length
Anything and everything would be much appreciated.
Thanks,
Jack
Discussion (1)
Trivantis does provide a list of all known issues which you can reference here: http://trivantis.com/known-issues/lectora-online. I would suggest taking a look at all of the responsive content in the community. We provide some guidelines to work with and also take specifics on a couple of the topics: http://community.trivantis.com/?s=responsiveundefinedpost_types=knowledge-base
Here's my two cents on a couple things you asked:
Testing processes - Since it's impossible to own each and every device on the market I would suggest researching a simulator or emulator. Most people I know will say Google's is okay.
Design tips - I develop top to bottom and left to right. Top to the bottom for the reason that scrolling may become relevant in smaller devices and I like what's important to be on top. Left to the right because the majority of content I create is meant for English speaking individuals. If I were to implement left to right character languages that would alter my design scope.
Best page sizes - I believe in using what the system provides but that's just me. So computer and tablet would be: 1024 x 768 and mobile would be: 320 x 416 (that's playing to the smallest size which is typically an iPhone).
Best font sizes - I like to reference Apple's Human Interface Guidelines since their development practices are typically more stringent than say Android and Windows https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/. Default body font is 17 pt.
Discussions have been disabled for this post