You are here

HTML5 Design Tips

SmartBuilder v3 or v4?

Please note that this is the help site for SmartBuilder version 3.

The SmartBuilder version 4 Documentation and Video Tutorials can be found in the Help menu in the tool, or view the v4 Help site.

Contents

Important Note
Test Early. Test on Real Devices.
Browsers
Scaling
SWFs
Buttons
Text
Text + Other Objects
Transitions
Screengrabs: Graphic Effects, Scalable Shapes, Shapes, Tables, etc
Autoplay (Audio and Video) on mobile
Video
RadioButton and CheckBox objects
Menu
Printing

Important Note

HTML5 is different from Flash output in a number of ways. While the Flash Player provides a consistent environment across all supported platforms, certain aspects of how HTML5 is rendered are determined by the browser. This means that some things in your HTML5 output may vary from SmartBuilder's Flash authoring environment, and may also vary depending on the learner's operating system and browser. For example, text and default buttons may look different on iOS Safari than they will on Windows 7 Chrome (or Firefox).

HTML5 differs from Flash

HTML5 differs across browsers

 

Test Early. Test on Real Devices.

Since the SmartBuilder authoring environment uses the Flash Player, what you see when you author content, preview the lesson, or view the published lesson will all be the same.  However, when you download and convert the lesson to HTML5, some objects may appear a little differently.  So don't assume that previewing the Flash version is good enough.

While this page will help you design your content so that the HTML5 differences are not problematic, it is still important to test on all target devices and browsers after creating your first few lessons.  If you develop many lessons, and then start thinking about HTML5, you may have to go back to all of those lessons to make adjustments, which can be tedious.

 

Browsers

HTML5 is supported by Chrome, Firefox, Safari and Internet Explorer 9+.

Some learners are still using Internet Explorer 8, which does not support HTML5.  If you must support learners using IE8, you will need to deliver content in the Flash output.

Microsoft will be dropping support for IE8, which means that most IE8 users will have to upgrade to a modern browser, and thus will be able to access HTML5 content.

 

Scaling

HTML5 lessons do not scale on computers, so you'll want to design your lessons to work well for the expected screen sizes of your learners. 1000 x 519 is a safe bet for content that you plan to deliver on desktops and tablets, but knowing your audience is important.  For more information, see this blog post: http://www.smartbuilder.com/blog/3-handy-tips-for-better-mobile-learning/

HTML5 content does not scale on desktops

On mobile devices, SmartBuilder's HTML5 lessons will scale to match the width of the device, even if the device is rotated. Most likely you will want to design your content for horizontal viewing. Notice how the lesson is scaling in the images below. If the lesson were taller, the learner would have to scroll up and down when holding their device horizontally.

Keep in mind the aspect ratio varies across different devices. So if you design for an iPad, you may get some vertical scrolling when it is viewed on Android tablets (which are usually more elongated).

