Learning HTML, CSS, Bootstrap, or other web design coding methods could take an entire semester in an academic setting and requires a somewhat high learning curve, so we have designed a website for SUNY Potsdam Esports using the Google Sites platform that even a web design novice could maintain!
Google Sites is a free and easy tool to learn and use for creating basic websites. For this tutorial, we will show you how to access the SUNY Potsdam Esports website in Google Sites and how to edit, create, and work on pages to maintain a smooth flow to site visitors.
To access the website's back end, you will need the login credentials for the SUNY Potsdam Esports Google account. You can get them from Dr. Betrus or an approved member of the E-Board.
Once you are logged into Google Drive, the website can be found in the main directory as "SUNY Potsdam Esports" with the purple icon indicating the file as a Google Site. Double-clicking the name will open the website editor.
You will be taken to the home page to start, but any of the existing pages can be accessed by clicking on "Pages."
Here is a rundown of the existing pages.
- The Home Page contains a few simple elements that, for the most part, only need to be revised every once in a while at the discretion of Dr. Betrus. The main exception is the News Slider, which is linked from a Google Slides document. Google Sites currently does not have the option to have sliding news stories with links like you see on many modern websites. The closest thing to it is an image slideshow, but you cannot add text to it in Google Sites. The Google Slides document is a work-around to achieve the same effect.
- To make changes, go into the News Slider in Google Drive and Google Slides will open. The news slider follows the presentation created here and any changes made to it will update on the website instantly. Each story in the slider contains an image on a black background, the name of the article or story, and a link. One drawback is that you have to have a page published before inserting a link, so once you have published a page, enter the following address in another tab of your web browser and this takes you to the News Archive, which we will go over shortly. Click on the story you wish to link to and once the page loads, copy the link, then go back to Google Slides, and add the link to the "Story" text.
- Meet The Team is the main roster page and contains the names of everyone involved in the program. This includes the Esports athletes, captains, officers, advisory council, and support team.
- Each individual profile is stored as a sub-page under Meet The Team. New profiles can be created by clicking on the three dots next to "Placeholder" and selecting "Duplicate Page". You will be asked to name your new roster profile page, which should be the individual's last name. The default location for the new page will be underneath the Placeholder page that was just duplicated, but this can be dragged to another location. In this case, roster profiles should be arranged in alphabetical order by last name for easy access if and when adjustments need to be made to the profile. Next, click on the three dots next to the name of your new page and select "Hide from navigation". This will make the new profile invisible in the website's navigation bar, but not on the roster page once you add it there.
- You are then taken to the new roster profile page, which contains placeholder information and a temporary photo. Where it says "Duplicate this page" replace it with the subject's name. The information underneath will also need to be added: the individual's gamer tag, class, hometown, major, and Esports teams they are a member of. Underneath is additional information called "Fun Facts" and here a visitor can learn an individual's career ambition, favorite video game, favorite food, favorite movie, favorite TV program, the best thing about SUNY Potsdam in their opinion, and any accolades they have received that they wish to share with the world. Then, replace the temporary photo with a proper headshot photo by clicking on the photo, then the three dots, replace image, then either Upload or Select Image. If the photo you need has already been uploaded to Google Drive, go to Select Image. Otherwise, upload the image from your device by clicking Upload.
- Once that information has been entered, click on "Meet The Team" to return to the roster page. On this page, find where on this page the new profile needs to go, then add the name to that section. For example, the Super Smash Brothers "B" team has a new player. To link the new profile with the text, highlight the text and click on the paper clip icon above it to insert a link. You can link to an external website by entering its address or you can link to another page on your website by selecting a page in the drop down underneath. Here, we will select the new profile page, then click "Apply".
- The Program Director page has information from and about Dr. Betrus, including media appearances, his TEDx Talk from April 2019, articles he has written about Esports for various publications, and a recruitment form for potential Esports athletes that is linked to a survey created in Google Forms. That can also be accessed in the SUNY Potsdam Esports Google Drive space.
- The "News" page takes you to an archive list to previous stories created for the website. This archive page serves as a place to keep all of the articles together in one place rather than have them spread out haphazardly across the website's back end.
- "News" contains subpages with the written articles, all of which are hidden from the website navigation and are only linked to on other pages. To create a new story or article page, click the three dots next to "News Placeholder" and click "Duplicate page". The name of the page should be a brief one or two word description of the story, in this case a story about the Leaf Raking Day in 2019, and six digits representing the date of the article. For a game story, the date will be the date of the contest being written about. Otherwise, the current date is acceptable for other stories.
- When your new article page comes up, you will see several placeholder elements that will need to be replaced. A photo should go underneath the website banner and above the headline. This can be a photo from competition, a team photo, the Potsdam Esports logo, or the game logo. Since we have a photo from Leaf Raking Day, the photo we will use is from that activity.
- Replace the text "Duplicate this page" and "Title of article" with your headline, the word "Byline" with the writer's name, and the date of the article. The article text will go into the text box that says "Copy and past article text submission here". At the first mention of an Esports athlete's name, highlight the name and insert a link to his or her roster profile page. This only needs to be added at the first mention of the name, not any additional mentions later in the article.
- When you are finished writing the story, go to the News Archive and add the article at the top of the archive list followed by the date. Add a link to the page by highlighting the name of the story and inserting a link.
- To add the story to the News Slider, click Publish in the upper right hand corner. In another window or tab, enter the following address to access the news archive, click on the story, and copy and paste the article's URL. In Google Slides, duplicate the first slide, replace the image in the new slide with the same photo you used in the story, change the headline to the same headline used in the article, then replace the story link with the URL to the new page. Because Google Slides updates instantly, the News Slider is already updated.
- The "Schedule and Results" page has all of the scheduled matches for all of SUNY Potsdam's Esports teams, their current win/loss records, and how the teams did in competition. Also part of the schedule are links to the game story for a specific match and the Vodd posted on YouTube.
- The "Regulations" page contains links to two subpages, the team Code of Conduct and the ECAC Rulesets for each game. These subpages are accessible to website visitors either by clicking the "Regulations" link or by clicking the arrow icon next to "Regulations" in the navigation bar. The Code of Conduct should be reviewed each semester and updated at the discretion of Dr. Betrus and the E-Board. The ECAC Rulesets will be updated each semester and should be linked directly to PDF documents, either from Google Drive or a public link as provided by the ECAC in their Discord server.
Links to outside websites
- "Live Stream" is a link to the SUNY Potsdam Esports Twitch account page.
- "Video on Demand" links to the Potsdam Esports channel on YouTube.
- "Lehman Gaming Lounge" is a link to the Residence Life Gaming Lounge website. This is maintained by Josh McLear, Associate Director of Residence Life and a member of the Esports Advisory Council.
- "Get Involved" directs visitors to the Esports and Potsdam Video Gaming Club's "Get Involved" page on the SUNY Potsdam website.
- "ECAC Standings" is a direct link to a document updated every week by the ECAC that displays the win/loss records for each team, organized by game and by division or group.
- The final page is "Esports Jobs and Careers" which contains a list of job boards and resources available for students who are interested in pursuing a career in Esports. This page will be regularly updated and maintained by Dr. Betrus when new opportunities for students become available.
To create a brand new page from scratch, click on the "Pages" tab, then the "Plus" icon, followed by either "New Page" or "New Link". You will then name your new page or link, then click "Done". The new page will be added underneath your current page. You can change the location in the navigation by simply dragging and dropping the page where it should go in the navigation.
To make a page into a subpage, drag the page over another page and release when a rectangle surrounds the parent page. This will add an arrow next to the name of the parent page and the new subpage will be available there.
To hide a page from the navigation bar, click the three dots on the page in question and select "Hide from navigation".
A blank page will contain no elements to start, but you can insert elements such as a text box, image, embed a source from the internet, such as a social media feed, or something already uploaded to Google Drive. Scrolling under "Layouts" will bring you to additional elements you can add to the page. Google can add features to their Sites platform at anytime, so additional tools may be available to you.
"Layouts" are templates for website sections that you can easily modify. Text can be adjusted or removed, image placeholders can be replaced by an embedded YouTube video, and lots of other possibilities.
All changes made in Google Sites are instantly saved, so there is no need to worry about losing your work in case you lose an internet connection. Or worse, lose power.
When you have finished making changes to the website and are ready for them to be published, click "Publish" in the upper right hand corner. After a few moments, the changes will be published and the website will be updated!
For more information on how to work in Google Sites, check out this video from Flipped Classroom Tutorials.