Tutorial 4 - Responsive Design

Download video file for offline viewing

00:00Welcome to Antetype Tutorial 4 - Responsive Design. In this tutorial we are going to adapt the mobile website design that we have created in previous tutorials and add the rules so that it can respond to changing widths. The rules we will add will change the layout of our design the size of images and fonts and even show and hide some elements at different widths.

00:27You can begin this tutorial either from the Start of Tutorial 4 screen in the Tutorial 4 template or continue using the screen you have already created in Tutorials 1,2 & 3.

00:40If you want to start from the tutorial file - please open the template “Tutorial 4 - Responsive” from the Getting Started section of the Template Chooser. Then Select the screen Start of Tutorial 4.

00:54This is what our design will look like when we have completed this tutorial.

  • Note that as we change the width of the screen from the mobile web site width of 320px the layout of the site stretches with respect to the width of the screen. This behaviour is already working in the files you have build in the previous tutorials.
  • At 550px the header changes to a new format with a bigger logo and text, the burger menu is hidden and a new header menu is shown. Another change at 550px is that the Big Image expands slightly in height.
  • At 580px our content item widgets stop stretching and there are now two items on a single row.
  • As we continue to expand the design we notice at 870px there are now 3 widgets on a row.
  • Finally at 1025 pixels the Big Image expands even more in height.

01:52So how do will we go about adding these rules to our design?

02:00To make our design respond to the changing width we are going to use 2 features of Antetype:

  • Layout Wrapping
  • Design Breakpoints

02:07Layout wrapping enables containers to wrap elements on to a new line in the same way that text wrapping works.

02:13Creating Design Breakpoints for our design will enable us to style our widgets differently at different widths using special design breakpoint states.

02:23Let’s start by looking at how our existing design changes as the width is changed.

02:30All the items currently stretch out and this is not what we want to happen and notably the widget items do wrap back on to a single row.

02:40Changing the behaviour of the widgets should be easy as we only need to enable wrapping. So select “Content ”the container the widgets sit within, open the layout editor and enable layout wrapping for the container.

02:53Our layout now looks very strange and not what we wanted - this is because the container was initially set to use vertical layout for our mobile site. What we want now is a horizontal layout that wraps elements to the next row when there is not enough space, so let’s change the layout mode to horizontal.

[image of layout editor with correct settings - hor & wrap]

03:15OK a little better but still not what we were expecting. The problem now is that Antetype thinks they can all sit on the same line because we have not set a minimum width for the content items. Select the first Content Item and open the size editor and set a minimum width of 270px.

03:35This looks closer to what we want but the other Content Items don’t have a minimum set until we press the Green update widget button on the style bar. Press that and BANG! we are back to the design we started with.

03:50The important change is that our design will behave differently as we increase the width - let’s try it.

03:57This looks more like the behaviour we want with the widgets.

04:00So let’s tackle the header and image changes - for these we will need to use design breakpoints.

04:06First we need to open the Manage Breakpoints sheet - we can do this from the breakpoints list in the status bar.

04:14If you have started this tutorial from the tutorial 4 file you will find two breakpoints already defined in the breakpoint editor, but if you have continued editing a file from another tutorial you will have to manually enter these breakpoints.

04:30The breakpoints are called Phone Portrait which is setup at 550 pixels and Tablet Landscape which is setup at 1024 pixels.

04:39Close the breakpoint editor by clicking on Save and let’s have a look what impact adding design breakpoints has had on our document.

04:47Select the First Content Item and then look in the style inspector.

04:52You should notice now that list of states has been updated with groups of states for each of the design breakpoints that we have created.

05:00Next to each of the breakpoint names is the width in pixels when that breakpoint is active. You may notice that we created 2 breakpoints but there is a 3rd breakpoint in the list, this is the default breakpoint. The default breakpoint states will be used when no other breakpoint state has been enabled.

05:19Our selected Content Item previously only had a Normal state - this is the state that is under default and is currently the active state, you can see this from the tick on the left or the style bar.

05:30The other two normal states are not currently enabled, you can see this because the text is grey. If we wanted to enable these breakpoint states we could then change the styling of our content item at the different breakpoints. We don’t want to do this for the content item, but we do want to change the height of our image at different widths, so let’s now focus on the Big Image.

05:54Select the Big Image - you will notice that in the Style Inspector there are no states as this is a normal element and not a widget. The first thing we need to do is convert the element to a widget by clicking Create Widget on the toolbar. Take the default name and leave the tags empty and press Create.

06:10Now in the Style inspector we can see the list of states for the Big Image. At the moment only the default normal state is enabled and no style properties are changed at different screen widths. We want our image to slightly increase in height at different widths so lets enable all of the Normal breakpoint states. If we mouse-over each of the greyed out disabled states you should notice a switch becomes visible for the state. If you change the switch to be green the state becomes enabled - do this for both states.

06:45The Phone Portrait Normal state that will be active from 0–500 pixels width is the state that we have already styled and configured. We want to change the Tablet Landscape and Default states so the height increases as the width increases.

07:02We will start with the Tablet Landscape, change the breakpoint using the control in the status bar to Tablet Landscape, this changes the screen to the maximum width for that breakpoint - in this case 1024 pixels.

07:16You will notice in the Style Bar that our active state is now “Tablet Landscape - Normal”. We want the height of the image to be 270 px in this breakpoint so change the height of the Big Image to 270 px.

07:31Now Change to the default breakpoint, this will set the width of the screen to 1px larger than the largest breakpoint in this case 1025px.

07:43You can see now in the Style bar that our state is “Default - Normal”. Change the height of the Big Image to 345 px.

07:53OK Let’s resize the screen again and see how the image responds.

07:58Great our widgets and image are responding to a changing width - now we need to work on the header.

08:04To get our header to respond to different widths we again need to convert it to be a widget, please convert it to a widget now.

A quick note - currently when a new widget is created all interactions on the child widgets are lost. Once we have made the header element into a widget the burger menu interaction will be lost. Its it easy to go add that again, and you can refer to tutorial 3 to see how to do this.

08:30Opening the Style Inspector we can again see the breakpoint states for the header widget. For the header we do not want to enable all the breakpoint states. We want our header to only change at 550px and then the full header should be shown at anything larger.

08:48To do this we will only enable the Phone Portrait - Normal state. The styling of the header in Phone Portrait is the styling we already have in place.

08:59Because we have not enabled the the Tablet Landscape - Normal state at 551 pixels and wider the default state will be used. This means we only have to configure two states for the header.

09:18Change to the Tablet Landscape Breakpoint. If you select the Header widget you should see in the Style Bar that the current state is Default - Normal.

09:27Let’s style the header for this default state.

  • We don’t want to see the burger at this width so Select “Burger” and change the Visibility to Collapsed
  • We want the logo left aligned now so select the “Header” and change the layout to left layout alignment
  • We want a larger header so change the height to 100 px
  • Set a padding of 5px on all sides
  • The Logo also needs to be bigger so select “Logo” and change the size to 80 width and 80 height
  • Select “Logo Text” and change Font Size to 36 px

10:15This looks better but we need to add our bigger menu.

  • Select “Logo Text” and press Rectangle on the toolbar to create a new rectangle next to the logo text.
  • Rename this rectangle to “Search and Links”
  • Change the both the width and height to Stretch mode
  • Set the Fill to Transparent
  • Set the border width to zero
  • Change the Layout mode to vertical and set a top & right layout alignment
  • Open the widget inspector and drag a Search Bar widget onto the “Search and Links”, remember to wait for the flicker

11:00Our new menu is taking shape, we just need to add the menu items

  • With the the Search widget selected click Rectangle
  • Rename the rectangle to “Big Menu”
  • Set the height and width to stretch
  • Set a zero width border
  • Set the Fill to Transparent
  • Set the layout alignment to right and centre
  • F rom the widget inspector drag a “Big Menu Entry” widget onto the “Big Menu” - wait for flicker
  • Press CMD-D 3 times to create 3 duplicate Big Menu Entries
  • Rename each entry to “Home”, “Features”, “Widgets” and “Shop” and set their text to the same.

12:13The new elements we have added to our widget cannot yet have different styles in each state until they are added to master widget definition. Before we can change the header widget any more we need to click on the green button in the style bar to update the master widget with the changes.

12:32The search and links menu is a new element in our widget and has the default visibility at the moment in all states - this makes the header look strange at smaller widths. Change to the Phone Portrait Breakpoint to see.

12:48We can fix this by selecting “Search & Links” and changing the visibility to collapsed for the Phone Portrait - Normal state.

13:00That’s it, we now can resize the screen and our content and menus change relative to the size. These two simple features of Antetype can be used to create designs that respond to the changing width of a screen. The example we have built here is relatively simple - but please have a look in the Web section of the template chooser for more in depth examples of what can be achieved with these techniques.

For more examples please checkout cotype.antetype.com.

We hope you have enjoyed this tutorial, please visit antetype.com/learn for more.