Ga naar inhoud

Hoe responsive is responsive design?


Aanbevolen berichten

Ik maak net mijn eerste stappen op het gebied van responsive webdesign. Nu is er een projectje in het verschiet met requirements in die richting, dus een uitstekende kans om het voor het eerst toe te gaan passen. Nu is een van de vragen, of het design kan reageren op het kantelen van mobiele devices. M.a.w. Ik bekijk de website rechtop op een iPad in 'portret modus' vervolgens draai ik de iPad op zijn kant naar 'landscape modus' en het design past zich aan. Nu kan ik met een fluid grid al het een en ander doen natuurlijk, maar kan ik dan ook 'on the fly' bijvoorbeeld nieuwe styles gebruiken, omdat de navigatiebalk nu bijvoorbeeld beter een menu in de sidebar kan worden. (Ik roep maar een voorbeeldje) Het lijkt me dat de pagina dan opnieuw geladen moet worden (?) maar zeker weet ik dat niet.
Link naar reactie
De media-queries die Mike noemt zijn slechts het topje van de ijsberg. Zelf heb ik veel geleerd van [url=http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/]An introduction to meta viewport and @viewport[/url] van Dev.Opera. Wat je je bij deze aanpak moet bedenken is dat je je opmaak primair baseert op de breedte van het browservenster. Hoogte is "niet relevant" maar je kan eventueel controleren op landscape of portrait, daarmee verdubbel je dus het aantal stijlen dat je moet maken. Ook het soort toestel is niet relevant, dat kan een volwaardig computer zijn, een tv, of een mobiele telefoon, daar houd je geen rekening mee. Het handigste is om een aantal groepen op basis van resolutie te maken, dus bijvoorbeeld apparaten tot 800px breed scherm (mobiel, kleine tablets), apparaten van 800px tot 1200px (kleine monitoren pc's, telefoons met HD-scherm en netbooks/laptops), groter dan 1200px scherm (tv's, grote schermen, etc...). Nogmaals, dit is slechts een voorbeeld. Om wat extra diepgang te geven aan de kwestie van de schermbreedte kan ik je ook nog [url=http://css-tricks.com/screen-resolution-notequalto-browser-window/]Screen Resolution ≠ Browser Window[/url] op CSStricks aanraden.
Link naar reactie
@mikesmikkel: Dat vroeg ik me dus inderdaad af, of ik media-queries zonder herladen kon toepassen. (Het laden van de media queries leek me het probleem niet, want die zitten gewoon in de stylesheet. Maar ik weet niet wat er gebeurt als de browser al zo'n query heeft uitgevoerd en een afmeting heeft vastgesteld) @BasHamar: Bedankt! Dit ga ik vanavond eens op mijn gemak doornemen. Ziet er erg bruikbaar uit.
Link naar reactie
Kom je er al een beetje uit? :) CSStricks plaatste enkele dagen geleden nog een aardig stukje genaamd [url=http://css-tricks.com/lark-queries/]How to Create Stunning Effects With 165 Media Queries or Less![/url]. Hoogstwaarschijnlijk niet geschikt voor zakelijke websites, maar zeker leuk om eens naar te kijken en mee te experimenteren. - Bas
Link naar reactie

Om een reactie te plaatsen, moet je eerst inloggen

Gast
Reageer op dit topic

×   Geplakt als verrijkte tekst.   Herstel opmaak

  Er zijn maximaal 75 emoji toegestaan.

×   Je link werd automatisch ingevoegd.   Tonen als normale link

×   Je vorige inhoud werd hersteld.   Leeg de tekstverwerker

×   Je kunt afbeeldingen niet direct plakken. Upload of voeg afbeeldingen vanaf een URL in

×
×
  • Nieuwe aanmaken...