DieManager von Morgen WiWi-TReFF.de - Zeitung & Forum für Wirtschaftsstudium & Karriere
Handy, App & WebWebsite

In drei Schritten zur responsiven Website: So geht’s

Das Tolle am responsiven Webdesign ist, dass die Internetseite so gescriptet wird, dass sie sich in der Breite automatisch an jedes Ausgabemedium anpassen kann. Dabei spielt es keine Rolle, ob es ein Computer-Monitor, Notebook, Tablet-PC oder Smartphone ist. Im Gegensatz dazu erscheinen auf anderen Internetseite kleine unschöne Buttons, wenn die Website nicht vollflächig auf dem Monitor angezeigt werden kann.

Das Bild zeigt einen Webentwickler beim Strukturieren einer responsiven Website.

Beim Aufsetzen des Seitenlayouts sollte bedacht werden, dass auf kleinen Medien die Schrift nicht optimal angezeigt werden kann. Hier müssen die Besucher der Website dann hereinzoomen, worunter das Layout der Homepage erheblich leidet. Für jede vordefinierte Bildschirmanzeige sollte lieber eine entsprechend größere Schrift gewählt werden. Es können ruhig bis zu vier verschiedene Werte angeben werden. Die Anzeige lässt sich am besten auf dem eigenen Endgerät überprüfen, dann können sofort Änderungen im HTML-Teil vorgenommen werden, wenn das responsive Webdesign (dt.: reagierende Seitengestaltung) noch nicht absolut zufriedenstellend ist.

Eine kleine Zeile im Header der Seite macht den Unterschied
Bevor eine Internetseite für die optimale Anzeige auf mobilen Endgeräten eingerichtet wird, sollte im Header der Homepage der Viewport entsprechend eingerichtet werden. Das ist nur eine kurze Zeile Quellcode und stellt keinen großen Aufwand dar. Der Header einer jeden Website dient ebenfalls als Ort für Angaben zu eventuell genutzten Scriptsprachen, welche im Body der Seite zur Anwendung kommen sollen. Wer also zum Beispiel Javascript oder PHP für die Internetseite verwenden möchte, gibt dies neben dem Viewport ebenfalls im Header des HTML-Gerüsts an.

Responsive Webdesign mit Html5 und CSS3
Html5 bietet eine Menge innovativer Befehle an, damit der Quellcode im Body der Website noch schlanker werden kann, als in den Vorgängerversionen. Es ist nicht nur möglich, Sound oder Videos einzubinden, welche Besuchern des Internetauftritts gleich beim ersten Laden der Webseite vorgespielt werden, auch für die ehemaligen Div-Container gibt es nun in Html5 funktionale Alternativen.

Während der Body einer responsiven Webseite vornehmlich als reine Tabelle angelegt wird, geschieht das komplette Layout der Seite mittels CSS3. Es stehen neuartige Möglichkeiten zur Verfügung, mit ein paar Klicks und Eingaben lässt sich Text jetzt auch ohne Javascript direkt animieren. Dies bietet vor allem für die Logogestaltung eines Unternehmens jede Menge Vorteile, wenn das externe Stylesheet einfach im Hintergrund ausgeführt wird, ohne dass Pixelgrafiken mit den Bildinformationen des Logos geladen werden müssen. Es ist selbstverständlich nach wie vor möglich, die CSS3 Befehle oben im Header der Seite anzugeben. Schöner ist es jedoch, lediglich einen Link zum Stylesheet anzuhängen, welches schnell geladen wird und im Script der Seite keine Fehler produzieren kann.

Die reagierende Webseite publizieren: Den Hoster wählen
Damit die fertige Internetseite veröffentlicht werden kann, wird eine Domain benötigt. Dabei handelt es sich um eine einzigartige Adresse im World Wide Web, ähnlich wie eine Postadresse, unter der jemand eindeutig zu erreichen ist. Für das Registrieren und Betreiben einer Internet-Domain werden jährlich Gebühren fällig. Es wird über ein zentrales Register sichergestellt, dass nie dieselbe Domain zweimal vergeben wird. Ist dieser Schritt erfolgreich absolviert, wird noch Webspace auf einem Server benötigt. Es ist dabei nicht notwendig, sich selbst eine teure IT-Anlage zu kaufen, über welche die eigene Website veröffentlicht werden kann.

