SlideShare a Scribd company logo
Responsive Website Design 
Process
Agenda 
WHY 
WHAT 
HOW
The future of Mobile Web in 2015 
The total number of people 
using the web on mobile 
devices is set to surpass 
desktops by 2015. 
- International Data Corporation (IDC) 
WHY
Separate Mobile Sites WHY
Mobile Apps 
WHY
Rather than tailoring 
Disconnected 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 larger 
Mobile users are visiting our sites 
User accessing web from everywhere 
WHAT
RESPONSIVE WEB DESIGN EXAMPLE 
WHAT 
http://www.hicksdesign.co.uk/
What does it takes to create a Responsive Design? 
β€’ A flexible grid based layout 
β€’ Flexible images and media 
β€’ Media Queries 
WHAT
WHAT
WHAT 
Flexible Grids
Flexible images and Media 
WHAT
Media Queries 
WHAT
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 
HTML 
CSS 
JS 
About Bootstrap
WHAT 
Facts 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
WHAT 
Who are using BOOTSTRAP? 
- Joomla 3.0 
- Slideshare 
- Toyota.com 
-Appster
WHAT 
Responsive/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/
WHAT 
Why 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
WHAT 
Package Deal – Customize it before you download.
WHAT 
Package 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.
WHAT Package Deal – Customize it before you download.
WHAT 
Bootstrap Website Walkthrough 
http://getbootstrap.com/2.3.2/
Summary 
- 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.
Agenda 
WHY 
WHAT 
HOW 
Folder Structure 
Mockup Design 
Selecting a Template 
Applying Style 
Manipulate template 
Testing tools for different Devices
How 
Folder Structure 
CSS 
bootstrap.css 
bootstrap.min.css 
JS 
bootstrap.js 
bootstrap.min.js 
Fonts 
glyphicons-halflings-regular.eot 
glyphicons-halflings-regular.svg
How 
Mockup Design - Desktop
How 
Mockup Design 
1170
How 
Mockup Design - iPad
How 
Mockup Design - iPad
How 
Mockup Design - iPhone
How 
Selecting a Template
How 
Testing tools for different Devices 
Device simulator 
http://lab.maltewassermann.com/viewport-resizer/ 
Grid Display 
http://alefeuvre.github.io/foundation-grid-displayer/

More Related Content

PPTX
Learn Bootstrap 4
Vinny Vessel
Β 
PPTX
Responsive web-design through bootstrap
Zunair Sagitarioux
Β 
PDF
Specialise or cross-skill
Russ Weakley
Β 
PDF
Responsive Web Design Tutorial PDF for Beginners
Bootstrap Creative
Β 
PDF
What is bootstrap
jabhijit1
Β 
PPTX
Twitter bootstrap 101
bootstraptutor
Β 
PPTX
Bootstrap 4 n00bz
Laurence Bradford
Β 
PDF
Web Design Primer Sample - HTML CSS JS
Bootstrap Creative
Β 
Learn Bootstrap 4
Vinny Vessel
Β 
Responsive web-design through bootstrap
Zunair Sagitarioux
Β 
Specialise or cross-skill
Russ Weakley
Β 
Responsive Web Design Tutorial PDF for Beginners
Bootstrap Creative
Β 
What is bootstrap
jabhijit1
Β 
Twitter bootstrap 101
bootstraptutor
Β 
Bootstrap 4 n00bz
Laurence Bradford
Β 
Web Design Primer Sample - HTML CSS JS
Bootstrap Creative
Β 

What's hot (20)

