What is Responsive Design?
Responsive web design is an approach to building web pages so that they are attractive and functional for users regardless of screen-size, platform, and orientation. Responsive design allows images to resize, text blocks to shift, and menus to collapse as needed so that pages will render properly on desktop, laptop, tablet, and smart phone screens.
Why is Responsive Design important?
Approximately half of all internet traffic today is via a smartphone or tablet. College students and other young adults are much more likely than the overall cell owner population to access the internet on their mobile phones. Internet users now expect websites to render properly on any device. If your website is difficult to read or navigate, many users will leave quickly and not read your content.
What is the status of Responsive Design in Terra Dotta?
As of early 2022, responsive design has been activated on Terra Dotta public sites.
How do I know if my public pages are using responsive design?
You should be able to tell if you are using a responsive design layout by going to your site's home page on a desktop computer. Start with the page at full width and then drag the window smaller to simulate the width of a mobile device. If the text and images on the page resize and reposition themselves, you are using a responsive design. If the text and images are cut off and don't adjust, you are likely using a non-responsive layout.
If you're still not sure, you can check in this way: Log into your Terra Dotta site as an administrator with the "Stock Layout Editor" permission. Navigate to the classic administrative interface --> Site --> Site Builder --> Edit layout styles and content (Layout Editor). At the top of the page, you can view if the "Responsive Public Pages" setting is set to "Yes" or "No." If it is set as "Yes," you are already using Responsive Design for public pages and you are all set.
How do I enable Responsive Design in Terra Dotta?
The Layout Editor feature allows an admin to change the site's primary color theme, upload images for the header and footer, and switch the public layout to responsive design. If you would like your public pages to use Terra Dotta's responsive interface, then you can switch it over in the Layout Editor. Changes made via the Layout Editor will apply only to pages using the responsive design layout.
To access the Layout Editor, navigate to Site > Site Builder and click on the "Layout Editor" button or "Edit Layout Styles and Content" link. This will open the Layout Editor page from which the following options appear:
Responsive Public Pages
To enable responsive design on your public website, change this setting to "Yes" and click "Update". If you have a custom layout, changing this setting will replace your custom look with the new responsive stock look and feel. You can switch back and forth between your site's legacy public page style and the new responsive style as often as necessary using this setting. If you have a custom layout that includes Google Analytics, switching your public pages to the responsive layout will remove the Google Analytics code from your site. Open a Support request for help enabling Google Analytics on public responsive pages.
Header Image
By default, the header of the responsive layout will show your office and institution name. You can upload images to be used in the header area of your site and set the alignment of the image (center, left, right). Once an image has been uploaded, it can be removed by clicking "Remove".
Header Background Color
The color of the header area of your site can be adjusted by making a selection from the color grid or entering the corresponding hex color code.
Footer Image
By default, the footer of the responsive layout will display a "Powered by Terra Dotta" logo. You can upload images to be used in the footer area of your site and set the alignment of the image (center, left, right). Once an image has been uploaded, it can be removed by clicking "Remove".
Footer Background Color
The color of the footer area of your site can be adjusted by making a selection from the color grid or entering the corresponding hex color code.
Color Theme
The color theme refers to the primary color used throughout the site. Choose from one of the default options or select "Custom" to set your site's primary color to something specific using a hex color code. The color selected (and various shades of that color) will be used for panel headings, buttons, hyperlinks, borders, and the background gradient.
Anchor/Link Color
By default, all hyperlinks on your site will be displayed with the same color as your site's color theme. You can use the "Anchor/Link Color" setting to choose a different color for your site's hyperlinks.
Functional Site Links
Check the box next to any site links that you wish to display on your public site and in the "Home" menu.
Note: If your site is using a non-responsive design and uses a "Custom Layout," you may wish to consult your web design professional or open a support case with Terra Dotta for more information about using a custom responsive design layout.