Responsive Design Meets JFK

1960s images through modern technology

Created by Eli Zoller / elizoller.github.io
University of Texas at Arlington Libraries

TCDL 2014

1. The Project

2. What is RWD?

3. Bootstrap Introduction

4. What we created

5. Lessons Learned

The Project

"Howdy, Mr. President!"

A Fort Worth Perspective of JFK

"Howdy, Mr. President!"

companion online exhibit to the physical exhibit

focus on JFK's time in Fort Worth

Where to start?

Responsive Web Design

1. Creative Commons Attribution-Share Alike 3.0 Unported license to Zach Vega
2. This file is licensed under the Creative Commons Attribution-Share Alike 3.0 Unported license to Zach Vega
3. This file is licensed under the Creative Commons Attribution-Share Alike 3.0 Unported license to Sir Stig
4. This file is licensed under the Creative Commons Attribution 3.0 Unported license. Attribution: Matthieu Riegler, Wikimedia Commons

Why RWD?

  • 57% of American adults are cell internet users
  • 34% of cell internet users mostly use their mobile device to access the internet
Image CC-Attribution License from Gail's Flickr. Data from Pew Internet Study 2013

What makes it different from a mobile site?

So you want to do RWD?

Image CC-BY Attribution from Kristian Neimi

How?

  1. a fluid grid
  2. flexible images and media
  3. CSS media queries

One Solution: Front-End Framework

  • a pre-packaged set of CSS, Javascript, and HTML
  • to help make development easier and faster
  • aids with browser compatibility
  • rapid prototyping

Introducing Bootstrap

-open source front-end framework

-set of minified CSS, JS, and fonts

-12-column flexible grid layout

-pre-established user interface components

Pros of Bootstrap

  • pre-designed UI
  • highly customizable with CSS-preprocessor Less
  • compatible back through IE-8
  • built-in accessibility support

Cons of Bootstrap

  • Bootstrap sites are "bootstrap-y"
  • large file sizes- unused code

How to use Bootstrap

CSS

UI Components

JS

Finished Product

library.uta.edu/jfk

Home Page

Section Page

Individual Image Page

Lessons Learned

-RWD is the way to go

-Test, test, test

-Frameworks may or may not be the solution to your problems

Thanks for listening!

Made using Git, Reveal.js
Hosted on Github

Ready to get started?

getbootstrap.com