Responsive design for mobile and tablets

Devices and their screens come in many sizes, from smart watches to phones, to computers and smart TVs. So how do you adapt your design in a clever way? This kind of design is called responsive design.

Weld handles this with something we call layouts. You define layouts for a certain category of screens, e.g. Phone and Desktop. At runtime, Weld picks automatically the best layout for the user’s device:

TL;DR: Making responsive design in 30 seconds

  1. First, design your Primary Layout (the one with the crown icon – “Desktop” is the default) the way you want it.
  2. Add another layout, e.g. “Phone”.
  3. Click the Phone button to enter Phone-specific mode. Now formatting only affects the Phone layout.
  4. Re-arrange and style objects the way you want it.
  5. Click the Desktop button to go back to the Desktop layout:

Change responsive layout (with Primary Layout)

Primary and secondary layouts

The principle of Weld is that you have a Primary Layout (e.g. Desktop) that effects all other layouts (e.g. phone, tablet), but then you can make layout-specific changes.

The Primary Layout is the one with the crown () icon. “Desktop” is the default in new projects.

What if I want to design mobile-first?

We dig mobile-first, too! Just rename your Primary Layout to e.g. “Phone”, and change the width. This is done in the layouts dialog.

Resetting responsive changes

You can see that an element has responsive changes because a red selection will outline it (“1” in the image below). A dot on the layout button will appear if at least one object has been changed in that layout (“2”in the image below).

Schermata 2016-08-26 alle 15.06.00.png

You can reset all responsive changes in the current layout only by clicking the Edit button and selecting “Reset layout“.

Reset layout