LS Web Design

22 September 2011

Simmons mobile stylesheet

In this morning's IUG list, Simmons shared their mobile style sheet and some hints. Since it looked fairly straight-forward, I played around with it for about 30 minutes in the staging directory. However, since it is in staging, I am unable to see the results on my cell phone because the student wireless network cannot get past that firewall.

I did test with the Opera mobile launcher software I have loaded and it did sort of work in that it took all the content and put it in a narrow column. However, it didn't get rid of the sidebar and what I was seeing was the full-catalog looking really tiny and in a narrow column.

Part of this is probably that Simmons is on rel 2009b and thus does not have the advance search toolbar token that we have in the skyline version.

Nonetheless, it may be worth pursuing at some point if we can get a mobile device that can VPN into ACCNet to test with. I will keep all the files (actually, there are only 2 stylesheets and one javascript file) and information in a folder with my backups of the live and staging catalogs.

11 August 2011

Update: Changing Style Sheets per ACC Web

See this blog entry for previous information:
http://lswebdesign.blogspot.com/2011_04_01_archive.html

In order to test LS web pages for potential issues with the 960 styling, I needed a way to identify all the pages that were linked on the site, i.e., pages that were viewable by the public.

I used a freeware site map generator (wonderwebware.com) to generate a list

I converted the list into an Excel spreadsheet.
I then broke apart the urls into

domain
folder and/or subfolder
file

I sorted by folder/subfolder/file to group things into recognizable units.
I color-coded to more easily identify potential problem pages to test.

After picking those files I thought might break using a new style sheet, I edited each file to change the linked stylesheet to MetaStyleScript-sub960.php and then saved each files as filename960.php

