Squarespace Basic Overview for D.R.I.V.E.S..

• Table of Contents

  • Intro to Squarespace

  • Landing Page

  • Sites

  • D.R.I.V.E.S. team/Collaborators pages

  • Other Pages

  • Basic Development Detail

    • Mobile

    • Site Nuances

Into to Squarespace

Squarespace is a site that offers a handful of helpful website tools. From building out a marketplace to purchasing your own DNS Squarespace has tools available. For the D.R.I.V.E.S website (drives-network.org) we are really only utilizing the website building section of Squarespace. In this page we will go over the different D.R.I.V.E.S. pages, how they were built and what their functions are.

D.R.I.V.E.S. website is located at: drives-network.org

Landing Page

On this page you will find a brief intro about D.R.I.V.E.S. and what their website will offer. The main feature is the bottom half of the page and the map image. The map will help users locate where each of the studies in the chart below took place. The chart will help users with the basic information for each study. From the chart the sites can be clicked on and will link to each site’s information page. These site links are also available in the navigation bar in the Sites dropdown.

Sites

The sites are a collection of landing pages with additional details pages linked within them. Each site landing page is dedicated to a study that was conducted. Each of these studies has at least one site location however some have two, or three. Each site page has some information about the study and some of the additional information about the overall study. By clicking one of the additional details links on the site page will take you to a fact sheet about that specific location for the study. These fact sheets have all important details that outline the specifics of the study at that location including things like the climate of the area, the treatments applied, and contact information for who might have additional details.

D.R.I.V.E.S. Team/Collaborators pages

These pages are very simple and display pictures and brief descriptions of different members involved in the D.R.I.V.E.S. teams along with others who have helped contribute to the content they are presenting.

Other Pages

• Research links in the navigation bar are dedicated to research papers and information outside of the specific sites and studies the page is presenting. As new Journal entries come out they will be linked to here.

• The Drives one page provides a PDF with more details about the D.R.I.V.E.S. project.

• The Drives dataset page will provide a link to a view of the current database behind the research data.

Basic Development Detail

Mobile

Squarespace provides a view that will allow a user to edit the mobile view of the website independently from the desktop view. All of the items on the page will persist between the 2 views (with some exceptions below) however you can move them around and resize them in the mobile view without changing anything in the desktop view. Be careful however, if you delete an item in the mobile view it will also be deleted in the desktop view. However, as mentioned before, there is a way to hide elements from the mobile/desktop view. To do this follow these steps.

• Get the chrome extension Squarespace Id Finder

• Use the Id Finder on the page with the element you would like to change the visibility of. Clicking the box will copy the block code to your clipboard.

Open

• Navigate to design > custom CSS on Squarespace

• Enter in this code based on the intended result

  // HIDDEN ELEMENTS ON MOBILE @media only screen and (max-width: 768px) {#block-************* {display: none;}} // HIDDEN ELEMENTS ON DESKTOP @media only screen and (min-width: 768px) {#block-************* {display: none;}}

Site Nuances

Squarespace is a very easy to use straight forward tool for building websites. There is a long list of helpful elements and styling tools that are provided that we will not get into a detailed explanation about, however there are a few elements that have been designed in a way that should be noted if additional updates are going to be made.

• Chart on the About (landing) page.

  • Squarespace does not provide a chart element so our chart was built out with lots of individual elements. When adding a new site you will need to copy the elements in the previous line and paste them so they match in size and shape and then refill in the information.

• Sites pages

  • Some of the site landing pages are the same but need to have individual links in the navigation menu Sites dropdown. Since setting a link will show the user they were navigated to a different page then the one they selected we have made landing pages for each individual location even if 2 locations are doing the same study (ex. TN-Spring Hill and TN-Milan). Because of this if the landing page for the TN study needs updated then both the TN-Spring Hill and the TN-Milan pages will need their landing pages updated.