One Program s Experience in Web Development

Size: px

Start display at page:

Download "One Program s Experience in Web Development"

Blake Lynch
6 years ago
Views:

1 One Program s Experience in Web Development Maryland Sea Grant Jeff Brainard, Assistant Director for Communications SEA GRANT WEEK, OCT. 10, 2016

2 What Maryland Sea Grant needed in a redesign of Make our useful and interesting content easier to find Increase traffic on and engagement with our website Display our videos and photos more prominently Empower more staff members to create and manage content on the website Integrate social media better

3 Planning the project: choosing a technology platform e.g. Drupal v. WordPress We chose an open-source platform for the long haul. Open source will be easier to maintain and improve after our IT manager turns over; a large community of developers are continually writing new open-source code for new functions. Drupal allows more flexibility to allow different kinds of page appearance, functionality. Drupal has better security (important if you have e-commerce on your site); less prone to functionality breaking when you perform required, routine updates to Drupal s core software. Drupal has a steeper learning curve to set up and maintain the back-end software. (But it has a relatively straight-forward front-end user interface.) Maintaining the website: You may be able to rely on a university IT staffer to perform the regular core Drupal updates. Or an outside firm might host your website and maintain the Drupal software under a managed hosting arrangement.

4 Benefits of a content-management system like Drupal: searching, filtering, automating Abilities to customize filtering and searching lists and sets of data: People don t like browsing through long lists of texts online. They want to quickly find relevant content. But a site-wide Google search of your content may bring up a mix of different types of content a news article, a topical webpage, an abstract of a SG-funded research project, because all relate to the same topic say, oysters. Drupal allows you to create Views to search and filter particular types of content. Examples on MDSG s website include Search Research Projects. You can also filter our list of former graduate fellows by the kinds of fellowships they held. You can construct many different views of the same data set. Like one that allows you to filter the fellows to show those with the same mentor. Or who held their fellowships at the same institution. The point is you only have to enter data about a particular fellow once in the Fellows content type and you can display and use it in different ways across the website. And you don t have to hand-curate some kinds of recurring links across your website, which gets harder and harder to do as the number of your webpages grows.

5 Planning: re-organizing and re-imagining your existing content We surveyed our website users through a pop-up survey-form window on our old website. N = only 59, much smaller than we would have liked. But this gave us some useful ideas. We looked at many websites including those of other Chesapeake Bay environmental organizations. How could we distinguish ourselves visually and in our content? Look at your Google Analytics data to see which existing webpages draw few hits; consider eliminating or consolidating these. We did a card-sorting exercise (see next slide). Per the Web Style Guide ( lots of good resources for thinking through logical, clean organization for your website ( Information Architecture ).

6 Card sorting: use stickies and a white board to play with putting different pages in different silos

7 Webstyleguide.com

8 Best practice for writing web content: Chunking text

9 Who did our website redesign MDSG hired a web development consulting firm, The Canton Group of Baltimore. The firm carried out both graphic design and back-end web development i.e. setting up the new website in Drupal. The entire project took about one year six months of preparation and six months of active work with the consultant/ contractor. The project had to go through our university procurement office an arduous process that required me (a non-it person) to delve into technical details and to oversee development of a list of technical specifications that the bidders had to promise to meet. When working with a consultant/ contractor, you must be prepared to oversee their work actively. Maintain to-do lists and a schedule rigorously!

10 Before: our old homepage (a.k.a. the junior high school yearbook photo)

11 After: our new homepage

Responsive design: increasingly, a necessity Responsive design: a website that is automatically re-sized and presented in a narrow version easily viewable on a mobile device (e.g. the image at right).

12 Responsive design: increasingly, a necessity Responsive design: a website that is automatically re-sized and presented in a narrow version easily viewable on a mobile device (e.g. the image at right). The navigation menu opens up when you click on the Main Menu button. Other elements of pages (e.g. right-hand column) automatically move to below the center-column content of your webpages. Responsive design will become increasingly important and necessary as more people consume information primarily on mobile devices.

13 Some key features that Drupal enabled Views Search Research Projects Search results link to a detailed view showing details of each research project, including abstract, PIER impacts, and resulting scholarly publications. This tool offers a way to search only MDSG s funded research projects. A Google search (including one using our website s site-wide Search box) would have brought up many results that were not research projects. Create Views Allows you to enter data once and have it automatically link to related pages across the website. The Featured Fellow box in right-hand column links to the fellow s detail view (see example here), which links automatically to the fellow s research project and a description of his/her fellowship program type. With one click you can feature a different fellow. Editorial content: What s New displays the most-recent entry for each of our multiple blogs and issues of Chesapeake Quarterly magazine. Featured Research Project Drupal allows you to customize the display so that a recent research project is automatically displayed on a webpage related to that topic.

14 Other considerations / tips Don t spend all of your time/effort perfecting the home page. Our home page looks nice but nevertheless gets relatively few hits compared with other, interior pages. People are Googling topics and clicking through directly to our webpages about those topics. So put as much or more effort into your main navigation menu and other features that appear on every internal page (right-hand column and footer). Consider using a secondary navigation menu to flag important links on your site. These may not be important enough to include in your top level of navigation, but they could otherwise become buried / invisible if located in your main menu s secondary levels. On MDSG s home page, the secondary menu is above the main one, in smaller (white) typeface, showing links to items like our Videos and Bookstore. I highly recommend a Topics A-Z listing like ours (also in our secondary navigation menu). It allows people to avoid browsing across all of your navigation buttons / categories to see the topics contained on the website. Many websites contain webpages on many topics, and including all of them in the main and secondary navigation categories would tend to make the menu look too busy and crowded. Use big bold photos liberally across your website to draw attention! (Video too.)

15 Use Google Analytics to evaluate your website regularly Some of the useful available metrics (GA offers definitions and tutorials for using these): Site traffic over all Page Views up, Time on page down Unique Page Views good and bad (you could draw more viewers but does it matter if they look briefly at one page and leave) Bounce Rate Geographic location of readers by city, metropolitan area, state

16 Questions? Feel free to contact me: Jeff Brainard Assistant Director for Communications (communications lead) Maryland Sea Grant University of Maryland College Park, MD

facebook a guide to social networking for massage therapists

facebook a guide to social networking for massage therapists table of contents 2 3 5 6 7 9 10 13 15 get the facts first the importance of social media, facebook and the difference between different facebook