Adaptive HTML5 with Various Media & Widgets

Adaptive Image Slider

  • Abstract9

    All Pages Use HTML5 Boilerplate and jQuery UI. This page also uses Flexslider

  • Abstract2

    Rainbows and prisms both break light into its component frequencies.

  • Abstract11

    Cras gravida tortor.

  • Abstract3

    Timeline

  • Abstract5

    Nulla dictum dolor turpis.

  • Abstract6

    Pellentesque non sem risus.

  • Abstract8

    Sed vestibulum porta viverra.

  • Abstract10

    Suspendisse justo dolor.

  • Abstract13

    Cum sociis natoque penatibus.

Technical Sources

Note: Flexslider not shown on smaller devices

The Flexslider image display is eliminated on devices with smaller displays, such as small-screened smartphones. This eliminates need to load the images (saving bandwidth) and saves the screen space taken by the small, non-contributing images. This is an example of how easy it is to tailor an adaptive web design to special cases.

Flexslider

This page uses Flexslider
"Flexslider: An awesome, fully responsive jQuery slider plugin.
Simple, semantic markup
Supported in all major browsers
Horizontal/vertical slide and fade animations
Multiple slider support, Callback API, and more
Hardware accelerated touch swipe support
Custom navigation options
Use any html elements in the slides"
- from the site

jQuery UI

All pages use the jQuery UI
"About jQuery UI:
jQuery UI is an open source library of interface components — interactions, full-featured widgets, and animation effects — based on the stellar jQuery javascript library . Each component is built according to jQuery's event-driven architecture (find something, manipulate it) and is themeable, making it easy for developers of any skill level to integrate and extend into their own code."
- from the site

Skeleton Adaptive CSS, JS & HTML System

The entire site uses a personally modified version of Skeleton
"A Beautiful Boilerplate for Responsive, Mobile-Friendly Development by Dave Gamache
What Is It?
Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Skeleton is built on three core principles"
- from the site

HTML5 Boilerplate

All pages use HTML5 Boilerplate
"HTML5 Boilerplate is the professional frontend developers's base HTML/CSS/JS template for a fast, robust and future-safe site.
After more than four years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain XHR and Flash. A starter Apache .htaccess config file hooks you up with caching rules and preps your site to serve HTML5 video, use @font-face, and drop your site's filesize by half with robust gzipping.
Boilerplate is not a framework, nor does it prescribe any philosophy of development, it's just got some tricks to get your project off the ground quickly and right-footed."
- from the site

FitText.js

The title uses FitText.js
"A jQuery plugin for inflating web type
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element."
- from the site