Mac SEO Blog

Creating flexible, one page fits all devices, website designs is at the core of Responsive Web Design. EverWeb makes building responsive pages as easy as possible through its built in features, widgets and drag and drop capability. If you have built a fixed width website using a centered page layout, or are just new to web design and want to try out creating a responsive web design, you may find some challenges ahead of you…

A case in point comes when using images in a responsive page layout. As you scale the page, you can allow its images to automatically scale at the same time.

If this is what you want to happen but it doesn’t, what’s going wrong and how do get scalable images? In this post we will explore the background to images in responsive pages and explain how, with a bit of knowledge behind you, you will be easily be making pages with scalable images!

Adding an Image Directly on to a Responsive Page

Images can appear in a number of different ways on a responsive page depending on how and where they are added. For example, if you create a blank responsive page and drag and drop an image on to it in the Editor Window, you will see that the image occupies the full width of the page. Use the selection handles of the image to increase its height. When you preview the image, you should see that it scales as you change the width and height of the browser.

That is fine if you want your image to be full width across the page but often you may have one or more images that you want displayed on the page, but you do not want them full width.

Images in a Responsive Row Widget

Often images are added in to a Responsive Row widget as this widget is a great way to add fixed width objects to your page. And this is exactly what you have to remember… the images you add will be fixed width.

You can try this yourself to see the effect that it has on your page. First delete the image on the page if you added it from the above example so that your page is empty. Next, go to the Widgets tab and drag and drop the Responsive Row widget on to the page.

Once the widget is on the page, drag and drop an image inside the Responsive Row widget. Now go to the Metrics Inspector to check the width of the image. If the image is 350px or less wide, increase this to e.g. 600px wide. Make sure when you do so that you have ‘Constrain Proportions’ checked. If you preview the image, you will see that the image remains fixed in size. If you use your browser’s responsive design mode, you will be able to view the page as if it was being displayed on one of a number of different devices. For example, if you use Apple’s Safari Responsive Design Mode you can view the page as if it were being displayed on an iPhone SE, iPhone 8 or 8 Plus and so on. You should see that the image does not scale and also overlaps any device that has a screen width of less than 600 pixels wide.

the moral here of using a Responsive Row widget with images (or any other object for that matter) is that as the objects are fixed width, you may get problems on some devices if the image is too wide to be displayed properly.

Solving the Scaling Problem

So, how do we solve the problem of getting images to scale correctly and the knock on problem of having images always fitting within the width of all devices? The answer: The FlexBox and Text Section widgets!

Using either of these widgets will enable fully scalable images on your page. Choose the widget that best suits your requirements. In this example, we will use the FlexBox widget as it allows you to add more than one image at a time in the widget.

Start by deleting the Responsive Row widget from the page then add the FlexBox widget to the page. In the Embedded Objects section of the widget, click on the Add button below the ‘Embedded Objects’ list. Set the Object Type to Image.

Scroll down to the Image Settings section and click on the ‘Choose…’ button to add your image. Next, You delete the text that you see in the Styled Text Editor further down the page so that you just have the image on the page. Lastly, scroll back up to the Object Sizing Options section of the widget.

The important fields to use in this section are the Minimum and Maximum Width fields. If you set the Maximum Width as zero, the image will take up the width of the screen that is available to it from the Minimum Width value upwards. So you could make the Minimum with 250 (which will likely suit the smallest mobile phone) and leave the Maximum Width at 0. You could also set the Default Width to the same value as the Minimum Width.

Preview the page to see the effect. You should see the page scale correctly at all time. If you use your browser’s responsive design mode, you will also see that the page width will alway fit within the device it is being displayed upon.

Once you have tested your page, try adding a second Embedded Object to the FlexBox widget using the same parameters as above. Alternatively, duplicate the image and experiment with the Minimum and Maximum width values.

When using the Minimum value, it is usually a good idea to use a hard number e.g. 250. In this way you will more than likely accommodate the smallest mobile device. For the Maximum value, you could leave it as zero or even use a percentage value e.g. 95% of the width available to the object.

You can also add margins to the left and right side of the widget using the Margin fields in the Metrics Inspector which will keep the image away from the edges of the browser. There is much you can experiment with here so the advice is to start simple!

With a little bit of widget knowledge, it is easy to create great scalable images in your website that fit within any device they are displayed upon!