Responsive Web Design
Download as PPT, PDF2 likes1,245 views
The document discusses the responsive web design framework Bootstrap. It provides an overview of Bootstrap including its global styles, grid system, responsive layouts, and supported media queries. Bootstrap offers advantages like being easy to get started with, having a great grid system and base styles, extensive components, bundled JavaScript plugins, and good documentation. It also discusses how Bootstrap supports older browsers with tools like Normalize CSS, Html5shiv, Respond JS, and Selectivizr.
Responsive Web Design
- 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
- 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.
- 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