Placeholder
Jun 18, 2018 40

How to build a responsive design in Maker

Video Learnings

Watch the video to follow the steps outlined below about building a responsive design in Maker.

Key Items 

Using responsive breakpoints

Built-in breakpoints

Breakpoint inheritance

Breakpoint islands

Breakpoint groups

Custom breakpoints


Using responsive breakpoints

Maker's responsive drag-and-drop publishing makes it easy to ensure your pages are fully responsive.

Pro Tip: Before creating a new page with Maker, get to know your target market. For example, if your audience traffic is primarily mobile, approach your design from a mobile-first perspective. If your audience is heavily tablet, think about your tablet design first, etc. 

Photoshop Note: If you're using Photoshop to create your design, visit these pages first. You'll need to review our PSD file prep for Maker as well as the PSD specific breakpoint logic.

Built-in breakpoints 

By default, every new story that you create with Maker will have three default breakpoints:

  • Desktop  (992px and more)
  • Tablet  (480 - 991px)
  • Phone  (320 - 479px)

The editor will automatically open on the Desktop breakpoint. Whatever content you create on Desktop will inform the content on the Tablet & Phone breakpoints. To customize Tablet & Phone layouts, simply select the breakpoints from the dropdown menu.

Note: Edits made to Tablet & Phone breakpoints will never affect Desktop. This applies to grid layouts and element formatting only. When you add or delete content, the changes are applied story-wide. 

Breakpoint Inheritance

When a story is first created, the inheritance follows typical top-down logic. 

For example, content added to Desktop will affect the smaller breakpoints of Tablet and Mobile.

Desktop

 ↓ 

Tablet

 ↓ 

Mobile

If you go to Tablet to make changes, Mobile will be affected, but not Desktop.

Tablet

 ↓ 

Mobile

And if you make changes to Mobile, no other breakpoint should be affected.

Breakpoint Islands

Once you make edits to a certain breakpoint, that breakpoint becomes it's own island, which means any edits to the parent or larger breakpoint above will no longer affect it. 

For example, if you take an autogrid that's 2x2 on Desktop, and convert it to 1x1 on Tablet, but then go back to Desktop to change it to 4x4, Tablet will not be affected by the recent round of changes:

Breakpoint Groups

You'll notice that besides the Tablet & Mobile breakpoints are dropdown icons. Click on these to expand the breakpoint families:

Tablet

  • 480px - 767px
  • 768px - 991px

Mobile

  • 320px - 374px
  • 375px - 413px
  • 414px - 479px

When you click on a breakpoint group, you'll be immediately directed to the parent of that group, which is the smallest range in that breakpoint. 

Changes made to the parent groups (320px - 374px and 480px - 767px) will affect the larger breakpoints within that group.

Custom Breakpoints

Creating content for a unique-sized container? Create a custom breakpoint by clicking on the device icon, then + Add breakpoint.

Give the breakpoint an exact pixel size:

Maker will do the math and figure out where the custom breakpoint fits in the  groups. Once created, you can edit and access the custom breakpoint as normal.  

Share

maker