Ondersteuning » Thema en CSS/opmaak » Eigen gemaakte template omzetten voor mobiel

  • Opgelost Damiaan van Vliet

    (@damnsharp)


    Goedemiddag allen, die ondanks het fantastische weer binnen zitten 🙂
    Mijn zelfgemaakte WordPress template voor mijn site wil ik bij de CSS code toevoegen dat deze bij een iPad of smartphone goed te bekijken is.
    Hoe begin ik daarmee? Kan iemand mij wat links of tips geven daar voor. Als ik google dan verzand ik en kom er niet goed uit.

    Ik dacht te beginnen met “@media handheld {” onderaan toe te voegen en dan opmaak te beginnen maar hoe/wat weet ik nog niet.
    Temeer, omdat iPad andere resolutie dan smartphone heeft en zo voorts.

    Thanks alvast!

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

    (@macpresss)

    Wat jij zoekt heet Media Queries.

    Mooie tutorial

    Success

    Dat is inderdaad een hele nette tutorial van Ome Schmoo.

    Het lezen van Responsive Web Design is ook een dikke aanrader voor deze materie.

    Thread starter Damiaan van Vliet

    (@damnsharp)

    Super @shmoo en @reanimatie! Met die links kom ik vast verder, ik heb al even gekeken natuurlijk.
    Nogmaals bedankt voor de reacties. Kom ik er niet uit laat ik een berichtje weer achter.

    Thread starter Damiaan van Vliet

    (@damnsharp)

    offtopic: Oh, ben bezig met Avatar maar Gravatar werkt niet mee…

    Thread starter Damiaan van Vliet

    (@damnsharp)

    @shmoo, die tutorial ziet er goed uit, Media Queries maar dat is wel met CSS versie 3 en die wordt alleen door de allernieuwste browsers ondersteund en bijvoorbeeld IE 8 wordt nog veel gebruikt. Is er nog een andere manier?

    @reanimatie, Responsive Web Design heb ik nog niet gekocht dus misschien wordt mijn bovenste vraag daarin beantwoord, dan moet ik het misschien toch maar kopen, is ook niet zo duur overigens.

    Shmoo

    (@macpresss)

    Media Queries werken idd. in samenwerking met CSS3 en dus met browsers die op vandaag vaker gebruikt worden.

    Maar aan de andere is dat juist ook geen probleem omdat je deze Media Queries juist wilt inzetten voor schermafmetingen die kleiner zijn dan de ‘normale’ afmetingen die wij allemaal gebruiken op onze Desktops en Laptops.

    Het doel van deze Media Queries is als iemand met een Tablet of Smartphone op jouw website terecht komt dat deze de website netjes te zien krijgt en dat de content Responsive is aan het type Device dat deze persoon in zijn-/haar handen heeft.
    En net op al die Tablets en Smartphones zitten standaard browsers die al van vele betere kwaliteit zijn dan IE9, Bijv. de Safari browser op de iPhone en iPad doet echt niet onder voor de Desktop versie.

    Ik heb geen idee wat voor een type browser er gebruikt wordt op een Windows Phones dat zal vast wel IE-Mobile zijn of zoiets maar volgens mij ondersteunen die ook echt wel Media Queries op vandaag. Maar Samsung, HTC, Apple en de rest van de bendes hebben allemaal standaard browsers waar je je geen zorgen over hoeft te maken, die bieden allemaal support aan HTML5 + CSS3.

    En het eBoek dat Reanimatie tipt is zeer zeker de moeite waard om te kopen, ik heb al hun boeken en ze staan altijd voor kwaliteit wat betreft de informatie die ze geven alleen kan het zijn dat iemand die nog maar pas komt kijken direct in het diepe gegooid wordt, want ze gaan er wel vanuit dat je bepaalde kennis hebt van HTML(5)-/CSS voordat je zo’n boek koopt.

    Als je dus zelf een website kunt bouwen met HTML-/CSS en je begrijpt de engelse taal + de Tutorial om de website die ik tipte dan is het boek gewoon echt wel een toevoeging en een basis voor de toekomst.

    Het boek gaat gewoon veel verder dan de tutorial, ze vertellen je eerst hoe je een Grid kan maken en waarom dit handig is en daarna helpen ze je ook direct bij het maken van een CSS Reset voor al je afbeeldingen en video’s zodat deze ook direct meeschalen met de afmetingen van je content op de website. Daarna leggen ze alles uit over Media Queries.

    Voor die paar Euro dat zo’n boek kost kan je denk ik niet gaan zoeken online naar tutorials, video’s en weet ik veel wat nog meer.

    aansluitend hierbij: http://adaptive-images.com/ serveer passende afbeeldingen bij verschillende schermresoluties.

    Thread starter Damiaan van Vliet

    (@damnsharp)

    Super zeg jullie (uitgebreide) antwoorden! Die tutorial kom ik uit dus dat boek gaat ook vast lukken. En adaptive images ziet er ook geweldig uit en te eenvoudig om waar te zijn, ga het uitproberen.
    Ik zal dit topic op resolved zetten, want dat is het nu wel 🙂

8 reacties aan het bekijken - 1 tot 8 (van in totaal 8)
  • Het onderwerp ‘Eigen gemaakte template omzetten voor mobiel’ is gesloten voor nieuwe reacties.