We would like to thank you for beta testing ANTETYPE and providing feedback. With your…
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.
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.
Antetype already includes features to make elements respond to the size of other elements.
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]
Elements can dynamically calculate their dimensions based on the size of their contents or on the size of their parent element.
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.
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.
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.
An Antetype document now holds a set of user defined breakpoints, which can be viewed in status bar.
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.
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”.
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.
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.