Mobile optimalisatie website.

  • RobinM11

    (@robinm11)


    9 jaren, 10 maanden geleden

    Goedenavond,

    Binnen mijn wordpress website gebruik ik woocommerce actief voor e commerce. Nu zou ik graag mijn website verder willen optimaliseren voor mobiel gebruik. Mijn thema mini mart, heeft al een ingebouwd mobiel thema maar ik ben hier niet tevreden over.

    Zaken die ik graag zou willen zien.

    – Grid overzichtspagina’s. Op dit moment wordt dit weergegeven als lijst. Op de desktop versie is de grod wel netjes.
    – nieuw menu met uitklap mogelijkheid. Huidige menu is niet functioneel. Alles wordt als lijst weergegeven.
    – verder zou ik graag afbeeldingen apart willen schalen voor mobiel. Voorbeeld: width voor desktop 30% en voor mobiel 100%.

    Heeft iemand tips over hoe ik dit zou kunnen doen?

    Groeten Robin

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Ruurd de Wind

    (@geoclaps)

    9 jaren, 10 maanden geleden

    Zelf gebruik ik hier media queries voor. Deze kun je op diverse manier implementeren:

    Bijvoorbeeld:

    @media screen and (max-width: 768px) {
      body #container { width: 680px; }
    }

    Bovenstaande dien je in je bestaande css bestand te plaatsen. Het zorgt er in dit geval voor dat wanneer je viewport/browser smaller wordt dan 768px je div met ID “container” (#container) wordt terug gezet naar een breedte van 680px, dus binnen de 768px.

    Of via externe css bestanden het volgende binnen je head tags te plaatsen:

    <link rel=’stylesheet’ media=’screen and (min-width: 768px) and (max-width: 900px)’ href=’css/medium.css’ />

    Let er in het laatste geval op dat je externe css bestanden aanmaakt en beheert. Mijn favoriet is de eerste situatie gezien ik alle styling dan binnen 1 bestaand css bestand hou.

    http://css-tricks.com/css-media-queries/
    http://www.webdesignermagazine.nl/tutorials/tutorial-een-bestaande-site-responsive-maken/5973/

    Thread starter RobinM11

    (@robinm11)

    9 jaren, 10 maanden geleden

    Dan heb je het over het laatste punt neem ik aan?
    De container wordt in het thema juist geschaald. Het probleem is dat ik wil dat sommige afbeeldingen op mobiel 100% worden weergegeven en bij desktop 30%.

    Ik hoor het graag.

    Ruurd de Wind

    (@geoclaps)

    9 jaren, 10 maanden geleden

    Bovenstaand voorbeeld is fictief. Ik heb verder niet gekeken naar de structuur.

    Wat ik kan zien aan het voorbeeld thema van Mini Mart is dat het sowieso al afbeeldingen schaalt. Zie onderstaande screenshot:

    http://i60.tinypic.com/212xpfn.png

    Pas bij een schermbreedte kleiner dan 480px maakt ie de afbeelding een stuk kleiner. Tussen de 481 en 768 is de afbeelding zo’n beetje 100%.

    Of wil je dat ie ook bij kleiner dan 480 de afbeelding 100% toont?

    Thread starter RobinM11

    (@robinm11)

    9 jaren, 10 maanden geleden

    Ik wil dat op mobiele apparaten de producten twee op een rij worden weergegeven. Op dit moment heeft een productpagina bijvoorbeeld 80 producten waardoor je een lange onoverzichtelijke lijst krijgt.
    De website is hier te bekijken: nldamp. nl

    Ruurd de Wind

    (@geoclaps)

    9 jaren, 10 maanden geleden

    Ik kan je vertellen dat je css een behoorlijke wirwar is 🙂 mijjn god…

    Maar goed, pas in https://www.nldamp.nl/wp-content/themes/minimart/assets/layout.css het volgende aan (regel 537):

    .dessky-display-pd-col-4 li {
        width: 350px !important;
    }

    naar:

    dessky-display-pd-col-4 li {
        /*width: 350px !important;*/
    }

    en op regel 390 van hetzelfde css bestand :

    .dessky-display-pd-col-4 li {
       width: 230px !important;
    }

    naar:

    .dessky-display-pd-col-4 li {
        /*width: 230px !important;*/
    }

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Het onderwerp ‘Mobile optimalisatie website.’ is gesloten voor nieuwe reacties.