Webdesign III (Responsive Grids)

In dieser Stunde wurde besprochen, wie man Websites für mobile Endgeräte ansehnlich gestalten kann. Dadurch, dass seit dem Jahr 2010 mobile Internetseiten das Web grundlegend verändert haben, mussten sich auch Webdesigner an diese neuen Gegebenheiten anpassen und anfangen, flexible Seiten für Smartphones, Tablets oder Desktop-Computer zu gestalten. In diesem Sinne wurde die visionäre Idee von Ethan Marcotte, responsive Grids innerhalb einer Website zu implementieren, näher unter die Lupe genommen. Dazu wurden Fluid Grids im Detail erklärt und die prozentuellen Differenzen der einzelnen Spalten festgemacht. Außerdem wurde noch der Zusammenhang zwischen responsiven Grids und CSS Media Queries verdeutlicht, um verstehen zu können, wie Browser mit unterschiedlichen Displaygrößen umgehen können. Abschließend wurden noch unterschiedliche Grid-Varianten geklärt, bevor die Theorie in die Praxis umgesetzt und das eigene Website-Projekt um ein Fluid-Grid erweitert wurde.


Kompetenzen

  1. Ich weiß was der Begriff „Responsive Webdesign“ bedeutet und kann erklären, weshalb er in der Webentwicklung so wichtig ist.
  2. Ich verstehe das Prinzip von Fluid Grids und kenne die Anzahl der Spalten bzw. deren prozentuellen Größenunterschiede.
  3. Ich kann Inhalte innerhalb eines Fluid Grids anordnen und kann die dementsprechenden div-Elemente dafür in HTML konstruieren.
  4. Ich verstehe für was man Media Queries innerhalb von CSS-Dokumenten verwendet und kann diese mit Fluid Grids verbinden.
  5. Ich verstehe den logischen Aufbau einer Media Query und kann diese für unterschiedliche mobile Endgeräte anwenden.
  6. Ich kann Klassen oder IDs innerhalb von div-Elementen in einer HTML-Datei vergeben und diese dezidiert in CSS ansteuern.
  7. Ich weiß wofür Visual Studio Code verwendet wird und wie man mit den beiden Entwicklungsumgebungen umgeht.


Vertiefung

grid.html
<!DOCTYPE html>
<html>
  <head>
    <title>Seitentitel</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="responsive.css">
  </head>	
 
  <body>
    <main>
      <div class="row">
        <div class="col-6">
          <h1>Überschrift 1</h1>
          <p>Ein Beispieltext</p>
        </div>
        <div class="col-6">
          <img src="image.jpg" alt="Beschreibung">
        </div>
      </div>
    </main>		
  </body>
</html>
responsive.css
* {
    box-sizing: border-box;
}
 
.col-1  { width: 8.33%;   }
.col-2  { width: 16.66%;  }
.col-3  { width: 25%;     }
.col-4  { width: 33.33%;  }
.col-5  { width: 41.66%;  }
.col-6  { width: 50%;     }
.col-7  { width: 58.33%;  }
.col-8  { width: 66.66%;  }
.col-9  { width: 75%;     }
.col-10 { width: 83.33%;  }
.col-11 { width: 91.66%;  }
.col-12 { width: 100%;    }
 
[class*="col-"] {
    float: left;
}
 
.row::after {
    content: "";
    clear: both;
    display: table;
}
 
@media only screen and (max-width: 768px) {
    [class*="col-"] {
        width: 100%;
    }
}



Unterrichtsmaterialien


, , , , , , , , , , , ,