Viele Anbieter wie https://website.de bieten kostengünstigen Webspace zur Miete an, wobei eine Domain immer für ein Jahr reserviert wird. Es ist also empfehlenswert, für diese Zeit auch Webspace bei einem Hoster zu buchen, wenn die eigene Webseite die ganze Zeit im Netz verfügbar sein soll. In der Regel lässt sich aber ein Hoster auch leicht wechseln, wobei es Kündigungsfristen von vier Wochen bis hin zu drei Monaten gibt. Bei einem Providerwechsel ist ein Code erforderlich, um eine Website zu einem anderen Anbieter umziehen zu können. Dieser ist beim ehemaligen Hoster erhältlich. Für gewöhnlich wird so ein Authentifizierungscode binnen weniger Tage per E-Mail zugeschickt. Auf diese Weise wird sichergestellt, dass fremde Personen nicht einfach eine Domain und damit den gesamten Web-Auftritt übernehmen können.

Im Forum zu Website

10 Kommentare

Lebenslauf als website

WiWi Gast

WiWi Gast schrieb am 08.08.2021: Schon mal von Leuten gehört, die während des Studiums selbst für ihren Lebensunterhalt aufkommen müssen? In einigen irrelevanten Nebentätigkeiten verdient man mehr a ...

44 Kommentare

Zahlungspflichtige Internetseite erstellen

WiWi Gast

WiWi Gast schrieb am 03.04.2020: Nochmals danke, ich habe mir die Internetseiten angeschaut, das ist schon etwas, wie es mir vorgestellt hatte. ...

10 Kommentare

Eigene Website als PhD Student

WiWi Gast

WiWi Gast schrieb am 15.01.2020: Ja habe ich, da ich auch mal darüber nach gedacht habe. Wenn du akademischen Output hat (alles ab Working Paper), dann findet man dich auch, denn die Welt ist se ...

3 Kommentare

Nischen-Webseite Erfahrungen

WiWi Gast

Ja und nein. Ich mache sowas ähnliches. Ich schreibe Apps. Kostet auch viel Zeit und der Verdienst damit kann sehr schwanken. Die erste lief gar nicht. Die nächste dann schon besser. Inzwischen habe i ...

1 Kommentare

Laptop/iPad

Rapha

Servus zusammen, für mich geht’s dieses Jahr erst los. Über meine Unwissenheit dürft ihr also gerne noch urteilen. Konkrete Situation: Zusage für WHU Bachelor Internationales Management, 2024. Da ...

40 Kommentare

Angst vor Veränderungen / Studium

WiWi Gast

Viel Erfolg für deinen neuen Lebensabschnitt! WiWi Gast schrieb am 11.04.2024: ...

1 Kommentare

Wiwi Goethe Sommersemester 2024 NC

rahhh

Hey, kann mir jemand sagen, was ungefähr der NC vor dem Nachrückverfahren der Letzten Sommersemester Bewerbungsphase war? Hab 2.3 mit einem Wartesemester und frage mich wie die Chancen stehen vor dem ...

Artikel kommentieren

Als WiWi Gast oder Login

Zum Thema Website

Superstar-Firmen wie Apple oder Google beherrschen ganze Branchen

Marktmacht von Superstar-Firmen bremst Löhne

Kunden bewundern ihre Innovationskraft, Wettbewerber fürchten ihre Marktmacht: Sogenannte Superstar-Firmen wie Apple oder Google sind in ihren Branchen tonangebend. In immer mehr Märkte gilt das Prinzip "The winner takes it all". Wie wirkt sich die Dominanz dieser Superstars auf die Löhne von Arbeitnehmern aus? Eine Studie der Bertelsmann Stiftung hat die Wirkung wachsender Unternehmenskonzentration in Deutschland untersucht.

Ein Handy wird von einer Hand in die Luft gehalten und zeigt ein Bild von einer Kompass-App.

Deutscher App-Markt knackt 1,5-Milliarden-Marke

Der Umsatz mit Apps hat sich in Deutschland in den vergangenen vier Jahren seit 2014 fast verdreifacht. Im Jahr 2017 haben die Umsätze im deutschen App-Markt die Marke von 1,5-Milliarden Euro geknackt. Der Großteil des Umsatzes entfällt mit 1,2 Milliarden Euro auf In-App-Angebote. Die beiden größten App-Stores von Google und Apple verzeichnen alleine 1,8 Milliarden Downloads im Jahr 2017.

E-Book-Nutzer setzen auf Smartphones

