Responsive post html content

  • nytrm

    (@nytrm)


    12 jaren, 3 maanden geleden

    hallo ik ben opzoek naar een oplossing voor mijn responsive thema.

    Graag zou ik willen weten of het mogelijk is om plaatjes die door middel van de editor in de pagina of blog post zijn geplaatst automatisch te verkleinen zodra ik mijn website op de iPad of telefoon bezoek.

    • desktop url: image-1024.jpg
    • tablet url: image-720.jpg
    • mobile url image-320.jpg

    dit hierboven als voorbeeld, is er ook een mogelijkheid dat dit tijdens het resizen van mijn browser scherm veranderd?

    Hoe zit het dan precies met caching als ik dit toepas? kan het voorkomen dat als ik een pagina cach dat hij ineens mobile formaat plaatjes laat zien aan een desktop bezoeker?

    Graag hoor ik van jullie wat de mogelijkheden hier voor zijn.

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)
  • Shmoo

    (@macpresss)

    12 jaren, 3 maanden geleden

    Dit is nog een struikelblok waar de wereld op vandaag nog over valt in CMS’en en waar nog niet een perfecte oplossing voor is.

    Wat de meeste mensen doen is ze schalen de afbeelding omlaag zodra het schermformaat kleiner wordt.
    Nee dit is niet de ideale oplossing maar ik vind het wel nog altijd de mooiste oplossing omdat je maar 1 afbeelding gebruikt en niemand gaat zijn browser schalen tijdens het surfen.

    Voorbeeld.
    http://dl.dropbox.com/u/75896077/foldy960/index.html

    Schaal je browser maar eens kleiner naar iPhone formaat dan zal je zien dat de afbeelding zich aanpast aan de pagina via de Media Queries.
    Ik vind dit een prachtig (simpele) oplossing al is het niet perfect.

    ===

    Andere oplossing is via Javascript de source aanpassen.
    Bijv:

    <img src="images/afbeelding<.javascript-input.>.jpg" alt="hallo" >

    En een Javascript gaat dan eerst hengelen (vissen) naar browser-/device gegevens en plaats dan bijv. woordjes als default, iphone of ipad voor de .jpg waardoor het juiste bestand aangesproken wordt.

    Maar ook dit is niet de manier omdat het vissen naar browser gegevens ook niet goed te praten is en te manipuleren is.

    Ik zou voor de Media Queries optie gaan omdat het veel natuurlijker is en je maar 1 afbeelding hoeft te gebruiken alleen moet je geen 1mb afbeeldingen uploaden en verwachten dat deze BOEM zichtbaar zijn op een telefoon.

    Thread starter nytrm

    (@nytrm)

    12 jaren, 3 maanden geleden

    Thanks voor je reactie, momenteel maak ik al gebruik van twitter bootstrap die dit al voor mij doet.

    Als iemand een andere oplossing heeft zou ik dat graag willen horen

    Wouter Tinbergen

    (@wwwouter_dutch)

    12 jaren, 3 maanden geleden

    Let op met JS oplossingen: ‘double download penalty’ is het issue daar: de lage en hoge resulutie worden dan allebei geladen.

    Heel veel goede info met links:
    http://responsivedesignweekly.com/rwd-summit/javascript-in-responsive-web-design-by-dave-rupert/

    Shmoo

    (@macpresss)

    12 jaren, 3 maanden geleden

    Dave Rupert is een Held hij’s ook de maker van het Foldy 960 template dat ik hierboven toon.

    Ik gebruik het altijd standaard als Boiler template.
    Geen poespas en een stunning workflow.

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)
  • Het onderwerp ‘Responsive post html content’ is gesloten voor nieuwe reacties.