rwd - bootstrap
DESCRIPTION
Responsive Web Development with bootstrapTRANSCRIPT
Responsive Website Design Process
WHYWHATHOW
Agenda
The total number of people using the web on mobile devices is set to surpass desktops by 2015.
The future ofMobile Webin 2015
- International Data Corporation (IDC)
WHY
Separate Mobile Sites
WHY
Mobile Apps
WHY
Rather than tailoringDisconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience.
- Ethan Marcotte
WHY
Responsive Website Design
WHY
What is RESPONSIVE WEB DESIGN?
Fixed width pixel designs were all the rage.Desktop screens are getting largerMobile users are visiting our sitesUser accessing web from everywhere
WHAT
• A flexible grid based layout
• Flexible images and media
• Media Queries
What does it takes to create a Responsive Design?WHAT
WHAT
WHAT Flexible Grids
Flexible images and MediaWHAT
Media QueriesWHAT
Responsive UI Framework WHAT
In the world of web design, a framework is defined as a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.) which can be used to support the development of websites, as a basis to start building a site.
The aim of frameworks is to provide a common structure so that developers don’t have to redo it from scratch and can reuse the code provided. In this way, frameworks allow us to cut out much of the work and save a lot of time.
Popular 5 Responsive UI Framework WHAT
• Bootstrap• Foundation• Skeleton•Unsemantic•Gumby
WHAT
An open source UI Framework
HTMLCSSJS
About Bootstrap
WHATFacts about BOOTSTRAP
- Bootstrap was released in by Twitter developers 2 year back.
- Their idea was to develop a frontend UI framework to encourage consistency across the platform and speed up the development of new websites.
- Bootstrap is now widely accepted in the market.
- Recently they have launched 3.0 version.Mark Jacob
Twitter Developer
}
WHATWho are using BOOTSTRAP?
- Joomla 3.0
- Slideshare
- Toyota.com
-Appster
WHATResponsive/Bootstrap Examples
http://wrapbootstrap.com/preview/WB0412697
http://wrapbootstrap.com/preview/WB0L500N4
http://wrapbootstrap.com/preview/WB0F7FH2P
Inspiration
http://netfruits.com/2013/02/websites-built-with-bootstrap/
WHATWhy everyone is loving BOOTSTRAP?
- Support HTML5 & CSS3.- Supported by all major browsers.- Fluid Grid System - Bootstrap use 12 columns grid system.
- Many starter templates available - (pre-defined styles for typography, tables, buttons, navigation, breadcrumbs, forms elements, etc.)
- Inbuilt jQuery plug-in to add interactivity to websites ( to create modals popup ,tooltips, carousals)
- Responsiveness (RWD) – A big plus
WHATPackage Deal – Customize it before you download.
WHATPackage Deal – Customize it before you download.
Scaffolding: Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.
Base CSS: Styles for common HTML elements like typography, code, tables, forms, buttons & plus includes Glyphicons, icon set.
Components: Basic styles for common interface components like tabs, navbar, alerts, page headers, and more.
Javascript plugins: Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.
WHATPackage Deal – Customize it before you download.
- Is free! Saves you time & money. Implementation is easy.
- Gives you free CSS styles and inbuilt Jqueries.
- Best is you can make a responsive website for all devices.
- Being open sourced, you will get great help from online forums.
Summary
WHYWHATHOW
Agenda
Folder StructureMockup DesignSelecting a TemplateApplying StyleManipulate templateTesting tools for different Devices
HowFolder Structure
CSSbootstrap.css bootstrap.min.css
JSbootstrap.js bootstrap.min.js
Fontsglyphicons-halflings-regular.eotglyphicons-halflings-regular.svg
HowMockup Design - Desktop
HowMockup Design
1170
HowMockup Design - iPad
HowMockup Design - iPad
HowMockup Design - iPhone
HowSelecting a Template
HowTesting tools for different Devices
http://lab.maltewassermann.com/viewport-resizer/
Device simulator
Grid Display
http://alefeuvre.github.io/foundation-grid-displayer/