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
Bootstrap [part 1]
Ghanshyam Patel
 
PDF
Responsive web design with various grids and frameworks comparison
DhrubaJyoti Dey
 
PPTX
Twitter bootstrap-101
Kim Hardie
 
PPTX
Reboot-Typography.pptx reboot typography to help you in research
AadiChauhan2
 
PPTX
Rapid and Responsive - UX to Prototype with Bootstrap
Josh Jeffryes
 
PDF
FITC - Bootstrap Unleashed
Rami Sayar
 
PDF
Node.js 101
FITC
 
PPT
Responsive web design
AirticsTrainer
 
PDF
Introduction-to-HTML-CSS-and-Bootstrap.pdf
PetronetGamer
 
PDF
Building Responsive Websites with the Bootstrap 3 Framework
Webvanta
 
PPTX
Twitter bootstrap1
www.netgains.org
 
PPTX
Bootstrap how it can help you build better websites
Aidan Technologies Sdn Bhd
 
PPTX
Bootstrap.pptx
RaviRazz7
 
PDF
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Rachel Cherry
 
PDF
Bootstrap Jump Start
Haim Michael
 
PDF
Bootstrap for webtechnology_data science.pdf
Harish Khodke
 
PPTX
Introduction to Twitter's Bootstrap 2
Julien Renaux
 
PDF
Multi screen HTML5
Ron Reiter
 
PPTX
Responsive Web Design
Manjunatha D
 
PPT
Know the reason behind choosing bootstrap as css framework
Omkarsoft Bangalore
 
Bootstrap [part 1]
Ghanshyam Patel
 
Responsive web design with various grids and frameworks comparison
DhrubaJyoti Dey
 
Twitter bootstrap-101
Kim Hardie
 
Reboot-Typography.pptx reboot typography to help you in research
AadiChauhan2
 
Rapid and Responsive - UX to Prototype with Bootstrap
Josh Jeffryes
 
FITC - Bootstrap Unleashed
Rami Sayar
 
Node.js 101
FITC
 
Responsive web design
AirticsTrainer
 
Introduction-to-HTML-CSS-and-Bootstrap.pdf
PetronetGamer
 
Building Responsive Websites with the Bootstrap 3 Framework
Webvanta
 
Twitter bootstrap1
www.netgains.org
 
Bootstrap how it can help you build better websites
Aidan Technologies Sdn Bhd
 
Bootstrap.pptx
RaviRazz7
 
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Rachel Cherry
 
Bootstrap Jump Start
Haim Michael
 
Bootstrap for webtechnology_data science.pdf
Harish Khodke
 
Introduction to Twitter's Bootstrap 2
Julien Renaux
 
Multi screen HTML5
Ron Reiter
 
Responsive Web Design
Manjunatha D
 
Know the reason behind choosing bootstrap as css framework
Omkarsoft Bangalore
 
Ad

Recently uploaded (20)

PDF
Hossain Kamyab on Mixing and Matching Furniture.pdf
Hossain Kamyab
 
PPT
Strengthening of an existing reinforced concrete structure.ppt
erdarshanpshah
 
PPTX
DISS-Group-5_110345.pptx Basic Concepts of the major social science
mattygido
 
DOCX
Personalized Jewellery Guide: Engraved Rings, Initial Necklaces & Birthstones...
Dishis jewels
 
PPTX
Model PPT-1.pptx for research protocol or
drkalaivani
 
PPTX
Engagement for marriage life ethics b.pptx
SyedBabar19
 
PDF
SS27 Environments & Design Trend Book Peclers Paris
Peclers Paris
 
PPTX
Morph Slide Presentation transition.pptx
ArifaAkter10
 
PPTX
Time_Management_Presenuuuuuuutation.pptx
Rajni Goyal
 
PDF
TAIPAN99 Situs Pkv Games Terbaik Bermain Kapan Pun Dimana Dengan Mudah #1
TAIPAN 99
 
PPTX
佛罗伦萨大学文凭办理|办理UNIFI毕业证学费单购买文凭在线制作
1cz3lou8
 
PPTX
Introduction-to-Graphic-Design-and-Adobe-Photoshop.pptx
abdullahedpk
 
PDF
SS27 Women's Fashion Trend Book Peclers Paris
Peclers Paris
 
PPTX
Digital Printing presentation-update-26.08.24.pptx
MDFoysalAhmed13
 
PPT
UNIT- 2 CARBON FOOT PRINT.ppt yvvuvvvvvvyvy
sriram270905
 
PPTX
Style and aesthetic about fashion lifestyle
Khushi Bera
 
PPTX
VERTICAL TRANSPORTATION SYSTEMS.pptxhvcvcvvdh
jp0718076
 
DOCX
Amplopxxxxxxxxxvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
Lm Hardin 'Idin'
 
PDF
Interior design technology LECTURE 28.pdf
SasidharReddyPlannin
 
PPTX
Residential_Interior_Design_No_Images.pptx
hasansarkeraidt
 
Hossain Kamyab on Mixing and Matching Furniture.pdf
Hossain Kamyab
 
Strengthening of an existing reinforced concrete structure.ppt
erdarshanpshah
 
DISS-Group-5_110345.pptx Basic Concepts of the major social science
mattygido
 
Personalized Jewellery Guide: Engraved Rings, Initial Necklaces & Birthstones...
Dishis jewels
 
Model PPT-1.pptx for research protocol or
drkalaivani
 
Engagement for marriage life ethics b.pptx
SyedBabar19
 
SS27 Environments & Design Trend Book Peclers Paris
Peclers Paris
 
Morph Slide Presentation transition.pptx
ArifaAkter10
 
Time_Management_Presenuuuuuuutation.pptx
Rajni Goyal
 
TAIPAN99 Situs Pkv Games Terbaik Bermain Kapan Pun Dimana Dengan Mudah #1
TAIPAN 99
 
佛罗伦萨大学文凭办理|办理UNIFI毕业证学费单购买文凭在线制作
1cz3lou8
 
Introduction-to-Graphic-Design-and-Adobe-Photoshop.pptx
abdullahedpk
 
SS27 Women's Fashion Trend Book Peclers Paris
Peclers Paris
 
Digital Printing presentation-update-26.08.24.pptx
MDFoysalAhmed13
 
UNIT- 2 CARBON FOOT PRINT.ppt yvvuvvvvvvyvy
sriram270905
 
Style and aesthetic about fashion lifestyle
Khushi Bera
 
VERTICAL TRANSPORTATION SYSTEMS.pptxhvcvcvvdh
jp0718076
 
Amplopxxxxxxxxxvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
Lm Hardin 'Idin'
 
Interior design technology LECTURE 28.pdf
SasidharReddyPlannin
 
Residential_Interior_Design_No_Images.pptx
hasansarkeraidt
 

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/