Export Artboards and show by size (media query)
Create multiple versions of the same page at different sizes
Last updated
Create multiple versions of the same page at different sizes
Last updated
Your page may be viewed by people using many different size browsers and devices. The most common devices are phones, tablets and desktop computers. You can create multiple versions of the same page in Adobe XD for multiple devices and you can automatically show the appropriate version to the user with the "Show by Size (media query)" export option.
The video below shows 3 different versions of a common home page.
Select each version and then open the Export Artboard dialog.
The Show by size option uses Media Queries under the hood. A media query is a set of options that are applied when certain conditions are met. For us that means that an artboard is made visible when its minimum width is available.
For example, if you have a 3 artboards that are 100px, 500px and 800px wide the smallest artboard will be visible until the browser window is 500px wide.
The 500px artboard will be shown from 500px to 800px (800px is the size of the next artboard).
From 800px and on the last artboard will be shown. See video.
Basically, you create multiple versions of the same page using multiple artboards. Then select all multiple versions of the artboard and change the export option.
Create an artboard and make 3 versions of it: small, medium and large or phone, tablet and desktop. Make sure they each have different widths. Name them something like "Home Page (phone)", "Home Page (tablet)" and "Home Page (desktop)".
Select all versions of the artboard.
Open the Export Artboard dialog and open the advanced screen
In Export row select "Selected Artboards"
Next to that select the option "Single page (show by size with media query)"
Click the Export button
Open the page in a browser. When you resize the browser it should show you different versions.
You can have multiple pages / views with multiple sizes of each view.
Basically, you create multiple views and then multiple sizes of each view. You then give them a view name, like "products" or "about", in hyperlink state field. You create links to show those views by using the view name. Then you select all the artboards at all of the sizes and export all of them to the same page using the Show by Size option.
Follow the following video guide for a demonstration using the UI Kit by Adobe.
FYI: You don't have to create responsive web pages. You can but you don't have to. There is community discussion on this as recommended practice. Phones, tablets and desktop browsers all allow you to zoom in or out on the page you're viewing. They also have double tap options that will zoom into a section of the page you double tap.
If your mobile user experience will be worse with a mobile site then reconsider making it at all.
You can also use scaling options to scale the page to fit. Usually, it depends on the project. Usually you ask yourself questions like:
Who is the target audience of my project? Mobile, tablet or desktop users or all 3 of them?
Will the experience be better or worse with a mobile version of this project?
Should I make multiple fixed sized versions of the same page or make a single responsive version, showing or hiding elements?
Can I go back and add responsive versions later as I go or if needed or create them now?
There are examples of these already created in the examples package and examples page.
