[view:title] [page:title]
Giving views-generated pages from Drupal unique titles to improve site SEO
[view:title] [page:title]
One thing I discovered recently in my college’s Drupal 8 site was that the node number CSS class that used to be applied to the <body> tag was missing. In Drupal 7 there was a unique node ID class and it looked sort of like this:
<body class=”html not-front not-logged-in no-sidebars page-node page-node- page-node-8471 node-type-article news-newsreleases context-news”>
Having this unique node number CSS class was useful for cases when specific pages needed custom styles applied.
By default, Drupal 8 seems to add no such class to pages. To get them back I added a snippet of code I found on a Drupal.org post. I found it was easiest to use:
/**
* Implements hook_preprocess_html().
*/
function themename_preprocess_html(&$variables) {
if ($node = \Drupal::request()->attributes->get(‘node’)) {
$variables[‘attributes’][‘class’][] = ‘page-node-‘ . $node->id();
}
}
in my theme’s sitetheme.theme file.
There is also a Node Class module that might help accomplish the same objective, adding unique CSS classes to a page. It’s a simple module that allows users to add custom CSS classes to any node through the node/add interface.
After adding the snippet of code above to my sitetheme.theme file I was able to target a faculty profile page that needed custom styling. Previously, without a unique CSS class, there no way to target that specific page.
The Ohio State Drupal Users Group is having its March 2018 meeting in 141 Sullivant Hall (the Collaboratory) on Thursday, March 22, 2018, 3:00 pm to 5:00 pm. One of the topics of discussion with be Drupal site hosting, which will probably get into hosting on cloud platforms like Pantheon or Acquia. The university also runs a hosting service that’s available for Ohio State Colleges and Departments to use. The OCIO hosting service offers some Drupal-specific information about installing, backing up, and restoring Drupal 7 and Drupal 8 websites. In Drupal 8, drush commands can be used to create backups and migrate a site from a development account to a production account. Cloud hosting services, like Pantheon or Acquia, also offer DEv, Test, and Live (production) environments and methods to move (deploy) site data between them.
There is a Sullivant Hall Collaboratory and Rotunda Reservation Request form available that other groups from the university can use to reserve that space.
The Superfish module for Drupal 8 includes a multi-column option to create mega-menu style drop-down menus. Before installing the module be sure to download ver. 2.x of the Superfish library. Initially I had ver 1.x of the JS library and it didn’t have the styles for mega-menus.
‘.sf-multicolumn-column’ is one of the main mega-menu styles in superfish.css from ver. 2.x.
After installing the Superfish module I created a Superfish block in D8’s Block Layout area for my example site’s top-nav main-menu. In the Superfish main-menu block that I created I set the Start from depth to 1 and the to Levels to 2. See image.
Here are some other articles about using the Superfish module for mega-menus:
Creating a mega menu (multi column) as shown in the demo – From 2011.
Superfish Mega Mensu – From 2/18/13.
Caveat: It was noted that if a parent menu item does not contain any children it will break the Superfish columns layout.
How to create Drupal multi-column sub-menus (Megamenus) with Superfish – From 2013.
The ZT megamenu module is a another option for creating multi-column menus an has an alpha version for Drupal 8. I haven’t had the chance to evaluate this module yet. More site seem to be using Superfish so that method might be more standard.
Jon G.
Drupalcamp PA, happening today (7/30/16) at the University of Pittsburgh, is a great venue for learning more about Drupal, the open-source content management system. This morning there are a number of sessions about improving the editor/author/site-builder user experience. I was most impressed about what can be done with the Paragraphs module. CKEditor plugins are another option.
Creating Reusable Pattern Libraries with Paragraphs: http://www.drupalcamppa.org/session/creating-reusable-pattern-library-paragraphs
Great session about using the Paragraphs module to create reusable pattern libraries that can be exported to other Drupal sites. The presenter setup content types for Paragraphs and was able to export them to another Drupal instance using the Bundle Copy module. He covered how Atomic Design and planning applies to setting up content types for the Paragraphs module.
CKEditor is the preferred WYSIWYG of the Drupal community and is now in D8 core. From the presentation about CKEditor Plugins I learned that pre-made layouts of varying numbers of columns may be added to the editor and other plugins can be installed to improve the user experience: http://www.drupalcamppa.org/session/bringing-editor-experience-new-level-ckeditor-custom-and-contributed-plugins
Various other contributed modules from the CKEditor community may be used to improve the site builder/editor experience and improve their productivity.
Here are some online CSS tools that Drupal themers might find useful.
– CSS Box Model Tool: http://www.cssmatic.com/box-shadow
Allows you to adjust border radius, box shadow, and noise textures
– CSS Gradient Generator: http://www.cssmatic.com/gradient-generator
Allows you to build CSS or SASS gradients similar to as in Photoshop or other tools. Has a number of presets to start from.
Site visitors will be more likely to return to your website if the content is updated often. Site editors should review pages in their site for freshness at least once a month. If the site is large and time to focus on certain areas and review all content is short refrain from mentioning specific dates or months. For example don’t use phrases like “New for October 2007”, rather use more generic language that doesn’t make it obvious that the content may be out-of-date. To aid in organizing a site updating plan website author can create a frequency of update document or spreadsheet to keep track of when sections should be reviewed. Some areas may typically be updated annually or quarterly, the site editor can note these review times in their frequency of update document.
Keeping times and dates in a central calendar database is another strategy for increasing efficiency in content updating. In this method rather than having to edit every page that mentions a date they would just have to update it in one place. Content Management Systems (CMS) offer a lot of efficiency shortcuts by centralizing data and allowing it to be reused/placed in multiple areas. Some systems may also provide reminders to editors to update content after a period of time has passed. Site authors could also better manage content updates by keeping a special projects calendar with reminders. Many organizations have events that reoccur around the same times each year. These events may be added to a frequency of update project calendar.
Fresh content is key. If site author continues to provide meaningful content updated on a regular basis visitors are more likely to have a good impression of the website and the organization behind it. Conversely sites that are obviously out-of-date may leave users with a bad impression of the site’s company or organization and may influence the user’s decisions to buy, collaborate, or join the organization. For college and university websites if descriptions of academic programs or departments are out-of-date prospectives students may decide to look to enroll elsewhere. Websites are a great communications tool but they are most effective if the content is well cared for.
Many times in redesigning websites there is pressure to jump straight into the visual design and programming phases but spending time & effort in initial planning can improve efficiency and help the later work go more smoothly. Some of the first steps of the planning phase include site content audits, website strategy plans, and card sorting exercises. A content audit takes an inventory of the website’s existing content. As the content is inventoried some problem areas may stand out to web team members. Heuristics and review of site analytics can be used to confirm problem areas (structure usability problems, audience marketing problems). Website strategy plans outline specific web-centric strategies to meet the organization’s goals & business objectives. These planning documents also include details about metrics to measure the success of the strategies and approaches. In the post I attempt to further describe these early steps in the web development process and suggest some resources and articles for learning more.
One of the first things in a website redesign process that a web team should do is conduct a Site Content Audit of the existing site pages. “You have to know what you have before you can improve it”. A content audit and site inventory spreadsheet can be an important exercise in understanding what content is in the current site. As the content is inventoried in a Content Audit some problem areas may stand out to the team. These areas can be further analyzed through card-sorting exercises later in the phase 1 planning process. Heuristic knowledge of web design best practices and review of site analytics can be used to further confirm and analyze these problem areas later in the design process.
Conducting Site Content Audits resources & articles:
–Content audit guide and template: this article includes information about why an organization should do a website content audit and how it should be performed.
– Example content inventory spreadsheets
A Website Strategy Plan outlines specific web-centric strategies to address organizational goals and objectives and metrics to track the success. The website strategy document may consider and incorporate communications objectives and initiatives from the organization’s marketing department as well as business objectives from other departments. The exact scope of the strategy will depend on the client’s organization and what industry they’re in. For example a website strategy plan for higher education institutions may differ than those for commerce stores. The specific web-centric strategies to meet goals may go in-depth into technical detail as a reference to guide the web team’s work.
Metrics to measure the success of strategies can help project managers to decide if a particular approach needs improvement or is working well. Review of web analytic data on site visits may identify if approaches and strategies are working. Metrics may be more qualitative or quantitative based on the strategy statement and nature of the organization’s goals.
The Website Strategy Plan metrics definitions may describe the benchmarks for success in reaching certain target audiences. It’s good practice to define a primary audience to focus efforts on engaging. In the case of higher education institutions the primary audience may be prospective students, and organizational goals may be focused on engaging this group. The scope of work that organizations do may serve many different audiences so it’s good practice to allow think about strategies to reach secondary groups. In the case of colleges or universities secondary audiences such as alumni & donors may may identified and web-centric strategies developed to met the needs of those groups. To understand a typical person from an audience personas may be developed to sketch out their informational needs and online tasks.
Writing Website Strategy Plans resources & articles:
– Web Design for ROI: The book has a website strategy example and template here: http://www.wd4roi.com/bonus-materials.html
– A web strategy in 10 quite simple steps: This blog post includes information about engaging stakeholder from all levels of the client’s organization.
Card sorting exercises are used to test a verify the web team’s assumptions about the website’s information architecture, the site structure. As the content is inventoried in a Content Audit some problem areas may stand out to the team. Heuristics (web design best practices) and review of site analytics can be used to confirm usability & audience marketing problem areas in the site’s structure. For example if the analytics say that a certain area of the site is getting a high-bounce rate that may indicate that the section is confusing and site visitors are leaving. Once a problem area or section of the site is identified a Card Sorting Exercise is justified to help redevelop the structure of the section.
There are two forms of card sorting: open & closed. Open card sorting is for brainstorming when creating a new website from scratch or used if the whole structure of an existing site is deemed to be confusing to site visitors. Closed card sorting is used if the the site’s top-level categories are well agree upon and if the team just wants to test certain problem areas of the site. The higher-level categories are used as buckets to sort sub-page content below.
To confirm that top-level categories fit within norms for the client’s industry it can be useful to perform a competitive analysis of the website’s of other organizations. By comparing the competitor’s top-level categories in a competitive review spreadsheet the client & web team may grasp a better under standing of website navigation norms and section naming for that industry. Seeing top-level navigation schemes compared side by side may reveal common trends and good ideas in section naming. The results of a competitive review can inform the decide on whether to do open or closed card sorting. Site visitors may have certain expectations for using websites from a certain industry. For example, prospective students applying to a graduate program may have expectations on how they should be able apply online and what information about the school should be presented. Competitive reviews of college & university websites can help the web team get a handle on what is normal for an application process to higher education programs. Divergent areas that stand out, as compared to competitors, may be an indication that something is wrong with the existing site’s structure and justify card sorting in that area.
There are pros and cons to using traditional card sorting vs. software-facilitated sorting. if a sitemap outline can be automatically generated (from an outline) that’s more efficient than drawing one in Adobe Illustrator. If a spreadsheet of the website’s structure could be output from the CMS (content management system) that would help speed up a content audit.
Running Card Sorting Exercises resources & articles:
–Card Sorting: Getting the right results: this article describes old card sorting methods vs. newer digital methods (synchronous facilitated or asynchronous).
– Using Card Sorting To Test Information Architecture: This article describes when to perform card sorting exercises and how they can be used to test the web team’s assumptions about a site’s information architecture, the structure.
Get ready for Drupal Camp Ohio – November 14-15, 2014 – register today!