(1)

User Interface Frameworks:Twitter Bootstrap 3.0

Philip Johnson

Collaborative Software Development Laboratory

Information and Computer Sciences

University of Hawaii

Honolulu HI 96822

(2)

Objectives Learn basic concepts of web UI with the Twitter Bootstrap 3.0 framework

Warning:•Twitter Bootstrap 2.0 has many web-based tutorials.•Twitter Bootstrap 3.09 was just released, and is significantly changed from 2.0.

Be careful when googling about Twitter Bootstrap: most results (outside of official documentation) do not refer to Version 3.0!

(3)

What is a (web) UI Framework? A (web) UI framework provides a set of CSS classes and/or Javascript functions that:•Simplify the development of layout•Provide an attractive look-and-feel•Provide consistent results across browsers.

In contrast, a "web development framework" provides support for interaction.

(4)

Example UI Frameworks

(5)

Why choose Bootstrap? It's a very popular, well designed, open source UI framework

CSS wrappers for many Javascript components•modal windows, typeahead, tooltips, etc.

Mobile-first design•Bootstrap 3.0 is in the vanguard of responsive, mobile-first UI design frameworks

(6)

Why "responsive" UI design? There are currently three types of "hosts" for modern Internet applications:•Laptops

-operating system irrelevant (use browser)-normal size screens (~1280 pixels wide)-large screens (~2500+ pixels wide)•Tablets

-Two operating systems (iOS, Android)-typical size screens (~768 pixels wide)•Phones

-Three operating systems (iOS, Android, Windows)-small screen sizes (480 – 640 pixels wide)

(7)

Why responsive UI design? Solution 1: Code four "native" applications:•HTML, iOS, Android, Windows •That's a lot of work!

Solution 2: Code one HTML application that presents different UIs depending upon the screen size:•One "look" when in the browser on laptop•Another "look" when in the browser on tablet•A third "look" when in the browser on phone

(8)

Example : Disney.com

(9)

Why create a "native" application? Take advantage of a "native" feature•Plugin to Siri for voice-controlled interaction

Otherwise, responsive web design is the fastest path to an application that works well on laptops, tablets, and phones regardless of OS.

(10)

What is "mobile first"? Twitter Bootstrap is "mobile first", which means that no special coding is required to reformat the UI for mobile screen sizes.

If desired, you can alter Bootstrap's default approach to mobile display.

This is unlike other frameworks, where mobile is a "special case" and requires lots of customization.

(11)

Next steps Watch the tutorials.

Do the practice WODS.