Responsive Web Development with bootstrap

1. Responsive Website Design
Process

2. Agenda
WHY
WHAT
HOW

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

4. Separate Mobile Sites WHY

5. Mobile Apps
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

7. Responsive Website Design
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

12. WHAT
Flexible Grids

13. Flexible images and Media
WHAT

14. Media Queries
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

30. How
Mockup Design
1170

31. How
Mockup Design - iPad

32. How
Mockup Design - iPad

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/