Responsive Design with Media Query and Bootstrap
                      
iFour Consultancy
Responsive with Media Query and Bootstrap
 
https://www.ifourtechnolab.com/
What is Responsive Design?
 An Approach to web design that provides an optimal viewing experience across a wide 
range of devices
 A responsive website or email has a layout that changes configuration based on what 
size screen it is viewed on
https://www.ifourtechnolab.com/
What is Responsive Design?
 Creating a catalog  of Multi-Device Layout patterns
3
https://www.ifourtechnolab.com/
Why should you care about media queries?
 Media queries will allow  us to change our layouts to suit the exact need of different 
devices without changing the content.
 For example, we will be able to move away from “One-size-fits-all” solutions such as liquid, 
elastic and fixed width layouts 4
https://www.ifourtechnolab.com/
Responsive Web Designing or RWD
 Process of designing a single website to be used and compatible on different portable 
or handy electronic devices.
 Also known as Adaptive Web Designing (AWD)
 Integrated approach of designing through which compelling and easy to use websites 5
are built, to give an optimal viewing user experience across a wide variety of devices 
starting from desktop computers to mobile phones.
https://www.ifourtechnolab.com/
Benefits of Responsive Design
 Smooth navigation
 Easy reading
 Minimum pinching
 Reduces scrolling and zooming 6
 Excellent user experience
https://www.ifourtechnolab.com/
Why You Need A Responsive Website?
 Growing demand for smart phones
 Multiple screen sizes and mobile browsers
 Wide usage of Internet
7
 Permits wider browser support
 Compulsory for getting good business
https://www.ifourtechnolab.com/
Adapting the Appropriate Layout 
 Designers should use appropriate layout to suit completely different screen sizes.
Devices Size
Phones 480px and below 8
Phones to Tablets 767px and below
Portrait Tablets 768px and Above
Note book 990px to 1024px
Monitor 1024px and above
https://www.ifourtechnolab.com/
Media Query Syntax : Internal
Body {
     background : gray;
} 9
@media screen and (max-width : 500px) {
  body {
background : blue;
       }
}
https://www.ifourtechnolab.com/
Media Query Syntax : External
  Extend the existing media part of the link element or @import rule :

@import url (narrow.css) only screen and (max-width: 500px);
https://www.ifourtechnolab.com/
Media Queries
 Wide screen media query
/* All the other styles up here */
@media screen and (min-width : 1200px) {
       /* styles for larger screens in here */
}
 Small screen media query
@media screen and (max-width: 760px) {
      /* styles for smaller screens in here */
}
https://www.ifourtechnolab.com/
Media Queries
 Wide screen media query
/* All the other styles up here */
@media screen and (min-width : 1200px) {
       /* styles for larger screens in here */
}
 Small screen media query
@media screen and (max-width: 760px) {
      /* styles for smaller screens in here */
}
https://www.ifourtechnolab.com/
What is Bootstrap
 Powerful front-end framework for faster and easier web development
 Includes HTML and CSS based design templates for common user interface 
components like Typography, Forms, Buttons, Tables, Navigations, Dropdowns, 
Alerts, Modals, Tabs, Accordion, Carousel and many other as well as optional 13
JavaScript extensions.
 It gives you ability to create responsive layout with much less efforts
https://www.ifourtechnolab.com/
Advantages of Bootstrap
 The biggest advantage is that it comes with free set of tools for creating flexible and 
responsive web layouts as well as common interface components.
 Here are some more advantages, why one should opt for Bootstrap:
 Save lots of time 14
 Responsive features
 Open Source
 Consistent design
 Easy to use
 Compatible with browsers
https://www.ifourtechnolab.com/
Example
 Add the following HTML code to index.html which will create a blank HTML web page 
with the required bootstrap CSS files and the bootstrap JavaScript plug-ins with 
jQuery.
15

     
    
    


    
    
    

https://www.ifourtechnolab.com/
Example
 Bootstrap header and responsive navigation bar
•Create a responsive navigation bar as part of this responsive template. Add the following 
HTML code   within the  tags in index.html.

16
  
     TUTORIAL 
    
      
    
    
      
        Home
      
    
  

https://www.ifourtechnolab.com/
Example
 Creating a bootstrap responsive footer


   17
    
       Footer section 1
      Content for the first footer section.
    
    
       Footer section 2
      Content for the second footer section.
         
  

https://www.ifourtechnolab.com/
Thank You..
https://www.ifourtechnolab.com/