Seven Deadly Sins of Websites

Notes from Computers in Libraries 2013 Workshop

75% Incoming students don’t know how to find research articles and resources

100% of the websites we looked at had at least one major usability issue

Guidelines: usability.gov

7 Deadliest Sins of Library Websites

  1. Does Not Comply with Section 508 of Rehabilitation Act: Section 508 of the Rehabilitation Act requires that all Web content be equally accessible to people with disabilities.
  2. Uses Unexplained Jargon: Avoid unexplained library jargon that typical users will not understand.
  3. Does Not Format Common Items Consistently: Ensure that the format of common items is consistent from one page to another.
  4. Does Not Maintain Visual Consistency: Elements such as colors, fonts, and content location should be consistent across pages.
  5. Does Not Organize Information Clearly: Organize information at each level of the Web site so that it shows a clear and logical structure to typical users.
  6. Does Not Establish Level of Importance: The page layout should help users find and use the most important information.
  7. Contains Cluttered Displays: On an uncluttered display, all important search targets are clearly visible.

Solution: Take advantage of professional development opportunities to learn more about technology in libraries.

15 Web Trends for 2013

Notes from Computers in Libraries 2013 Workshop

  1. Content first: Zeldman “Good design starts with content”. Example: apple.com, happycog.com
  2. Simplicity: nike.com, The City Library
  3. UX Centered Design: Think, draw, build, repeat
  4. App style interfaces: Feedly
  5. Responsive Design
  6. No skeumorphism
  7. Coding languages: HTML/CSS/JavaScript
  8. Fixed header bars: header and social icons
  9. Large photo background
  10. CSS Transparency
  11. Social media badges
  12. Infinite Scroll
  13. Homepage feature tour
  14. Sliding panels
  15. Parallax Design

These aren’t 2013 web trends. They have been around several years.

Top Tips & Tools for Video Tutorials

Notes from Computers in Libraries 2013 Workshop

Speaker’s book: Screencasting for Libraries by Greg Notess
Recommended software

Tips:

Keep it short
Show movement right away
Turn long texts into bullets

Screenr
Web based, required browser and Java
Limit to 5 minutes

Screencast-o-matic
Web based, required Java to run and play
Free version: 15 minutes max with watermark when export to YouTube
$15/year

Jing
Software download
Share at Screencast.com, but limited

Camtasia Studio
Software
Webcam
Many editing capabilities
Speech-to-text captions
SCORM

Hardware

Headset

Sound tip

sound interruption
close email sound
turn off phone

Best Practices in Mobile Development: Building jQuery Mobile Apps

Notes from Computers in Libraries 2013 Workshop

Link to phone number:
<a href="tel:1234567890">123-456-7890</a>

Google Analytics tracking sections of one-page jQuery Mobile
<script type="text/javascript">
$('[data-role=page]').on('pageshow', function (event, ui) {
try {
_gaq.push( ['_trackPageview', event.target.id] );
console.log(event.target.id);
} catch(err) {
}});
</script>

Speed Up Site Performance

Set HTTP Cache Headers

<VirtualHost *:80>
# Your config...
ExpiresActive On
<FilesMatch "\.(ico|gif|jpe?g|png|js|css)$">
ExpiresDefault "access plus 1 year"
Header unset ETag
FileETag None
Header unset Last-Modified
</FilesMatch>
</VirtualHost>

Gzip Web Server Output

<VirtualHost *:80>
# Your config...
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \\bMSIE !no-gzip !gzip-only-text/html
</VirtualHost>

Source: Faster Sites Done Faster

Further reading: Using a far future expires header

Change Server Upload Permissions

  1. Enter ssh username@mason.gmu.edu replacing username appropriately.
  2. Enter your mason.gmu.edu password
  3. mason> pico .cshrc
  4. edit to reads umask 022 or umask 002 (If other people in your group edit the website, change your umask to 002; If only you edit your website, change it to 022)
  5. Save the file (Ctrl+O) (letter O)
  6. File Name to write: .cshrc will display towards the bottom of the window. Hit enter.
  7. Exit the file (Ctrl+X).
  8. Run pico .profile and pico .login and repeat Steps 3 and 4.
  9. Log out and then log back in again.

Source: Fix Server Upload Permissions

Mason Law Homepage Updates

New updates on Mason Law homepage includes image slider, most-used links, tighter typography and full-width footer. On the front-end development, JavaScript is stripped down and CSS is completely rewritten using Sass for easy maintainability. Media queries were also reduced to fewer breakpoints to focus on mobile version.