All files passed the test and I do not see any potential problems with applying the new stylesheets to the LS Web Site as per the process outlined earlier. (http://lswebdesign.blogspot.com/2011_04_01_archive.html)

The files tested:

14 June 2011

New Look Library Guides June 2011

===================================
New Look Library Guides June 2011
===================================
---------------
1 Styling (CSS)
---------------
1.1 Styling is applied by

1.1.1 custom coding
1.1.2 guide layout and colors edit option
1.1.3 page tab graphics

---------
2 Color
---------
2.1 Rounded page tabs

2.1.1 tabrightl-xxx.gif
2.1.2 tableftl-xxx.gif
2.1.3 text color (#24618e)
2.1.4 Base color
2.1.4.1 rgb(34, 147, 75)
2.1.4.2 #22934B

2.2 Graphics

2.2.1 Recreate graphics pixel by pixel to different color
2.2.2 tabrightI-greenshadelt4.gif
2.2.3 tableftI-greenshade50.gif

2.3 Content box

2.3.1 Header Color {rgb(98, 193, 115) #62C173}
2.3.2 Text Color (#183E59)

----------------------
3 Content/Layout
---------------------
3.1 Change first page

3.1.1 Nothing invites you
3.1.2 Make content what they are looking for.
3.1.3 Add eye-catching graphic
3.1.4 Add owner profile
3.1.5 Move Guides list to Get Help

3.2 Get Help

3.2.1 Use /genericSG/Get Help as linked page
3.2.2 Add Guides list to page

-------------------------
4 Create Test Group
-------------------------
4.1 Test custom header code

<style type="text/css">
#tabsI a { background:transparent url(http://library.austincc.edu/graphics/tableftI-greenshade50.gif) no-repeat scroll left top; }
#tabsI a span { color:#24618e; background:transparent url(http://library.austincc.edu/graphics/tabrightI-greenshadelt4.gif) no-repeat scroll right top; }
#tabsI a:hover span { color:#ffffff;}
.dropmenudiv a { color:#000000; background-color:#E1F2E4; }
.dropmenudiv a:hover { color:#000080; background-color:#C0E8C7; }
</style>

4.2 Test colors
4.3 Test graphics

-----------------
5 Deployment
-----------------
5.1 Get author permission
5.2 Find suitable graphics
5.3 Create copies to work on initially
5.4 Copy Get Help

5.4.1 from Examples to /genericSG
5.4.2 Make sure the boxes are linked to the Get Help on /createguide

5.5 Apply content changes to guides
5.6 Apply colors and codes to Library Guides group

12 May 2011

Preparing and deploying pages for Intersessions

Intersession Hours & Spring Break

When to post

Put tickler on calendar for 15-16 days prior to intersession
Post hours 10-14 days prior to intersession

What to create

Create (or modify existing) intersssion hours calendar
Create a What's New Blog entry

What to update

LIBRARY HOME PAGE

Link to intersession hours in What's New
Nullify Live Chat link

The topmenu bar on the home page includes a file which has the LiveChat linking script. You will need to rename two files.

(1) FROM topmenubar-home-chat.php
TO topmenubar-home-[HOLD]chat.php
(2) FROM topmenubar-home-SansChat.php
TO topmenubar-home-chat.php

CHAT LINK ON ALL OTHER PAGES

The top banner on all other pages is controlled by a php include topsection4.php

Rename topsection4.php to topsection4[HOLD].php
Rename topsection4[sansChat].php to topsection4.php

HOURS & LOCATIONS PAGE

Uncomment hidden code for link to intersession hours on /loc/index[intersess].php

Update link to correct intersession hours calendar

Place link to intersession hours in What's New section of LS homepage
When appropriate, make a link at the top of the LS homepage.
Leave a copy of the existing locations and hours page in their folders for after the break.

Rename /loc/index.php to /loc/index[HOLD].php
Rename /loc/index[intersess].php to /loc/index.php

ASK A LIBRARIAN PAGE

Update /help/ask-winter/spring.php

Rename ask.php to ask[HOLD].php
Rename ask[winter, etc.].php to ask.php

GET HELP! TAB ON CAMPUSGUIDE

Add a box with "ask.php" text for whichever break.

MOBILE WEB (http://library.austincc.edu/m/)

Create /m/index[Intersess].php with a DIV="Interess" which has the intersession hours. {Update as appropriate.}

Rename index.php to index[HOLD].php
Rename index[Intersess].php to index.php

Pages to load on LS web server

Revised home page
Revised /loc/index.php page
intersession hours page
Revised ask.htm
Revised /m/index.php

First day after the break

Replace pages loaded on server with original pages
Or, rename pages back to original names.
Reverse the instructions for "Nullify Chat Link" on Library Home Page
Remove intersession hours links on Library Home page
Remove the box on the Get Help! tab for CampusGuides

26 April 2011

Changing Style Sheets per ACC Web

Changing the LS Web Site style sheets
to dovetail with the ACC Web Site style sheets

ACC Webmaster has finally conceded that we can forgo designing for the 800x600 resolution monitors. Hooray !!!

In a couple of weeks, he will be publishing the ACC web site using 960px width style sheet.
Correction: He will be publishing the Faculty/Staff page soon using 960px width style sheet. Other pages will be changed during the summer. (4/26/11mp)

Note: We've been using 900px on all but the Library Home Page to accommodate our kind of content. (The library home page has been using a variation of the ACC stylesheet with its 768px width.)

I will be working on converting the home page to the new style sheet (csslayout-home.css). Then I can easily change the style sheet (csslayout-page4.css) for the other library web pages after that.

New note: There are some Spanish Language pages that we may have to look at separately. At least, we need to double-check these. mp 2/22/11

See the attached document on wiki page (http://acclswiki.austincc.edu/cm/wiki/?id=78591) which outlines and describes major division widths for the new library home page style sheet.

Major Divisions LS Home

container = 960px (whole page)
topsection = 958px (contains the banner)
main-content1 = 242px (contains the left sidebar with menu and rotating read poster thumbnails)
main-content3 = 575px (center of page with changing content [midinfo = margin-left=10px] and quick search boxes)
main-content4 = 239px (contains the right sidebar with What's New, Quick Links, ACC Online Services, Feedback)
footer = 958px (contains the standard footer information and links)

Notes as of 4/26/11:

Home page changes were made and are successful. Changes made:

csslayout-libhome-960.css created for the home page.
MetaStyleScript-home960.php created to link to the new css file. (Will be renamed MetaStyleScript-home.php when ACC deploys this summer.)

Changes for the rest of the pages on the LS web site:

csslayout-page960.css created for the rest of the pages
MetaStyleScript-sub960.php created to link to the new css file. (Will be renamed MetaStyleScript-sub.php when ACC deploys this summer.)

Review will need to be conducted to see what breaks when we changeover during the summer.

Some test pages to see what this looks like now: