View
66
Download
0
Embed Size (px)
Citation preview
iFour Consultancy
Responsive with Media Query and Bootstrap
Introduction to Responsive DesignMedia QueriesResponsive Web DesigningBenefits of Responsive DesignMedia Query Syntax : InternalMedia Query Syntax : ExternalIntroduction to BootstrapAdvantages of BootstrapExamples
INDEX
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
C# Software Development Companies India http://www.ifourtechnolab.com/
What is Responsive Design?4
Creating a catalog of Multi-Device Layout patterns
C# Software Development Companies India http://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
5
C# Software Development Companies India http://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
are built, to give an optimal viewing user experience across a wide variety of devices starting from desktop computers to mobile phones.
6
C# Software Development Companies India http://www.ifourtechnolab.com/
Benefits of Responsive Design
Smooth navigation Easy reading Minimum pinching Reduces scrolling and zooming Excellent user experience
7
C# Software Development Companies India http://www.ifourtechnolab.com/
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
8
C# Software Development Companies India http://www.ifourtechnolab.com/
Adapting the Appropriate Layout
Designers should use appropriate layout to suit completely different screen sizes.
9
Devices SizePhones 480px and belowPhones to Tablets 767px and belowPortrait Tablets 768px and AboveNote book 990px to 1024pxMonitor 1024px and above
C# Software Development Companies Indiahttp://www.ifourtechnolab.com/ http://www.ifourtechnolab.com/
Media Query Syntax : Internal10
Body {
background : gray;
}
@media screen and (max-width : 500px) {
body {
background : blue;
}
}
C# Software Development Companies India http://www.ifourtechnolab.com/
Extend the existing media part of the link element or @import rule :
Media Query Syntax : External
<link href=“narrow.css” rel=“stylesheet” media=“only screen and (max-width:
500px)” >
@import url (narrow.css) only screen and (max-width: 500px);
C# Software Development Companies India http://www.ifourtechnolab.com/
Wide screen media query
/* All the other styles up here */
Small screen media query
Media Queries
@media screen and (min-width : 1200px) {
/* styles for larger screens in here */
}
@media screen and (max-width: 760px) {
/* styles for smaller screens in here */
}
C# Software Development Companies India http://www.ifourtechnolab.com/
Wide screen media query/* All the other styles up here */
Small screen media query
Media Queries
@media screen and (min-width : 1200px) {
/* styles for larger screens in here */
}
@media screen and (max-width: 760px) {
/* styles for smaller screens in here */
}
C# Software Development Companies India http://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
14
C# Software Development Companies India http://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 Responsive features Open Source Consistent design Easy to use Compatible with browsers
15
C# Software Development Companies India http://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.
16
<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>
C# Software Development Companies India http://www.ifourtechnolab.com/
Example17
Bootstrap header and responsive navigation bar•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>
C# Software Development Companies India http://www.ifourtechnolab.com/
Example
Creating a bootstrap responsive footer
18
<!-- 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>
C# Software Development Companies India http://www.ifourtechnolab.com/
http://www.w3schools.com/css/css_rwd_intro.asp http://www.w3schools.com/html/html_responsive.asp http://www.w3schools.com/bootstrap/
References
C# Software Development Companies India http://www.ifourtechnolab.com/
Questions?
C# Software Development Companies India http://www.ifourtechnolab.com/