Responsive Web Design

Responsive Web Design

Allan Huang @ esobi Inc.

Agenda

10 Web Design Trends Bootstrap

Global Style CSS Grid System Layouts Responsive Design Base CSS Base Components JavaScript in Bootstrap

Bootstrap Advantage Browser Compatible

10 Web Design Trends

Content First Efficient, Searchable, Accessible, Multi-Platform C

ontent Simplicity of Design Interaction and Content

Simplification! Content Accessible and Readable on Devices

UX Centered Design UI Design, Visual Styling, Code Performance,

Uptime, Feature Set, Research Methods, Development Methodologies...

10 Web Design Trends

App Style Interfaces Imitate Mobile App Style and Interfaces

Unification of Desktop & Mobile into Single Version SVG & Responsive Techniques

SVG, Web Fonts, Design with Typography, Icon Fonts... Flat Colors and No more Skeuomorphism

Simplicity, Minimalism, Clear Layouts, App-Style Interfaces, Design with Typography, Less Decoration, Less Skeuomorphic Interfaces, Flat Style, Flat Colors

10 Web Design Trends for 2013 Technology Agnostic

HTML/ CSS/ JavaScript -> CSS3, SVG, WebGL… Experimentation and innovation in device sens

ors and interaction Touch-enabled Interfaces, Device Sensor, Speech-

Based... The Internet of things

Ecosystem of Connected Services, e.g. Smart Fridge, Smart TV, Smart Watch…

Bootstrap

Global Style

An CSS framework based on jQuery JavaScript framework

Bootstrap version 2.3.2 HTML5 doctype

Declaration Basic global display, ty

pography, and link styles

Fixed Grid System

The default grid system utilizes 12-columns, making for a 940px wide container without responsive features enabled.

Below 767px viewports, the columns become fluid and stack vertically.

Fluid Grid System

The fluid grid system uses percents instead of pixels for column widths with responsive features enabled.

Fixed Layout

Provides a common fixed-width (and optionally responsive) layout with only class="container" required.

Fluid Layout

Create a fluid, two-column page with class="container-fluid" — great for applications and docs.

Responsive Design

Include the meta tag — viewport and css file — bootstrap-responsive.css within head tag

Supported devices

Supported Media Query

Media queries allow for custom CSS based on a number of conditions — ratios, widths, display type, etc — but usually focuses around min-width and max-width

Media Query Types and Features Media Types

all | aural | braille | embossed | handheld | print | projection | screen | tty | tv Media Features

(max- / min-) width (max- / min-) height (max- / min-) device-width (max- / min-) device-height orientation: portrait / landscape aspect-ratio (max- / min-) device-aspect-ratio color color-index monochrome (max- / min-) resolution scan grid

Media Query Examples

Responsive Utility CSS Classes For faster mobile-friendly development, use these

utility classes for showing and hiding content by device.

Responsive utilities should not be used with tables, and as such are not supported.

Base CSS

Typography Code Tables Forms Buttons Images Icons by Glyphicons

Base Components

Button groups Button dropdown menus Nav lists Navbar components Breadcrumbs Pagination Labels and badges Typographic components Thumbnails Alerts Progress bars Media Object Miscellaneous

JavaScript in Bootstrap

Transitions Modal Dropdowns ScrollSpy Togglable tabs Tooltips Popovers Alert messages Buttons Alerts Buttons Collapse Carousel Typeahead Affix

Advantages

Easy to get started LESS — Dynamic Stylesheet Language

Great grid system Bootstrap is built on responsive 12-column grids, l

ayouts and components Base styling for most HTML elements

All these fundamental HTML elements have been styled and enhanced with extensible classes

Advantages

Extensive list of components Styling of every single element follows a consisten

t theme Bundled JavaScript plugins

The components are made interactive with the numerous JavaScript plugins bundled in the bootstrap package

Good documentation Provides a great documentation with examples an

d demo

Browser Compatible

Normalize CSS Makes browsers render all elements more consistently and

in line with modern standards Html5shiv JS

Enable use of HTML5 sectioning elements in legacy IE 6-8 Respond JS

A fast & lightweight polyfill for min/max-width CSS3 Media Queries for IE 6-8

Selectivizr JS Emulates CSS3 pseudo-classes and attribute selectors in I

E 6-8

Reference

10 Web Design Trends for 2013 Bootstrap CSS Framework 6 Reasons to Choose the Bootstrap CSS Frame

work Device pixel density tests Media Query Snippets The Absolute Beginners Guide to LESS Free themes for Twitter Bootstrap

Q&A