What is Bri FYI?
Each week, Brian McCormick (Bri FYI) from the Office of Marketing and Communications web team shares helpful tips, tricks, and best practices for updating your loyno.edu websites. Please submit questions for Brian to answer either at his monthly Drupal+ training sessions or in a future Loyola at a Glance email. All knowledge levels are welcomed, whether you regularly update your department’s website, want to improve the functionality of your site, or just want to know how something on the internet works.
The most common question is always:
What is Drupal?
Our websites run on a CMS (Content Management System) called Drupal. A CMS is a technology between a database that stores all the information and the web pages that appear in your web browser. We are running three different versions of Drupal, and there is a massive push to update all of the older Drupal 6 sites. If your website does not resize for a phone and has rounded corners at the top of the page, we need to update your site to the latest version. Send Brian an email if you think you are due for an upgrade.
Helpful Tips, Tricks, and Website Best Practices
If you can edit a Google or Word doc, you are already skilled enough to make edits to your website. The first thing you need to confirm is that you have an account for the website you want to update (If you need access, send Brian an email). The next step is to go to the admin login page which you can get to by typing “/user” after whatever URL you are trying to access. For example, if you were trying to make edits on the main website, you would go to https://www.loyno.edu/user/, put in your username and password, do a little math to prove you are a human, and click the “Log In” button. From there, it is just a simple matter of navigating to the page you want to edit and clicking the “Edit” tab. You will see a block with a WYSIWYG (What You See Is What You Get) editing bar at the top. Make your changes and be sure to click the “Save” button at the bottom of the page. Viola! You updated your website.
Your scrappy marketing web team is here to help! Here is the thing. Eric and Brian manage over 150,000 pages across multiple website domains. We know a great deal about building websites but only a moderate amount about Forensic Chemistry and Postcolonial Literature. We need your help as well! We rely on the faculty and staff to update the content of their websites as they should know their specialty better than the web team. If your information on a web page is outdated, please fix it. Be sure to check spelling and grammar before hitting the save button. On every second Wednesday of the month, Brian hosts a monthly Drupal+ training session at 1 p.m. to provide support for the Loyola community. If you have any questions about your website, send Brian an email or submit questions via this form.
If you have ever wanted to have a link that does more than just link to another page, I have the answer for you. The first thing you need to know is about protocols. The web is full of protocols that do specific things when asked. HTTP stands for Hypertext Transfer Protocol. It is used to fetch web pages and graphics in your web browser. If you want to send someone to another webpage, you use the HTTP protocol. For example, https://www.loyno.edu/ sends you to our homepage. The savvy among you may have noticed that there is a letter S after the HTTP. That just means that the resource you are requesting is secure. If you want to send an email, you use the mailto: protocol. Using mailto:firstname.lastname@example.org as your link will open an email client with my address filled in. Even cooler, if you use the tel: protocol, it will allow you to create a link that will open the telephone app on your device. For example, tel:1234567890 would attempt to dial (123) 456-7890.
The easiest way to make your pages load faster is to keep them simple. Adding tables and complicated layouts with custom fonts and scripts can grind a page to a halt. The next most important thing to do is to size your images correctly for the web. An image used for print uses vastly more information than a monitor does. Simply reducing the resolution DPI (dots per inch) from 300 to 72 will easily shrink an image file size by two-thirds. People with limited data plans will adore you for considering their wallets. Faster page loads impact your search engine rankings for the better.
Not everyone sees your webpage. Many people have screen readers that describe images or describe where certain blocks of content appear on the page. Whenever you add an image to the page there will be a field to fill in an “Alt text”, which is a description that the screen reader conveys to the end-user. Try to make your Alt text as descriptive as possible. Improving accessibility also increases the chances that your page will be found by search engines. An Alt tag that reads “Happy English students discuss Shakespeare outside in Palm Court” is going to rank higher in Google searches rather than just “students” and provide a sight-impaired person a richer experience.
Yes, you can! Adding a video does require a little preparation but ultimately putting it on the page is simple. If you have a video that is being produced for you for future viewing, please consider adding captions for accessibility. We do not host videos as they take up a great deal of space and slow down our servers when they stream. Instead, the video needs to be uploaded to YouTube so that you can get a URL to share with the world. After that, you need to go to the page and the place inside of your content that you want to share your video and place your cursor there. Then from inside the WYSIWYG (What You See Is What You Get), there is a button that is a rectangle with a small, black play icon that you will click. A window will pop up and ask you to put in the URL you got from YouTube. You can choose options if you want the video to play automatically or if you want it to be responsive (filling the page). Don’t forget to save your page (down at the bottom) or you will not see the change you made.
The best thing to do when creating ANY content for the web is to think about the user. You can improve your SEO (Search Engine Optimization) by making your page titles and paragraph headers relevant to the content on the page. As my esteemed colleague, Eric will tell you; think about bites, snacks, and meals. A bite to entice them, a snack to whet their appetite, and a meal to fill them. The bad news is that people do not really read on the web, they skim at best. Start off with a strong page title that describes the overarching reason for the page. Next, have your paragraph headers give deeper context to the page title. Finally, have your paragraph content support your headers with simple language that most any user can understand. A great example is if your page is about chickens, your page title should definitely have the word “chickens” in it. Your first header should strongly support the concept so “How to Raise Chickens” would be a strong option. Repeating the content that appears in your page title in your headers can also increase the relevance of your page. Instead of paragraphs, consider that bullet points in a list can direct the user to logical next steps or pages to peruse.
Yes, but it can get a little tricky. Every chunk of content created in Drupal is saved in a database as a node. What is interesting about nodes is that they can have different ways of using the same content. You can have a page title that is different than the menu title which is different than the page URL. The database doesn’t care what that chunk of content is as much as what the node ID is. Therefore, you can add references to pages multiple times in the menu as long as you point to the correct node. The cool thing is that if you change the page title or even the page URL and because you used the node ID, the web browser will still go to the same page. To adjust menus, you need the proper permissions and will need a one-on-one lesson with me to discuss the menu structure, parent-child relationships, and other fun topics before I can grant you new superpowers.
In the Drupal 8 admin, you may have noticed that there are two kinds of pages listed as a content type and wondered what the difference was. The first things we should talk about are components. Components are special blocks of content that are added to a page. That content might be an accordion, a carousel, or maybe an image tout. A landing page can use all of the components shown on our Drupal 8 style pages here and here. A basic page is not nearly as fancy and can show only a few of those components. Eric, our web team lead, uses the concept of bites, snacks, and meals to help direct the user to their intended destination. Sadly, people do not read websites as much as they skim them. The landing page should be filled with bites that will entice the user to click deeper into the site. If they want a full meal of content, the basic page will satisfy them.
A PDF (Portable Document Format) is a file type commonly seen on the internet. Many devices can display them although they may not be legible on phones with small screens. PDFs are based on printer instructions so they look almost exactly as they would if you printed them. Fonts and images can be embedded but that doesn’t mean that you can edit them easily. If you need to make a change, you need to use your original source document and create another PDF to replace the old one. Google can index a PDF but most are not exported with search engine optimization (SEO) or accessibility in mind. Savvy users may not trust PDFs as they can contain small bits of malicious code that can exploit vulnerabilities on a device (such as opening windows in web or multimedia browsers). PDFs can even have other PDFs embedded in them that may be troublesome. Beware, my friends, not every PDF can be treated the same.
Through the magic of Google Analytics, we (your friendly neighborhood web team) can tell you many things about your visitors. Not only how many visitors, but where in the world they visited the page from, what website they came from, what device they were on, and more. We can also tell you how long they stayed on the page and if they went to any of your subpages. When a user wanders around the internet, they leave digital footprints in their wake. You might think that you have a page that is well-loved only to find a smattering of folks gander at it. We use Google Analytics to help us make design decisions to best serve up what the user is looking for. When you make a page, think about its purpose and what you want the visitor to get out of it.
We work in crazy times and some of us just keep plowing through without much thought of our personal wellbeing. If you work in front of a computer for hours on end, I suggest you do one simple thing. Every 20 minutes, stand up and look at something 20 feet away for 20 seconds. Realistically, we are not “working” for one minute an hour but it can greatly reduce fatigue, eye strain, prevent possible migraines, and a host of other sedentary maladies. Getting your blood flowing and refocusing is a simple trick to keep yourself healthy and sane (or as close as we get, considering the situation).
Since this is the season for giving and holiday gatherings, you might be wondering how to share your events with the Loyola University New Orleans community. If you have logged in with access to our main domain (loyno.edu) you would go to the main menu and go to Content > Add content > Events. I know I say it a million times but anything with a red asterisk is a required field and if you do not fill it in, the content will not save. You have to enter the start date and the end date even if they are the same day. You can add images but they are not required (a random color will be assigned to the background behind the title). There is an “Event Type” Field that must be filled that is used for sorting on various calendars. Be sure to change the “Save as” drop-down at the bottom of the page to “Published”, hit the “Save” button, and viola, event posted! Send me an email if you think you need access to make events. (And don’t forget to submit your events for inclusion in At a Glance, too.)
As you can imagine, I have hundreds, maybe thousands, of passwords. Getting into secure places requires you to remember a crazy password or use an application to keep track of all of them for you. Computers are smart and can break a password like “P@55W0rd” in seconds. Instead of a password full of numbers and strange characters, I suggest you start using passphrases. A passphrase is an entire phrase, sentence, or statement made of four to ten words. “I love my 2 dogs, Chips and Salsa!” is an excellent passphrase. It has capital letters, a number, and punctuation. Isn’t that easier to remember? How about some other examples? “The Beatles sang 8 Days a Week.” or “Who would like a 3rd slice of pizza?” are both incredibly secure. It would take a computer 4 hundred quindecillion years to crack the stupid pizza passphrase.
The quick answer is nope. You might think that because you entered a password at your local coffee shop, you are safe, but weirdos on that same network can see all the weird things you are looking at. There are ways to enjoy your minor caffeine addiction and poor browsing choices while protecting yourself from “cybercriminals”. Pay attention to those little locks in the URL bar. Sites that are secure have little padlock icons and the addresses all start with the HTTPS protocol. If it doesn’t have a lock or it starts with the HTTP protocol, it is visible to those who want to see it. You might want to get yourself a VPN. A VPN (Virtual Private Network) acts as a mask. It can hide your browsing and personal data by creating a personal private network while you are on the public network. Make sure you trust your VPN provider because they can see the traffic you are trying to hide from the rest of the world.
You may think of cookies as a delicious treat usually made with more butter and sugar than one should reasonably consume. But since this is a tech-related column, today we will be referring to a different type of cookie. When a user visits a website in a browser, a small text file with some data is created that is called a “cookie”. These cookies are built to personalize your browsing experience by saving information about your session (the time you spent on the site). Login information, preferences, and what is in your shopping cart might all reside within the cookie. There are many kinds of cookies. Session cookies are never written to the hard drive. Persistent cookies track multiple visits to the same site and make it more likely that you will be served up pages of particular interest to you. Cookies are not inherently dangerous, as they cannot install malware or infect your computer with a virus BUT there are real cookie monsters out there. Third-party cookies are generated by websites different than the page you are viewing (think about the ads on a news page). They can track your history as you move from page to page and site to site. There are even zombie cookies out there that are permanently installed on your computer even when you opt-out of receiving cookies. If you remember my previous column, you can mask your web experience by using a VPN so that the remote server poses as you. If, like me, you have a teenager – you can review previous cookies by going to the preferences of your web browser. Prepare yourself, all those cookies could give you a stomachache.
Perhaps you are looking at your website and seeing something old, misspelled, or suffering from poor grammar and are wondering what to do next. Log into the website admin (contact Brian if you need access) and fix those grammar and spelling issues. Update any incorrect information with the current and correct content. If the information just isn’t relevant anymore, do not delete the page! You can remove a page by unpublishing or archiving it. Be sure to look for links from other pages that may point to that removed page. Decide if those pages need that link removed or pointed to a different page. Keep in mind that each department is responsible for its own content and your lovable but gruff web developers may not know that something needs modification.
I have some tips to make your time Googling for things on the internet more satisfying. If you wrap quotation marks around your search terms, Searching “Crawfish Mac & Cheese” on Google will return results that have the exact phrase “Crawfish Mac & Cheese”. Let’s say that you want to search for saints but you want to exclude results about our local team, use a dash. Saints -football will return football-free results. If you use a tilde, Google will search using synonyms. Cute ~dogs will return cute pups, cute doggies, and cute pooches results. Now say that you are searching for someone on a specific website but can’t remember their last name. Try searching for me on Loyola’s website by using site:loyno.edu Brian. What will you search for?
Way back, when you were young, and History class was called Current Affairs, you may have had a typing class. You proudly sat in front of a minty green IBM Selectric typewriter, clacking away on those keys and adding two spaces after a period. Friends, I need you to stop it. Modern typography has evolved and the brilliant computers that you use nowadays take into account the space after a period. Look at the words you are reading now. Silky sentences separated using the power of technology. Not a double space to be found. When I am updating pages, I will frequently find an unusual character following a space in the code. The odd character is “ ” which is a non-breaking space. I can make you look 20 years younger by removing them. Cheaper than hair-dye.
My personal Space War continues. Have you ever uploaded a file to Drupal with spaces in the title? Did you have to send a link to that file to a colleague? Did it have gibberish “%20” instead of the spaces? Welcome to the wonderful world of web encoding! Sadly, in the Tower of Babble that is the internet, strange characters (accents, hashes, slashes, and more) can get thrown out or replaced. It is best to replace spaces in your file names with either a hyphen or an underscore before uploading. Most operating systems are case-sensitive; consider always using lowercase letters. You can benefit from easier searches with consistency and predictable patterns. Be descriptive and include the date of creation and a version number if applicable. “snack-calendar_02-09-2022_v3.pdf” is an example of a filename that uses no spaces, tells you what it is, when it was made, and that it is on its third revision. A file uploaded named “Client Revision #2 final NEW updated FINAL.doc” is not easy for anybody to identify, much less retrieve, two years from now and I have personally seen much, much worse.
If you have used images on your web pages you have probably added seen the file extensions I mentioned in the question. You why you might want to use one file type over another based on what the image looks like. All of these file types have strengths and weaknesses and they all compress differently. A .gif is amazing because it can be animated and have transparency but it does that by reducing the color palette to a measly 256 colors. A .jpg is the type of file you want to use for photos. They compress by having a greyscale version of the image and an algorithm applied to the color. If you have ever seen a photo that looks like lumpy potatoes but they are not a pile of spuds, most likely the person chose too much compression when saving. A little compression goes a long way with a .jpg so consider saving your photos at around 85% quality. Images saved as .png are really interesting as they can have real transparency and are considered a lossless format. Unlike when you save a .jpg and it throws out information, a .png looks at an image from up, down, left, and right to determine the best way to compress all of the information. You would mostly save logos or graphics with large flat areas of color in the .png format.
A healthy dose of skepticism can save you from getting caught on the net. The term Phishing comes from bad people using sophisticated email and internet lures to “fish” for a person’s personal or sensitive information. Vishing is the voice equivalent, and Smishing is the SMS version. Here are a few things you can do to make yourself harder to catch. 1. Do not use the same password for multiple accounts. There are password managers out there to make your life easier, so you only have to remember one super-secret password (which you will never divulge) to get to all of your other passwords. 2. Don’t open email attachments from people you do not know, that you didn’t expect to get or ask for. Heck, I don’t even open attachments from my in-laws. 4. Don’t reply to emails that seem strange or out of character. Give your friend a call or a text to confirm they haven’t bonked their noggin. 5. Did you sign up for those sweepstakes you just won? You are already lucky enough to get these tips and tricks, so I doubt you need to win any other weird, unsolicited prizes. 6. Do you take online quizzes like “What kind of dessert topping am I?” or, worse, overshare on social media? Big data might know who you are based on what your high school mascot was (the Fighting Ferrets?) and the name of your first pet (Smooshy the Slug?). Sadly, those are also security questions to get into your bank account. Besides, I know as a dessert topping, you’re something sweet for reading this far.
URL stands for Uniform Resource Locater. It is an address to find things on the web. This is what happens when you type in a URL. Type, type, type. You just typed “example.com” into your web browser. Your web browser looks up the IP address (Internet Protocol) for the domain name (example.com) via something called a DNS (Domain Name Server). Now your browser has the address as a crazy string of numbers. It knows where to go and sends a request to that web server (a computer whose job is to send out web page resources) and the server sends back a response. Your browser starts rendering the page and then starts requesting other URLs that appear in the webpage (images, scripts, and style descriptions), and the server responds and supplies the requested information. This back and forth can continue for a while, and your browser may have to get other resources from other web servers (things like ads or Instagram feeds) or may refine what the browser shows based on things you do on the page. The reason for this post is to inspire those back-and-forth conversations with your Loyola web developers. What do you need? Maybe we already have that resource.
One of the most common issues responsible for a slow-down to your web pages is using images that are way too big. If you have a camera phone that can kick out an image from its 8MB capture card and upload it to your site, the person viewing your page is also downloading that 8MB image. If they are paying for data, they are not only waiting for superfluous data but it is costing them real money. It is better to resize that photo down for the website. You do not need Photoshop. I suggest you try Resize Pixel as a free online service. Click the green “Upload Image” button and get started. There are a variety of tabs on the left that allow you to resize, crop, mirror, rotate, compress, and convert. It will show you a real-time preview of your changes. I did an experiment where I took a photo from my phone that was 2MB and used ResizePixel to compress the image to 300KB (an 88% reduction in size while keeping the original dimensions) with no discernible difference! Don’t forget to add a description in your alternative text field in the admin for accessibility and search engine optimization goodness.
Mmmmm. Bacon. Is there anything better? Why yes, there is. Website revisions! In Drupal, most see a "Revisions" tab in the Admin but perhaps do not visit. This tab has the power to go back in time to undo mistakes that have been made. If you have been working on a page and hit save, a snapshot of that page at that time is saved as a revision. If you tried something out and it turned out to be completely wrong, simply hitting that revision tab will present you with a list of all of the previous revisions to a page. Select the previous version you want to appear on the page and hit the “Revert” button on the right side to publish that snapshot to the website.
Did you notice that the Easter Bunny came in over the holidays and moved all of the course descriptions? As part of the new LORA Self-Service, you will find a new interface to explore the course offerings here at Loyola University New Orleans. The old URL (courses.loyno.edu) now automagically points to the new LORA Self-Service, but if you have references to course sections on your web pages, they are probably incorrect. Here is the new landing page for courses: https://loyno-ss.colleague.elluciancloud.com/Student/Courses. From this page, you should be able to select a subject to filter the results. I chose “Chemistry,” and the URL bar at the top now looks like this: https://loyno-ss.colleague.elluciancloud.com/Student/Courses/Search?subjects=CHEM. You may remember that the text displayed for a link (the anchor text) can be different from the URL. As long as you capture the URL from the address bar, you can still have the text read as “Course Descriptions” while linking to a super-long address.
The easiest way to load your pages faster is to keep them simple. Adding tables and complicated layouts with custom fonts and scripts can grind a page to a halt. The next most important thing is to size your images correctly for the web. An image used for print uses vastly more information than a monitor does. Simply reducing the resolution DPI (dots per inch) from 300 to 72 will easily shrink an image file size by two-thirds. People with limited data plans will adore you for considering their wallets. Faster page loads impact your search engine rankings for the better.
Web pages can be ridiculously long. A user experience myth is that people do not scroll below the “fold,” a.k.a. the top of the web page that appears on the screen. If you have ever encountered a page with infinite scrolling, you will realize that it mimics social media. Facebook, Twitter, and Reddit have retrained our brains to scroll (or doomscroll, in my case) through volumes of content. Web Team Lead, Eric, uses the concept of bites, snacks, and meals. Landing pages should entice and direct users to the most relevant topics (bites). The subpage under the landing page should flesh out that topic but not overwhelm the reader (snack). The subpage under that subpage is the meal where you can serve up many courses of digestible content. Think about your user when putting content on a page. Having headlines that act like short topic sentences helps since most people skim content rather than read it. Structuring your content is just as important as having accurate information. Respect the user by being concise and consistent in your tone.
There are web pages with information pertinent to a particular year. Each year, they send the information to users, and the robots and spiders cruise the web for search engine indexes. Instead of creating a new page and wasting all that valuable digital equity, update the content on the same page and either push the old content down the page or simply replace it with the latest and greatest information. Again, the magic relationship of headlines and SEO meet on these pages. Let’s say I have workshops to teach folks how to wield a lightsaber (which I do), and I want to announce the next round of offerings. My H1 headline on that page would be “Learn to Wield a Lightsaber Workshops.” I would then have a paragraph describing what to expect in the workshops. Following that, I would have an H2 headline saying “Spring 2022 Lightsaber Workshops” with dates and times and sign-up information (always think about what you would like your visitor to do). If I had previously had workshops in the winter, I could keep the H2 Headline “Winter 2021 Lightsaber Workshops” but change the content below the headline with photos or videos from the events. That is using your digital equity wisely.
Before you build a house, you need a plan. The same is true for a website. Your goal is to get a user from your home page to the content they are looking for as quickly as possible. If your site is easier to navigate, Google has an easier time understanding your site and what people may be searching for. Your average user has zero interest in your internal organizational structure. Think instead about organizing your content into categories for what a user would want to do. Your second goal is to minimize the number of clicks between pages. Every webpage should be within three clicks of every other page. A third goal could be strategically linking to other pages from within pages. The trick is to amplify connections by having descriptive links that mirror the titles of the linked pages. Avoid vague “click here” links but give the user an idea of what they will see if they click (E.g., Our Creative Staff is a great resource for Loyola brand questions).
I receive, on average, 50 junk emails and 20 junk text messages every single day of my life. The spammers and the scammers are getting more sophisticated, and their attempts to misappropriate our personal information are more convincing than ever. Here are some simple tips to help you cope. Never feel pressured to give your personal information, especially if the contact was unexpected. Scammers impersonate people and businesses through calls, texts, and emails. Some messages are obvious. They have misspellings, poor grammar, and some because they get your name or title wrong. If you are unsure this is a real issue, go through the proper customer service channel or get contact information from the official website. IT would rather get an email about a potential scam than have to help you reset your passwords. Never pay over the phone unless you initiated the conversation with the vendor. It may sound crazy, but scammers have convinced people to go to the store and buy Amazon gift cards and read the information to confirm their Amazon Prime subscription. Scammers like to create a sense of urgency, so be wary of time-sensitive responses. Take your time and be suspicious. Is your Outlook email inbox 98% full when we use Gmail? Nope, watch out!
You may see a box in Drupal that says REAL-TIME SEO FOR DRUPAL at the bottom of the admin page. This module can improve the likelihood of your content appearing in search engine results. The form field labeled Focus Keyword should include a few words explaining what the page is about and reflect the page’s title. You may notice a section labeled Content analysis with a series of colored dots. This is where suggestions appear to improve your SEO. A green dot means that you have successfully met a Search Engine Optimization goal. Orange or red dots mean there is work to be done. Adding an image or a link to another useful page quickly bumps up the score. The most important thing to remember is that you do not need to get green dots up and down. The most important dot appears right below the Focus Keyword field. If it is green and says SEO: good, you have made beneficial content changes to be proud of.
Sometimes when you add a component to your page structure in Drupal, you may have found a form field labeled CTA and grimaced at yet another weird tech jargon acronym. CTA stands for “Call To Action.” It is another name for a button, but this button usually stands out in the component. Buttons and CTAs are useful tools to direct a user to another page. There are two important parts of any CTA, and the first is the text you want to see inside the button. You want buttons to set expectations for where the user will be taken. Avoid ”Click Here” and “More…” but instead, use helpful short phrases like “Download the Academic Calendar” or “Read our FAQ about Tuition Remission.” These buttons with better descriptors also increase your SEO (Search Engine Optimization). The second part of the CTA is the link. Double-check that the link works in a private or incognito browser if you send a user off-site. I have seen people link to Google Docs that do not have the share permissions set correctly, causing all sorts of misery for all involved.
On average, people read about 10% slower on a screen than on paper. People normally blink 20 times per minute but plopped down in front of a computer, that rate slows to 7 times per minute. The QWERTY keyboard was designed to slow down typing as the old mechanical typewriters would jam if typists were too quick. In 2010, a test race between a carrier pigeon with a USB stick and an internet upload occurred. The pigeon reached its destination 50 miles away in just over an hour, while the upload took over two hours. Sadly, our consciousness lags 80 milliseconds behind actual events. If you couldn’t tell, my internet has been obscenely slow this week, and if you have seen my wall of clocks, you know just how crazy I am feeling.