Das Smartphone wird zum beliebtesten Lesegerät für E-Books. Mehr als jeder siebte Leser (13 Prozent) digitaler Bücher in Deutschland greift täglich zum Smartphone, um darauf zu lesen. Weitere 15 Prozent nutzen es hierfür mehrmals in der Woche. Insgesamt lesen 6 von 10 E-Book-Nutzern auf ihrem Smartphone. Das ist das Ergebnis einer repräsentativen Befragung im Auftrag des Hightech-Verbands BITKOM und des Börsenvereins des Deutschen Buchhandels.

Weiteres zum Thema Handy, App & Web

Das neue iPhone X von apple.

iPhone X im Test: Das zerbrechlichste iPhone aller Zeiten

Zum iPhone-Jubiläum wollte Apple mit einem Handy der Superlative auftrumpfen. Das ist gelungen – leider auch mit Negativrekorden. Das teuerste iPhone bietet aktuell die beste Smartphone-Kamera, doch es ist auch das zerbrechlichste iPhone aller Zeiten und hat zumindest unter den aktuellen Apple-Modellen auch den schwächsten Akku. So lautet das Fazit der Stiftung Warentest nach einem Fall-Test.

Ein Pfeiler mit der roten Aufschrift: Hot Spot - Der WLAN Zugang ins Internet.

Kostenloser WLAN-Zugang an mehr als 100 Bahnhöfen

Deutsche Bahn und Deutsche Telekom setzen in den Bahnhöfen den Ausbau mit HotSpots fort. Ab sofort können Besucher an mehr als 100 Bahnhöfen für 30 Minuten kostenlos im WLAN surfen.

Tablet Computer: Viele Wege führen ins Internet

Eine aktuelle, repräsentative Befragung von BITKOM Research hat ergeben, dass zwei Drittel (65 Prozent) aller Tablet-Nutzer ausschließlich per WLAN online gehen und auf einen gesonderten Mobilfunkvertrag verzichten. Weitere 27 Prozent der Tablet-Nutzer verwenden WLAN zusätzlich.

Ein Mund lehnt an einer mit Kaffee gefüllten Tasse.

Freeware: »Morning Coffee« - Internetseiten automatisch öffnen

Wer surf nicht jeden Tag zu beginn die gleichen Webseiten an? Dabei kann man sich die Klicks sparen: »Morning Coffee« speichert Lesezeichen nach Tagen bzw Uhrzeit und öffnet dann beim Start von Firefox die zum Tag passenden Webseite.

72 Prozent aller Internetnutzer vertrauen auf Online-Lexika

Online-Lexika gewinnen als Nachschlagewerk zunehmend an Bedeutung: Rund 72 Prozent aller Internetnutzer ab 10 Jahren nutzten im ersten Quartal 2011 bei ihren Recherchen bevorzugt Wikipedia und Co.

Börsenteil der Tageszeitung mit Zinssätzen und Aktienkursen.

Knapp 50 Prozent der Internetnutzer in Europa nutzen Zeitungs-Webseiten

ComScor hat eine Analyse der Internetnutzung in Europa veröffentlicht, die zeigt, dass im November insgesamt 379,4 Millionen Menschen für durchschnittlich 27,8 Stunden online waren. Die Studie zeigt außerdem, dass 47,9 Prozent der Internetnutzer in Europa die Webseiten von Zeitungen besuchten.

Ein Mann mit blau gefärbtem Haardutt sitzt auf einem Steg zum Strand und blickt in die Ferne.

Internetnutzung auf Platz 2 der populärsten Aktivitäten von Teenagern

Das Internet ist die zweitliebste Freizeitbeschäftigung deutscher Teenager. Noch beliebter sind nur Treffen mit Freunden. Das geht aus einer repräsentativen Erhebung für den Hightech-Verband Bitkom hervor.

Beliebtes zum Thema News

Porsche übernimmt IT-Beratung MHP

Porsche übernimmt IT-Beratung MHP

Die Porsche AG übernimmt bis Januar 2024 schrittweise alle Anteile der MHP GmbH. Damit möchte die bisherige Mehrheitseignerin das Wachstumspotenzial der Management- und IT-Beratung MHP konsequent nutzen.

Eine amerikanische Flagge weht vor einem Hochhaus Bürogebäude.

Mizuho übernimmt Greenhill für 550 Millionen US-Dollar

