CSS Responsive Webdesign - Fehlersuche

raven16 · 2. September 2014

Hallo,

ich habe nun ein paar Tutorials zum Thema Responsive Webdesign hinter mir und würde dies gerne bei einer Seite für einen Fliesenleger umsetzen.

Im <head> habe ich die dafür notwendige Zeile eingefügt:

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Zunächst habe ich das Grund-Layout/-Design mit Pixeln erstellt und danach alle width, margin, padding von Pixeln in em umgewandelt. Bei width habe ich noch jeweils eine max-width in Pixeln angegeben, damit die Container nicht die maximale Breite überschreiten können. Bei height habe ich überall, wo ich keine feste Höhe haben möchte, den Wert auf auto gestellt.

Unabhängig von den Media-Types, die noch fehlen, müssten sich doch zumindest langsam die Container und Schriften in den Containern an die Breite des Browserfensters anpassen.

Daher ist meine Frage zunächst, ob ich noch etwas wichtiges übersehen haben könnte bzw. worin typischen Fehler liegen? Würde jetzt schon ungern zu Beginn meinen ganzen Quelltext posten, wenn ich nicht einmal weiss, wo ich anfangen soll.

mfg

Umbel · 2. September 2014

Stelle das Projekt Online so das man es sich anschauen kann, alles andere ist Kaffeesatzlesen!

Fireball89 · 2. September 2014

Ich würde dir ein responsive CSS Framework empfehlen. Oder möchtest du bewusst darauf verzichten?

Messa · 2. September 2014

Haben die Container nun feste breiten oder 100%? Ansonsten kannst du im CSS mit @media (min-width: 1200px) {} arbeiten. Dann definierst du für die verschiedene Browser-Breiten die CSS-Styles.

Ich würde dir auch zu einem CSS Framework a la Bootstrap raten.

raven16 · 2. September 2014

Fireball89 schrieb:
Ich würde dir ein responsive CSS Framework empfehlen. Oder möchtest du bewusst darauf verzichten?

Bewusst nicht. Aber ich wusste nicht genau welches ich nehmen soll. Wahrscheinlich sollte ich mich wirklich mal mit eines befassen. Hast du denn einen Vorschlag, welches besonders für mich als Anfänger zu Beginn empfehlenswert ist?

@Umbel: Habe eine ZIP-Datei angehängt. Musste noch ebend einige persönliche Daten rausnehmen und die Datei in eine HTML-Datei umwandeln.

Knalltuete · 2. September 2014

Entweder du nutzt prozentuale Werte für die Breite oder du definierst Breakpoints mit Hilfe von Media-Queries im CSS.. bzw. eine Kombination aus Beiden wäre das Optimum

Daaron · 2. September 2014

user-scalable=no ist übrigens keine gute Idee... Lass die Leute doch zoomen, wenn sie deine Inhalte nicht richtig erkennen können.

Unabhängig von den Media-Types, die noch fehlen, müssten sich doch zumindest langsam die Container und Schriften in den Containern an die Breite des Browserfensters anpassen.

Warum sollten sie? Genau dafür sind Media Queries da.
Natürlich kannst du mit Prozentangaben und/oder max-width schon viel erreichen, aber nicht alles. Auch Größenangaben in em statt px helfen hier nicht weiter. Das heißt nix anderes, als dass du die Größe der Elemente dadurch ändern kannst, dass du global die Schriftgröße änderst.

Wenn du sehen willst, wie es richtig geht: http://mediaqueri.es/

Fireball89 · 2. September 2014

Ich hab mich bislang nur mit Twitter Bootstrap auseinander gesetzt. Daher kenne ich nur den Vergleich zum Design ohne Framework. Darauf basierend kann ich es dir nur empfehlen. AFAIK ist es auch das am meisten genutzte CSS Framework (Vorteile: Viele Leute im Netz, die dir bei Problemen helfen können).
http://getbootstrap.com/

Es gibt auch noch viele Themes/Templates für Bootstrap:
kostenpflichtig
kostenlos

Daaron · 2. September 2014

...und es ist vollkommen überflüssig, wie ich finde. Es ist deutlich besser, die Break Points nach eigenem Bedarf als nach den Vorgaben eines Anderen zu definieren.

Mobile First Responsive Design ist einfach:
- Schreibe ein Design, dass auf schmalen Smartphones (sagen wir mal 320px) gut aussieht
- ziehe das Browserfenster breiter, bis irgend etwas Kacke aussieht. Hier setzt du einen Break Point und behebst das Problem. Diesen Schritt wiederholen bis zur maximal gewünschen Breite

Man kann zwar dann noch viel tricksen um noch besser zu werden, z.B. mit <picture>-Polyfills, aber der Kern ist einfach herauszufinden, ab wann etwas dämlich aussieht oder sich nicht mehr vernünftig bedienen lässt und da einen passenden Break Point zu setzen.

