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.

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: 

http://stellapower.net/content/lightbox2

http://videolightbox.com/

http://www.cinemablend.com/new/trailer-for-did-you-hear-about-the-morgans-14365.html

http://planetozh.com/projects/lightbox-clones/

http://drupal.org/node/266126

Alumni Page

http://www.southwestalumni.com/s/820/new/index.aspx

Faculty and Staff Page

http://www.wccnet.edu/for/faculty-staff/

Google Apps and Student Email Page

http://mymail.vcu.edu/

Fonts and Typeface

Current Site:
Phoenix College
11px/normal Arial, sans-serif
Titles: Times New Roman 18px Serif

New Site Recommend:  Verdana 12px for body  (line height 20px has a lot of white space around it)
Titles:  Georgia
Example:  www.Alistapart.com

RIO: 
Link Bar: 14px/Arial, Helvetica, sans-serif
Self-Serve Title:  20px Arial

Estrella
The whole page Body: Verdana, Tahoma, 'DejaVu Sans', sans-serif

Gateway:  Link Bar Verdana 13px (H1) 14px Verdana, sans-serif; (H2) Verdana 12px

AZ Central.com  Title: Arial, Helvetica, sans-serif

SERIF FONT
Examples of serif fonts are Times New Roman, Georgia, Book Antiqua, Palatino and Garamond. They aren’t heavily used on the web.

Suitable for the Web: Serif (Title): If you’d like to use a serifed font then Georgia is a popular choice. It looks nice, particularly at around 14 pixels.

SANS SERIF
Well-known sans-serif fonts include Helvetica (known as Arial on Windows), Trebuchet MS, Lucida Grande, and the ever-popular Verdana. All of these fonts are clean and will usually work well even at small sizes. Below is an example of text set in Trebuchet MS:

Sans Serif:  Verdana — it’s probably the most-used font on the web.  Helvetica/Arial and their variations are nice fonts, but are rarely specified as they don’t look quite as cool as Verdana. Trebuchet MS is nice, has similar spacing to Helvetica, and adds a distinctive edge since it is so rarely used.

Slab Serif:  Courier New, and Rockwell

Web Fonts compatibility chart (lists Windows/Mac font equivalents):
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Arial  
Arial (Verdana)
Arial (Tahoma)
Arial   (Trebuchet)

SKINS AND BACKGROUNDS

Blackboard Skin on the Blog: http://blogs.loyno.edu/students/