Website responsive machen?
Wie kann man eine bestehende Website aus HTML, CSS und JS responsive machen? Also so, dass sie für jedes Gerät angepasst wird und überall gut ausschaut? Und welche Pixelgröße nimmt man da? Es gibt ja verschieden Große Bildschirme und Handys?
4 Antworten
Das ist schwierig pauschal zu beantworten, aber nachträglich responsive machen ist nicht immer leicht.
Die einfachste möglichkeit wäre vermutlich über CSS Media Queries nachträglich die Seite adaptive zu machen.
Der Unterschied; bei einem responsive design geht es darum, seine Seite so aufzubauen, dass sie sich dynamisch an den Bildschirm anpasst. Bei adaptive gibst du erst mal feste größen vor, bei denen sich etwa das Layout anpasst.
Darüber kannst du dich dann erst mal darauf konzentrieren, den Aufbau auf mobilen & kleineren Geräten brauchbar zu machen, statt die Struktur der Seite zu ändern, was definitiv schwieriger ist - allerdings auch im Hinterkopf bleiben sollte.
Bei JavaScript hilft nur testing, wie die Seite sich mit touch input verhält. Und hoffentlich hast du HTML, JS und CSS sinnvoll getrennt, damit du nur den CSS Code anpassen musst.
Sinnvolle Grenzen ab wann man das Layout ändern kann, in Pixel, sind etwa 1024px, und so um die 600px. Auf jeden Fall wichtig, probiere mal deine Seite nur auf dem halben Bildschirm zu öffnen. Ansonsten findest du in allen guten Browsern entwickler Tools die dir die Seite in dem Format von bekannten Geräten anzeigen. In der Realität sind pixel auch gar nicht mehr unbedingt feste Pixel auf dem Gerät, aber das ist auch wieder ein anderes Thema.
Schau dir mal diese Seiten an:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
Um eine Website responsive zu gestalten und umzusetzen, sollten mehrere Bestandteile berücksichtigt werden. Dazu zählt sowohl die Gestaltung eines Layouts, als auch die Wahl der Technologien sowie die eingesetzten Techniken beim eigentlichen Entwickeln. Es gibt unterschiedliche Wege, mal mit und mal ohne Media Queries als auch die Wahl zwischen einem adaptiven oder fluiden Layout.
Und welche Pixelgröße nimmt man da?
Man verwendet bei der responsive Umsetzung möglichst keine fixen Werte wie Pixel, sondern verwendet eher flexible Einheiten wie Prozent, EM sowie REM. Zumal Pixel alleine schon in Bezug auf die unterschiedliche Pixeldichte problematisch wäre. Neben der Wahl der „richtigen” Einheit, hängt es immer von der individuellen Seitenstruktur und den unterschiedlichen Elementen ab, wie man diese mithilfe von CSS so formatiert, positioniert und ausrichtet, damit sie wirklich responsive sind.
Du solltest dich daher u.a. mit Flexbox und CSS Grid beschäftigen, um überhaupt erst einmal zu wissen, wie sich moderne Layouts samt Elemente anordnen lassen. Lerne dabei unterschiedliche Layout-Typen kennen, in dem du dich mit adaptiven sowie fluiden Lösungsansätzen vertraut machst und deren Unterschiede verstehst. Freunde dich dabei ebenso mit CSS Media Queries sowie mit Container Queries an. Das sind im Grunde die wesentlichen Bestanteile, um eine Seite responsive umzusetzen.
In CSS gibt es mittlerweile Variablen sowie Funktionen wie clamp() und calc(), die je nach Anwendungsfall ebenso hilfreich sein können. Um eine Seite oder App responsive zu entwickeln, können auch Frameworks und Grids wie Bootstrap, Foundation, Skeleton usw. einiges an Arbeit abnehmen. Als Laie resp. Anfänger wird man damit eigentlich schneller ein brauchbares Ergebnis erzielen können. Wobei ich dir dennoch eher dazu raten würde, dich mit dem Thema grundlegend zu befassen.
- Mediaevent.de → Media Queries - @media-Regel
- Mozilla Developer Network → CSS: Using media queries
- CSS-Tricks → A Complete Guide to CSS Grid
- CSS-Tricks → A Complete Guide to Flexbox
- Smashing-Magazine → A Primer On CSS Container Queries
- Kulturbanause → CSS Container Queries mit @container
- Smashing-Magazine → Modern Fluid Typography Using CSS Clamp
LG medmonk
Mit einem aufwendigen Umbau HTML/CSS oder von Grund auf neu erstellen.
Schwer zu sagen ohne die Seite gesehen zu haben.
naja man kann aber allgemein sagen, dass man für alles Prozentuale Einheiten und keine absoluten benutzen sollte. Also z.B. nicht 700px für einen Wrapper (falls man das bei einem responsiven Design überhaupt noch macht) sondern 80% oder die Schriftgröße ist nicht 16px sondern 1em (oder smaller, x-small, large, x-large etc.)
Nutze doch einfach Bootstrap. Du musst aber so und so dann alles neu aufbauen.