Learn More

What do you need to know to be a responsive website developer?


Responsive web design aimed at allowing desktop webpages to be viewed in response to the size of the screen or web browser one is viewing with. offering the same support to a variety of devices for a single website, content, design and performance are necessary across all devices to ensure usability and satisfaction

Meaning: build a website that support (mobiles, tablets, ipads, laptops and pcs)



To start developing responsive websites you need to know three things


  • Fluid and flexible layouts
  • Flexible images
  • Css3 media queries

Fluid and flexible layouts


Fluid layout uses relative units instead of fixed units. Typically a fluid layout will use percentages instead of pixels, but any relative unit of measurement will work

Static


A static page layout (sometimes called a “fixed” layout or “fixed width” layout) uses a preset page size and does not change based on the browser width. In other words, the page layout might have a permanent width of 960 pixels no matter what. This is how web pages were traditionally built for many years until modern influences like media queries and responsive design were introduced around the start of the 2010s.

Example: section{width:960px}

Fluid


Fluid layout often will fill the width of the page, no matter what the width of the browser might be. use precentages insted of fixed widths

Example: section{width:60%}

Flexible images


Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element. example: To create scalable images, simply add the following code to your stylesheet: img { max-width: 100%; } or img { min-width: 100%; }


Css3 media queries


Css3 media queries allowes the content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen, tablet screen and computer screen)

max-width : deffine the maximum width of the screen that will apply the media query

@media only screen and (max-width: 1024px) { /* For small laptops screen and ipads: */ }

@media only screen and (max-width: 768px) { /* For tablets and small ipads : */ }

@media only screen and (max-width: 480px) { /* For mobile: */ }

min-width : deffine the minimum width of the screen that will apply the media query

@media only screen and (min-width: 1024px) { }

@media only screen and (min-width: 768px) { }

@media only screen and (min-width: 480px) { }

@media only screen and (min-width: 320px) { }

min and max width : deffine the minimum width and the maximum of the screen that will apply the media query

@media screen and (min-width: 321px) and (max-width: 767px) { }

Orientation: Portrait / Landscape

Media queries can also be used to change layout of a page depending on the orientation of the browser. You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called "Landscape" orientation:

@media only screen and (orientation: landscape) { body { background-color: lightblue; } }




Example:



Header
Note: resize your browser to see
header {
  background-color: #245690;
  text-align: center;
  color: #ffffff;
  padding: 1%;
  margin-bottom: 1%;
}

.nav {
  background-color: #245690;
  color: #ffffff;
  float: left;
  text-align: center;
  width: 35%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin-right: 5%;
}

.section {
  background-color: #245690;
  color: #ffffff;
  float: left;
  text-align: center;
  width: 60%;
  padding-top: 1%;
  padding-bottom: 1%;
}

.section img {
  max-width: 100%;
}

@media only screen and (max-width: 1024px) {
 /* For small laptops screen and ipads: */
 .nav {
  width: 45%;
  padding-top: 20%;
  padding-bottom: 20%;
 }

 .section {
  width: 50%;
 }
}

@media only screen and (max-width: 768px) {
 /* For tablets and small ipads : */
  header {
  padding-top: 3%;
  padding-bottom: 3%;
  }

  .nav {
   width: 80%;
   margin-left: 10%;
   margin-right: 10%;
   padding-top: 20%;
   padding-bottom: 20%;
   margin-bottom: 1%;
   float: none;
   }

   .section {
   width: 80%;
   margin-left: 10%;
   margin-right: 10%;
   float: none;
   }
}

@media only screen and (max-width: 480px) {
/* For mobile: */
   .nav {
   width: 100%;
   margin-left: 0%;
   margin-right: 0%;
   }

   .section {
   width: 100%;
   margin-left: 0%;
   margin-right: 0%;
  }
}