Photos by Trish McGinity

About Me

  • Web Architecture Consultant
  • Java Community Professional
  • Father, Speaker, Beer Lover
  • What Keeps me busy
  • Contact Information
    • www:
    • email:
    • twitter: @mraible

Legacy Design

Have you worked with an outdated design?

Sunset at Wash Park in Denver

My Experience

  • December 2011
  • Page Speed Project
  • UI Refresh Project
  • Bootstrap
  • Legacy Browsers

Best Practices for Speeding Up Your Web Site

  • Minimize HTTP Requests
  • Use a Content Delivery Network
  • Add an Expires or a Cache-Control Header
  • Gzip Components
  • Put Stylesheets at the Top
  • Put Scripts at the Bottom
  • Avoid CSS Expressions
  • Make JavaScript and CSS External
  • Reduce DNS Lookups
  • Minify JavaScript and CSS
  • No 404s
  • Avoid Redirects
  • Remove Duplicate Scripts
  • Configure ETags
  • Make Ajax Cacheable
  • Flush the Buffer Early
  • Use GET for AJAX Requests
  • Post-load Components
  • Split Components Across Domains
  • Optimize Images
  • Choose <link> over @import
  • Minimize the Number of iframes

Page Speed Project

  • YSlow
    • Staging got a B
    • Production got an F
    • Different Configurations!
  • Server Recommendations
    • Enable Compression
    • Add Expires Headers
  • Suggested Code Changes
    • Optimizing Images (25% savings)
    • Reduce HTTP Requests
        Combining JavaScript Files
        CSS Image Sprites
    • JavaScript at Bottom
Result: Improved page load by 50%!

Tilt 3D

UI Refresh Project

UI Refresh Spike

CSS Image Sprites

Themes with LESS

@link: #0087CC;
@linkHover: #0087CC;

@border: #608FAF;

@navbarBackground: #D6E7F2;
@navbarHover: #333333;
@dropdownBackground: #EFF5F9;
@dropdownHover: #D6E7F2;

@sidebarBackground: #EFF5F9;
@headerDarkBackground: #C3EEB7;
@headerMediumBackground: #D6F3CD;
@headerLightBackground: #ffffff;

@iconLargeYPosition: -263px;
@iconYPosition: -718px;

Themes with LESS: theme.less

@import '@colors';

a { color: @link }

a:hover { color: @linkHover }

