Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Hoe responsive is responsive design?

None
5 antwoorden
  • 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.
  • met @media-queries lukt het denk ik zonder het herladen van de pagina.
  • De media-queries die Mike noemt zijn slechts het topje van de ijsberg. Zelf heb ik veel geleerd van An introduction to meta viewport and @viewport 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 Screen Resolution ≠ Browser Window op CSStricks aanraden.
  • @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.
  • Kom je er al een beetje uit? :)

    CSStricks plaatste enkele dagen geleden nog een aardig stukje genaamd How to Create Stunning Effects With 165 Media Queries or Less!. Hoogstwaarschijnlijk niet geschikt voor zakelijke websites, maar zeker leuk om eens naar te kijken en mee te experimenteren.

    - Bas

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.