Responsive Designs with Antetype

UPDATED: Antetype 1.5 has been released with all these features and more.

Antetype already includes layout features that allow elements to react to the size of the screen, but in Antetype 1.5 (sign up for beta access) we have added design breakpoints and content wrapping so that Antetype fully supports responsive designs.

Making designs responsive

Website and web app designs must work well on mobile phones, tablets and desktops. Websites are often built using responsive techniques so that the content adapts to the size of the screen / viewport. Responsive techniques have reduced the cost and complexity of developing and maintaining websites for multiple viewports.

Before the work to generate the responsive website code is started, multiple mockups must be created, one for each of the screens at different viewport widths.


xkicker-mobile xkicker-medium-123 xkicker-desktop
This results in a set of documents for each viewport width; when modifications need to be made to a design the modifications must be applied to each separate design. The overhead of maintaining all the different designs often results in designs that only cater to two specific widths and little thought about what should happen at the points between the narrowest width and the largest width.

Responsive features since Antetype 1.4

Antetype already includes features to make elements respond to the size of other elements.

Horizontal & vertical layouts

An element configured with horizontal layout will ensure that child elements are placed in a row and the alignment of the elements in the row specified.
[insert image of pop-up editor – screen-horizontal and screen-vertical]

screen-vertical  screen-horizontal

Stretch and shrink sizes

Elements can dynamically calculate their dimensions based on the size of their contents or on the size of their parent element.

  • An element stretches to the full width / height of the parent element
  • An element stretches to a percentage width / height of the parent element.
  • An element shrinks to the size of the child elements.

Using these options content in a design can respond to changes in the size of a screen but these changes are minimal and do not allow hiding of content or alterations of other properties.

Resizing the screen in design and presentation modes

When designing a screen it is useful to be able to easily see how the content will look at various widths and this is easily done in Antetype while designing and also while presenting.

Wrapping / Flowing

Building on horizontal and vertical layouts in Anetype 1.5 we have added a new styling property so that child elements flow onto a new row / column as the width / height decreases.

When the new wrapping property is enabled, reducing the width of a parent element causes the child elements to flow on to a new row in the parent element and the height of the parent element increases.

Child elements can have a fixed size or use stretch / shrink sizing in combination with the minimum and maximum size values to control when they will flow to the next row.

wrapping-squares

Breakpoints

An Antetype document now holds a set of user defined breakpoints, which can be viewed in status bar.

Fullscreen_21_03_2014_08_07

Selecting a breakpoint from the list changes the width of the screen to the value of the breakpoint. This enables quick switching between breakpoints while designing.

Responsive widgets

Once you have added some breakpoints to your document, the widgets in a document can be configured to have different appearance at different breakpoints.

This is achieved by adding a new state to a widget – if we have added a breakpoint called “mobile” then we get a new option on the add state menu to add a breakpoint called “mobile – Normal”.

Screenshot 2014-03-21 08.11.45

Any properties can be changed for the new state: size, color, margins, padding, line heights, text etc. The sub components of a widget can be hidden, collapsed or shown and in turn all of their style properties can also be changed.

As you resize your document you will see that it automatically changes the widget from one state to another.

resizing

Single design for all screen sizes

Using the new wrapping and breakpoint features in Antetype 1.5 speeds up the design process because designers can create and maintain a single design that will work across multiple viewport sizes. The way a screen will look at different sizes can be seen during design and a designer can pass the details of how they expect a design to behave along to a developer.

Designers can save even more time using Antetype 1.5 and are better able to communicate the intentions and vision of their designs to their clients and developers.

These functions are currently only available in the beta version of Antetype – please sign up for the beta to try them out.

One Response to Responsive Designs with Antetype

Leave a Reply