Mizuho übernimmt die Investmentbank Greenhill zu einem Kaufpreis von 15 US-Dollar pro Aktie für etwa 550 Millionen US-Dollar. Greenhill fungiert als M&A- und Restrukturierungsberatungsunternehmen für Mizuho. Die Marke, das globales Netzwerk, die Führung und das Team von Greenhill bleiben bestehen. Die Übernahme soll Mizuhos Wachstumsstrategie im Investmentbanking beschleunigen. Die Mizuho Financial Group ist mit einer Bilanzsumme von etwa 2 Billionen US-Dollar die 15. größte Bank der Welt.

Ein Nahverkehrszug hält am Gleis.

Deutsche Bahn legt Angebot mit 10 Prozent Lohnerhöhung vor

Die Deutsche Bahn bietet 10 Prozent Lohnerhöhung für untere und mittlere Lohngruppen, 8 Prozent für obere und zusätzlich 2.850 Euro Inflationsausgleichsprämie. Nach eigenen Aussagen liegt das durchschnittliche Tarifgehalt bei der Bahn über alle Berufsgruppen aktuell bei 4.000 Euro im Monat. In den letzten zehn Jahren sind die Gehälter bei der DB um 26,5 Prozent gestiegen, und damit mehr als im Öffentlichen Dienst mit 26,1 Prozent.

Das Foto zeigt das Logo der Schweizer Bank UBS, die gerade die Bank Credit Suisse übernimmt.

UBS übernimmt Credit Suisse für 3 Milliarden CHF

Die Schweizerische Nationalbank UBS hat die Akquisition der Credit Suisse bekannt gegeben. Durch die Fusion entsteht eine Bank mit einem verwalteten Vermögen von über 5 Billionen US-Dollar, davon 1,5 Billionen in Europa. Der Bundesrat der Schweiz begrüsst die geplante Übernahme. Aktionäre der Credit Suisse erhalten für die Fusion 1 Aktie der UBS für 22,48 Aktien der Credit Suisse. Das entspricht einem Übernahmepreis von 3 Milliarden Schweizer Franken. Der Zusammenschluss soll bis Ende 2023 vollzogen werden.

Online-Shopping: Fakeshop-Finder der Verbraucherzentrale

Fakeshop-Finder prüft Online-Shops

Ein Fakeshop ist – wie der Name bereits andeutet – ein gefälschter Online-Shop. Es wird immer schwieriger, Fakeshops von seriösen Online-Shops zu unterscheiden. Mit dem Fakeshop-Finder bietet die Verbraucherzentrale ein kostenloses Online-Tool an, um die Webseiten (URLs) von Online-Shop zu überprüfen. Die Website zeigt zudem, wie sich Fakeshops erkennen lassen. Ein Fakeshop-Glossar, eine Liste häufiger Fragen zu Fakeshops und ein Fakeshop-Kalender mit saisonalen Fakeshop-Listen runden das Angebot ab.

Eine Europaflagge vor einem Betongebäude und eine verschnörkelte Straßenlampe.

Europäisches Parlament bestätigt Einigung zur Reform vom EU-Emissionshandel

Das Europäische Parlament hat am 18. April 2023 die politische Einigung zur AStV-Reform des EU-Emissionshandels bestätigt. Damit die Reform in Kraft treten kann, fehlt nun noch eine formale Befassung im Rat. Der Europäische Emissionshandel wird auf fast alle Sektoren ausgeweitet, insbesondere auf die Bereiche Gebäude und Verkehr. Etwa 85 Prozent aller europäischen CO2-Emissionen sind damit zukünftig an Zertifikate bzw. Emissionsrechte gebunden. Deren Menge sinkt kontinuierlich ab – entsprechend der europäischen Klimaziele.

Energiepreispauschale für Studenten im Entlastungspaket

Studierende erhalten Energiepreispauschale von 200 Euro

Das dritte Entlastungspaket der Bundesregierung ist mit 20 Maßnahmen sehr umfangreich. Die auf den ersten Blick gewaltig erscheinende Summe von 65 Milliarden Euro ist jedoch eine Mogelpackung, meint das Institut der deutschen Wirtschaft Köln. Mindestens 25 Milliarden Euro davon beziehen sich auf Vorhaben, die auch ohne Energiekrise angestanden hätten. Was bedeutet das Paket für Singles, Familien und vor allem für Studierende? Studierende erhalten eine Energiepreispauschale von 200 Euro.