raven16 · 3. September 2014

Danke für die Tipps bisher.

Wie ich sehe, gehen die Meinungen doch teilweise auseinander zu dem Thema. Ich werd mal heute das Grid von Twitter Bootstrap ausprobieren und wenn mir das nicht gefällt, dann werd ich doch mal die Philosophie "Mobile First" probieren und mich dann von der kleinen zur großen Ansicht durcharbeiten.

Madman1209 · 3. September 2014

Hi,

mal komplett anders angegangen: muss / soll es eine Eigenentwicklung sein? Wieso kein CMS mit Repsonsive Theme? CMS gibt es in aller Regel kostenlos, ein gutes Theme kostet ein paar Euro - dann bist du nur für den Content zuständig.

VG,
Mad

Daaron · 3. September 2014

Kommt immer aufs CMS an... Themes für Joomla oder Wordpress gibts im Discounter vom Computer-Inder oder Ukrainer/Russen/Kasachen (oftmals inklusive Malware oder zumindest gravierenden Sicherheitslücken) oftmals für ~20$. Professionelle Contao-Themes aus deutschen Softwareschmieden kosten gern mal 150€, aber da hat man auch was fürs Geld (vor allem: keine Lücken, sondern 100% sauberen Code).

Ich für meinen Teil bevorzuge trotzdem: Mit dem Kunden reden, Problem analysieren, eigenes Theme für diesen speziellen Kunden entwickeln. Kostet den Kunden zwar dann mehr, aber dafür hat er was eigenes, professionelles, das genau seinen Bedürfnissen entspricht.

DaVian · 3. September 2014

Ich glaube der TE möchte sich das ganze aneignen und nicht nur kurz eine Homepage bauen. Zumindest hätte ich das so herausgelesen ;-) Wenn ja würde ich ihm vorschlagen er solls mal ohne Framework angehen. Mit Frameworks kann man sich später auch noch genug beschäftigen. Die Grundlagen sollte man so oder so beherrschen.

Madman1209 · 3. September 2014

Hi,

@Daaron

Das meinte ich mit "für ein paar Euro" durchaus noch

Wenn man als Software-Entwickler überlegt, wie lange man selber (gerade als Anfänger wie der TE) für ein gutes Theme braucht und wie viel man in der Zeit evtl. verdient hätte muss man auch wegen 150 Euro nicht anfangen selbst zu basteln finde ich

@DaVian

Sicher richtig, allerdings klingt das nach einem Kundenprojekt, und das ist in meinen Augen und nach meiner Erfahrung nicht die beste Übungsbaustelle

VG,
Mad

DaVian · 3. September 2014

Sollte es wirklich ein Projekt für einen Kunden sein, dann kann ich dir zustimmen.

Ob das Projekt nun als Übung oder für einen Kunden ist kann uns wohl nur der TE selber sagen ;-)

Zensai · 3. September 2014

Falls es doch noch ein Framework oder gar ein ganzes CMS sein soll: Shape 5 bietet Vertex als Framework und oder komplettes Joomla Template an.

Find ich eigentlich ziemlich gut gelungen, man darf alles Verändern außer die Copyrightzeilen in den XMLs. Dazu ist es kostenlos und ein exzellentes Supportforum gibt es auch.

palace4d · 3. September 2014

Ein Blick auf http://purecss.io/ lohnt auch. Mit Bootstrap konnte ich mich nie anfreunden.
Selber machen finde ich aber besser, vorrausgesetzt man hat die jeweiligen Kenntnisse.

WhiteShark · 4. September 2014

Die Gridsysteme von purecss und Bootstrap geben sich nicht viel. An sich ist das Geschmackssache.
Man kann sich natürlich ein grid System auch selbst schreiben, wenn man das Rad neu erfinden will.

Speedy. · 4. September 2014

Der Unterschied zwischen den beiden Grids ist in der Tat ziemlich groß: während Bootstrap noch auf Floats setzt, arbeitet purecss mit dem Flexbox-Modell von CSS3 und ist damit wesentlich moderner. Sofern man nicht alte Browserkrücken unterstützen muss, würde ich letzteres jederzeit vorziehen. Wenn man auf das ganze Styling verzichten kann, kann ich nur http://flexboxgrid.com/ empfehlen. Basiert wie der Name sagt auch auf Flexbox und murkst nicht an den anderen Elementen rum.

Daaron · 4. September 2014

Flexbox rockt...

CSS Responsive Webdesign - Fehlersuche

Lieutenant

Lt. Commander

Captain

Lt. Junior Grade

Lieutenant

Anhänge

Lieutenant

Fleet Admiral

Captain

Fleet Admiral

Lieutenant

Fleet Admiral

Fleet Admiral

Cadet 4th Year

Fleet Admiral

Cadet 4th Year

Boba Fett

Lt. Commander

Admiral

Speedy.

Gast

Fleet Admiral

Ähnliche Themen