Links, Tipps und Inspiration

Links und Inspiration

Für die Gestaltung von Logo und App:

Bilder und Icons

https://unsplash.com – Lizenzfreie Bilder
https://icons8.com – viele Symbole, meist gratis (zumindest kleine Auflösungen)
https://github.com/encharm/Font-Awesome-SVG-PNG – Font Awesome Icons als PNG und SVG

Farben

https://deblank.com/colors – Farbpaletten mit KI
http://www.colourlovers.com/palettes – Paletten zusammenpassender Farben
https://colors.lol – zusammengestellte Farb-Paletten
https://lokeshdhakar.com/projects/color-thief/ – Farben aus einem Bild «klauen»

Schriften

https://fonts.google.com – Webfonts einbinden
https://99designs.de/blog/web-digitales-design/webfonts/ – Webfont oder System-Font?

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:

html

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Meine App</title>

  <link rel="stylesheet" href="static/normalize.css">
  <link rel="stylesheet" href="static/style.css">
</head>

<body>
    <!-- Inhalt -->

</body>

</html>

meta charset: utf-8 als Codierung des Textdokumentes
meta viewport: Zeige die Seite nicht-skaliert an (wie eine richtige App)

Design für Smartphone

Handys haben einen kleineren Bildschirm. Man kann deshalb nicht sehr viel Inhalt nebeneinander darstellen. Das muss man beim Entwickeln auf einem Computer berücksichtigen! Also empfielt sich eine der folgenden drei Optionen:

Browser-Fenster schmal: durch ein schmales Browser-Fenster kann ein Handy-Bildschirm simuliert werden. (einfachste Lösung)
Developer-Modus: die Entwickler-Modi der modernen Browser bieten eine «responsive view», wo man verschiedene Devices simulieren kann. (professionelle Lösung)
CSS-Lösung: Damit die App aber auch auf einem breiteren Browser funktioniert, kann man die Breite des Inhaltes mit folgendem CSS-Code einschränken:

css

html {
    margin:    0 auto;
    max-width: 900px;
}

Zeile 2: der Inhalt wird zentriert (horizontaler Rahmen automatisch)
Zeile 3: Die maximale Breite wird auf eine fixen Wert gesetzt

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

Cache

Normalerweise behält der Browser gewisse Dateinen in einem Zwischenspeicher, dem sogenannten Browser-Cache. Dadurch muss nicht immer sämtlicher Inhalt übertragen werden. Beim Entwickeln hingegen, kann es mühsam sein, wenn alter Inhalt oder alte Stylesheets angezeigt werden!

Alle Browsers bieten einen «force refresh» – ein Neuladen der Inhalte ohne Zwischenspeicher:

Firefox: Shift + Reload-Icon; Ctrl + F; Ctrl + Shift + F
Chrome: Ctrl + F oder Shift + F (windows); Shift + Command + R (mac)

Links und Inspiration ​

Bilder und Icons ​

Farben ​

Schriften ​

CSS-Reset ​

App-Grundgerüst für HTML ​

Design für Smartphone ​

Browser-Tools ​

Cache ​