Thursday, December 16, 2010

News & Media Websites Using Drupal

Colleges using Drupal for their News & Media site:
University of Pittsburgh
http://pittnews.com/
Copenhagen Business School
http://cbsobserver.dk/
University of Puerto Rico
http://www.dialogodigital.com/
Cornell University
http://cornellsun.com/
Harvard University
http://thehvoice.com/
Olivet College
http://www.ocecho.com/
Stony Brook University
http://www.sbindependent.org/
University of Arizona - News
http://uanews.org/
University of Arizona - Calendar
http://uanews.org/calendar/day

Businesses or agencies with a Drupal-based News & Media site:
Trinidad & Tobago Guardian
http://guardian.co.tt/
Fayette, GA Citizen
http://www.thecitizen.com/
White House Press Briefings

Thursday, December 9, 2010

Mobile device accessibility using dropdown menus and mouseover/hover effects

Someone mentioned that "using mouseovers to reveal information is problematic on devices without mice, such as mobile phones and tablet devices like iPads.  On these devices, this page provides no way to see any descriptive information about the resources."

Does this mean that unless we create mobile versions of our site, mobile users won't be able to use the mouseover drop down menus on PC's new website?

The answer that accessibility really is not a problem for these devices. Proper dropdown menus are created using standard HTML, such as lists (ul) tags. The dropdown effect is usually done using a combination of CSS hover attribute and Javascript as well. This method makes it accessible for screenreaders, assistive devices, and mobile platforms. The NCSU library website uses Drupal. They use device detection to redirect iPods and iPads to the mobile version of their site (m.lib.ncsu.edu). Also take note that they are using mega dropdowns, and the links also work when you click it.

Other websites that don't have a "mobile" version of their site also seem to work fine with the iPad/iPod, such as:

http://econsultancy.com/us/blog/6058-how-do-e-commerce-websites-work-on-the-ipad (these dropdown menus work on iPad)

http://www.foodnetwork.com/ (these dropdown links go to that link's landing page instead of showing the dropdown, because these dropdowns are activated differently)

As you can see, there are different ways to slice the pie, but they do produce accessible sites that work on mobile devices as well.

Monday, December 6, 2010

Alumni Profiles

From Walden:

Name
Degree
Job Title before PC Degree
Current Job Title
How my degree helped me make a larger impact
Biggest benefit of earning a degree at PC

How I Did It
Degree Earned
What I studied
How I paid for it
How long it took
What else I was doing at the same time
when I studies
where I studied
Most challenging part
Best thing my family did to help me
what kept me motivated
highes tpoint
biggest change in my life since getting a degree
my next big challenge

Name
Current Job
Social Change Mission
How I'm making a difference
biggest benefit of my degree
why I chose PC
best advice received from a faculty members
favorite PC moment
words of wisdom

Words of Wisdom: "Succeeding at Walden takes the same thing that succeeding in life takes: organization, discipline, the right tools, and the right attitude."

Faculty Profiles

Question Examples from Walden University
What is the most exciting advancement in your field right now?
What are the benefits of a degree in your field?
What is the main thing you hope students take away from your classes?
What is the greatest lesson your student have taught you?

Could use Faculty of the Year in the profiles.

PC Library Website Redesign

The following websites illustrate some examples of features we like:
NCSU Libraries: http://www.lib.ncsu.edu/  (Prominent search box, clear distinction between library navigation and college navigation, mouse-over dropdown navigation in library nav. bar)
McIntyre Library UW-Eau Claire: http://www.uwec.edu/Library/index.htm  (Prominent search box)
U of A: http://www.library.arizona.edu/  (Prominent search box, mouse-over dropdown navigation in library nav. bar)
James Madison University Libraries: http://www.lib.jmu.edu/  (Prominent search box, Icons for some navigation)
UNC Libraries: http://www.lib.unc.edu/   (Prominent search box, Icons for some navigation)

Librarians Web Survey Responses:
What do you consider the main goal/purpose of our library website?
•    Provide quick/easy look-up for resources: books, articles, ebooks and media.
•    To enhance student learning.  This should be the goal of the entire PC website.  If we are truly a Learning College, then the entire focus of the PC website should be for learning.
•    To provide instruction on information literacy principles/practices  (citing tools, researching how-to guides/tutorials, etc.)
•    To provide services via an online platform (ASK a Librarian, instruction and L122/Conference Room/Campus Vista Room booking, material suggestions, ILL, etc.)
•    To allow for feedback on services/resources.

Why do you think our users come to the library website?
•    I think they come to our page reluctantly, so we need to make it as simple as possible
•    Looking for articles, books...
•    I think the main reason users come to the library's website is to help them complete course-related assignments.
•    To search for research information; To find out about library hours/facility;  ASK a Librarian service;  To book a room (instructors/faculty);  to submit an ILL (not many but some);  For citation guides (probably some instruction, too)

