Modern web must adapt to various screen sizes. Mobile is everywhere. Few web apps have the luxury of being desktop-only! But it’s hard to make such responsive designs with traditional tools like Photoshop or Sketch.
React Studio has a powerful auto-layout system with instant device previews for creating flexible, responsive user interfaces.
This tutorial shows you all you need to know. It’s different from static design… But easy, once you get the hang of it!
Welcome! This tutorial will walk you through some of the most essential layout features in React Studio, the web app design tool created by Neonto. You’ll learn about keylines, overrides, scroll flow, content “below the fold”, typographic styles, and many other interesting concepts that apply to mobile-first web design.
The end result is a one-screen site that looks like this:
Layout Demo (click to view)
When you open that link, make sure to resize your browser so you can see how the design behaves at different sizes.
If you want to take a look at the completed tutorial project, you can find it in React Studio’s project templates (File menu → “New from Template”).
The focus is on layout features, so there’s a great deal about React Studio that is not covered here. For example, we won’t go into navigation, components, advanced interactions, data linking, scripting, or the Sketch importer… But we’re constantly working on more content about those topics and more. So why not follow us here on Medium or on Twitter to make sure you don’t miss it?
I must mention that we have a rather awesome Sketch plugin! You can make a static baseline design in Sketch, then turn it into a real layout in React Studio and export into high-quality React code: Check out this video
Overview
The layout demo screen has only a handful of elements, but they have a couple of interesting behaviors:
- The header image fills the width of small screens, but leaves a margin on larger screens;
- The rest of the content is within a column whose margins adapt to the screen size;
- The text input fields (“name” and “email”) have placeholder texts and are styled according to Material Design guidelines;
- The email field performs simple validation. If you enter some text that’s not an email address, it will highlight in red.
Let’s build it up piece by piece, starting from the top.
In React Studio, start a new empty project using the “Mobile-First Web App” setup. You’ll see a project map that contains a single screen named “Start”:
Double-click on the screen block to open it for editing.
Header image
Everybody knows that cool web designs show people holding smartphones, so we’re using such a picture here as well. You can download the image file from this link (JPG, 916kB). (By the way, this rather nice photo was taken by Antti Sihlman, Neonto’s co-founder and marketing lead! Maybe he should have been a photographer…? 😋)
In React Studio, click on the Import Image button in the toolbar, and find the downloaded picture. When prompted for how to place it, choose “Draw a Box”. Then draw an area within the canvas. (The area you draw is not actually important because we’ll change the alignments next anyway.)
You should now see the following:
Let’s implement the layout we want. Click on the new image to select it, then open the Layout tab in the Inspector (on the right).
The screenshot to the left shows the settings. Physical size, layout flow, alignments — these are all the core pieces we can work with to make layouts!
We’ll be making changes to all these settings. Most of them we can change visually by simply dragging in the canvas (for example, to resize the element, just grab its corner and drag). But it’s useful to know where these precise measurements can be found when you need them.
Let’s start with “Align Edges”. We would like this image to be fixed on three sides: top, left and right.
So, click on the checkbox next to “Right” to enable it. Then enter a zero for both the “Top” and “Left” offset values.
You should now see this:
Hmm, something is still missing. As you can see in the previews, the height of the image is the same on all device sizes. This makes the content get cropped.
For something like a background image, that’s usually what you want. But in this case we’d like to show the full image. There are actually three different ways to do that, depending on what you require for your design:
- Disable cropping. If you want to show the full image within the available layout box, you can just tell React Studio not to crop the image. This setting can be found in the Element tab.
- Make a device-specific override. If you feel that the image size needs to be bigger on one of the screens, you can simply make an override for that specific size. (To do that, double-click on the device preview and then resize the image. It will create an override on the image’s size property.)
- Set image to maintain its content aspect ratio. Sometimes you know that you want to show the entire image, and have the layout adjust accordingly.
For this demo, we’ll choose the last option. In the Layout tab, click on the “Always maintain content aspect ratio” checkbox. You’ll see the device previews update to show the full image.
Layout overrides for header image’s margins
Ok, now we have the image showing in full. But it’s awfully big on the largest device size. How about adding those margins that we have in the finished version?
Double-click on the largest screen size in Device Previews (If this view is hidden, go to View>Show Device Previews). This brings you into override mode. It’s indicated by a dark green background color in the editing area.
Select the image and open the Layout tab. See those “Override” buttons next to the Left and Right offset fields? That’s what we’ll use next.
Click on Left alignment’s “Override” button and choose “Set override”. The button is now pushed down, to indicate that there’s an override for this setting at this screen size. If you click on the button again, you’ll find options to clear the override, and also a list of all formats with active overrides:
Do the same for the Right alignment.
Now we have to overrides, but the values are still at zero. To change the margins, you can either visually drag the element’s edge in the editing area, or enter a specific number value in the offset field. (By the way, you can also enter a value by clicking the number field and dragging with the mouse to the left or right — try it!)
For the published demo, the offset values were set at +50 on left, -50 on right:
Before doing any more edits, return to the Base format: double-click on the first screen size in Device Previews. (If we don’t return to the base format, we might accidentally create overrides later on.)
The base format is actually a project-wide setting: if you want to change it, click on the App Settings block in the Project Map… But for most mobile-friendly web apps, we recommend keeping the base format as the smallest device size. (That’s what “mobile-first” design is all about: think of the most constrained user experience first, then expand.)
Scrollable content and elements
Next we need to create the content column — but first, let’s fix something about the layout.
When we imported the image, it was placed in the Foreground group. You can see this at the bottom of the React Studio screen, in the Elements list. Elements in this group are fixed to the screen above other content. It’s great for something like a navigation footer, but in this case, we’d like the header image to scroll together with the content.
To make it scrollable, we’ll just place it into the Scroll Flow group. In the Elements list, click on the image element’s name (on the row below the “Foreground” group header), and drag it under the “Scroll Flow” header. That’s it. The image is now part of the scrollable content.
Next, let’s add in the content elements. We’ll just throw the pieces in first and fix the layout next! So don’t worry that things won’t look right for a moment.
To create new elements, drag-and-drop from the element palette to the right of the editing area. When you drop an element into the screen, it goes into the Scroll Flow group by default. (If you want it to go in Foreground instead, hold down the Alt key while dragging.)
From the palette, grab the following elements and toss them into the screen:
- Expanding text block
- Transparent placeholder image (the round “N” logo)
- Text field
- Another text field
- Another expanding text block
You’ll now see the following:
Ok, we need to fix the content. For the two text blocks, enter whatever text (double-click the text blocks to edit them). The published demo used some “Lorem ipsum” placeholder text — you can just copy from there.
For the first text block, set it to the Headline style. Select the text element, then in the Element tab, under Text Settings, choose the style.
Then let’s style the text fields a little. Select the first field and enter a placeholder text: “Your name” (in the Element tab). Also enable the checkbox “Use UI framework style”.
Select the second text field and choose these settings:
- Placeholder text: “Your email”
- Field type: “Email address”
- “Use UI framework style” checkbox enabled
By setting the field type to email and enabling the UI framework style, we get the nice validation behavior where the field will get a red highlight if the input isn’t a valid email. (The UI framework by default is MUI, but we’ll soon offer plugins that let you swap this out for something else!)
You can also select all the elements (drag a selection in the editing area) and move them to the right, to make the layout look a bit nicer.
Here’s what you should now have:
Notice the overflow at the bottom of the screen? The purple line is called the fold. It shows you where the initially visible screen area ends. Content that is “below the fold” needs to be scrolled by the user to become visible. (This is often an important concern in design, for example if you have a “call to action” kind of button that you want to be immediately visible).
Keylines
The layout is still a mess on other device sizes. Let’s put these elements inside a responsive column. For that, we’ll use keylines.
Click on the “Add Keyline” button in the toolbar. You’ll see a vertical keyline appear in the editing area. Grab the keyline by the little diamond indicator at its top, and drag it to the right. You’ll see the keyline’s position update in the inspector.
Rename this keyline as simply “Left”, and place it at something like 7.5% from the left:
Create another keyline. Rename it as “Right”, and place it at a position of -7.5% from the right edge. (You can enter these settings manually in the keyline inspector shown above.)
Now you have two keylines:
Next, let’s align the content to these keylines. Select all the elements and click on the “Align…” command button in the bottom-right corner of the editing area, then choose “Left edge to keyline” and “Left”:
Next align the two text elements and the two text fields (but not the image with the N logo — that one will stay aligned to left only!). In the Layout tab, enable Right alignment and choose the Right keyline:
This is what we have now:
Let’s ignore the “N” logo for a moment. Instead, look at the largest screen size in Device Previews. See how the text content hangs to the left of the header image? That doesn’t look good. We would instead want the text to be indented to the right. Also, we’d like to have more margin between the image and text.
To fix this, let’s create overrides. Double-click on the largest screen size from Device Previews. Then just drag the keylines towards the center. Also, select the first text element and move it down a little. You’ll see that overrides for that specific screen were created:
Remember to return to the base format by double clicking on Base format after you’re done editing overrides.
More about scroll flow (and how not to push it)
Finally, we’ll fix the placement of the “N” logo and the text fields.
In the Elements list, click on the arrow to the left of the “roundimage” element’s name. It will change in to a minus sign:
This means that the element doesn’t contribute to scroll flow anymore. You can think of this setting as: “Does this element push the scroll flow forward or not?”
In the editing area, you can see that the text fields have jumped on top of the “N” logo. We’ll fix that with an offset. Select both text fields and give them a reasonable Left offset, for example 45 points. Now they’re neatly to the right of the logo:
The “contributes to flow” setting is really useful for this kind of simple overlap between elements within a layout. But if you need more complicated multi-column layout, you should use the Columns element. It gives you a lot more features, including responsiveness (e.g. you can have the content display as one stacked column on narrow screens, but as two side-by-side columns on wide screens).
Fonts (and how they’re embedded in your web app)
So far we haven’t touched the styling of the text elements at all, apart from changing one of them to use the Headline style. Let’s do something about the typography.
We could always set fonts on the elements individually, but it’s a better idea to use app-wide styles. These are the typographic foundation of your project. You can find them in the App Settings block — click on it in the Project Map, then select the App Styles tab in the inspector.
The styles in use in our project are “Base text” and “Headline”. We can see that both are currently set to use the system font:
Click on the “Other font” setting. A menu button for selecting the font appears. Click on the button and choose the font named Source Sans Pro. Then, select the Headline style (the bold text just above the font settings) and set the same font there.
Both styles should now be set to use Source Sans Pro. The preview will now reflect this font choice:
The Source Sans Pro font is actually included in React Studio. It’s a free font created by Adobe, and it looks great even on small screens making it an excellent choice for mobile web user experience. For that reason, we’ve bundled the font in the default React Studio installation. (Another font that we include is Open Sans, which is similarly free to use and highly legible on displays.)
You can also use any other fonts installed on your computer. When you export your project, React Studio will copy the font files into the exported React/Webpack project’s assets. In other words, you don’t need to do anything to enable high-quality fonts on your site! However, a few caveats:
- Commercial fonts may have a license that prohibits embedding the font files on a website. If you’re unsure, contact the font vendor.
- Some of the standard fonts on the Mac are in a format that can’t be loaded by the web browser, and therefore they can’t be embedded. You’ll see a warning when exporting your project if that is the case.
If you look again at the final published demo, you’ll see one last difference in typography. The long block of text is using a light italic font, and it’s in a medium gray color (rather than black). You can do these changes by selecting the text element and looking at the Element tab in the inspector.
A button with interaction
The final piece of this demo is the button in the bottom-right corner. If you click on it in the published demo, you’ll see an alert message. That’s a simple example of an interaction.
To create the button, drag an “Icon button” from the element palette into the editing area.
Then align the new button to the Right keyline: open the Layout tab and click on the Right alignment checkbox to enable it. When prompted about the alignment, answer “Keep size and reposition” — that will clear the left alignment setting.
The default content of the icon button is a three-line “hamburger” menu icon, but it’s easy to change. React Studio includes hundreds of commonly used icons as templates. Or, if you don’t like the defaults, you can import an SVG vector image to use as the icon content.
Open the Element tab and look under Button icon. Click on the “Template” menu button:
The icon we used for the demo was a template called “Share #6”, but you can of course use anything you like.
Open the Interact tab. Click the checkbox next to “When user taps”, and then choose the “Script” interaction type:
This means that we want to run some JavaScript code when this button is clicked. (It’s possible to make a chain of multiple interactions in response to a single user event — look at the plus and minus buttons in the top-right corner.)
Click on “Edit script”. This opens the Script Editor window. Enter the following text:
alert(“Hello!”)
Then click “Save”. The button will now display an alert box when it’s clicked.
Previewing and publishing
Let’s take a look at this completed design in the web browser! There are three ways to view your app, all accessible with one click in the toolbar:
- Open in Web Browser. This runs a so-called development web server on your local computer, and opens your app in a web browser.
- Mobile Preview. This command exports your project as a React+Web project, runs a production build on it (e.g. minifies the JavaScript), and then creates a hidden web link for your content on Neonto’s server. This way, you get a real web URL for your preview, so you can easily view it on your own device. The link can also be shared. It’s non-guessable but public, so only people with whom you’ve shared the link can access it.
- Publish to Web. This command works similarly as Mobile Preview, but it lets you choose an URL path for your site. For example, the published demo in this tutorial was published from React Studio using this feature, with the path “layoutdemo”. Once you’ve published to a path, the URL can’t be used by anyone else, so you effectively own it!
There is also a fourth way, the Export button in the toolbar. This will give you a complete React+Webpack project that follows the latest best practices. There’s no “lock-in” to any Neonto-specific features here. If you want to hand over the project to a web developer for further development, nothing stops you from doing just that! And that’s the real power of React Studio: clean, high-quality React code is always one click away.
What’s next
Thanks for reading this far! You’re a true champ. Hopefully you feel enlightened about the awesomeness of responsive web design with React Studio’s toolset. (If not, let us know what went wrong?)
We’re building up a content base of learning material. Check out the other posts on our Medium blog. Then head over to the React Studio site for links to video tutorials (YouTube), etc.
If you have any questions, or suggestions on what material you’d like to see, don’t hesitate to get in touch! You can contact us at reactstudio@neonto.com or using the built-in chat inside the React Studio app (look in the Help menu).