Website design & development proposal for

Rancho Cucamonga Library

Project Details

Project DescriptionThe goal of this project is to completely revamp the Rancho Cucamonga website so that it meets usability and accessibility standards. It will also become a tool for patrons to use as if the site were a physical presence and an extension of the library.

Problem StatementUsability is the major problem that is seen in analyzing the website. Here are some of the problems.

Navigation IssuesNavigation BarsNavigating through the site is an issue as it first identifies the architectural structure of the website. It is also the primary method by which a user navigates his/her way through the site. When it comes to rcpl.lib.ca.us, the website has three different navigation bars. The site does not have a clear focal point or starting place for navigation. The three navigation bars include:

The city of Rancho Cucamonga: This navigation bar shows everything that has to do with the city, most of which is irrelevant to the main focus of the page, which is the library. The menus, which open when hovering over the navigation bar, are large and cover half the page, causing users not to be able to see the rest of the site unless the user scrolls down. This becomes more of a burden when users have a smaller monitor resolution.

Sidebar navigation for library: This is not the main navigation bar. The user isn’t going to head to the top to see where to navigate. More than likely, the user will confuse library services with other city services. If a user clicks something, and it ends up not being what the user wants, the user will most likely leave the site. Clicking to the regular city site can also be confusing because the theme colors are different even though the site looks the same. Going from a green background to a purple one could make it look as though the user has gone to a completely different site. The sidebar itself is small and since it is layered, the secondary bar is smaller. Someone with an unsteady hand on the mouse could get frustrated when trying to click on the small bar line.

There are also some inconsistencies in how the sidebar is shown on the site. In each of the menu selections with a drop-down submenu, the first sub menu selection is the same as the previous menu.

1

Figure 1: Find Information

For example, when you click on the menu, Find Information, the submenu for Find Information becomes the new sidebar. See Figure 1. The new sidebar does not give you an option to go back home. For other menus like Adult, the homepage sidebar shows up, so that the submenu for Adult is still hidden until the user hovers over it. See Figures 1 and 2.

2

Figure 2: Find Information sidebar Figure 3: Adults sidebar

Another issue found with the sidebar is the fact that some of the links direct to external websites. A sidebar, or navigation bar, is supposed to help create a hierarchy of how the website is laid out. It should not have links to other sites. External links should be supplied on pages that reference the individual site.

Large buttons on the right: These buttons link to pretty much everything that is found on the left. It can easily be mistaken as two different pages because these links are in two different places. When users are given more than one option, they may have difficulty choosing which option is right for them. These should really be the buttons shown on the top navigation bar.

Navigation Bars Solution Solution #1: Take out the city’s navigation bar and use the library’s sidebar as the main bar.

Now the user only has one place to use to navigate through the site without being confused with links that can be irrelevant to the library and its services. The large buttons on the right can then be used as quick links for users who know where they want to go and want to get there in a hurry. The plan for the top navigation bar is to have each heading be a department and for each heading to be its own site in a multi-site network.

Solution #2: Revamp the entire sidebar so that the hierarchy is established, easy to read, and easy to navigate.

3

Improper Branding Issues

LogoStandard practice for websites is to have the company website logo in the top left-hand corner of the site. This is done with the heading of the City of Rancho Cucamonga logo, not the library’s logo. When clicking this logo, the site should redirect the user to its homepage. This heading actually directs the patron to the city site. If a user is typing rcpl.lib.ca.us, the user is specifically using the site for the library. If the user is searching, and decides to go back to the homepage, it should take them back to the library’s homepage, not to the city’s homepage. Any other variation could cause them to leave the site.

Logo Solution Solution #1: Remove the City of Rancho Cucamonga header and replace it with the library’s

logo. Change the link so that when a user hits the logo, it directs them back to the library’s homepage.

Solution #2: Change the City of Rancho Cucamonga header so that it directs the user back to the library’s homepage.

Address at Bottom of PageOne of the main reasons patrons use the library website is to find the location, hours, and phone number of the library. The library has two branches. Things get even more confusing when a third address is placed on the site. Internet users should be able to find the location of a building on the homepage. Typically, the user would scroll down and find the address to a place. The problem is that when the user scrolls down to the bottom of the library’s homepage, the user receives the address and phone number for city hall. Some might think this is the location of the library. It is not customary to have to click through pages to find an address, so having an Hours & Location page is useless if the patron does not click it.

