An overview of ways to answer the challenge of re-coding to add responsive design behavior to a website while operating under organizational design restrictions to maintain a standard, unmobile-friendly look.

1. Re-Coding for Responsive Design:
Tips, Tricks, and Traps
Alicia Virtue
Santa Rosa Junior College
February 19, 2014

2. Library Website Re-coded to Responsive Design
1) Add responsive design behavior
while making no visual change for
instructors teaching classes.
2) Add responsive design behavior
while making no thematic changes
to the “official” college look.
Design Restrictions

3. Column Behavior
Three column presentation
Adapts to single
column on handheld
3 column layout adapts to single column presentation on smaller viewports.

4. Column Behavior
How? …
2 column layout adapts to single column presentation on smaller viewports.
Two column presentation
Adapts to single
column on handheld

5. Media Queries Used to Control Column Behavior
Mobile Layout:
• The width of each column is established at 100%.
• The left margins of all columns are set to zero so that all column content
displays flush left.
Tablet and Desktop Layout:
• The width of each column is partitioned to 32%.
• The left-most column margin is set to zero so that the content will flush left.
The margins of the second two columns are assigned percentage values to
allow for fluid allocation of margin space.
Handy for Media Queries Examples and Inspiration:
http://nmsdvid.com/snippets/ and http://mediaqueri.es/

6. Page Layouts Converted to Fluid Design
Frameworks: Bootstrap, Skeleton,
Foundation by Zurb…
I used Dreamweaver CS6 with HTML5
Boilerplate. Its fluid grid layouts use
two elements to function:
• boilerplate.css: HTML5 Boilerplate
CSS with starting styles.
• respond.min.js: Support for fluid
layouts to older browsers.
Characteristics
• Dimensions are determined by percentages.
• Use media queries and CSS styles to optimize layouts at different resolutions
Start Mobile
Build layouts for each of the three starter sizes by working with the mobile layout first. Then
update the container positioning for the tablet and desktop layouts.

7. Adapted Menu Behaviors to Responsive Design
Problem: Buggy Behavior on iOS5
The first item selected in the dropdown becomes
activated instead of releasing the submenu items for
selection. This problem was first reported in 2011 in iOS5.
Top Navigation
Menu
Top menu
collapses down to
smartphone
screen size
Troll the Web for Samples
The dropdowns are an adaptation of scripts and
CSS shared by Tessa Thorton. Thank you, Tessa.

8. Landing Page as Alternate Navigation for Behavioral Problems
The Fallback Solution, for iOS5…
Give the user an alternative page to land on, with all navigation options available
for selection.

9. Menu Behaviors Adapted to Handheld Devices
Troll the Web for Samples
The jquery plugin for the boxtabs are an
adaptation of scripts and CSS shared by
ZoZo Tabs. Thank you, ZoZo Tabs.
Menu Behavior
Research Box menu
collapses down to
smartphone screen
size.

10. Graphic Presentation Adapted to Responsive Design: JQuery Plugins
Lightbox
presentation
of
photographs
Book
carousels for
library book
samplers
Rotating
image
slideshows

11. Lengthy Content Adapted to Responsive Design
Scroller relief! Lengthy page content collapsible for
easier scrolling.
Box Hop
Boxes resize to
viewports.

12. Lengthy Content Adapted to Responsive Design
Box Hop
Required 6
media queries
with different
box %
definitions.
Collapsing
Levels
Old code
repurposed for
new
application!

13. Problem, Problems, Problems…..
Not Responsive…
Just about anything we link to!
• Databases
• LibGuides (Coming soon)
• LibGuide Embedded Tools, such as RAPs
• The SRJC College Designated Moodle Theme
Yuk!
Text and visuals are cut off in
non-responsive design

14. Problem, Problems, Problems…..
Old Browsers…They’re Still Around
IE8: No support for responsive design.
(500 computers on campus running IE8….or lower!)
The Fix:
1) Use a polyfill to help create responsive design
functionality. See Paul Irish’s list of polyfills:
https://github.com/Modernizr/Modernizr/wiki/HTML5
-Cross-browser-Polyfills
2) Multiple sets of CSS for IE7, IE8, and IE9+ in various
instances. Not great…
Old Equipment: Class Projection Units
Campus projection units from 2006 display at the same resolution as an iPad: the
presentation designed for an iPad sized screen displayed on classroom display projectors.
The Fix:
Removing the device specification (min-device-width and max-device-width) in the media
query that governed the 1024 resolution.

15. Responsive Design Testing Online
Responsivator: http://responsivator.werstnet.com/
Matt Kersley: http://mattkersley.com/responsive/
Responsinator: http://www.responsinator.com/
Browserstack: http://www.browserstack.com/ Browserstack is the best, but
$19/mo for basic account
and $19/mo for responsive
design testing.
There are several more…

16. Responsive Design Testing Online….Sort of…
Online images are useful, but not truly accurate. Example: Responsivator’s rendition of an
iPad with 768x1024 (portrait) resolution is not accurate.
Ouch! Responsivator Faulty Prediction OK! Reality Check: iPad 2 Actual Screenshot
Special Features is hidden
Full size logo is used
Search box collapses
Images resize
2-column
Layout
not
shown

17. Responsive Design Testing Online….Sort of…
Responsinator is great for visualizing multiple displays and interactive testing. But, similar
accuracy problems…example: rendition of a Samsung Galaxy with 685x380 (landscape)
resolution is not accurate.
Responsinator Faulty Prediction Reality Check: Samsung Galaxy Screenshot
Ouch! Menu of boxtabs
appears to have crumbled.
OK! Menu renders properly.
Moral of the Story: Collect friends with different phones, tablets, readers, etc…

18. Jamaican Phrase: “Better Must Come…”
Things to think about:
• Convert legacy pixel typography definitions to ems
16 px = 1 em; 32 px = 2 em
• Watch for leaner, more flexible responsive jquery plug-ins and menu
options….more are being developed and shared on a daily basis
• Work with library and publishing vendors and partners to solicit responsive
design behavior of external resources commonly used on library websites
• Find/adapt/build responsive design for elements currently suppressed on small
displays (such as the hidden “Special Features” code we love that is currently
not responsive.)
This click …
Reveals these gems
above the header.
Not responsive, right
now…

19. Alicia Virtue
Electronic Services Librarian
Santa Rosa Junior College
avirtue@santarosa.edu