Links, Tipps und Inspiration

Links und Inspiration

Für die Gestaltung von Logo und App:

CSS-Reset

Nicht alle Browser stellen die Webseite genau gleich dar. Ein Grund, sind die CSS-Default-Regeln, welche sich von Browser zu Browser leicht unterscheiden. Mit einem «CSS-Reset», kann man diese Regeln auf einen Browserübergreifenden Standard setzen. Dazu verlinkt man vor den eigenen CSS-Regeln eine solche CSS-Reset-Datei.

Ein Beispiel ist «normalize.css»: http://necolas.github.io/normalize.css/

App-Grundgerüst für HTML

Für eine Web-App kann man einige spezielle Zusatzangaben im head-Element mitliefern:

<!doctype html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Meine App</title>

  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon.png">
</head>

<body>
    <!-- Inhalt -->

</body>

</html>
meta x-ua-compatible
Optimierung für Internet Explorer und Windows Smartphone
meta viewport
Zeige die Seite nicht-skaliert an (wie eine richtige App)
link icon
Link zu Bilddatei für icon

Browser-Tools

Alle modernen Browser haben einen «Developer»-Modus eingebaut. Mit Hilfe dessen lassen sich Webseiten und ihr HTML- und CSS-Code genau untersuchen. Man kann sogar kleine Änderungen direkt im Browser testen. Diese werden gleich angezeigt, jedoch nicht abgespeichert.

Google Chrome | Safari Web Inspector | Firefox Page Inspector | MS Edge Developer Tools