Address at Bottom of Page SolutionChange the location and phone number so that it reflects that of the library.

Title TagsEvery title tag begins with Rancho Cucamonga Website. Since it is a citywide title tag, I’m sure that there are duplicates. For example, there are probably multiple pages with the title tags Rancho Cucamonga Website – Contact. Each page on a site should have a unique title. The branding should also be at the end of the title tag, after the description of what the page is actually about. If you are looking at the site through the browser, chances are you would not be able to see the whole title. Only a couple of words will appear. In this case, every page has the title Rancho Cu... This can confuse a user into thinking that every page is the same. See Figure 4. Would you be able to tell that these are four different pages just by looking at the title?

4

Figure 4: Window with four different page tabs: Hours & Locations, Volunteer, Calendar of Events & Find Information

Title Tags SolutionRevise the title tags so that the subject is in front of the branding. Also make sure there are not multiple pages with the same title tag. Contact – Rancho Cucamonga Website will still occur more than once. Change it based on what department, or whom, the page is for. For example, Contact – Rancho Cucamonga Library, and Contact – Animal Care and Services.

Target AudienceSince the site looks the same for every section of the library website, it assumes that the target audience is the same. However, as library staff working with the public can readily attest, a diverse set of patrons is served in the library, so every need will not be the same. There need to be at least subtle changes so that we can accommodate our target audience in each section of the site. Here are some of the audiences we can gear towards.

Children and their Parents: One way to cater to children and young parents is to make the children’s section a bit more playful, just as it is in the library itself. Wording for children’s pages should not be complex. More images can be shown here because children are more inclined to look at pictures than they are to read words. The changes do not have to be drastic, but could be something as subtle as making sure each heading has a playful font instead of Times New Roman.

Teens: The best way to capture the attention of teenagers is to engage with them. Most often, teenagers won’t have the attention span to read a website even if it looks nice. It is best to have a section where the library can interact with them. We can build a community with teens by offering Web 2.0 services like polls, book and movie reviews, videos, comments, and forums.

5

Adults: When speaking of adults, we are probably going to be talking about men and women, 18-55 years of age. They come into the library for information. We can provide this information in the form of FAQs, volunteer opportunities, book clubs, and computer tutorials. Their web pages can be a place that provides online resources, and links to things adults look for like jobs, the online EDD application, tax forms, etc.

Senior Citizens: Senior citizens’ needs are much like those of adults 18-55. A better way to cater to this age group is to enlarge images and slightly enlarge font sizes for pages that are relevant to senior citizens.

Patrons Who Don’t Use the Internet: People who use the Internet usually choose to do so because they either know how to, or enjoy figuring it out. People who do not know how to use the Internet tend to use websites only when they do not have a choice. Fortunately we do provide people they can talk to by phone or in person rather than going to our site. We do not have to make the site simplistic to cater to these users, even though usability is key.

Sharing ProblemsOne important part of engaging is allowing users to share, but this potential engagement is discouraged when the share buttons are at the very bottom of the page. Few users will read something and then scroll down to buttons on the bottom left-corner of the page to share it.

Sharing SolutionPlace larger share buttons within the content section, below the actual content.

Website GoalsBringing the National Medal Standard OnlineThe goal for the website is to reflect the same amount of care we put into our library. It should not be a site that is hosted just for the sake of having a website. The site should stand with the rest of the library’s programs, and our online presence should be up to the standards of a National-Medal-winning library.

Examples: There is a book club that meets at times during the month, so why not have a discussion forum where users of all ages can come together to discuss a book? What if our frequently asked questions were based on reference questions asked of us at the library? We could put story times online, computer tutorials online, job resources online, and anything else online that would better help our patrons. In marketing events, why not try to engage patrons with content, and not just a poster? It may not just be local patrons that are interested in our services. The web is worldwide. Someone in Chicago could be searching for, “How to attach my resume into an email.” Wouldn’t it be nice if a library gave him/her that answer? Wouldn’t it be nice if people went to a library for book and movie reviews and recommendations, rather than to Amazon? There are countless things that we can do with a website that haven’t been explored.

A Personalized ExperienceWhen you walk into the library, even though all parts of the building have a uniform structure, you know whether you have walked into the kids’ section, or the Teen Scene, or the Tech Center. Even though the building itself is the same, every department holds a different experience. That should be shown online also. Currently, there is no difference between the children’s section and the adults’. The

