NCompass Live - November 15, 2023 http://nlc.nebraska.gov/ncompasslive/ Developing a website that meets branding guidelines, prioritizes student-focused user needs, and caters to library professional user quirks can be tricky and, at times, downright impossible. This session explores redesigning a library homepage, including planning, building, implementing, and assessing a new library website. A robust resource list is provided to help start the redesign process, along with guidance on developing a unique website schema and layout. Conflict between university branding guidelines and EDU platforms is discussed. Attendees with zero coding experience, those with little to low budget for web redesign, and those from small libraries are all encouraged to attend. Presenter: Virginia Cononie, Associate Librarian, Coordinator of Research Services, University of South Carolina Upstate.

1. Redesigning
a Library
Homepage
Virginia Cononie
University of South Carolina -
Upstate
Associate Librarian;
Coordinator of Research
Vcononie@uscupstate.edu

2. 3 goals...
Discuss historical web redesigns
Demonstrate process, planning and implementing
Demonstrate technology resources (free)
Who is this for? Attendees who are low skill and high enthusiasm.

3. Technology Skills &
Experience
• Angelfire.com
• MLIS with focus on
Reference and Technology.
• Hired as reference librarian
and social
media coordinator (2013).

4. Library EDU
• Where's the library?
• So many clicks
• Disorganized
• Confusing
• Not mobile friendly
• Abundance of duplicate
information
Library Homepage
• Separate from EDU site
• Hard to find
• Disorganized
• No hierarchy/ no real
structure
• Prioritized library staff
preferences
Project Reasoning

5. Before Jumping in...
Terminology
•Library EDU - Main Site:
Hosted by University/ Institution
example: www.uscupstate.edu/library
•Library Homepage:
Hosted by Library, typically Library Guides
example: https://uscupstate.libguides.com/library

6. Websites through the ages
2004 (EDU) 2010 (EDU)

7. 2014
Library EDU
Began process of
1st redesign

8. 2014
Redesign
Schema

9. 2014
Redesign results are in...
Library EDU – Main site Library EDU - Subpage

10. 2015
Feb
Libguides
Homepage
Created

11. 2016
11/22/2016 09/15/2016
Library EDU – Main site Library Guides - Homepage

12. 2018 The University Redesigns Entire Site
Library loses
Top Navigation
Link

13. 2018 Library EDU – Main site Library EDU – Main site - Subpage
Library EDU
site page
redesign

14. 2019
05/26/2019
Libguides
EDU site
redesign
10/22/2019
Library EDU – Main site Library Guides - Homepage

15. 2020

16. Reasoning for
website
revamp
Pandemic isolation
New incoming Library Dean
New Shared Library Search Platform (SLSP)
General confusion with site cohesiveness
Need for mobile accessibility (bootstrap)

17. 2020
Sept
Library EDU – Main site Library Guides - Homepage
Status of
sites during
re-design
process

18. Pre- Project
Process
Lobby Lobby for Library redirect link or button
on EDU
Set Set a Project Timeline & Process
Check Check Current Website Analytics
Survey Survey Top 10 Subpages

19. Technology
Insight:
Learning &
Creating
Jump in
• Pros:
• Instantgratification
• Cons:
• Frustrating
Skill Build
• Pros:
• Experience
• Cons:
• Takes time and
restraint

20. Project
Process
Prioritize
Accessibility, Usability and
Searchability
Connect
Connted University Branding and
Library Homepage Design
Imitate
Find exemplary library websites to
imitate

21. 2020 Schema

22. Technology Insights
• Find a library to imitate, preferably one
that uses the same web hosting
platform as your library.
• Use the inspect tool and look at their
code.
• Reach out to others.
• Find the branding style sheet for your
university.

23. 2020
Library
Homepage
Redesign
Mock Up

24. Building New (private) Library
Homepage
• Begin: Using schema and mockup, begin building
homepage in Libguides "Groups."
• Codepen:
build code outside of library guides style sheet.
• ProblemSolving:
• Google problems
• Libguides Training
• Spring Share Lounge
• W3schools documentation
• Make personal cheat sheet for your repetitive questions/code needs

25. Technology Insights
• Lighthouse Extension for Google Chrome
• Connect with Accessibility/Disability
Services on Campus

26. Pause Project Process for...
Conversations with University Communcations
• F2F Meeting with Communications & Marketing Dept.
• Consider sharing your work or giving a brief presentation
• Provide proposed timeline
• Consider your Asks
• Will you ask for a direct link to your library homepage?
• If you can't get that, where will the link be?
• Do they have feedback on the branding incorporation?
• What are their concerns with the re-designs?

27. Resume
Project
Process
Plan Set your launch date
Ask Be open to anonymous critique
Launch Soft launch for feedback

28. Current EDU
Site

29. Spring 2023
Library
Homepage

30. Present
Library
Homepage

31. Regrets and Hindsight
W3schools sooner
Review libguides tutorials sooner
Seek student feedback
Seek technology assistance

32. University Website Future Plans
• New Site Launch (11/9)
• NotableDesign
Differences:
• Library nestled under
Academics>Academic
Services and Support
• New Logo
• TransparentHalf Nav
• No hover
• Spartanhub
• Return to previous design

33. Future Plans • Fall 2023 - Website
Audit
• Incorporatemore
accessibility features
• Pick up another
w3schools class
• Continue to lobby for
redirect, when
appropriate
• CSS/BootstrapWeb
development

34. DEMO
• Inspect Tool
• Make Changes to existing website
• Codepen
• Place code, analyze and format
• Lighthouse Extension
• W3 schools -
https://www.w3schools.com/

35. Resource Links
• Library Guides Training: https://training.springshare.com/libguides/cms-library-websites/custom-homepage-video
• Making Schema – MicrosoftVisio - https://www.microsoft.com/en-us/microsoft-365/visio/flowchart-software
• CodePen: https://codepen.io/
• W3: https://www.w3schools.com/
• Using the Inspection Tool: https://www.freecodecamp.org/news/how-to-inspect-an-element-chrome-shortcut/
• Lighthouse Extension:
https://www.elegantthemes.com/blog/wordpress/what-is-google-lighthouse-and-how-to-use-it
• Library Guides Accessibility: https://buzz.springshare.com/springynews/news-36/tips
• W3schools Accessibility - https://www.w3schools.com/accessibility/
• W3schools code for NavigationBar - https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp
• W3schools BootstrapBasic Template - https://www.w3schools.com/bootstrap4/bootstrap_templates.asp