.navbar div > ul > li {
    border: 1px solid @border;
    background-color: @navbarBackground;
    border-top: 0;

.navbar-inner {
    border-top: 1px solid @border;

Themes with LESS: Ant

<macrodef name="create-css">
    <attribute name="theme"/>
        <echo message="Compiling LESS files :: Creating '@{theme}' Theme"/>
        <copy description="Setup themes for processing" todir="${build}/themes">
            <fileset dir="${basedir}/web/css/UIv9/themes" includes="@{theme}-colors.less"/>
        <concat destfile="${build}/themes/@{theme}.less" eol="dos" force="no">
            <fileset dir="${basedir}/web/css/UIv9/themes">
                <include name="@{theme}-colors.less"/>
                <include name="theme.less"/>
        <replace file="${build}/themes/@{theme}.less" token="@import '@colors';" value=""/>
        <wro4j processor="lessCss" dir="${build}/themes" todir="${basedir}/web/css/UIv9"
        <delete dir="${basedir}/web/css/UIv9" includes="**-colors.css"/>

Themes with LESS: Ant

    <macrodef name="wro4j">
        <attribute name="processor"/>
        <attribute name="wro-file" default="wro.xml"/>
        <attribute name="target-groups"/>
        <attribute name="dir"/>
        <attribute name="todir"/>
            <exec executable="java" failonerror="true">
                <arg value="-jar"/>
                <arg value="../common/lib-ext/wro4j-runner-1.4.4-jar-with-dependencies.jar"/>
                <arg value="--wroFile"/>
                <arg value="@{wro-file}"/>
                <arg value="--contextFolder"/>
                <arg value="@{dir}"/>
                <arg value="--targetGroups"/>
                <arg value="@{target-groups}"/>
                <arg value="--destinationFolder"/>
                <arg value="@{todir}"/>
                <arg value="-c"/>
                <arg value="@{processor}"/>

Themes with LESS: Customizer

Browser Issues

  • No rounded corners or gradients in legacy browsers
  • Used jQuery.IE9Gradius.js for IE9
  • Had to add class="checkbox" to all checkbox labels
  • Many, many IE7 Issues: created ie7.css file
    • Used { zoom: 1; position: relative } for negative top margins
    • Used table-layout: fixed so td widths would work
    • Used position: fixed to fix nav width
Icelandic Road from Bus

Web Development

We face a lot of challenges

Web Browsers

Today's Web Developer

  • HTML5
    • Canvas / Semantics/ Storage / File Access / Audio / Video
  • CSS / 3
    • LESS / Sass / @font-face / Border Radius / Box Shadow
  • JavaScript
    • jQuery / Plugins / MVC Frameworks / Server Side JS / CoffeeScript
  • Server Side Languages
    • ColdFusion / Java / Groovy / PHP / Python / .NET / Ruby
  • DBMS
    • Oracle / SQL Server / MySQL / PostgreSQL
  • NOSQL Databases
    • Cassandra / MongoDB / CouchDB / Amazon Simple DB

Mobile Traffic will outnumber desktop by 2014

Mobile OS

Mobile Screen Resolutions

Designing a different interface for every device is impossible.
Almudena Cathedral Madrid


The answer to our problems.

What is Bootstrap?

  • Components
    • Dozens of reusable components
    • Dropdowns
    • Navbar
    • Breadcrumbs
    • Alerts
    • Progress Bars
  • JavaScript Plugins
    • 13 plugins
    • Modal Dialog Windows
    • Tabs
    • Typeahead
    • Carousel
  • Scaffolding
    • Layouts
    • Grid System
    • Fluid Grid System
    • Responsive Design
  • Base CSS
    • Typography
    • Tables
    • Forms
    • Buttons
    • Icons

Reasons To Love Bootstrap

Happy 40th Anniversary Joe and Barb Raible! Kauai, Hawaii
  • For all skill levels
  • Documentation
  • Cross Everything
  • Lightweight
  • Responsive Design
  • 13 JavaScript plugins
  • Open Source
  • Built on LESS

History of Bootstrap

  • Early Days of Twitter
    • Mark Otto
    • Jacob Thornton
  • Releases
    • v 1.0 - 08/19/2011
    • v 2.0 - 01/31/2012
    • v 2.1.1 - 09/04/2012
    • v 2.3.1 - 03/01/2013
  • Popularity
    • @twbootstrap 58.5K Followers
    • GitHub Stats
      • 48K Watchers
      • 14K Forks
Way out in Arches, Utah

Getting Started

Overview of the project, its contents, and how to get started with a simple template.

Getting Started

  • Downloading Bootstrap
    • Source
    • Ready To Go
    • Customize
  • Requirements
    • HTML5 Doctype
    • Include bootstrap.css
  • Starter Templates
Dinner for the Eiffel Birds


Bootstrap is built on responsive 12-column grids, layouts, and components.

Layouts: Fixed Layout

  <div class="container">

Layouts: Fluid Layout

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
    <div class="span10">

Grid System

  • Bootstrap grid system is 12 columns / 940px
  • Grid adapts to be 724px and 1170px wide depending on your viewport.
  • Below 767px viewports, the columns become fluid and stack vertically.
<div class="row">
    <div class="span4">...</div>
    <div class="span4">...</div>
    <div class="span4">...</div>

Fluid Grid System

<div class="row-fluid">
    <div class="span4">...</div>
    <div class="span4">...</div>
    <div class="span4">...</div>
<div class="row-fluid">
    <div class="span6">...</div>
    <div class="span6">...</div>
<div class="row-fluid">
    <div class="span4">...</div>
    <div class="span4">...</div>
    <div class="span4">...</div>

Responsive Design

  • Media Queries
  • Modify the width of column in our grid
  • Stack elements instead of float wherever necessary
  • Resize headings and text to be more appropriate for devices

Responsive Design

<!doctype html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap: Getting Started</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-responsive.css" >

<h1>Responsive Bootstrap</h1>

Independence Plaza Madrid Puerta de Alcala at night with car lights

Demo Time


Sunset at Arc de Triumph Paris, France

Base CSS

Fundamental HTML elements styled and enhanced with extensible classes.

Typography: Headings

<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>

Typography: Body Copy

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi
erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus
auctor fringilla.</p>

Typography: Blockquote

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous <cite title="Source Title">Source Title</cite></small>

Typography: Emphasis classes

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

Typography: Lists

<li>Lorem ipsum dolor sit amet</li>

Tables: Default Style

<table class="table">

Tables: Striped

<table class="table table-striped">

Tables: Bordered

<table class="table table-bordered">

Tables: Hover

<table class="table table-hover">

Tables: Condensed

<table class="table table-condensed">

Tables: Optional Row Classes


  • Four Layouts
    • Vertical (default)
    • Search
    • Inline
    • Horizontal
  • Form Controls
    • Input
    • Text Area
    • Checkboxes & Radio
    • Select
  • Look & Feel
    • Relative Sizing (small/med/large/xlarge)
    • Grid Sizing (span1/span2/span3/etc)

Forms: Default Styles

    <label>Label name</label>
    <input type="text" placeholder="Type something…">
    <span class="help-block">Example block-level help text here.</span>
    <label class="checkbox">
        <input type="checkbox"> Check me out
    <button type="submit" class="btn">Submit</button>

Forms: Horizontal

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputEmail">Email</label>
        <div class="controls">
          <input type="text" id="inputEmail" placeholder="Email">

Search Form

<form class="form-search">
    <input type="text" class="input-medium search-query">
    <button type="submit" class="btn">Search</button>

Inline Form

<form class="form-inline">
    <input type="text" class="input-small" placeholder="Email">
    <input type="password" class="input-small" placeholder="Password">
    <label class="checkbox">
        <input type="checkbox"> Remember me
    <button type="submit" class="btn">Sign in</button>

Form Controls: Relative Sizing

<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<input class="input-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

Form Controls: Grid Sizing

<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
<select class="span1"></select>
<select class="span2"></select>
<select class="span3"></select>



<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">

.img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.

Image Placeholders


<i class="icon-search"></i>
<i class="icon-search icon-white"></i>

<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
<a class="btn btn-small" href="#"><i class="icon-star"></i></a>

<span class="add-on"><i class="icon-envelope"></i></span>
<input class="span2" id="inputIcon" type="text">
It was an epic sunset at Hanalei Bay at the St Regis pool :) Kauai, Hawaii


Dozens of reusable components built to provide navigation, alerts, popovers, and more.


  • Dropdowns
  • Button groups
  • Button dropdowns
  • Navs
  • Navbar
  • Breadcrumbs
  • Pagination
  • Labels and badges
  • Typography
  • Thumbnails
  • Alerts
  • Progress bars
  • Misc

Components: Button Group

<div class="btn-group">
    <button class="btn">1</button>
    <button class="btn">2</button>
    <button class="btn">3</button>

Components: Button dropdown

<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="caret"></span>
<ul class="dropdown-menu">
    <!-- dropdown menu links -->

Components: Navbar

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>

Components: Tabs

<ul class="nav nav-tabs">
<li class="active">
    <a href="#">Home</a>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>

Components: Breadcrumbs

<ul class="breadcrumb">
    <li><a href="#">Home</a> <span class="divider">/</span></li>
    <li><a href="#">Library</a> <span class="divider">/</span></li>
    <li class="active">Data</li>

Components: Pagination

<div class="pagination">
        <li><a href="#">Prev</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">Next</a></li>

Components: Alerts

<div class="alert alert-success">
Balclutha Maritime Museum San Francisco California

JavaScript for Bootstrap

Bring Bootstrap's components to life—now with 13 custom jQuery plugins.

JavaScript Plugins: Overview

Cobblestone street, Vejer de la Frontera
  • All plugins require the latest version of jQuery
  • What Plugins do you need?
  • Plugins
    • Transitions
    • Modal
    • Button / Dropdown
    • Tab
    • Tooltip / Popover
    • Alert
    • Collapse
    • Carousel
    • Typeahead
    • Scrollspy / Affix
You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript.

JavaScript Plugins: Modals

JavaScript Plugins: Modals

<div class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    <div class="modal-body">
        <p>One fine body…</p>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>

JavaScript Plugins: Carousel

JavaScript Plugins: Carousel

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">…</div>
        <div class="item">…</div>
        <div class="item">…</div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

JavaScript Plugins: Popover

JavaScript Plugins: Popover

Our hike along Ecola State Park ~ Indian Beach, Oregon


The dynamic stylesheet language.

What is LESS?

  • Maintainable CSS
  • Dynamic Behavior
    • Variables
    • Mixins
    • Nested Elements
    • Operations
    • Functions
  • Usage
    • Client Side
    • Server Side

LESS: Variables

LESS: Mixins

LESS: Nested

View of Coors Field

Look & Feel

Bootstrap 3


Categorizing CSS rules allows us to see patterns and define best practices around each pattern.
  1. Base
  2. Layout
  3. Module
  4. State
  5. Theme

SMACSS: Naming Rules

UI Refresh Project, 1 Year Later

Mobile Improvements

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen and (min-device-width: 320px) and (max-device-width: 854px) { {
            padding: 0;

    /* iPad (portrait and landscape) ----------- */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { {
            padding-top: 50px;

UI Refresh Project, 1 Year Later

JavaScript PDF Viewer / Editor

UI Refresh Project, 1 Year Later

My Dashboard

  • Charts and Widgets, Very Visual
  • Built With:
  • PDF Viewer: 200 lines HTML, 2300 lines of JavaScript
  • My Dashboard: 300 lines HTML, 466 lines of JavaScript