Responsive web design is a process of designing and building websites to provide better accessibility and optimal viewing experience to the user.
Responsive web design is a preferable alternative and an efficient way to target a wide range of devices with much efforts.
Responsive layouts automatically adjust and adapts to any device screen sizes, whether it is a desktop,laptop,tablets or a mobile phone.
What are the requirements ?
1 Computers
2 Text editor
3 Very basic knowledge of HTML & CSS.
Creating Responsive Layout with Bootstrap
With the new Bootstrap 3 mobile first grid system creating the responsive and mobile friendly website much easier. As opposed to previous version you don’t need to include any additional style sheet to enable responsive feature. Bootstrap 3 is responsive and mobile friendly from the start. Its four grids classes provides better control over the layout as well as how it will be rendered on different types of devices like cell phones, tablets desktop and laptops, large screen device etc.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> Bootstrap 3 Responsive Layout Example </title>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></scrip><script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js”</script>
</head>
<body>
<nav id=”myNavbar” class=”navbar navbar-default navbar-inverse navbar-fixed-top” role=”navigation”>
div class =”container”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”#navbarCollaspe”>
<span class=”sr-only”> Toggle navigation </span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”#”> Tutorial Republic </a>
</div>
<!– Collect the nav links, forms, and other content for toggling –>
<div class=”collapse navbar-collapse” id=”navbarCollapse”>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”http://www.example.com” target=”-blank”>Home</a></li>
<li><a href=”http://www.example.com/about.php” target=”-blank”>About</a></li>
<li><a href=”http://www.example.com/contact.php” target=”-blank”>Contact </a></li>
</ul>
</div>
</div>
</nav>
<div class=”container”>
<div class=”jumbotron”>
<h1> Learn to Create Websites </h1>
<p></p>
<p><a href=”http://www.example.com” target=”-blank” class=btn btn-success btn-lg”> Get started today</a></p>
</div>
<div class=”row”>
<div class=”col-sm-6 col-md-4 col-lg-2″>
<h2>HTML</h2>
<p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you understand the basic of HTML, so that you can create your own web pages or website.</p>
<p><a href=”http://www.example.com/” target=”-blank” class=”btn btn-success”> Learn More & raquo;</a></p>
</div>
<div class=”col-sm-6 col-4 col-lg-2″>
<h2> CSS </h2>
<p></p>
<hr>
<div class=”row”>
<div class=”col-sm-12″>
<footer>
<p> Copyright 2015 Affordable Server</p>
</footer>
</div>
</div>
</div>
</html>
This is known as responsive website. There are three types of strategies.
1 Fluid images : It is used for setting images to occupy the maximum display width.
2 Media queries: It is used for different stylesheets based on the capability of the display it being to used color depth, aspect ratio, resolution and such as size.
3 Liquid or fluid layout : It is used for defining all container widths in terms of percentages of the browser viewport, so that they expand and contract as the browser window changes size
Media features: Media feature does not apply to device on which browser is running expression involving that media features are always false.
What is CSS media queries?
A CSS media queries consist of a media type atleast one expression that limit the stylesheet scope by using media features such as width, height and color etc.
Syntax:
<link rel=”stylesheet” media=”(max-width:800px)” hrf=”example.css”>
<style>@media(max-width:600px){
.facet_sidebar{
display:none;
}
}
</style>