From smartphones to tablets, our customers are accessing our sites from a large variety of devices. Is your website ready? Learn how to design and build an appealing functional website that responds and adapts to the patrons’ demands. This session focuses on transforming websites so that a single design will adapt and respond to the user’s device. Explore using Foundation, a CSS framework, to craft an appealing functional design to meet your patron’s needs

1. Once is Enough- using responsive web design to fit on any screen
http://once.atyourlibrary.com Roy Degler, Oklahoma State University
!
Just to help you understand*
#
Since building from scratch takes too long
Using responsive web design to fit on any screen
@
let me introduce my friend- Yeti, from and appreciate Foundation,
%
Zurb.com, to tell you about FOUNDATION. I am going to show you 2 things.
The world was just zipping along Grids & Tabs
on the information highway. Art by S
ean Fortney
More examples:
I don’t have time
Libraries were building usable
and functional websites* to maintain all Foundation is a complete
these sites ! !
once.atyourlibrary.com
for our patron’s desktops. responsive design
framework built
by the developers at
ZURB.com
*Internet Explorer is whole another issue!!! Meanwhile, great minds* were working... *If you have any questions just ask
the guy with the dumb look on his face.
Suddenly , there was Ok, I’ll just make a simple “Responsive web design offers an alternative. By marrying
mobile site for smartphones! fluid, grid-based layouts and CSS3 media queries, we can Since this is a comic*, I can’t show Grid Structure
a whole new world! create one design, that, well, responds to the shape of the
you everything about Foundation. Using Foundation 3 code. <div class=”row”>
Tap
But I’ll tell enough to get started Notice the use of English!! <div class=”twelve columns”>
Tap
display rendering it.” and show how easy it is.
Tap
Ethan Marcotte BLUE
</div>
</div>
<div class=”row”>
<div class=”eight columns”>
First download Foundation
GREY (more examples)
@
Media queries from Zurb.com. Just use this </div>
allow the page to use QR code** <div class=”four columns”>
Cool I’ll just make different CSS style rules based RED
another site for tablets! on characteristics of the device. </div>
(e.g. smartphone vs. desktop). </div>
Tap
Tap
Tap
Fluid Grids using Rows and
Columns based on percentages Tabs
combined with Media Queries <dl> for tabs
to adjust size and position for *He doesn’t know it is really a poster. <dl class="tabs contained">
<ul> for content <dt>Search</dt>
the viewing device. **I bet you did not know Yetis spoke QR!
Crap, they keep introducing Converts for mobile! <dd class="active"><a href="#books">Books</a></dd>
<dd ><a href="#articles">Articles</a></dd>
new things and making all </dl>
kinds of changes! Scalable Images Special Note-
Tap Images are resized using CSS, There are several ways to get Foundation: <ul class="tabs-content contained">
Tap
Javascripts, and Media Queries. Standard CSS <li class="active" id="booksTab">Book Search</li>
Tap
Custom CSS (enter your colors) <li id="articlesTab">Article Search</li>
</ul>
SASS (for the more advanced)
*Check out these great books: Responsive Web Design by Ethan Marcotte Foundation 4 supports IE9 and above.
*On June 29, 2007 the iPhone was released. Foundation 3 supports IE8 and above
and Mobile First by Luke Wroblewski