PPTX
Bootstrap code lab
Dhatri Misra
Β 
PPTX
Introduction to bootstrap
RaBar Sdiq
Β 
PDF
Bootstrap tutorial
vijaypatel_b
Β 
PDF
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap Creative
Β 
PPTX
Trello - University of St Andrews web team
Gareth Saunders
Β 
PDF
BuddyPress: Social Networks for WordPress
Michael McNeill
Β 
PPT
Site Manager rocks!
Gareth Saunders
Β 
PPTX
Bootstrap Introduction
Andrea Tarr
Β 
PDF
Best Practices for Going Mobile - MadWorld 2015, Scott DeLoach, ClickStart
Scott DeLoach
Β 
PDF
Beyond Responsive Web Design
arborwebsolutions
Β 
PDF
Responsive webdesign WordCampNL 2012
Tom Hermans
Β 
PPT
Using a CSS Framework
Gareth Saunders
Β 
PDF
Bootstrap 4 alpha 6
Vaibhav Arora
Β 
PDF
Responsive Web Design - more than just a buzzword
Russ Weakley
Β 
ODP
WordPress and Accessibility
Joseph Dolson
Β 
PPT
Any Press Solution
terryjsmith
Β 
PDF
Core Web Standards and Competencies - WritersUA East 2015, Scott DeLoach, Cli...
Scott DeLoach
Β 
PPTX
Accessibility With WordPress: Accessing Higher Ground 2014
Joseph Dolson
Β 
PDF
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
Morten Rand-Hendriksen
Β 
PPT
Prezentare informatica-ACROBAT.com
ciobanuaurelia
Β 
Bootstrap code lab
Dhatri Misra
Β 
Introduction to bootstrap
RaBar Sdiq
Β 
Bootstrap tutorial
vijaypatel_b
Β 
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap Creative
Β 
Trello - University of St Andrews web team
Gareth Saunders
Β 
BuddyPress: Social Networks for WordPress
Michael McNeill
Β 
Site Manager rocks!
Gareth Saunders
Β 
Bootstrap Introduction
Andrea Tarr
Β 
Best Practices for Going Mobile - MadWorld 2015, Scott DeLoach, ClickStart
Scott DeLoach
Β 
Beyond Responsive Web Design
arborwebsolutions
Β 
Responsive webdesign WordCampNL 2012
Tom Hermans
Β 
Using a CSS Framework
Gareth Saunders
Β 
Bootstrap 4 alpha 6
Vaibhav Arora
Β 
Responsive Web Design - more than just a buzzword
Russ Weakley
Β 
WordPress and Accessibility
Joseph Dolson
Β 
Any Press Solution
terryjsmith
Β 
Core Web Standards and Competencies - WritersUA East 2015, Scott DeLoach, Cli...
Scott DeLoach
Β 
Accessibility With WordPress: Accessing Higher Ground 2014
Joseph Dolson
Β 
CSS Grid Changes Everything - Keynote at WebCamp Zagreb 2017
Morten Rand-Hendriksen
Β 
Prezentare informatica-ACROBAT.com
ciobanuaurelia
Β 
Ad

Similar to RWD - Bootstrap (20)

