Wo man nur hinguckt, überall im Netz findet sich responsive design - und das ist auch gut so. Wer hat denn noch Lust drauf in statischen Websites herumzuzoomen? Eben, niemand.
Ob man nun ein Framework benutzt oder die media queries selber schreibt, am Ende gibt es verschiedene Elemente auf der Seite die sich bewegen, oder deren Größe sich verändert, je nachdem wie groß das Browserfenster ist.
Um dies zu erzielen, benutzen Webdesigner in der Regel media queries um den Inhalten auf der Seite zu sagen, was sie bei welcher Auflösung, wo zu tun haben. Normalerweise springen diese Elemente jeweils in ihre neuen Position, was auch völlig ok ist. Mit einem kleinen Spritzer Animation, sieht es jedoch gleich von viel schöner aus.
Entspricht Ihre Website den Anforderungen der ab 25.5.2018 wirksamen DS-GVO, der Datenschutzgrundverordnung?
Sind Ihre Daten ausreichend gesichert? Nutzen Sie das richtige Opt-in, opt-out oder douple-opt-in Verfahren?
Ist Ihre Seite den gesetzliche Vorschriften entsprechend programmiert?
Das Problem bei der Googlesuche
Wer häufig beruflich bei Google nach Bildern sucht, um diese später in Grafikarbeiten oder ähnlichem nutzen zu können, wird es kennen: Nichts nervt so sehr wie Pinterest.
Pinterest ist ein schwarzes Loch voller Bilder ohne vernünftige Quellenangaben die dazu auch noch selten auch nur im Ansatz gut aufgelöst sind. Leider ist kommt ein Großteil der angezeigten Bilder eben genau von hier.
Wherever you look on the internet, you'll find responsive design - and that's a good thing. After all, who wants to zoom in on static websites? Exactly, nobody.
Whether you use a framework or write the media queries yourself, there are several elements on the page that move, or change sizes, depending on how big the browser window is.
To achieve this, web designers typically use media queries to tell the content on the page what they are dealing with, at what resolution and where. Normally, these elements jump to their new position, which is ok. However, with a little splash of animation, it looks even better.
The whole thing is done quite easily, with css.
Since we want to have the effect on the whole page, we use the * css selector and paste the following snippet into our custom.scss file:
* { -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease; }
Have fun trying it!