Devices - Ensuring your projects look good everywhere

The great thing about projects created with Cadasio is that they can be viewed on any modern internet enabled device, including mobile phones and tablets. They can also be embedded directly onto your own website. This raises certain problems to do with screen sizes and more specifically aspect ratios. The devices in Cadasio can help ensure your projects look great no matter how they are viewed.

Too long to read? Check out the video instead.

The Problem

Different devices have different screen sizes and aspect ratios. The aspect ratio of a display device is the proportional relationship between the width and the height of the display. When you create your projects you will probably be working with a computer or laptop, a lot of which have the standard resolution of 1920x1080 giving you an aspect ratio of 16:9.

Lets take this simple image I have created from a project to help explain the problem.

I have created this on a standard 1920x1080 PC monitor and everything fits great, but how do I know it will still look good if someone views it on a mobile phone or tablet with a different aspect ratio?

One thing that could happen is the image gets stretched, distorting it and making it look wrong and hard to use, shown in the left image below.

Or the image could zoom out to ensure the aspect ratio is maintained whilst fitting it to the screen, shown on the right. This could easily make it next to impossible to read, look extremely cluttered and leave a lot of wasted space above and below. Also do not forget that your projects are interactive and can be manipulated, so squashing everything could impact its use ability.

To further complicate matters, the end user may view it in portrait or landscape.

The Solution

To ensure your projects look good on a range of devices, and thus at different aspect ratios you can use the devices interface. With it, you can manipulate your steps to look differently for different devices. If you have done any website programming, think of them like the media query break points in your cascading style sheets (CSS).

Found in the top right corner of your designer window, you can change between devices to get an understanding of how things will look.

Using the Device Picker drop down, you can see any devices you have, with everyone starting with a basic mobile phone and tablet. When you activate a device you will notice the designer changes, the scene becomes smaller, representing the aspect ratio of the device and the 2D items have been scaled so you can get an idea of how they will look.

Anything that goes into the grey area, will not be seen on a device with this aspect ratio so we need to sort this out and we can manipulate our scene to look better for this particular device. So for this example I rearranged the components using the layout feature and moved the balloons so that they fit nicely on a portrait phone as well as changing their text size to ensure they remain readable.

As you can see the arrangement of the scene has changed quite a lot to accommodate the different aspect ratio. Once you are happy you will want to update the step, notice that the icon has changed to the following:

When you update whilst in a device, the original properties of the step don’t get overwritten as they usually would, rather an additional set of properties will be made that will only be used when the project is viewed on this device.

To illustrate this further imagine a project with 5 steps. Each step will have properties defining how the objects look, their position etc. The project looks great on a monitor, but I want to make sure it looks good when viewed on my mobile phone. I would set my device to phone and run through the steps in turn, and adjust things accordingly.

Since I am looking at viewing it on a mobile phone, I would want to check how it looks in both landscape and portrait. Of course, I may not need to adjust every step, and maybe not for both orientations. Perhaps I decide steps 2 and 5 need adjusting. Step 2 needs both portrait and landscape adjustment, and step 5 just portrait.

I would activate device mode for the phone, and then I would change what ever needed changing, this could be hiding things, changing sizes, colours and I would update the device properties. I would then change the orientation and repeat the process.

My projects could then be depicted like so:

When this project is then viewed on a device whose aspect ratio matches that of the phone device, Cadasio will activate step 2, and set its properties, but then apply the properties in the devices on top, therefore you can see the device properties overwrite the default.

It is worth pointing out again that you may not need to do this for every step. If there are no device properties for a particular step it just uses the default. But you may end up having several device properties for a single step, for example you may have a step that has portrait phone properties and landscape tablet properties, you can be really flexible to ensure you get exactly what you want.

Custom Devices

The phone and tablet devices that come built in with Cadasio are just the most common aspect ratios of current phones and tablets. However you may have a particular mobile phone in mind or you may intend to embed your project on your website, and you will be making the iFrame a particular size. In which case you can make your own device with a specific aspect ratio. Clicking devices will allow you to specify your own, giving it a landscape and portrait aspect ratio.

If you have a device and you are not sure of its aspect ratio we have a simple help page to help you determine the current size of your browser. Clicking the link here will take you to it and this page can be accessed by anyone. You can then see the screen size on your device and have a play with whether you intend users to view it full screen or not.

Conclusion

Hopefully you can see that devices are really useful to overcome problems with viewing on different devices. Whilst you could do an entire project just with device properties, the general recommended work flow would be to create your steps as usual and then activate device mode and go through each step to make sure you are happy and update where required. It is always advisable to test your projects on your device as browser and operating system differences can have an effect that we cannot simulate in Cadasio.

If you have a question regarding devices? Or perhaps you need some assistance with your particular application. Please head over to the Cadasio forum and ask a question or contact us.

You may also like:

misc

Go Green With Cadasio

Companies around the world are gaining a deeper understanding of the importance of environmental sustainability...

Reviewify
misc

Reviewify Early Access Review

Reviewify creates clear concise reviews specialising in gadget and they recently featured Cadasio

misc

The Problem With Traditional Instruction Manuals

Everyone has bought something and rather than a comprehensive, easy to understand set of instructions accompanying it, there is a scrappy piece of paper with a few poor quality images that are next to useless.

tech tip

Creating Projects

A quick overview of how to create projects in Cadasio