Creating Responsive Web Pages with Bootstrap 3
Dana OuelletteInformation Services Librarian Concordia University College of Alberta
What I will Cover
- Responsive Design
- Why Bootstrap?
- My circuitous discovery of bootstrap
- Features of Boostrap
- Installing bootstrap
- Epic Fail!!
Responsive design
- design philosophy
- best possible user interface regardless of screen size
- Not really achievable until 2012
- W3C recommendation of CSS3 media queries
- HTML5
- oops I missed that boat! Why did I launch a site in 2013?
libraries have been relatively slow to responsive design. Concordia began it's redesign in 2011 and finished in 2013. The term responsive web design was coined in 2010 by Ethan Marcotte. Then 2013 was named the year of responsive by mashable. CSS media queries allows content to adapt based on screen resolution. I was about a 2 months away from launching concordia library's new website when i first heard the term but would have been irresponsible financially to start over. Then I launched the webiste and all i heard about was responsive design.
What is Bootstrap?
- Front End Framework
- Basically just CSS and JS
- Created by Twitter for Consistency in internal projects
- As bootstrap 2 has supported responsive design grids
Why Bootstrap?
- easy to use
- even for the non-developer
- perfect for small colleges without much IT support
- consistency
- complex responsive features and Javascript features with only basic knowledge of html and css
My circuitous discovery of bootstrap
- accessyyt 2013
- CRDB
- Needed consistancy
- Modern login forms
I actually had never heard about bootstrap until I went to the access conference in Newfoundland in the fall of 2013. 3 months after launching my site. I played around with it both during the conference and at my hotel. But hadn't quite figured out how to get it working well.
My first real attempt to use it was when implimenting the new CRDB.
Then I was asked by my boss to update our outdated looking forms and login pages.
Questions?
dana.ouellette@concordia.ab.ca