Media Query, responsive Webdesign

Allgemeiner Artikel (tutorial) zum Responsive Webdesign:

https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign

Medien Abfragen (media queries):

https://wiki.selfhtml.org/wiki/CSS/Media_Queries

Vereinfacht lässt sich das Thema herunterbrechen:

Im css stylesheet wird bei mobile first gerne über min-width „hochgezählt“. Mobile first ist die empfehlenswerte Methode:

@media (min-width: 30em) { /* Breite beträgt mindestens 30em. Und die entsprechenden weiteren Breakpoints nach oben*/ }

Im css stylesheet wird bei desktop first gerne von oben zu den kleineren Breiten über max-width „runter gezählt“. Desktop first könnte sich zum Beispiel anbieten, wenn eine nicht responsive Desktop- Site vorliegt und man on the fly daraus die Tablet und smartphone- Versionen anbauen will.

@media (max-width: 100em) { /* Breite beträgt höchstens 100em.  
Und die entsprechenden weiteren, kleineren Breakpoints bis zur smartphone Breite. */ }

Und, am wichtigsten, damit die Anzeige bei smartphones nicht automatisch skaliert und die media query erst greifen kann:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

Viewports für Smartphones und Tablets Portrait Ansicht: 20 -40 em

Das Design innerhalb von ~20em bis ~40em ist für Smartphones und Tablets im Portrait-Modus (hochkant) vorgesehen. Die Inhalte folgen einander in Form einer Kolumne, „im flow der Elemente“.

Tablett Landscape: Breakpoint 40 – 60 em

Die Breite von ~40em bis ~60em gilt Tabletts im Landscape-Modus (Querformat), aber auch an Browserfenstern auf großen Monitoren, die kleinskaliert wurden.

Das mittelgroße Browserfenster (normal) 60-80 em

Die klassische Browserfenstergröße zwischen ~60em bis ~80em bekommt recht oft ein „klassisches Drei-Kolumnen-Layout“.


Das große Browserfenster über 80em

Auf großen Monitoren bei einem groß aufgezogenem Browserfenster sind Vier-Spalten-Layouts, sehr große Fotos und andere Leckerbissen möglich.

img und die Attribute srcset , sizes

srcset lädt je nach Browserbreite (600w, 960w, 1600w) das passende Bild.

sizes=“100vw“ (viewport width) sorgt dafür, dass das Bild in gesamter Viewport Breite angezeigt wird. 50vw wäre die halbe Viewport Breite etc.

<img src="small.jpg" srcset="klein.jpg 600w, mittel.jpg 960w, gross.jpg 1600w" sizes="100vw">

Wenn w und vw gesetzt ist, kann auf den x- Wert verzichtet werden.

Über sizes lässt sich auch ein media query einbauen:

<img src="klein.jpg"srcset="klein.jpg 600w, mittel.jpg 960w, gross.jpg 1600w" sizes="(min-width:800px) 75vw, 100vw">

Ist der Viewport breiter als 800px soll die Grafik 75% Viewport Breite einnehmen, darunter die gesamte.

Übungsdatei zum Attribut srcset

Weitere Artikel zum srcset Attribut:

Empfehlenswerter Artikel von P. Müller, der die wesentlichen Punkte gut zusammenfasst:

Responsive Bilder, ein Überblick

Und im Blog von Kulturbanause:

https://blog.kulturbanause.de/2014/09/responsive-images-srcset-sizes-adaptive/

https://bitsofco.de/the-srcset-and-sizes-attributes/

Code by Scott Jehl: https://codepen.io/anon/pen/wNLVmv

github

github erklärt am besten selbst, wie github funktioniert:

github geht auf das von Linus Torvalds entwickelte Software Versionsverwaltungssystem zurück.

Torvalds hat Sinn für Humor: git heißt auf englisch „Blödmann, Idiot, Depp“.

Frei übersetzt heißt also github: Idiotennetzknoten, Deppenumschlagsplatz, Blödmannzentrum…

Empfehlenswerte WordPress Themes

IMHO: 2017, astra (schnell) , 2011 (schnell, für einfache Sites ohne Schnickschnack). Die Themes von Anders Norén sind meist sehr ansehnlich
Es gibt selbstverständlich noch einige tausen andere wunderbare themes da draussen! Ich mich hier hauptsächlich auf die schnellen besonnen.

Basis Theme underscores.me

Ein Basis Theme zum selbstständigen Erstellen eigener themes ist underscores oder _s. Es handelt sich hier nicht um ein klassisches Parent Theme. Dieses Theme stellt vielmehr WordPress Basis Code zur Verfügung : https://underscores.me/

favicon einbinden

Favicons sind die kleinen Icons, die im Browser oben am Reiter erscheinen oder alternativ auch bei Browser-Lesezeichen.

Auf favicon.io lassen sich favicons online erstellen. Inklusive dem kompletten Code für den <head> Bereich und allen benötigten Dateien für die diversen Ausgabegeräte. Sehr praktisch.

