Responsive webdesign?!
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!
Gewijzigd op 14/06/2012 20:15:29 door Andy V
Hij past zich wel netjes aan dmv verschillende stylesheets (maar let op: dan wel Mobile First, dus begin met de kleinste!). Dat voorkomt een (groot) aantal http-requests wat je niet wilt bij traag internet (3G etc).
Het zijn dus niets meer dan verschillende stijlen.
Voorbeeldje (niet mobile-first, maar 't scheelt maar 5kb oid, wel 5 http-requests) naar www.hgbh.nl (en dat werkt ook op desktop: verklein je venster maar).
Een iframe kan je gewoon een percentage opgeven, iets als max-width: 100%;
Sowieso is die regel wel aan te bevelen voor al je img's en andere elementen.
Jij zegt dat een iframe een vaste hoogte/breedte heeft, maar dat is dus niet zo:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
iframe, img, .youtube
{
width: 100%;
min-width: 100px;
max-width: 720px;
// zelfde voor breedte
}
{
width: 100%;
min-width: 100px;
max-width: 720px;
// zelfde voor breedte
}
Toevoeging op 14/06/2012 20:18:15:
Andy V op 14/06/2012 20:15:04:
Je kan misschien met javascript de vrije ruimte op je scherm berekenen en aan de hand daarvan een ander .css bestand gebruiken.
Waarom Javascript?
Daar zijn nou media-queries (zie www.mediaquer.es ) voor uitgevonden! Makkelijker, betrouwbaarder en beter. Dus NIETS geen Javascript nodig.
Ook voor DPI (zoals de nieuwe iPad), en positie (dus landscape/portrait)
Erick, wij als webdesigners (al zijn we hier meer webdevelopers) hebben een paar jaar geleden voor het eerst te maken gekregen met Mobiel internet. Hartstikke geweldig, maar een ramp voor de designer. Want hoe zorg je dat een webpagina die op een scherm van 1024x1280 pixels ook goed zichtbaar is op een scherm van 400x100 pixels?
Toen hebben de webdesigners een oplossing bedacht: Fluid webdesign. Dit betekend dat je alles in procenten maakt (bijv. 1 element is 50% van de schermbreedte). Maar goed, dat werkte natuurlijk ook niet geweldig. Want op een scherm van 1024x1280 is 50% van de breedte 512 pixels en op een scherm van 400x100 is dat maar 200 pixels. Dat betekend dat alles veel te klein werd.
Toen zijn ze op nog iets anders gekomen: Responsive webdesign. Dit betekend dat je herkent hoe groot een scherm is en aan de hand van die data een design opbouwt. Dit wordt gedaan met media queries. Een voorbeeldje:
Code (php)
1
2
3
2
3
@media screen and (max-width: 800px) {
// style
}
// style
}
Hierbij wordt de style alleen uitgevoerd als het scherm kleiner of gelijk aan 800 pixels is.
Hierdoor kun je op kleinere schermen minder belangrijke data weghalen en elementen opnieuw positioneren. Staat bijv. op een groot scherm het logo en het menu naast elkaar, op een klein scherm doe je dat onder elkaar.
Heb je op een groot scherm een sidebar met advertentie, op een klein scherm haal je die weg.
Een paar mooie voorbeelden (zie hoe er van de content steeds meer dingen worden weggehaalt en hoe het menu steeds op meer regels komt): http://css-tricks.com/
http://webdesignerwall.com/
Om het op een computer te simuleren moet je maar eens je browserscherm verkleinen.
@Eddy - Duidelijk verhaal! Toch begrijp ik het niet helemaal. Wat is bv. de min-width? Is daar een standaard voor i.h.k.v. mobiele telefoons?
En...in de stylesheet die ik gebruik staat het volgende:
/* Make sure embeds and iframes fit their containers */
embed,iframe,object {max-width: 100%;}
Maar ja...in de <iframe> tag op de paginas staan natuurlijk de width & height aangegeven. Toen ik dit aanpastte naar 100% i.p.v. pixelwaarden werden de videos op de website langwerpige gevallen. Dus ik denk 'dan haal ik de width en height weg uit de iframe tag'...maar dan eindig ik met erg kleine YouTube videootjes.
Het is toch niet zo eenvoudig als wordt beweerd.
Ook bekeek ik de genoemde website: www.hgbh.nl
Maar als ik het browservenster wil verkleinen springt deze steeds terug naar een groter formaat?
2. jQuery load() functie gebruiken om video's of andere pagina's bijv. te laden tussen <div class=vid></div>
De website van css-tricks is erg mooi gedaan...ziet er prima uit op mijn mobiel en op mijn monitor...zucht.
Maar...ik begrijp niet waar ik moet beginnen.
Want...als ik in situatie 1 een logo met menu ernaast heb...en in situatie 2 een logo met het menu eronder...dan moet ik elke class dus 'herschrijven'...en dan wordt het een stylesheet van 3km?
En jQuery load, waar is dat voor nodig? Heeft niks met responsive webdesign te maken.
Erick, gelukkig kent CSS het begrip 'overriden'. Dat betekend dat je properties kunt overrulen:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
#box {
width: 100px;
height: 100px;
background: red;
}
#box { background: green; }
width: 100px;
height: 100px;
background: red;
}
#box { background: green; }
Nu wordt de background green. Dit kun je ook met media queries doen:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
#box {
width: 100px;
height: 100px;
background: red;
}
@media screen and (max-width: 800px) {
#box { background: green; }
}
width: 100px;
height: 100px;
background: red;
}
@media screen and (max-width: 800px) {
#box { background: green; }
}
Bij elk scherm kleiner dan 800 pixels wordt #box groen.
Soms kun je iets niet zomaar overrulen, omdat een id property voor een class propertie gaat bijv. Dat ben je, helaas, wel eens verplicht !important te gebruiken:
Code (php)
1
<div id=box class=container>Hello World</div>
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
#box {
width: 100px;
height: 100px;
background: red;
}
@media screen and (max-width: 800px) {
.container { background: green; }
}
width: 100px;
height: 100px;
background: red;
}
@media screen and (max-width: 800px) {
.container { background: green; }
}
Nu zal de background altijd rood blijven. Maar zo:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
#box {
/* styles */
}
@media screen and (max-width: 800px) {
.container { background: green !important; }
}
/* styles */
}
@media screen and (max-width: 800px) {
.container { background: green !important; }
}
Zal hij groen worden als de breedte onder 800 pixels is.
Een stappenplan waar ik me altijd aan hou:
1) Een design maken voor een normaal computer scherm
2) Pak je design en beslis wat 1 voor 1 weg moet
3) Ga je normale screen stijlen overrulen met de stijlen voor kleinere schermen
Gewijzigd op 14/06/2012 22:08:46 door Wouter J
Maar...en er is altijd een maar...wat zijn dan de afmetingen waarop ik mijn stylesheet ga inrichten?
Is er een setje standaard afmetingen waarmee ik aan de slag kan?
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)
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!
Gewijzigd op 14/06/2012 22:56:24 door Erick Schluter
Quote:
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.
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.