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
https://www.ifourtechnolab.com/
4
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 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/
5
Benefits of Responsive Design Smooth navigation Easy reading Minimum pinching Reduces scrolling and zooming Excellent user experience
https://www.ifourtechnolab.com/
6
Why You Need A Responsive Website? Growing demand for smart phones Multiple screen sizes and mobile browsers Wide usage of Internet Permits wider browser support Compulsory for getting good business
https://www.ifourtechnolab.com/
7
Adapting the Appropriate Layout ďƒ˜ Designers should use appropriate layout to suit completely different screen sizes.
Devices Phones Phones to Tablets Portrait Tablets Note book Monitor
Size 480px and below 767px and below 768px and Above 990px to 1024px 1024px and above
https://www.ifourtechnolab.com/
8
Media Query Syntax : Internal Body { background : gray; } @media screen and (max-width : 500px) { body { background : blue; } }
https://www.ifourtechnolab.com/
9
Media Query Syntax : External Extend the existing media part of the link element or @import rule :
<link href=“narrow.css” rel=“stylesheet” media=“only screen and (max-width: 500px)” > @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 JavaScript extensions. It gives you ability to create responsive layout with much less efforts
https://www.ifourtechnolab.com/
13
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 Responsive features Open Source Consistent design Easy to use Compatible with browsers
14
https://www.ifourtechnolab.com/
Example ď&#x192;&#x2DC; 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. <head> <!-- Include bootstrap CSS --> <link href="includes/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="includes/style.css" rel="stylesheet"> </head> <body> <!-- Include jQuery and bootstrap JS plugins --> <script src="includes/jquery/jquery-2.1.0.min.js"></script> <script src="includes/bootstrap/js/bootstrap.min.js"></script> </body> https://www.ifourtechnolab.com/
15
Example ď&#x192;&#x2DC; Bootstrap header and responsive navigation bar
â&#x20AC;˘Create a responsive navigation bar as part of this responsive template. Add the following HTML code within the <body> tags in index.html.
<header class="top" role="header"> <div class="container"> <a href="#" class="navbar-brand pull-left"> TUTORIAL </a> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="glyphicon glyphicon-align-justify"></span> </button> <nav class="navbar-collapse collapse" role="navigation"> <ul class="navbar-nav nav"> <li><a href="#">Home</a></li> </ul> </nav> </div> </header> https://www.ifourtechnolab.com/
16
Example ď&#x192;&#x2DC; Creating a bootstrap responsive footer <!-- Site footer --> <div class="bottom"> <div class="container"> <div class="col-md-4"> <h3><span class="glyphicon glyphicon-heart"></span> Footer section 1</h3> <p>Content for the first footer section.</p> </div> <div class="col-md-4"> <h3><span class="glyphicon glyphicon-star"></span> Footer section 2</h3> <p>Content for the second footer section.</p> </div> </div> </div> https://www.ifourtechnolab.com/
17
Thank You..
https://www.ifourtechnolab.com/