PPTX
Reboot-Typography.pptx reboot typography to help you in research
AadiChauhan2
Β 
PDF
Bootstrap 4 Online Training Course Book Sample
Bootstrap Creative
Β 
PDF
Analyzing bootsrap and foundation font-end frameworks : a comparative study
IJECEIAES
Β 
PDF
Responsive web design with various grids and frameworks comparison
DhrubaJyoti Dey
Β 
PPT
Comparison ppt
Zafong Technologies LLP
Β 
PDF
Bootstrap seminar presentation
PratikDoiphode1
Β 
PDF
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Appdeveloper10
Β 
PDF
The Ultimate Guide to Bootstrap for Beginners.pdf
webcooks Digital Academy
Β 
PPSX
Web design and development trends
Cool Sky
Β 
PPTX
Bootstrap for Beginners
D'arce Hess
Β 
PDF
How to Project-Manage and Implement a Responsive Website
Jj Jurgens
Β 
PPTX
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
chitrachauhan21
Β 
PPT
1_Intro_toHTML.ppt
benjaminonum1
Β 
PDF
Startup Institute NYC: Styling
Matthew Gerrior
Β 
PDF
Bootstrap vs React Which is the best front-end framework.pdf
Laura Miller
Β 
PDF
FITC - Bootstrap Unleashed
Rami Sayar
Β 
PPT
Top 10 HTML5 frameworks for effective development in 2016
iMOBDEV Technologies Pvt. Ltd.
Β 
PDF
Node.js 101
FITC
Β 
PDF
Web Design
Virtu Institute
Β 
PDF
Design Systems are Coming... Are you Ready?
Vernon Kesner
Β 
Reboot-Typography.pptx reboot typography to help you in research
AadiChauhan2
Β 
Bootstrap 4 Online Training Course Book Sample
Bootstrap Creative
Β 
Analyzing bootsrap and foundation font-end frameworks : a comparative study
IJECEIAES
Β 
Responsive web design with various grids and frameworks comparison
DhrubaJyoti Dey
Β 
Comparison ppt
Zafong Technologies LLP
Β 
Bootstrap seminar presentation
PratikDoiphode1
Β 
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Appdeveloper10
Β 
The Ultimate Guide to Bootstrap for Beginners.pdf
webcooks Digital Academy
Β 
Web design and development trends
Cool Sky
Β 
Bootstrap for Beginners
D'arce Hess
Β 
How to Project-Manage and Implement a Responsive Website
Jj Jurgens
Β 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
chitrachauhan21
Β 
1_Intro_toHTML.ppt
benjaminonum1
Β 
Startup Institute NYC: Styling
Matthew Gerrior
Β 
Bootstrap vs React Which is the best front-end framework.pdf
Laura Miller
Β 
FITC - Bootstrap Unleashed
Rami Sayar
Β 
Top 10 HTML5 frameworks for effective development in 2016
iMOBDEV Technologies Pvt. Ltd.
Β 
Node.js 101
FITC
Β 
Web Design
Virtu Institute
Β 
Design Systems are Coming... Are you Ready?
Vernon Kesner
Β 
Ad

Recently uploaded (20)

PPTX
confluence of tradition in modernity- design approaches and design thinking
madhuvidya7
Β 
PDF
SS27 Environments & Design Trend Book Peclers Paris
Peclers Paris
Β 
PDF
First-Aid.pdfjavaghavavgahavavavbabavabba
meitohehe
Β 
PPTX
MALURI KISHORE-.pptxdsrhbcdsfvvghhhggggfff
sakthick46
Β 
PDF
PowerPoint Presentation -- Jennifer Kyte -- 9786400311489 -- ade9381d14f65b06...
Adeel452922
Β 
PDF
TAIPAN99 Situs Pkv Games Terbaik Bermain Kapan Pun Dimana Dengan Mudah #1
TAIPAN 99
Β 
PPTX
Time_Management_Presenuuuuuuutation.pptx
Rajni Goyal
Β 
PDF
Dunes.pdf, Durable and Seamless Solid Surface Countertops
tranquil01
Β 
PPTX
Model PPT-1.pptx for research protocol or
drkalaivani
Β 
PPTX
Modern_Dhaka_Apartment_Interior_Design.pptx
hasansarkeraidt
Β 
PPTX
Blended Wing Body y jet engines Aircrafts.pptx
anshul9051
Β 
PPTX
Aldol_Condensation_Presentation (1).pptx
mahatosandip1888
Β 
PDF
Line Sizing presentation about pipe sizes
anniebuzzfeed
Β 
PPTX
The Satavahanas.pptx....,......,........
Kritisharma797381
Β 
PPTX
Riverfront Development_nashikcity_landscape
aditikoshley2
Β 
PPTX
Morph Slide Presentation transition.pptx
ArifaAkter10
Β 
PDF
Shayna Andrieze Yjasmin Goles - Your VA!
shaynagoles31
Β 
PPTX
Artificial Intelligence presentation.pptx
snehajana651
Β 
PDF
Zidane ben hmida _ Portfolio
Zidane Ben Hmida
Β 
PDF
Hossain Kamyab on Mixing and Matching Furniture.pdf
Hossain Kamyab
Β 
confluence of tradition in modernity- design approaches and design thinking
madhuvidya7
Β 
SS27 Environments & Design Trend Book Peclers Paris
Peclers Paris
Β 
First-Aid.pdfjavaghavavgahavavavbabavabba
meitohehe
Β 
MALURI KISHORE-.pptxdsrhbcdsfvvghhhggggfff
sakthick46
Β 
PowerPoint Presentation -- Jennifer Kyte -- 9786400311489 -- ade9381d14f65b06...
Adeel452922
Β 
TAIPAN99 Situs Pkv Games Terbaik Bermain Kapan Pun Dimana Dengan Mudah #1
TAIPAN 99
Β 
Time_Management_Presenuuuuuuutation.pptx
Rajni Goyal
Β 
Dunes.pdf, Durable and Seamless Solid Surface Countertops
tranquil01
Β 
Model PPT-1.pptx for research protocol or
drkalaivani
Β 
Modern_Dhaka_Apartment_Interior_Design.pptx
hasansarkeraidt
Β 
Blended Wing Body y jet engines Aircrafts.pptx
anshul9051
Β 
Aldol_Condensation_Presentation (1).pptx
mahatosandip1888
Β 
Line Sizing presentation about pipe sizes
anniebuzzfeed
Β 
The Satavahanas.pptx....,......,........
Kritisharma797381
Β 
Riverfront Development_nashikcity_landscape
aditikoshley2
Β 
Morph Slide Presentation transition.pptx
ArifaAkter10
Β 
Shayna Andrieze Yjasmin Goles - Your VA!
shaynagoles31
Β 
Artificial Intelligence presentation.pptx
snehajana651
Β 
Zidane ben hmida _ Portfolio
Zidane Ben Hmida
Β 
Hossain Kamyab on Mixing and Matching Furniture.pdf
Hossain Kamyab
Β 

