Hoe werkt responsive design?

[Verwijderd]

Hey mensen,

Ik ben bezig met een website en wil deze graag ook responcive maken zodat de website ook voor smartphone en tablet werkt, echter zijn er veel websites zoals thekitemap.com (mooie website!) wanneer je het venster verkleint dat het ook automatisch wordt aangepast, bij elke pixel (dit is toch niet elke pixel aangepast?). Hoe gaat dit te werk? en is hier ook een aparte naam voor?

Het enige wat ik nu met responcive design weet is dit:

code:

@media only screen and (max-width: 500px) {
    .DIV-element {
        /*styles*/
    }
}

Alvast bedankt,

Niels

[ Voor 3% gewijzigd door Verwijderd op 01-10-2013 15:56 ]

[jbdeiman]

In principe is responsive niets anders dan een schaalbaar design. De naam hiervoor is responsive webdesign (zie onderstaande URL)
Wikipedia: Responsive webdesign

Het is echter wel iets waar je in je lay-out altijd bewust mee om moet gaan, omdat dit naast het keurig meeschalen ook kan betekenen dat teksten op bepaalde devices niet meer leesbaar zijn.

Als je wat verder wilt met reponsive design en ook met de op bovenstaande wiki genoemde Grids wil gaan werken voor positionering kan je hier wel eens naar kijken:
http://getbootstrap.com/

Dit is een (soort van) CSS / JavaScript frameworkje, waarin al van allerlei functionaliteiten zijn uitgewerkt en het heel eenvoudig is om op basis van een Grid je eigen website op te bouwen.

[MonkeySleeve]

Als je tegen een div element zegt dat hij een width moet hebben van bv 50%, dan zal die gewoon aan de hand van hoe groot het scherm is, een breedte pakken. Zo kun je het responsive maken.

Ook een leuke framework:

http://foundation.zurb.com/

[MueR]

En wat had je zelf al gevonden? Het wordt namelijk een beetje flauw om je steeds maar alles uit te moeten leggen. Je gebruikt dit forum alleen maar als helpdesk, doet geen eigen onderzoek en negeert sturing vanuit ons volledig. We waren al klaar met je aan het handje nemen.

Lees Het algemeen beleid #quickstart en Webdesign, Markup & Clientside Scripting Beleid nog eens. Lees onze reacties op al je topics nog eens.