Oder alternativ hier http://www.favicon.pro/de/

Das Favicon kann als .ico-, .gif-, oder .png-Grafik verwendet werden. Per .gif sind sogar animierte Favicons möglich.

So werden favicons (im <head> ) standard gemäß eingebunden:

<link rel="icon" type="image/vnd.microsoft.icon" href="(GENAUE PFADANGABE/DATEINAME.ico">
<link rel="icon" type="image/gif" href="(GENAUE PFADANGABE/DATEINAME.gif">
<link rel="icon" type="image/png" href="(GENAUE PFADANGABE/DATEINAME.png">

Ein kompletter Satz lässt sich so einbinden:

<link rel="shortcut icon" href="favicon.ico"> 
<link rel="icon" type="image/png" href="favicon.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon.png" sizes="96x96">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="mstile-144x144.png"

Die ersten beiden Links sind nicht nötig, wenn das favicon im Root Verzeichnis des Servers liegt.

Klassische Favicon Größen sind: 32 x 32px oder 64 x 64 px

Apple Touch Icons brauchen eine Größe von 144×144 und 152×152 px .

Windows 8 Tiles 150×150 oder 310×310 px.

Berufsbild Webdesign (Webdesignerin, Webdesigner)

Informationsquellen zum Berufsbildes Webdesign finden sich unter anderem hier:

https://berufenet.arbeitsagentur.de/berufenet/bkb/15125.pdf

Beschreibung des Berufsbildes (ulmato.de)

Wikipedia Artikel zum Berufsbild:

https://de.wikipedia.org/wiki/Webdesigner

Links zu weiteren Informationsquellen und Verbänden:

Arbeitsamt: Linksammlung Webdesign

WebdesignerInnen arbeiten entweder angestellt in Unternehmen und Institutionen oder in Medien- Agenturen.

Alternativ gründen sie selbst Agenturen oder arbeiten selbstständig, renten- und krankenversichert über die Künstlersozialkasse (KSK).

https://www.kuenstlersozialkasse.de/

