12 berichten aan het bekijken - 1 tot 12 (van in totaal 12)
  • Q:

    Bijdrager
    Jose

    website responsive maken in sublime text

    Hallo,

    Ik heb een paar jaar geleden een website gemaakt met sublime text. Nu wil ik hem graag aanpassen en hem responsive maken zodat hij op meerdere schermformaten goed werkt. Wie weet wat ik hiervoor in HTML en CSS moet aanpassen.

    • Dit onderwerp is gewijzigd 1 jaar, 11 maanden geleden door  Pete.Z. Reden: Verplaatst uit OMT sub-forum

    Bijdrager
    Brinkige

    Om je site zelf volledig responsive te maken zal waarschijnlijk een tijdrovend werkje worden, aangezien je veel aanpassingen zal moeten doen in je HTML, CSS en eventueel scripts.

    Beter gebruik je een standaard framework dat hier speciaal voor gemaakt is. Bootstrap is daarin mijns inziens het makkelijkst en tevens meest uitgebreid. Zie http://getbootstrap.com/.


    Bijdrager
    koen

    Om een website responsive te maken hoef je als het goed is alleen je css aan te passen.

    Ethan Marcotte heeft hier heel veel over geschreven, bijvoorbeeld: http://alistapart.com/article/responsive-web-design. Ook zijn boek kan ik je aanraden.

    • Deze reactie is gewijzigd 1 jaar, 11 maanden geleden door  koen.

    Bijdrager
    Shmoo

    Het is alleen niet zo makkelijk of hap klare brokken omdat het best wel maatwerk is voor elke site. Het is geen kwestie van even wat code toevoegen en het werkt. Elke site heeft een andere lay-out en zal je dus zelf moeten gaan beslissen waar je breekpunten zetten en wanneer je met content gaat stapelen boven en onder elkaar ipv naast elkaar.

    Deze pagina is en was eigenlijk een van de eerste serieuze en duidelijke uitleg om mee te beginnen. Niet veel termen, niet veel bombarie maar gewoon plain media queries uitleg de basis. Als je dit begrijp rol je vanzelf verder in het begrip.

    CSS3 Media Queries


    Bijdrager
    computer space

    Responsive is ergens ook weer enorm ruk. Je kunt bijna beter 3 opties bieden die te kiezen zijn waarbij de CSS wordt aangepast en de keuze wordt vastgelegd in een cookie.
    We gaan immers naar Phablet-first benadering. Mobile-first is al weer over: wie wil er nog een 320×480 optimized site op zijn telefoon met 5.5 inch scherm?
    Responsive is enkel responsive naar de browser/resolutie zoals de browser deze doorgeeft. Maar nooit responsive naar de wens van de bezoeker.
    En dus zo flexibel als een stalen deur. Zit je op je phablet te klooien met een mobile-first responsive site: hamburgermenu bovenaan (AAARGH! daar kun je met je duim niet bij op een phablet!), van die regels tekst die zo groot zijn dat je zinnen van 3-4 woorden per regel krijgt, en zelfs opties die volledig verdwijnen. Denk je de klant van dienst te zijn terwijl die GVDtjes loopt te vloeken omdat je hem de dekstopversie onthoudt.

    GEEF DE BEZOEKER ZELF KEUZE!

    • Deze reactie is gewijzigd 1 jaar, 11 maanden geleden door  computer space.

    Bijdrager
    Waffle ಠ_ಠ

    Zo ervaar ik ‘responsive’ sites ook, computer space.

    Responsive sites zijn eigenlijk gewoon de oude WAP- of mobiele sites, maar dan net ietsjes fraaier. Maar qua mogelijkheden dus vaak gewoon watered-down, net als die oude mobiele sites. Dus wil ik de desktopversie, en gelukkig biedt Chrome daar de mogelijkheid toe en zou ik met één druk op de knop gewoon de normale sites moeten krijgen… maar nee dus. Een heel groot deel van responsive sites negeert die optie gewoon en herlaadt stug de responsive site. Uit frustratie sluit ik de site dan meestal maar.

    Ik vind deze oude iPhone reclame dan ook altijd zo mooi:


    Bijdrager
    Shmoo

    Ik zou een blauwe achtergrond maken dat vind ik persoonlijk het mooiste!


    Bijdrager
    Shmoo

    Dit soort zaken zijn de reden voor goed responsive design. Niet continue hoeven meebewegen om te zien wat je intikt.


    Bijdrager
    Waffle ಠ_ಠ

    @shmoo

    Ik snap best dat responsive design een functie heeft. Probleem is gewoon dat het naar mijn ervaring vaker niet goed dan wél goed wordt geïmplementeerd. Buiten de functionaliteit die vaak in RWD verloren gaat (opnieuw, vaker gaat dit fout dan goed) lijkt de content density nooit goed te zijn. Ik gebruik een Galaxy Note 4, een 5.7″ telefoon met een resolutie van 1440 x 2560. Daar kan je ontzettend veel tekst op kwijt zonder dat het onleesbaar wordt. Maar bij RDW wordt daar volgens mij niet over nagedacht, tekst is en blijft een bepaald formaat. Gevolg is dat ik zo nu en dan een gigantisch bejaardenfont voorgeschoteld krijg waardoor er maar 5 of 6 zinnen op het scherm passen. Dat is te belachelijk voor woorden! Mijn duim wordt gewoon lam van het scrollen. Ik heb dan toch liever dat ik het equivalent van een A4’tje aan tekst op een scherm kan lezen.

    Het idee is goed: alle content aanpassen op basis van het schermformaat. Maar in de werkelijke wereld blijkt dat sites eigenlijk alleen maar kijken naar de breedte van het scherm, waardoor er alleen tussen telefoon, tablet en desktop/laptop wordt gediscrimineerd. Je user agent zegt, “hoi, ik ben een telefoon” en dan wordt er een hele generieke smartphone pagina geladen. Telefoons variëren van 3,5″ tot ongeveer 6″. Dat is gewoon een enorm verschil. Het beste zou je nog de tablet-versie op een 5″+ smartphone kunnen tonen.

    • Deze reactie is gewijzigd 1 jaar, 11 maanden geleden door  Waffle ಠ_ಠ.

    Bijdrager
    Jose

    Allemaal bedankt voor de info. Ik zal er flink tegenaan moeten. Hoop dat het gaat lukken.


    Bijdrager
    koen

    @shmoo: dat is een heel irritante bug in iOS 10.


    Bijdrager
    Shmoo

    In iOS 9 zonder bug was het ook drama – alleen iets minder drama omdat je schermpositie automatisch meebewoog met de cursor.:wink:

12 berichten aan het bekijken - 1 tot 12 (van in totaal 12)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.