Your SlideShare is downloading. ×
0
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Web Design

448

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
448
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Responsive Web Design Allan Huang @ esobi Inc.
  • 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. 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. 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. 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. Bootstrap
  • 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. 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. Fluid Grid System  The fluid grid system uses percents instead of pixels for column widths with responsive features enabled.
  • 10. Fixed Layout  Provides a common fixed-width (and optionally responsive) layout with only class="container" required.
  • 11. Fluid Layout  Create a fluid, twocolumn page with class="container-fluid" — great for applications and docs.
  • 12. Responsive Design   Include the meta tag — viewport and css file — bootstrap-responsive.css within head tag Supported devices
  • 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. 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. Media Query Examples
  • 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. Base CSS        Typography Code Tables Forms Buttons Images Icons by Glyphicons
  • 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. JavaScript in Bootstrap                Transitions Modal Dropdowns ScrollSpy Togglable tabs Tooltips Popovers Alert messages Buttons Alerts Buttons Collapse Carousel Typeahead Affix
  • 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. 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. 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. 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. Q&A

×