Responsive Web Design

Allan Huang @ esobi Inc.
Agenda



10 Web Design Trends
Bootstrap











Global Style
CSS Grid System
Layouts
Responsive Design
Base...
10 Web Design Trends


Content First




Simplicity of Design Interaction and Content




Efficient, Searchable, Acce...
10 Web Design Trends


App Style Interfaces





Unification of Desktop & Mobile into Single Version
SVG & Responsive ...
10 Web Design Trends for 2013


Technology Agnostic




Experimentation and innovation in device
sensors and interactio...
Bootstrap
Global Style







An CSS framework
based on jQuery
JavaScript framework
Bootstrap version 2.3.2
HTML5 doctype
Declar...
Fixed Grid System




The default grid system
utilizes 12-columns,
making for a 940px
wide container without
responsive ...
Fluid Grid System


The fluid grid system
uses percents instead
of pixels for column
widths with responsive
features enab...
Fixed Layout


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

Create a fluid, twocolumn 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 ...
Supported Media Query


Media queries allow for custom CSS based on a
number of conditions — ratios, widths, display type...
Media Query Types and Features


Media Types




all | aural | braille | embossed | handheld | print | projection | scr...
Media Query Examples
Responsive Utility CSS Classes




For faster mobile-friendly development, use these
utility classes for showing and hid...
Base CSS








Typography
Code
Tables
Forms
Buttons
Images
Icons by Glyphicons
Base Components














Button groups
Button dropdown menus
Nav lists
Navbar components
Breadcrumbs
Pag...
JavaScript in Bootstrap
















Transitions
Modal
Dropdowns
ScrollSpy
Togglable tabs
Tooltips
Popov...
Advantages


Easy to get started




Great grid system




LESS — Dynamic Stylesheet Language
Bootstrap is built on r...
Advantages


Extensive list of components




Bundled JavaScript plugins




Styling of every single element follows ...
Browser Compatible


Normalize CSS




Html5shiv JS




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

Res...
Reference




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


...
Q&A
Upcoming SlideShare
Loading in …5
×

Responsive Web Design

1,147 views

Published on

Published in: Technology, Design
  • Be the first to comment

Responsive Web Design

  1. 1. Responsive Web Design Allan Huang @ esobi Inc.
  2. 2. 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
  3. 3. 10 Web Design Trends  Content First   Simplicity of Design Interaction and Content   Efficient, Searchable, Accessible, Multi-Platform Content Simplification! Content Accessible and Readable on Devices UX Centered Design  UI Design, Visual Styling, Code Performance, Uptime, Feature Set, Research Methods, Development Methodologies...
  4. 4. 10 Web Design Trends  App Style Interfaces    Unification of Desktop & Mobile into Single Version SVG & Responsive Techniques   Imitate Mobile App Style and Interfaces 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
  5. 5. 10 Web Design Trends for 2013  Technology Agnostic   Experimentation and innovation in device sensors and interaction   HTML/ CSS/ JavaScript -> CSS3, SVG, WebGL… Touch-enabled Interfaces, Device Sensor, SpeechBased... The Internet of things  Ecosystem of Connected Services, e.g. Smart Fridge, Smart TV, Smart Watch…
  6. 6. Bootstrap
  7. 7. Global Style     An CSS framework based on jQuery JavaScript framework Bootstrap version 2.3.2 HTML5 doctype Declaration Basic global display, typography, and link styles
  8. 8. 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.
  9. 9. Fluid Grid System  The fluid grid system uses percents instead of pixels for column widths with responsive features enabled.
  10. 10. Fixed Layout  Provides a common fixed-width (and optionally responsive) layout with only class="container" required.
  11. 11. Fluid Layout  Create a fluid, twocolumn page with class="container-fluid" — great for applications and docs.
  12. 12. Responsive Design   Include the meta tag — viewport and css file — bootstrap-responsive.css within head tag Supported devices
  13. 13. 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
  14. 14. 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
  15. 15. Media Query Examples
  16. 16. 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.
  17. 17. Base CSS        Typography Code Tables Forms Buttons Images Icons by Glyphicons
  18. 18. 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
  19. 19. JavaScript in Bootstrap                Transitions Modal Dropdowns ScrollSpy Togglable tabs Tooltips Popovers Alert messages Buttons Alerts Buttons Collapse Carousel Typeahead Affix
  20. 20. Advantages  Easy to get started   Great grid system   LESS — Dynamic Stylesheet Language Bootstrap is built on responsive 12-column grids, layouts and components Base styling for most HTML elements  All these fundamental HTML elements have been styled and enhanced with extensible classes
  21. 21. Advantages  Extensive list of components   Bundled JavaScript plugins   Styling of every single element follows a consistent theme The components are made interactive with the numerous JavaScript plugins bundled in the bootstrap package Good documentation  Provides a great documentation with examples and demo
  22. 22. Browser Compatible  Normalize CSS   Html5shiv JS   Enable use of HTML5 sectioning elements in legacy IE 6-8 Respond JS   Makes browsers render all elements more consistently and in line with modern standards 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 IE 6-8
  23. 23. Reference    10 Web Design Trends for 2013 Bootstrap CSS Framework 6 Reasons to Choose the Bootstrap CSS Framework  Device pixel density tests   Media Query Snippets The Absolute Beginners Guide to LESS  Free themes for Twitter Bootstrap
  24. 24. Q&A

×