Bei einer mobilen Website, die sich über die Subdomain https://m.xxx.de erreichen lässt, existiert ein eigenes Template, das dann geladen wird, sobald ein Mobilgerät erkannt wird. Responsives Webdesign setzt stattdessen auf sogenannte Breakpoints, die das Layout anpassen, sobald ein Smartphone oder Tablet die Website aufruft.
Beide Techniken führen eine Koexistenz, da sie sowohl Vor- als auch Nachteile haben. Bei einer mobilen Website muss zuvor ein eigenes Template erstellt werden. Das erfordert Zeit. Darüber hinaus benötigt dieses Template einen gewissen Speicher auf dem Webspace. Bei einer responsiven Website hingegen entdecken Breakpoints die Bildschirmauflösung des Endgerätes und reduzieren das bestehende Layout auf die Größe des Bildschirmes. Breakpoints passen die Auflösung an den Viewport so an, dass sich die Seite an die jeweilige Auflösungen anpasst. Der Vorteil bei dieser Technik ist, dass sich die Breakpoints in Form von CSS (Cascading Style Sheet) in einer Datei hinterlegen lassen. Dadurch lassen sich Anpassungen schnell und effizient vornehmen.
Auch bei einem responsiven Webdesign besteht die Gefahr, dass zu viel unnützer CSS-Code lädt. Je mehr Breakpoints und Anpassungen, desto mehr Daten muss der jeweilige Browser bewältigen. Eine Lösung für dieses Problem stellt zum Beispiel das CSS-Framework von Cirrus dar. Dadurch ist gewährleistet, dass tatsächlich nur nützlicher und schlanker Code geladen wird. Beide Techniken haben jedoch etwas gemeinsam: Sie müssen die Inhalte in gleicher Weise quetschen und die wichtigsten Inhalte so präsentieren, dass diese die Aufmerksamkeit des Lesers erhalten.
Bei einer responsiven Website lässt sich mit dem Befehl @media, über den sich Breakpoints erstellen lassen, nachhelfen.
Dieser Befehl
<code>@media only screen and (max-width: 768px) {
width: 100%;
}
</code>
sorgt zum Beispiel dafür, dass unter einer Auflösung von 768 Pixeln die Breite auf 100 Prozent festgelegt wird.