Responsive webdesign?!

Je kan misschien met javascript de vrije ruimte op je scherm berekenen en aan de hand daarvan een ander .css bestand gebruiken.

Responsive is juist NIET dat je een iPhone, iPad, Desktop ding maakt, maar 1 website voor alles.
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:

iframe, img, .youtube
	{
	width: 100%;
	min-width: 100px;
	max-width: 720px;
	// zelfde voor breedte
	}

[size=xsmall]Toevoeging op 14/06/2012 20:18:15:[/size]

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)

die site bestaat niet^^

@Eddy, ik ben zelf meer voorstander van alles in 1 stylesheet.

Erick, wij als webdesigners [size=xsmall](al zijn we hier meer webdevelopers)[/size] 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:

@media screen and (max-width: 800px) {
  // 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.

@Andy V - Javascript liever niet.

@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?

Andy V op 14/06/2012 20:31:00

die site bestaat niet^^

www.mediaqueri.es ... ik vergat de "i".

1. voor de style kun je beter werken met (CSS) absolute positions werken plus percentages.

2. jQuery load() functie gebruiken om video's of andere pagina's bijv. te laden tussen <div class=vid></div>

@Wouter - Het gegeven is me duidelijk. Toch begrijp ik er maar weinig van :-)
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?

Surf, nee alsjeblieft niet met absolute positions werken voor het basis lay-out. Wel binnen de main parts (als een header) maar niet de main parts zelf absolute positioneren!
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:

#box {
    width: 100px;
    height: 100px;
    background: red;
}

#box { background: green; }

Nu wordt de background green. Dit kun je ook met media queries doen:

#box {
    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:

<div id=box class=container>Hello World</div>

#box {
    width: 100px;
    height: 100px;
    background: red;
}

@media screen and (max-width: 800px) {
    .container { background: green; }
}

Nu zal de background altijd rood blijven. Maar zo:

#box {
    /* styles */
}

@media screen and (max-width: 800px) {
    .container { background: green !important; }
}

Zal hij groen worden als de breedte onder 800 pixels is.
[hr]
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

@Wouter - Oke! Het is me nu een stuk duidelijker! Hartstikke bedankt!

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?