RWD - Bootstrap

  • 3. The future of Mobile Web in 2015 The total number of people using the web on mobile devices is set to surpass desktops by 2015. - International Data Corporation (IDC) WHY
  • 6. Rather than tailoring Disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. - Ethan Marcotte WHY
  • 8. What is RESPONSIVE WEB DESIGN? Fixed width pixel designs were all the rage. Desktop screens are getting larger Mobile users are visiting our sites User accessing web from everywhere WHAT
  • 9. RESPONSIVE WEB DESIGN EXAMPLE WHAT http://www.hicksdesign.co.uk/
  • 10. What does it takes to create a Responsive Design? β€’ A flexible grid based layout β€’ Flexible images and media β€’ Media Queries WHAT
  • 11. WHAT
  • 13. Flexible images and Media WHAT
  • 15. 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.
  • 16. Popular 5 Responsive UI Framework WHAT β€’ Bootstrap β€’ Foundation β€’ Skeleton β€’ Unsemantic β€’ Gumby
  • 17. WHAT An open source UI Framework HTML CSS JS About Bootstrap
  • 18. WHAT Facts 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
  • 19. WHAT Who are using BOOTSTRAP? - Joomla 3.0 - Slideshare - Toyota.com -Appster
  • 20. WHAT Responsive/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/
  • 21. WHAT Why 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
  • 22. WHAT Package Deal – Customize it before you download.
  • 23. WHAT Package 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.
  • 24. WHAT Package Deal – Customize it before you download.
  • 25. WHAT Bootstrap Website Walkthrough http://getbootstrap.com/2.3.2/
  • 26. Summary - 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.
  • 27. Agenda WHY WHAT HOW Folder Structure Mockup Design Selecting a Template Applying Style Manipulate template Testing tools for different Devices
  • 28. How Folder Structure CSS bootstrap.css bootstrap.min.css JS bootstrap.js bootstrap.min.js Fonts glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg
  • 29. How Mockup Design - Desktop
  • 33. How Mockup Design - iPhone
  • 34. How Selecting a Template
  • 35. How Testing tools for different Devices Device simulator http://lab.maltewassermann.com/viewport-resizer/ Grid Display http://alefeuvre.github.io/foundation-grid-displayer/