Mac SEO Blog

Responsive Web Design is the website paradigm of today. Creating websites using scaleable pages was for a long time the holy grail of website design. And with good reason too, as if done correctly, pages created in this way look and work fantastically on all devices that they are displayed upon.

The problem with this concept though, are the words ‘if done correctly‘. Responsive Web Design is, in itself, a more complex design paradigm to get your head around than fixed width page designs. There’s also the matter of design freedom Many website designers prefer using fixed width page layouts, such as the centered page layout in EverWeb, as such layouts allow text, images and other media to be placed freely on the page. Responsive Website Design is often seen as more restrictive in this respect.

There are many pros and cons in both responsive and fixed width design strategies and there is no definitive answer as to which approach is better. However, it is usually best to build your website in the way that suits your website’s goals and requirements. From this starting point, the choice over which page layout style to use should be easier.

What is certain, though, is that Responsive Website Design is here to stay. If you have EverWeb 2.8 or higher, the responsive page layout is built in to the product.

For a full deep dive in to Responsive Web Design in EverWeb, check out our YouTube videos and the EverWeb User Manual which includes a dedicated chapter on Responsive Web Design. In addition to these resources, here are some EverWeb responsive page design tips to help you along the way.

1. Update EverWeb to the latest version. Since the introduction of the responsive page layout in EverWeb 2.8, there have been many additions and enhancements to the tools that you can use to create responsive web pages. For example, the Metrics Inspector has added maximum content width, show on device and breakpoints. There is also responsive ‘Set shape as scroll position‘ which enables robust object hyperlinking in a responsive environment. The Shape Options tab has added full width background fill capabilities for full width widgets. The Responsive Row, FlexBox, Text Section and Responsive Image Gallery widgets have all been upgraded and most other widgets have gained full width capability.
2. The FlexBox Widget Is Your Go To Solution! Designing a website means making lots of choices. In responsive page layouts, the FlexBox widget will probably be your widget of choice to make your page design the best it can be. When combining objects together, such as text and images or images, video and text, or when you need to add a button in to the mix, the FlexBox widget has the most options and flexibility. The widget can even be a great solution when you are using only type of object on your page. If you cannot decide which widget is best to use to solve your design issues, try the FlexBox widget first!
3. Responsive Row Widget Overuse. Often the Responsive Row widget is used for everything even when it is not needed. Whilst the widget is a ‘jack of all trades’, using it when you do not need to complicates your design and adds unnecessary code to your page. Check out our ‘Responsive Row: To Use or Not To Use‘ blog for more hints and tips on when, and when not, to use the Responsive Row widget.
4. Check Out Show on Device! Even though Responsive Web Design is the one page solution for all device types, you may find that sometimes you need a particular design solution for one, or more, device types. This is especially so when viewing pages on mobile devices where horizontal space is limited and you do not want a page height that has your visitor scrolling seemingly forever. EverWeb’s Show on Device feature lets you control when you see objects that are inside a Responsive Row widget. For example, your Responsive Row widget contains two images and a TextBox. The TextBox has a large amount of text within it. This is fine when viewed on a desktop or tablet computer. On a mobile device, however, you may want just a summary of the text instead. To do this, duplicate the TextBox in the Responsive Row widget. Edit the text of the duplicate to produce your summary text. Then go the Metrics Inspector and uncheck all of the Show on Device options except ‘Mobile’. For the original full text TextBox, uncheck Show on Device only for ‘Mobile’. In this way you will get the full text on all devices except mobile, and you will get the summary text only on mobile devices.
5. Margins. Setting left and right page margins really comes in to play when your page is displayed on mobile devices where you do not want your content up against the left and right edges of the screen. Usually, setting a margin of about 30 pixels from the Metrics Inspector will give you enough left and right margin space. If you are setting margins for a Responsive Row widget, remember to make sure that the objects within still fit properly. Use Preview to test and reduce the width of any fixed width objects inside the Responsive Row widget if you need to.
6. Maximum Content Width. As you increase the width of your browser, you may find that objects on your page get too spaced apart from each other. Using Maximum Content Width you can fix the width of the selected full width object to a specific maximum value. The objects inside the full width object will not stretch out beyond the value you set.
7. Look for Simple Solutions. One of the things you should never forget when designing is that often we overlook simple solutions to design problems. For example, you may be tempted to add a full width TextBox in to a Responsive Row widget in order to get extra top and bottom padding. However, you do not actually need to do this as you can use the Insert Margin, Before Paragraph and After Paragraph controls in the Text Inspector to do just this. Remembering simple solutions will make your site easier to manage and maintain in the long run.

If you have your own tip on how to make a better responsive page in EverWeb, why not share it with the community in the Comments Section below. We would love to hear from you!