20
iFour Consultancy Responsive with Media Query and Bootstrap

Responsive web development using media query and bootstrap

Embed Size (px)

Citation preview

Page 1: Responsive web development using media query and bootstrap

iFour Consultancy

Responsive with Media Query and Bootstrap

Page 2: Responsive web development using 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

Page 3: Responsive web development using media query and bootstrap

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/

Page 4: Responsive web development using media query and bootstrap

What is Responsive Design?4

Creating a catalog of Multi-Device Layout patterns

C# Software Development Companies India http://www.ifourtechnolab.com/

Page 5: Responsive web development using media query and bootstrap

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/

Page 6: Responsive web development using media query and bootstrap

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/

Page 7: Responsive web development using media query and bootstrap

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/

Page 8: Responsive web development using media query and bootstrap

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/

Page 9: Responsive web development using media query and bootstrap

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/

Page 10: Responsive web development using media query and bootstrap

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/

Page 11: Responsive web development using media query and bootstrap

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/

Page 12: Responsive web development using media query and bootstrap

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/

Page 13: Responsive web development using media query and bootstrap

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/

Page 14: Responsive web development using media query and bootstrap

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/

Page 15: Responsive web development using media query and bootstrap

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/

Page 16: Responsive web development using media query and bootstrap

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/

Page 17: Responsive web development using media query and bootstrap

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/

Page 18: Responsive web development using media query and bootstrap

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/

Page 19: Responsive web development using media query and bootstrap

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/

Page 20: Responsive web development using media query and bootstrap

Questions?

C# Software Development Companies India http://www.ifourtechnolab.com/