Mac SEO Blog

In the first part of this blog post, we looked at the various ways in which you can add text to a responsive page in EverWeb and the effect of doing so on the page on different devices.

In this second part we look at how you create scaleable text in your web pages.

Creating Scalable Text in a Responsive Page Layout

If you want your text to scale according to the device that it is displayed upon, you will need to use EverWeb’s ‘Show on Device’ feature which you can find in the ‘Responsive section’ of the Metrics Inspector. Usually this section will be greyed out unless you click on an object in a Responsive Row, then the settings will become active. There are four options: Show on Mobile, Tablet, Desktop and Wide Desktop. By default all of these options are ticked.

We can use these options to create scaleable text. For each device type, we can create a TextBox that specifically suits that device. So for a mobile device you may want smaller text, slightly larger text for a Tablet, your ‘standard’ size text for a desktop and maybe a little larger text for wide desktops.

1. First of all, add a Responsive page to your site or select a responsive page that already exists in your site.
2. Next drag and drop a Responsive Row widget from the Widgets tab on to your page, or select a Responsive Row that already exists in the page, that you want to add scaleable text to.
3. Make sure that the Responsive Row widget is selected.
4. Now add a TextBox to the page using the TextBox button in the Toolbar. As the Responsive Row widget was already selected, the TextBox should be created as an object within the Responsive Row. The TextBox will appear as a fixed width object so will appear as a square TextBox within the Responsive Row. If you want to check, go to the Metrics Inspector where you will see the ‘Full Width’ box is not checked.
5. If you have accidentally added a TextBox outside of the Responsive Row widget, it will appear as a full width object on the page. You can add this object back in to the Responsive Row by secondary (right) clicking on it, then selecting the ‘Embed In’ option. Choose the Responsive Row that you want. Note that the TextBox will still be full width, so to make it fixed width, go to the Metrics Inspector tab and uncheck the Full Width checkbox, then resize the TextBox to the size you want within the Responsive Row if you need to.
6. Once you have added the TextBox in to the Responsive Row, add the text that you want to it. Style the text as you desire using the Fonts Panel which you can access from the Toolbar or by using the Cmd+T shortcut key.
7. When setting the text size, set the size as you would if the text were to be displayed on a desktop device. This will give you a ‘baseline’ text size e.g. 18 point.
8. Now that you havre established a baseline font size, it is also a good time to think about text sizes on other device types. You may want use the same text size on a tablet device. On a wide desktop, though, you may want a larger text size e.g. 20 point and on a mobile device you may want a smaller text size e.g. 14-16 point. You may also want to consider how to size text that’s used for page and section titles at this stage. Make sure that your text sizing scheme is consistent across all the pages you are using scaleable text on.
9. Consider also the text itself that you have added to the TextBox. Do you want all of the text displayed on a mobile device or will you want to have less ‘detail’ and more ‘headline’ text only? Also for a wide desktop, maybe you have some additional text that you would like to add but did not have the space for on a desktop device. Again, we will come back to this soon.
10. Now that you have your ‘baseline’ TextBox, make sure it is selected then use Cmd+D to duplicate it three times. You now have four TextBoxes, one for each device type.
11. Set the Text font size for each TextBox and also remove or add text to the TextBoxes as appropriate for each device. For example, you could choose the TextBox on the far left of the Responsive Row to be the one for your mobile device. In this case, I might want to cut the amount of text down and set the font size for the TextBox title to be 18 point with the body text set to 14 point. The next TextBox to the right would then be for tablets, having e.g. title font size of 20 and body text size at 16 point with my ‘default’ amount of text. Continue the same way for the Desktop and Wide Desktop TextBoxes.
12. Finally, select the TextBox you want to use for Wide Desktop. In the Metrics Inspector, go to the Responsive section and uncheck Desktop, Tablet and Mobile. Next select Desktop and uncheck Wide Desktop, Tablet and Mobile. For the Tablet TextBox uncheck Mobile, Desktop and Wide Desktop and finally for the Mobile TextBox uncheck Tablet, Desktop and Wide Desktop. You should see one TextBox on screen.
13. Now either resize the EverWeb app, or Preview and resize the browser to see the text scaling up and down as you in increase and decrease the width of the browser or app window.
14. For more information, check out our video on Show on Device.

Working with Text and Images

In the third part of this post, we will look at how you can work creatively with Text and other objects, such as images in a responsive page.

If you have any questions about this post, or about EverWeb in general, please let us know in the Comments Section below!