6

menu says “For Kids”, but is that part of the site truly designed for children? Slight changes to the site like different fonts in the headings could give people an experience to which they are more accustomed based on their demographic.

Content RequirementsShaving Some of the WordsSome of the content on the pages is too long. The Passport page has a lot of words, which requires users to scroll down to read. Efficiency is key with word usage to create good a first impression before the user exits the page.

Neutral Tone of VoiceAlthough the library is naturally excited about the programs and services that we do, chances are that not all readers will share in that same excitement. Exclamation marks are not an effective way to inspire enthusiasm. Also, adding exclamation marks to text makes it feel like one section of the page is more important than others. It is best to avoid them as we did when writing papers in college.

Getting Rid of FilesUnless a document is an actual form that the user must print out and fill out, it should not show up on the website as a file. All of our files should be rewritten as HTML pages so that people can either search the site using one of the keywords within the document, or find the page using Google. Files are not searchable. They also can increase the time spent loading a page because of the file’s size, a problem that is worse on mobile devices

Search Engine Optimization AuditAccessibility

Robots.txtRobots.txt – A Robots.txt file is a file on web servers that blocks web crawlers from viewing particular parts of a website.

Web crawling – the action in which a web crawler or robot systematically browses the Internet, typically for the purpose of web indexing.

Web indexing – the process of recording the content of a website or the Internet as a whole. Ex: Google is an index of websites that are searchable.

Make sure that the Robots.txt file for the library website isn’t blocking search engines from pages that need to be indexed, or allowing search engines to index pages that should be hidden. Although the Robots.txt file will not allow a search engine bot to crawl the page, this does not necessarily prevent the search engine from still having it indexed. See Figure 9.

Robots Meta TagsInstead of blocking search engines with a Robots.txt file, it’s best to use meta tags, so that the search engines don’t index or follow the links that are on the page. This would be ideal for admin pages, and other aspects of the site that shouldn’t be seen.

7

Figure 5: Robots Meta Tags

Since the library is working with Civica as the CMS, Civica should provide a place to import this tag when needed. If not, each page should have a <head> where these tags would be manually input.

HTTP Status CodesCheck the site for error codes. Pages with 404 codes on the site are blocked by the Robots.txt, which is incorrect. It should either redirect to a relevant page or leave it alone, if there is not a relevant page to direct it to. There are also links on the site that are no longer available. Some include the alsd.k12.ca.us site and the cde.ca.gov/rl/ll/ page.

Every redirection code should be a 301, not a 302. 301 means that the content has been permanently moved, while 302 means that it is a temporary move. A lot of the links on the site should not be redirecting, but should be changed to the exact URL to reduce redirection and page load. For example the link to http://www.facebook.com/pages/Rancho-Cucamonga-Public-Library/309244472511616 should be changed to http://www.facebook.com/rclib.

SitemapsThere should also be an XML sitemap that is generated and submitted to the webmaster sites of Bing and Google.

Site ArchitectureFlashiPads and iPhones do not support flash, Android devices do not support flash, and neither do search engines.

8

Site Performance

Figure 6: Google PageSpeed Score

The score given to the library’s homepage by Google’s PageSpeed Insights is just 63/100. The mobile version of the site (which is actually the desktop site being loaded onto a mobile device) is slower, at 52/100. According to Pingdom, the site takes about 3 seconds to load. This score is based on a high-speed connection, so when you take into account patrons at home with slow DSL connections, actual speeds may even be slower. Luckily Google provides some helpful hints on how to speed up the site.

Leveraging Browser Caching: Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from the local disk rather than over the network.

Eliminate render-blocking JavaScript and CSS in above-the-fold content: Your page has 22 blocking script resources and 13 blocking CSS resources. This causes a delay in rendering your page.

Enable Compression: Compressing resources with gzip or deflate can reduce the number of bytes sent over the network.

Optimize Images: Properly formatting and compressing images can save many bytes of data.

Prioritize Visible Content: Your page requires additional network round trips to render the above-the-fold content. For best performance, reduce the amount of HTML needed to render above-the-fold content.

9

Minify Javascript: Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time.

Minify CSS: Compacting CSS code can save many bytes of data and speed up download and parse times.