What do you like about our current website? (e.g. features, functionality, layout)
•    I like the clean layout and the use of icons.
•    Nothing jumps out to me.
•    I like the way the information formats are delineated. Some instructors provide format requirements (books, articles, etc.) which help the library user know where to go to start their search.
•    I like the Library quick links for details that aren't really a major resource necessarily but that complement or support the research process and/or use of the services the Library provides (Periodicals Title List, Request Forms, DBs by titles/subject, request forms)
•    The top navigational areas seem to hit the main reasons students/faculty might be coming to the web site (as they should):  Books, Articles, Research Help, Services, Classes & Instruction.
•    I also like the fact that it isn't too busy - the navigation is clear, the center newsy area is less prominent.  It is important to focus on key categories, because if a site is overwhelming with content (the main page especially), it can be hard for students to find things (lead to cognitive overload).

What do you dislike about our current website?
•    How restrictive it is
•    Lots of wasted space
•    The picture on the main page takes up lots of good real-estate
•    I dislike not having everything on one screen, I don't want to scroll. I don't like not having mouse over for Research Help, About the Library, etc.  I sometimes wish the Quick Links were in alphabetical order.
•    It looks outdated.  It takes too many "clicks" to get to information.  It's hard to use on a mobile device.  The main page has redundant information.
•    Don't like the way prime real estate is taken up by a large photo and the infrastructure of the PC site (the space and layout  is too limited).
•    Don't like the way it scrolls and shows the long list in the center of the page based on what navigation is like there once inside the site (or for whatever reason it does it).
•    I think the PC infrastructure takes over the identity of the page.  When on the Library site, one should be clear about that.  Those tabs at the top leading to all things PC and the PC Library identifier is too small.  While I understand the need for a PC presence so all their pages look the same (and students can easily see how to navigate to other key areas of campus), it should be less pronounced. It is important that students when at the Library site have navigation that keeps them there without confusion and that they see clearly it is the Library site.
•    The font is too small.
•    We need a better search mechanism for the site, preferably focusing on the Library web page(s). So, someone looking for citation guides can find them quickly, for example.
What functionality should our website contain?
•    Mouse overs and search on the main page.
•    Why should students have to click around until they can find a search box?  We should have a prominent search box (QUICK SEARCH) on our main page to our catalog, our top general article databases, our encyclopedias, etc.  We should have a mobile version of our website. We should have an immediate chat box, either through the Ask a Librarian pilot project or provided by PC librarians.  Also, we should solicit feedback from our students via our website (Web 2.0).  Our site needs to be more focused on learning.
•    We need a better search mechanism for the site, preferably focusing on the Library web page(s). So, someone looking for citation guides can find them quickly, for example.
•    We need a way to see what categories contain without having to commit to clicking on a link.
•    We need a quality one search product to complement our individual resources links (books, articles, etc.).
•    Any service we offer should have an online form supporting it (Reserves, One on One Library appointments, etc.. can't think of everything here but just to jot down the idea).

Sunday, November 28, 2010

Slideout Panels for Viewing/Expanding Content

Slideout Panels can be a useful way to feature additional content on a page without requiring the visitor to navigate to a different page. In short, it is frequently shown initially as a "tab" on a page, but there are unlimited ways of implementing content that "expands". The expansion usually occurs on "click". It could also expand on "hover", but since the content is actually "growing", it would probably be best to occur on a click action, so the user can have a greater expectation that a substantial change will occur.  This "expansion" behavior is also seen in advertising, where a flash ad will expand if someone clicks on or hovers over the ad.

Expanding content or panels are a little different than a "lightbox" style popup.

In a lightbox (see lightbox blog), the content  usually appears by "floating" in the middle of the screen, and the rest of the screen goes dark around it.

In a slideout panel, the entire panel usually grows by expanding along the top, bottom, or side of the browser window. Depending on the implementation and the page layout, the expanding panel may either overlap the page content, or the panel may "push" the page content out of the way (the "push" method would only work effectively with top or bottom panel placement). Generally, the overlapping style is more common. There is generally no darkening of the surrounding page content when this method is used.
http://web-kreation.com/demos/Sliding_login_panel_jquery/
http://jalbum.macosxsupport.com/
Slideout Panel vertical

Slideout Panel left

In expanding content, the expanding container simply grows its dimensions, usually in an overlapping manner. Again, there is generally no darkening of the surrounding page content when this method is used.
http://demo.tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/demo.html
Expanding content
Essentially, there many ways that JavaScript (and to be more specific, the Jquery library, bundled with Drupal), can be used to modify the display and provide a deeper level of interactivity with the end user. As always, a non-JavaScript alternative should be available for search engines and browsers with JavaScript disabled.

The Jquery plugins homepage should provide a good source of ideas and possibilities.

Saturday, November 27, 2010

Lightbox-style Popup Windows Useful for Viewing Thumbnail Content

Lightbox style popup windows may be a good solution for displaying large versions of thumbnail images or video.

For example, a small thumbnail image can be enlarged within a lightbox window, allowing content to be viewed at a larger size without having to navigate away from the page.

Small video thumbnails can also be displayed at full-size without making the visitor watch a tiny video, and without requiring them to visit youtube or another page. This could be one way to display videos on a program's web page if there is only room for a thumbnail size.

Examples:
Lightbox2
Fancybox

Multiple lightbox variants exist. Lightbox2 is arguably most versatile, with support for embedded images, slideshows, videos, web pages, iframes, and more—and has full Drupal integration. Another nice variant include Fancybox (apple-style),  
Some live examples and comparisons are: