Once is enough


Published on

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

  • Be the first to comment

  • Be the first to like this

Once is enough

  1. 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