Web Export
  • Introduction
  • Getting Started
  • Install the Plugin
  • Create or open a project
  • Export the Artboard
  • Export Artboard Dialog
    • File Name
    • Subdirectory
    • Page Title
    • Web Page Template
    • Expected HTML Output
    • Stylesheet Name
    • Artboard Stylesheet template
    • Expected Stylesheet output
    • Script Page options
    • Images
    • Export Folder
    • Server
    • Alternative Fonts
    • Scale to fit
    • Centering the page
    • Styles Inline
    • Style via Classes
    • Markup Only
    • Outline Elements
    • Keyboard Navigation
    • Add Data Name
    • Add Image Compare
    • Auto Refresh
    • Export type
    • Reset Artboard
  • Addressing Export Issues
  • Messages Console
  • Export types
    • Export to a Single Page
    • Export to Multiple Pages
    • Export Artboards and show by size (media query)
    • Export to a Slideshow
  • Keyboard Shortcuts
  • Responsive Pages
  • Dynamical page that grows in height
  • Modifying Individual Elements
  • Elements and Sub Elements
  • Styling elements
  • Element Options
    • Id field
    • Tag Name
    • Styles
    • Classes
    • Attributes
    • Hyperlink
    • Width and Height Size
    • Background
    • Markup Inside
    • Markup Before and Markup After
    • Text Ids
    • Text Tokens
    • Row Layout
    • Column Layout
    • Overflow
    • Script Template
    • CSS Template
    • HTML Template
    • Layout Section
      • Layout Position types
      • Layout Position Location Types
      • Layout sizing options
    • Centered, Constraint and Anchored Positioning
    • Debug Element
    • Show Outline
    • Export as Image
    • Export as String
    • Export element
    • Displayed
    • Auto Export
    • Export (artboard)
    • Show Markup
    • Show CSS
    • Show Property Changes
    • Reset All Property changes
    • Navigation Buttons
  • Changed Properties
  • How to section
    • Creating a hover menu
    • Centering a page or element
    • Showing Overlays
    • Embedding an HTML page
    • Linking to pages or views
    • Creating a download link
    • Creating List items
    • Embedding Fonts
    • Adding Hover Effects
    • Styling Hyperlinks
    • Showing elements by size
    • Creating a Fixed Header
    • Make a Stretchable Line
    • Blend Modes
  • Creating Code Blocks
  • How Exporting Works
  • Single Page Application API
  • Element Tokens
  • Template Tokens
  • Setting up a server
  • Putting your site online
  • Code Block Snippets
    • Adding a cursor over on hover
    • Go to next or previous artboard with swipe gesture
  • Other Features
    • Gradients
    • Blend Modes
    • Form Elements
  • Learning by Videos
  • WordPress Integration
    • Summary
    • Export the main page
  • Example Packages
  • Web Developers
  • Non Web Developers
  • Debugging
  • Version
  • Support
    • Forums
    • Discord Channel
  • License
  • Feature and Bug Reports
  • Related Plugins
Powered by GitBook
On this page

Was this helpful?

  1. Export types

Export Artboards and show by size (media query)

Create multiple versions of the same page at different sizes

PreviousExport to Multiple PagesNextExport to a Slideshow

Last updated 4 years ago

Was this helpful?

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.

How does it work

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.

How to show by size

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.

Multiple views with multiple sizes

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.

  • 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?

The Show by size option uses 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.

You can also use options to scale the page to fit. Usually, it depends on the project. Usually you ask yourself questions like:

There are examples of these already created in the and .

Media Queries
scaling
examples package
examples page
LogoMedia queries - CSS: Cascading Style Sheets | MDN