Website Typen

  1. private „klassische Homepage“, statisch.
  2. Hierarchische Menüstruktur- Site (1-2 Ebenen), zB. für Handwerker, kleine Firmen und Vereine (Begriffsmengen mit Untermengen definieren Menüstruktur). Statisch als pures html + css (+ js + php) oder dynamisch über ein CMS {Systeme WordPress, Joomla, typo3, contao, drupal, processwire, plume… }
    Überblick zu CM Systemen:
    http://webkrauts.de/artikel/2014/welches-cms-ist-das-beste
  3. Blog, chronologisch, mit (automatisch generiertem) Archiv und oder Kategorien, oft dynamisch verlinkt (Tags, Tagcloud). {System WordPress}
  4. Mischformen aus 2. und 3. , realisierbar z.B. mit WordPress.
  5. große Firmensites mit bis zu 5 oder 6 Hierarchie- Ebenen(zB (S,M-)Dax Konzerne, Banken) mit Web und Intranet {ERP Systeme }
  6. Shops {System Magento}. Große, multinationale Shopsysteme oft Cloud- verbund (amazon). Übersicht von open source Shopsysteme bei t3n.
  7. Foren, Beispiel Heise Forum zu Telepolis  {System zum Beispiel: phpbb}
  8. Lernsysteme {zum Beispiel System Moodle}
  9. Wikis, lexikalisches System mit Indexstruktur (Enzyklopädie, Wörterbuch, Thesaurus) {zum Beispiel: System wiki}
  10. Open source Softwareportale (github)
  11. Funktionale Sites mit Programmfunktionen, zum Beispiel https://www.geogebra.org/graphing {HTML5 mit Scripten}
  12. Gaming sites (http://www.miniclip.com/games)
  13. Videoportale
  14. Auktions Shops (ebay und Co.)
  15. Soziale Netze
  16. Cluster- und Cloudsysteme wie amazon, dropbox, MS Office und Techniken aus 9. – 15.
  17. Suchmaschinen (bots) zum Beispiel: metager, duckduckgo, google, yahoo, baidu (China), rambler (Rußland). Google Alternativen werden hier gelistet:
    http://t3n.de/news/google-alternative-474551/

Webentwicklung + Webdesign : Trends

Was ist los da draussen? Was ist state of the art?

Hier finden sich ein Überblick aktueller Trends im Webdesign und der Webentwicklung:

Allgemeine Überlegungen zu Trends in der Web- Entwicklung:

Aktuelle Webdesign-Trends im Überblick

Trends 2018

https://t3n.de/news/webdesign-trends-2018-885197/

Trends 2017

https://t3n.de/news/webdesign-trends-2017-763609/

https://blog.netpress.de/webdesign-trends-2017-die-top-5

Trends 2016

https://t3n.de/news/6-webdesign-trends-fuer-2016-702646/

https://www.selbstaendig-im-netz.de/webdesign/8-aktuelle-webdesign-trends-und-beispiele/

https://www.selbstaendig-im-netz.de/webdesign/8-aktuelle-webdesign-trends-und-beispiele/

https://www.selbstaendig-im-netz.de/webdesign/8-aktuelle-webdesign-trends-und-beispiele/

Webworker Umfrage
http://webkrauts.de/artikel/2014/jetzt-wissen-wir-es

Beliebteste CMS 2014:
http://webkrauts.de/artikel/2014/welches-cms-ist-das-beste

IT Trends

https://de.statista.com/statistik/daten/studie/675726/umfrage/die-wichtigsten-trends-in-der-itk-branche/

Webhosting

Unter Webhosting versteht man die Bereitstellung von Webspace sowie die Unterbringung (Hosting) von Websites auf dem Webserver eines Internet Service Providers (ISP).

Es bestehen verschiedene Webhosting Möglichkeiten!

Artikel hierzu bei Wikipedia:

https://de.wikipedia.org/wiki/Webhosting#Dedicated_Hosting

Bei der Einrichtung einer Webhosting Umgebung, bzw.  bei der Bestellung eines Hosting Pakets sind verschiedene Features zu bedenken:

Soll ein CMS installiert werden?
Wieviele Datenbanken sind nötig?
Wieviel Webspace ist angebracht?
Sind mehrere ftp Zugänge vorgesehen?
Sollen Video Dateien auf dem eigenen Server laufen (streaming Lösung) oder über einen Dienst wie youtube / vimeo?
Ist https und ssl ohne Mehrkosten möglich?
Sind die jeweiligen Software Versionen auf dem neuesten Stand?
Welche Systeme sind vorinstalliert?

Website Planung , Website Struktur, usability

Eine Übersicht zur Planung kleinerer Website Projekte finden Sie hier:

http://de.wikihow.com/Eine-Webseite-planen

Desweiteren empfehlenswert das selfhtml wiki zur Website Planung:
https://wiki.selfhtml.org/wiki/HTML/Tutorials/Webprojekte/planen

Einen professionellen Überblick für Website Planungsmethoden (englisch):
https://www.usability.gov/how-to-and-tools/methods/index.html

hier besonders empfehlenswert:

https://www.usability.gov/how-to-and-tools/methods/develop-plan.html

https://www.usability.gov/how-to-and-tools/methods/organization-schemes.html

https://www.usability.gov/how-to-and-tools/methods/organization-structures.html

Typographie

Grundlagenwissen zur Typographie:

Grundlagen

Übersicht diverser Corporate- Logo- Schriften:

https://99designs.de/blog/logo-und-branding/logoschriften/

Psychologische Wirkung typographischer Beispiele:

https://99designs.de/blog/design-kreativitaet/typografie-wirkung/

Typographie- Logo- Beispiele:

https://www.pinterest.de/iammariya/typography-logo/

Aktuelle Trends im Logo-, Typo- Design (Page):

https://page-online.de/kreation/logo-design-10-aktuelle-trends-die-ueberzeugen/

Eine kurze Einführung zu Typologie mit Beispielen:

http://lankau.de/gw_hso/pdf/03a_typographie001.pdf

Exkurs: Symbolisch aufgebaute (storyline-) Navigation / Websites

Wir hatten im Unterricht noch Beispiele symbolisch aufgebauter (storyline-) Sites angesprochen, die im Zeitalter ausgefeilter Frameworks seltener werden.
Diese Sites erfüllen weniger den Anspruch schnell und leicht  erreichbarer, nackter Information, sie bauen  eher auf den Erlebnisfaktor. Hier 2 Artikel zum Thema:
http://t3n.de/news/navigation-inspiration-fuer-webdesigner-681870/

geschickter Einsatz von Parallex Scrolling Sites:

http://t3n.de/news/parallax-scrolling-beispiele-423046/

Beispiele symbolisch aufgebauter Websites:

http://benthebodyguard.com/index.php

http://ala.ch/

http://www.cantilever-chippy.co.uk/

http://beloesuhoe.com/

http://daysinaday.com/ (läuft nur mit Flash)


http://gorillaz.com/


http://creativecruise.nl/

Weitere Beispiele auf awwwards:

https://www.awwwards.com/websites/unusual-navigation/

 

 

EU-Datenschutz-Grundverordnung EU-DSGVO

Am 25. Mai 2018 wird die EU-Datenschutz-Grundverordnung EU-DSGVO anwendbar, ab diesem Zeitpunkt ist die am 25. Mai 2016 mit einer Übergangsfrist von zwei Jahren in Kraft getretene Verordnung bindend.

Anbei einige Links zum Thema:

DSGVO – Gesetzestext bei intersoft consulting

Bundesministerium für Justiz und Verbraucherschutz bmjv, Beispiel für einen Datenschutzhinweis und weitere Seiten

FAQ des Branchenverbandes bitkom (als PDF-Download)

Fachbeiträge unter datenschutzbeauftragter-info.de

Datenschutzerklärungs-Generator (sehr ausführliches Ergebnis)