Technology development plan (June 2016) The technology development plan describes the requirements for this website. This document is intended to be used by developers and key stakeholders to verify the functionality of the website and serve as a guide for implementation. Interactive Mockup View the interactive mockup (mobile layout only), to see the basic layout of the website including user pathways to information and interactive ways to experience the navigation and website structure. Note: Not all content shown in the interactive mockup is part of the base level website, some items are additional features. For example How to take care of your home and garden in the footer under additional resources is an additional content feature. To see the full list of additional features, please see Appendix 7 for the Content outline. Functional Website Goals Content Management Systems & Drupal What is a content management system (CMS)? A CMS allows users, even with limited expertise, to add, modify and remove content from a website without needing a webmaster. What is Drupal? Drupal is the leading open source CMS for developing sophisticated, flexible and robust websites. Why choose open source solutions? Customization instead of re-invention: Most software problems have already been solved and freely shared, letting you multiply the effect of your budget. Cooperative advantage: The more brains, the better the solution, and open source software such as Drupal is developed by thousands upon thousands of people. Rapid innovation: So many people are working on open source software that the pace of innovation always outstrips even the largest company, and external innovations are quickly emulated by the open source community. Data freedom: You can always migrate data to another application. Security through transparency: All software has bugs that can be exploited, so the more eyeballs on a piece of software, the more secure it is, and the quicker a fix will be made. 1
What version of Drupal? Drupal 7 has been stable for a couple years, it has well-established and maintained modules. This version of Drupal is a solid choice to build a website. Drupal 8 core has recently been released. Not all standard modules used to build websites have been released for Drupal 8. Once a timeline has been established for this project, the website developer will evaluate Drupal 8 to see if the required modules are available. If they are not, we recommend developing in Drupal 7. The website s foundation Install and configure the current stable release of Drupal core and all required contributed modules. Adhere to best practices for Drupal development. Website Design & Theme This website will use Oregon State University recommended website design and branding standards. OSU s web design and branding standards are currently being reviewed and updated. The final version is expected to be available during the summer of 2016. Design of this site will be a part of the production phase of building the website and will include design using static images to establish the basic look-and feel of the website. Static designs will include: Homepage design for mobile, tablet and desktop One inside page for mobile, tablet and desktop Draft of OSU website standard design including logo, website name, and general look and feel (design in progress) 2
Draft of OSU website standard footer design (design in progress) Customizing the OSU website theme The OSU website theme will be customized to meet the specific needs of this website. Tools to update the theme include Bootstrap, CSS and SASS. Bootstrap is an open-source front-end library for creating websites. It contains HTML- and CSS-based design templates which allows web developers to use a variety of pre-established web components. It is a great starting point to make the website mobile friendly using responsive design techniques. Additional customization will be made with SASS. SASS allows you to create better organized CSS code by using variables, nested rules, inline imports, etc. CSS is used to customize the look-and-feel and interactivity of a website. Custom theme elements will include: 3
Navigation image carousels: The interaction of hiding the image carousels until the user clicks into this section will be handled by Bootstrap accordion or collapse feature. Responsive tables: The content in the pesticide risk tables will be displayed in a mobilefriendly responsive design table using a combination of Bootstrap and Drupal table features. User-driven navigation: Descriptions with links will be used with navigation so users know what they are getting (instead of one or two words they don't understand). Pictorial symbols will be also be used when possible for navigation. Content Types A CMS uses fields to store content (text, images, etc.). Each field stores a specific type of content, for example: Page title Latin name of a plant Image file Multiselect list Fields are grouped into content types. These content types can be used to create pages, navigation, etc. When content is entered consistently into pre-established fields/content types we have a system to make the website look consistent across many pages. This also allows for dynamic use of fields. For example, one could set up a search to look only at the field page titles. These are the content types identified for this website: Problem content type: Used to display information related to specific diseases, weeds, pests, invasive plants, etc. For example: Disease (e.g. powdery mildew) Weed (e.g. blackberry) Pest (e.g. mice and rats) Plant content type: Used for common problems with specific plants. This is can be used as a navigation page to expose common problems that affect specific plants or groups of plants. This section doesn t include weeds or invasive plants. Examples of the pages within the plant content type: Apples Pears 4
How to grow content type: Used to provide suggestions on how to grow plants. The link to this content is on the plant content type pages. Example of content: How to grow roses How to grow rhododendrons Pesticide risk articles content type: Used for information about pesticide risk. This content is linked to from the homepage under Pesticide Risk Management and there are links on appropriate problem content type pages. Example of content: How to keep your family safe when using rodenticide Basic page content type: This is for any content that doesn t fit within the above content types and doesn t require dynamic content, for example: Contact us About Us How to choose a pest control company See the Content Type: Fields and Functions Table. This table outlines all of the fields needed to create the above content types, the type of field (as defined by Drupal), and notes with additional information. Navigation & Taxonomy Drupal s Taxonomy module will be used to create the navigation structure for the website. Taxonomy provides a structure to create groups and a hierarchy of terms. Navigation items will be taxonomy items. Each main section is a separate taxonomy vocabulary. For example, one taxonomy vocabulary will be Household pests a second Animal pests, etc. Drupal s Term depth access module (part of Ctools) will be used to help manage different levels of taxonomy/navigation as some pages have three levels of navigation and others have four. Drupal s Taxonomy reference module will be used as part of the content type so the person entering content can select the appropriate taxonomy and manage the navigation. Set up a multiselect list for the Taxonomy reference, so one page can appear in multiple sections. For example, so the mice page, can display under both the Household pests and Animal pests navigation menus. The navigation will show as a page or block. 5
See the Taxonomy Table to see how the taxonomy will be used for specific sections of the website. The table includes taxonomy field names, terms, where each taxonomy set will be used, etc. Note: Please refer to the Appendix 9 spreadsheet for the most up-to-date list of page and section names. Ways to search A general search will be available to provide search results for text within this website. Search or browse by A-Z index (include photos where available): by problem pages by weeds by invasive plants by insects Ways to navigate to content Some of the problem content type pages will exist in multiple sections on the website. For example, mice (an animal pest), will display under the Household pests and Animal pests sections. Location of content Problem content type Plant content type Website sections Animal Disease Insect Weeds & Invasive Plants Household pests X (i.e. mice) X X Animal pests X (i.e. mice) Plant problems X X X Weeds and invasive plants X This means a single page may have multiple paths, for example: 6
/animal-pests/mice /household-pests/mice Supplemental information / Menus For supplemental information, only the info associated with how the user navigated to the page will display on the page. In other words, if the website visitor clicked, Animal pests to get to the mice page, they will see the Animal pests menu, but not the Household pests menu. Breadcrumbs Will create breadcrumbs to help website visitors understand where they are and navigate around the website. For example: Note: See Appendix 7 for a list of what content goes into which sections. Custom dashboard / administration tools Build custom dashboard with Drupal s Views module to assist in maintaining the website content. Dashboard will include a list of all content and provide features to: Sort by content reviewer and content owner (see Content Types: Fields and Functions Table) Sort by problem content type (diseases, insects, etc.) Export content as CSV and PDF Additional tools: List pages that haven t been updated in the past year List pages that haven t been reviewed in the past year Security Implement granular permissions, restricting access and functionality available to users based on their Drupal role. Optional website features Weed Identification Tool The weed identification tool uses visual cues from the plant to help the user narrow down their options, as website visitors may not know the name of the weed they are looking to address. To use this tool, a user would walk through a series of steps to identify the weed. For example they would: Select the type of plant (e.g., grass like, herbaceous broadleaf, trees and shrubs) 7
Select a representative trait* (e.g., fingerlike seed head) Choose the specific weed** (e.g., smooth crabgrass) Note: * For some type of leaves there may be two levels of traits before the page which lists specific weeds. ** The content for the specific weed page is part of the problem content type. Development of this content is part of the base website cost. The development of this tool would require: Hort team identifying leaf types and traits for all weeds Setting up taxonomy for each leaf types and traits Setting up navigation pages based on leaf types and traits Creating illustrations for each leaf type and trait Style: The look and feel would match the other illustrations created for the website Size: About 65 x 55px. Small icons for web (icons on inside pages may be a little bigger). See the attached mockup. Illustrations would be used for the first two web pages (gray boxes). Photos would be used for the third and fourth (since they are specific plants). Finding photos of the specific variety (this may be included in the regular weed page content development, i.e. problem content type") See the UC Davis Weed photo gallery for a rough example: http://www.ipm.ucdavis.edu/pmg/weeds_intro.html 8
Mockup of Weed Identification Tool Spanish-Language Integration Focus groups and our stakeholders have shared having the website content available in Spanish is a high priority. The goal: reach a broader number of Oregonians. From other online bilingual projects, we ve found the ability to easily switch between English and Spanish is highly valued. The easy transition helps facilitate conversation between English and Spanish speakers, creating an easy way to translate key vocabulary between the two languages. Both the English and Spanish speakers we spoke to about these projects said knowing even a few words in the other language made it significantly easier to communicate basic ideas without the stress of fluency. Planning for Bilingual upfront 9
It is important to know from the beginning if the website will include more than one language, because it changes how the website will be designed and developed. Retrofitting an existing website to be bilingual increases the overall cost of including a second language. User-friendly Spanish content If the goal is to provide robust resources for Spanish speakers, as well as English speakers, we recommend translating all of the content on the website into Spanish. This will make the website the most user-friendly for Spanish speakers. The website becomes less user-friendly when Spanish speakers have an inconsistent experience when browsing the website with some pages available in their language, and others not available. Design requirements: Spanish text is about 30% longer than English, so the final design will need to take this into consideration. This is especially important on the mobile version for fields with small amounts of content (i.e. image captions and navigation text). Design how users navigate between English and Spanish Technical requirements: Create additional fields for Spanish content and taxonomy (e.g. for the problem content type include additional fields in Spanish for the title, description of the problem, description of the damage, etc.) Create a system to display the website elements for the appropriate language (site name, menu, page content, footer, etc.) Create an easy way to navigate between English and Spanish content. Exclusions This plan does not include: Development for very small mobile devices. The smallest size identified for this website s content is 320 x 480 pixels. Development for smaller mobile devices, for example the Apple Watch would require development of a custom app to get usable content onto a device of this size. Testing website on out-of-date browsers that are unable to use standard modern programming. For example Internet Explorer 6. See Browser Testing in the Review Process section for information on browsers to be tested. 10