Update: 3/17/14 -- Instructions for the first review of draft pages

Web Team First Exploration of the Draft Pages:

Caveat: 
The LS Web Site redesign is based upon a responsive design template created by Robert Ferguson, IRT Multimedia Developer.  All elements are meant to be responsive to the size of the screen you are using so that we do not have to have a separate mobile website.  (Note: The catalog will not be part of this redesign.) DEADLINE: 3/31/14

Please test on a PAC, on your iPad or other tablet, on your phone.

This exploration is for the purpose of determining content and arrangement on the home page and to illustrate what the next tier of pages might look like, there are examples:

• A simple information page
• A simple information pages to explore branding with logos like Know How
• A page to replace very long information pages with a printable more info brochure. (Note: We will use either this format or break the long pages into multiple pages.)

DRAFT HOME PAGE - WHAT TO LOOK FOR ...
What should be there and what we might change.  Before deciding, look at all the elements on the page:

• The Navigation Bar which will be on every page of the web site.
• Note: the Services menu cannot be any longer and display correctly but what is there is up for grabs.
• The body of the page.  Notes:
• The only element that isn’t up for review is the upper right column with the heading Overview.  This short section will be used to toggle changing information like alerts and announcements.  If there is nothing to announce, etc., then the overview info will occupy that place.
• I’ve consulted Adrian on the Find Books, Articles, Videos box.  I’ve tested some elements on whomever was handy as I was working on the section.
• The Footer which will also be on every page.

Consolidate your comments into two emails to the whole Web Team –

• one email about the Home Page; 
• another about your thoughts regarding next tier pages. 

We will take these comments and come up with a draft to use when testing with students.  Ashley and I will come up with a common testing method.

Progress as of 7 March 2014

Finished:

• Draft of home page design
• Drafts of next tier pages:
• Simple info page can be used for many current pages, e.g., gen-info or faqs
• Simple info page for Know How / Information Literacy
• Using the Know How logo on the left sidebar
• Longer page information
• Multiple columns looks too busy.
• If not multi-columned, pages are too long for new look.
• Longer pages like DL and other sites (ECS, Centers, etc.) often repeat information that already exists.
• Suggest linking to the info rather than repeating.
• Can create a print-friendly page with all the linked info on it.
• Created a footer to be used on every page.
• Created pertinent CSS to make everything work.
• Created standard "includes" files:
• header-home (for home page only)
• header-next (for all next tier pages)
• navbar (to be included on all pages)
• footer-LS (to be included on all pages)

To Do Next:

For week after Spring Break

• Create a draft print-friendly page example for long pages.
• Make all draft example pages comply with includes, etc.
• Pull into a directory for test groups to look at (LS Web Team right now)
• Create a launch page explaining Responsive design and what we should look for.
• Gather suggestion for links to add or delete
• navbar / footer (exception Services which has reached its workable length)
• content for different sections on the home page (exceptions Overview which is a section that will toggle with alerts, announcements, etc.)

For People Responsible for Page Content by end of March

• Create  a document template to illustrate where their input might go.
• Create directory/folder structure for them to see.
• Create a  pathway/process for input to be given to Web Team.

Progress as of 2/27/14

• Working with the IRT responsive template is proving to be good.  I am able to modify it to work for us fairly well.
• Used information from the HomePage links survey to determine what might go on the Navigation Bar.
• Finally figured out how to make the bar wider to accommodate 7 items instead of 6.
• Temporary drafts can be seen on http://library.austincc.edu/designtest.php
• NOTE: testing different things on different drafts so none really represent what the page will look like yet.
• Worked with a subgroup of the Banner subteam (Dave Wilson & Ashley Carr) to determine if a use the library icons might work for both IL and all LS web stuff.
• They like the idea so will work that into a draft for others to view.
• Ashley and Dave also gave me ideas about the place of elements on the home page and maybe subsequent pages.
• NOTE: will develop a subpage idea template to find out how subpage authors might like their information to look.  Need meeting with page authors.
• Currently working on an image slider for the Read Thumbnails. {See UPDATE}
• The IRT template has some slide code which I will test.
• I've also found a javascript slider code that provides randomness of display that I think might be a better solution. (http://www.javascriptkit.com/script/script2/randomslide.shtml)
• I've massaged it and it works in a separate html page.  
• Need to put into a responsive draft to test
• The issue of updating the code files when we add new images is a minor problem
• {UPDATE} Because of the testing we did with several people, Read Poster thumbnails will not reside on the home page but will reside in the left side bar on some next tier pages. The current php rotate script works just fine for this purpose.  Reason: Every person said that the thumbnails were too distracting and did not contribute anything in particular to the page.  See link to Read Poster gallery in the Nav Bar - About Us.

Adding Spotlight on ... and What's New Feeds to What's new area

Added the following Feed scripts to the What's New area of the library web site so that the text updates as new entries are added to the blog.  Note:  When needed, one can add the static blog url for a particular posting such as the reminder to watch your belongings. (http://lswhatsnew.blogspot.com/2013_06_01_archive.html) above the feed scripts.


<div id="feed-wrapper" style="margin-top: -15px;">
<!-- listing for what's new -->

<script language="JavaScript" src="http://www.feedroll.com/rssviewer/feed2js.php?src=http%3A%2F%2Flswhatsnew.blogspot.com%2Ffeeds%2Fposts%2Fdefault&num=1&targ=y&utf=y"  charset="UTF-8" type="text/javascript"></script>

<noscript>
<li><a href="http://www.feedroll.com/rssviewer/feed2js.php?src=http%3A%2F%2Flswhatsnew.blogspot.com%2Ffeeds%2Fposts%2Fdefault&num=1&targ=y&utf=y&html=y">View RSS feed</a></li>
</noscript>

<!-- listing for Spotlight on -->
<div style="line-height: 0.9em;padding-left:10px;margin-top: -10px;">
<p style="margin-bottom:-8px;font-weight: bold;">Spotlight on ...</p>
<script language="JavaScript" src="http://www.feedroll.com/rssviewer/feed2js.php?src=http%3A%2F%2Fspotlightaccls.blogspot.com%2Ffeeds%2Fposts%2Fdefault&num=1&targ=y&utf=y"  charset="UTF-8" type="text/javascript"></script>

<noscript>
<a href="http://www.feedroll.com/rssviewer/feed2js.php?src=http%3A%2F%2Fspotlightaccls.blogspot.com%2Ffeeds%2Fposts%2Fdefault&num=1&targ=y&utf=y&html=y">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;View RSS feed</a>
</noscript> </div></div> <!-- end of spotlight style end of feed-wrapper-->

Ay14 Redesign - Screen resolution

I'm working on page widths, etc. and decided to check for the most common screen resolution for web-designing.  So, I'll be designing for 1366x768 as a maximum size.

I found a very good site with comparisons for this year:

Best Screen Resolution to Design Websites
Last Updated: January 7th, 2014 |By Shaun Anderson
http://www.hobo-web.co.uk/best-screen-size/

This is supported by earlier web articles:

 W3 Schools - Screen Resolution Statistics
http://www.w3schools.com/browsers/browsers_display.asp

Statcounter Finds 1366 X 768 To Be Most Popular Screen Resolution For The First Time
By Donald Melanson  April 11th, 2012
http://www.engadget.com/2012/04/11/statcounter-finds-1366-x-768-to-be-most-popular-screen-resolutio/