content matches the width of the device

 

    SWFs

    Do not use SWFs. They are not supported by HTML5.  If you are using SWFs for graphical elements (e.g., graphics, backgrounds, Scalable Shapes, button states) you can usually take a screengrab of the item and bring it into SmartBuilder as graphic (PNG or JPG). See the Screengrab section below. If you are using SWFs for animation or ActionScript, you can try to rebuild the functionality directly in SmartBuilder.

    do not use SWF files

     

    Buttons

    All of the built-in SmartBuilder button styles will default to the browser-defined button style.

    Default browser buttons are one of the objects that vary the most between different browsers and operating systems.  If you want a consistent look and feel for your lesson, make sure to use custom button styles and upload your own graphics. Remember, SWFs will not work.

    Built-in styles will use the browser-default

    Note, if you define only some of the images of a custom style, you will get bevel effects when you mouse over and click on your button.

    If you choose a custom style, but do not specify any images (sometimes used to create a transparent button), the button will use the browser default style.  So if you want to create a transparent button, you may wish to upload a transparent PNG image and use that as the image for all button states.

    Click to watch a video about this topic (opens in new window)

     

    Text

    Fonts - Try to only use Arial. HTML5 only uses device fonts (those installed on the learner's computer/device). Arial is nearly ubiquitous, which means that the end learner will end up seeing something very similar to what you design. If you use a more specialized font, and the learner does not have that font installed, they will default to Arial - possibly drastically changing the experience.  For special situations where you want to guarantee that text using a unique font looks the same in HTML5, you can always take a screengrab of your text and bring it in as a graphic (see the Screengrab section below).

    Shifting - Since each browser will render the fonts a little differently, it is important to leave extra room in your text boxes.

    Horizontally - Make sure that you leave enough room for the text to expand a little horizontally, otherwise it may wrap onto the next line:

    leave room for your text to grow

    Vertically - The line spacing will also vary across browsers. The more text that you have in a text object will magnify this problem.

    Sometimes it is a good idea to break your text into multiple text objects (Object Menu > Break Apart). As long as you give enough horizontal space for those objects (see above), this should work out well.

    Click to watch a video about this topic (opens in new window)

     

    Sizing - If you are designing for tablets, keep in mind that you probably want to make your text fairly large, so that it can be read on a tablet (and extra big if you expect your learners to be using phones). 16 pt font for tablets is about the smallest you want to use. For more information check out this link - http://www.smartbuilder.com/blog/3-handy-tips-for-better-mobile-learning/ (item 2)

     

    Text + Other Objects

    Hotspots and Drop Down lists - Since text is a little variable between the Flash and the HTML5 version, and even between the HTML5 version viewed on different browsers, it is not recommended to tightly integrate text with other objects (like Drop Down lists, Hotspots, Graphics etc).

    Click to watch a video about this topic (opens in new window)

     

    Drag and Drop - If you have dragable text, the considerations above are even more important. If your text drops onto a new line, or grows too big, it might not fit in the drop zone designed for it. Leave extra room in your Dragable text to allow it to grow, or adjust the size of your Drop Zones to accommodate the text.

    If you are running low on space, you can always take a screengrab of the text, bring it in as an image, and use the image of text as your Drag object.

    Make sure to test in several environments to ensure that your Drag and Drops work!

    drag items sizing is important

     

    Transitions

    SmartBuilder show and hide transitions do not convert to the HTML5 output. If you are building a new lesson, it is best not to use these.

     

    Screengrabs: Graphic Effects, Scalable Shapes, Shapes, Tables, etc

    Graphic Effects (such as Drop Shadows or Bevels) placed on objects will not show up in the HTML5 output. Similarly, SWF-based widgets, such as the Table object and Scalable Shape object will not convert to HTML5. However, you can often take a screengrab of the object(s) in SmartBuilder, and then bring in that screengrab as an image. The same method can be used for Shape objects that vary slightly, or text that you really want to lock down.

    Click to watch a video about this topic (opens in new window)

     

    More on Shapes - Be cautious of size differences and empty areas in Lines. Chevrons are not currently supported.

     

    Autoplay (Audio and Video) on mobile

    Audio objects, Timeline objects (with audio), and Video objects have some limitations on mobile devices. Apple does not want mobile users to be forced to download audio or video without their consent, and Android has since adopted the same restriction.

    So, the learner MUST click on the Audio or Video object DIRECTLY to get it to play. You can set Audio/Video to autoplay, which will work on a desktop machine, but it will not autoplay on mobile. You also cannot use separate play button (or any action) to get the Audio/Video to play. You MUST place the Audio/Video object on the page where the learner will have access to it.

    Click to watch a video about this topic (opens in new window)

     

    Usually, if you place the audio or video object in an obvious place, the learner will see the play button and click on it.  If you are worried they will not, and if your learners are going to be using desktops and mobile devices, you may wish to turn off the autoplay functionality for everyone and provide instructions to click on the object. Or have instructions that say something to the effect of "If the video does not start automatically, please press the play icon".

    Note: Once the learner clicks directly on the Video or Audio or Timeline initially, and the file starts loading, you can use your own buttons to pause and play the media.  Just make sure that you do not allow these buttons to be clicked before the media has started loading.

     

    Video

    If you are using FLV video in your lessons already, the HTML5 Converter will automatically convert it to MP4 video format, so you don't need to change anything. If you have uploaded an MP4 video (but changed the file extension to FLV) or if you are using the FLV URL property to point to an MP4 file, you are also fine, and don't need to change anything.

    If you are using the FLV URL property to point to an FLV video, you will need to update your video and URL to an MP4, or incorporate the video into your lesson so the HTML5 Converter can get to it.

    If you are just building your lesson and are unsure which format to use, we recommend using MP4 and the FLV URL property (which can point to MP4s), or changing the file extension to ".flv" so that it can be uploaded into SmartBuilder (no need to convert it).  More about videos here.

    Click to watch a video about this topic (opens in new window)

     

    RadioButton and CheckBox objects

    Appearance - Just like buttons and text, the graphical elements used by the RadioButton and CheckBox objects is supplied by the browser. This means that the exact appearance will differ from browser to browser. Remember to test your lessons on a variety of browsers, operating systems, and devices to catch any unexpected results early in your development.

    Clickable Area - When using RadioButton and CheckBox objects, keep in mind the learner cannot click on the text to select an item in the HTML5 version. They must click on the RadioButton or CheckBox icon to make their selection.

    Many people live with the learners having to click directly on the icons, but there are some workarounds that you can employ if you want the text to be clickable.

    With the RadioButton, you can use a hotspot over the text and an action for each choice to change the selection. Keep in mind that the text may shift a little when converted to HTML5 (see Text sections above). There is no easy way to do this with the CheckBox object (unless you want to use variables for each option choice).  You can balance the desire for clickable text against the time it will take to implement this.

    Or you can choose not use the RadioButton or CheckBox objects at all, and instead use graphics, hotspots, and actions to create your own RadioButton-esque functionality. This will give you the most control over the look and feel of your objects, but is more time-consuming to implement.

    Click to watch a video about this topic (opens in new window)

     

    Placement - In the Flash output the RadioButton and CheckBox icon will be centered vertically on the text. In the HTML5 output the icon will be level with the top of the text. If you are using Checks or Xs as item-level feedback keep this movement in mind. Most people continue to center their feedback on the text, and do not worry about the icon being in a different place.

    vertical alignment of icons for RBs and CBs

     

    Menu

    The Menu with Topics and Pages object is not supported in the HTML5 output, and if you wish to use a menu, you need to use the simpler Menu with Pages object. If you need to store and retrieve the state of the Menu with Pages between sessions, you can use the Array object to do this (similar to bookmarking). Since this is a relatively complex procedure, it is best to contact support, and schedule a time to look at this together.

     

    Printing

    Printing Displays (Display Set > printVisibleDisplay) is not supported in the HTML5 output. Instead, you can use Page Controller > printPage to print the entire page. If necessary, you can set up an action to hide all the elements on the page before using Page Controller > printPage, or navigate to a page that has only the objects intended to be printed.