Responsive webdesign?!

Door Erick Schluter op 14-06-2012 20:12

5.331 views

Hallo allen,

Het volgende:
Ik heb een Wordpress website met een zogeheten 'responsive' theme. Dit zou inhouden dat de website zich aanpast aan het scherm dat de website bekijkt. Dus op een 1280x1024 monitor oogt alles prettig maar ook op een iPad, iPhone of andere mobiele telefoon.

Wat ik niet echt lijk te begrijpen...is het nu een kwestie van verschillende stylesheets of styles, om een website responsive te krijgen? Of moet je voor bv. de iPhone een aparte versie maken van je website?

Als ik namelijk de betreffende website op mijn 'LG met Android' bekijk, dan schalen de YouTube videos die getoond worden niet mee. De videos steken dan buiten de layout. Terwijl de rest van de website zich leuk aanpast :-)

Nu heb ik het idee dat dit komt doordat YouTube embedden tegenwoordig weer met 'iframes' doet...en de iframs een vaste breedte en hoogte hebben.

Kortom...hoe los ik dit op?
Kun/moet je een iframe 'responsive' maken?

Alvast bedankt!

Wouter J

14-06-2012 22:25

Erick, nee ik zou dat niet doen. Zie ook dit artikel: http://webdesignerwall.com/tutorials/setting-breakpoints-in-responsive-design/

Je moet je 'breakpoints' (afmeting waar je een media query start) altijd ergens plaats wanneer je design het niet meer aan kan. Bijv:
Je sidebar + content is bij elkaar 978 pixels. Dan zet je je media query op 978 pixels en laat je dan de sidebar verdwijnen, of kleiner worden.
Krijg je problemen met het logo en de navigatie als een scherm kleiner is dan 753 pixels? Dan maak je een media query op 753 pixels waarbij je het logo onder de navigatie zet.

Zie ook bijv. mijn beta website design: http://staging.wouterj.nl/ Daarin heb ik ook met media queries zitten spelen. (merk op dat de sitetitel iets te groot is, waardoor de header een beetje misgaat, maar het gaat om het idee)

E Erick Schluter

14-06-2012 22:49 gewijzigd op 14-06-2012 22:56

Wouter, ik begrijp het...mmhh...daar gaat mijn vrije tijd :-)

Ik bekeek staging.wouterj.nl op mijn mobiel en daar verdwijnt 'de slider'...en komt het menu mooi boven het logo te staan. Leuk!

Toch irriteert het mij dat wanneer je een browservenster verkleind deze terugspringt naar een grotere variant. Ligt dat aan mij of...?

Ga me hier maar eens ernstig mee bezighouden!

Wouter J

14-06-2012 22:55

Toch irriteert het mij dat wanneer je een browservenster verkleind deze terugspringt naar een grotere variant. Ligt dat aan mij of...?

Bij mijn website? Kan goed zijn. Zoals ik al zei, mijn BETA design. Er zitten her en der nog wat behoorlijk grote fouten.

E Erick Schluter

14-06-2012 23:54

Hey Wouter,
Bij jouw website...maar ook bij alle andere 'responsive' websites die ik bekeken heb.

Is geneuzel...maar ik vraag mij dan meteen af of iedereen dit zo ervaart of alleen ik...op mijn PCtje.

Reageren

Inloggen om te reageren