Minify HTML: Compacting HTML code, including any inline JavaScript and CSS contained in it, can save many bytes of data and speed up download and parse times.

Indexability

Google’s Site Index

Figure 7: Google's Site Index

It looks like Google has crawled about 200 pages of the library’s web site. If the number of pages indexed and the number of pages the library actually has are equal, it means that Google is crawling all of the pages successfully. If the index count is significantly lower than the pages the library has, it means that the site is somehow inaccessible to Google. If the index count is larger, it could mean that the website has duplicate content.

10

Figure 8: Google Has Found Duplicate Content

Figure 9: Duplicate Content is also Blocked Content

It turns out that the site has duplicate content, which happens to be pages that are blocked by Robots.txt. Not only does the site have duplicate content, but Google cannot access all of its pages, even pages that have been deleted from the site.

Page Search

Referring back to Figure 7, the top links shown are what Google has determined as priority pages. These are pages users land on when they want our services. It makes sense for the priority pages to be For Kids, the Archibald location, the Biane location, the homepage, and the Tech Center. Most patrons come to the site to sign up for story times, want to find out where we are located, or want to learn about

11

the computers, or the computer classes that are offered. Is there any way to make these priority pages more visible on the site itself?

On-Page Ranking FactorsURLsFor the most part, the URLs are short and are under 115 characters. The only problems are the calendar URLs where there are many dynamic aspects of the URL, which create lengths that are longer than 115 characters. Another problem with the URLs is that they are not separated by hyphens. Welcome-to-our-library is read as four words, but welcometoourlibrary is a spelling error. If it is decided to change the URLs, we need to remember to use 301 redirects from the old pages to the new pages.

The most important on-page ranking factor is keywords. We need to make sure each URL has a relevant keyword placed inside.

ContentIt is very important that the content on each page is engaging. It is equally important that there is a target keyword representing what the page is primarily about. Each target keyword should be unique for each page of the site.

Duplicate ContentDuplicate content is common throughout the city website. One reason is that the use of default.asp in the URL creates duplicate content. For example. http://www.cityofrc.us/cityhall/lib/default.asp and http://www.cityofrc.us/cityhall/lib/ are two links that point to the same page. There should only be one, and the most proper URL to use would be the second.

HTML Markup ValidationUsing the correct HTML tags is important in ranking. According to W3C’s Validator, the library’s homepage alone has 43 errors and 22 warnings.

TitlesThere are titles that are missing on the library’s website. Two of the most notable pages with missing titles are those that involve the virtual tours. They happen to be HTML pages with Flash tags embedded, but they can be easily embedded into a regular library page, so it does not look like a page with white space and a flash tour.

As previously noted in the Titles problem statement, there are duplicate titles, mostly because of the Rancho Cucamonga Website heading that precedes each page’s subject. The target keyword should be in front of the title. All of the following pages have duplicate titles: the Calendar pages, the Research & Information pages, the Homework Tools pages, all of the Contact Us pages on the city site, and all of the News Detail pages on the city site.

Meta DescriptionsNone of the pages have meta descriptions. These should be added.

Other <head> TagsMeta keywords were previously used to provide headings, but they aren’t used anymore. They are typically noted as spam, so we need to avoid them.

12

An important tag that reduces duplication is the canonical tag. The canonical tag tells the search engine that this is in fact the page that you want, and any other page with this URL, or content, is wrong. There are no canonical tags on the site, and these should be added.

ImagesMake sure all images have alt tags and that alt tags aren’t longer than 100 characters.

OutlinksA lot of the links that the site uses redirect, while others don’t exist at all. We need to make sure each link on the site has relevant anchor text, and that the anchor text holds a target keyword.

Other <body> TagsJust as when writing a paper (or a proposal), headings are important to guide the reader. Some pages such as the Director’s page do not have H1 tags. Many pages have duplicate H1 tags. The H1 tag is the main title of the page, and there shouldn’t be two of the same titles on one page. An H1 tag that duplicates is the “Follow Us” text far down the page on the left-hand side, which indicates that “Follow Us” is the main title of the page. Other pages such as Recommended Reading Lists also have duplicate H1 tags.

The H2 tag is a subheading. It’s good to have at least one H2 tag, and there can be more than one subheading for each H1 tag, but there aren’t any on the library’s web pages.

ConclusionWith many things that need to be done to improve the site, the website needs more of a refresh than a revision.

13