Beantwoord

Mobiel vriendelijkheid website

  • 21 september 2016
  • 26 reacties
  • 380 keer bekeken

Reputatie 3
Badge +1
  • WebsiteMaker Tester
  • 104 reacties
Ik heb met behulp van google mijn website laten testen op de mobiel vriendelijkheid, uit de test kwam het volgende naar voren:

Zou dit snel aanpassen!

icon

Beste antwoord door Mick 13 oktober 2016, 05:49

Hoi Tim,



Bedankt voor je reactie! Inderdaad, zal het in mijn achterhoofd houden. Wellicht dat als ik iets zie, het toch aan kan dragen zodat jullie er misschien iets aan hebben voor de toekomst 🙂.



Ik heb er al wat op gevonden, simpelweg het product met 30 capsules het eerste artikelnummer geven, hierdoor verschijnt die nu als eerst in beeld. Met CSS ben ik zelf ook totaal niet bekend, dat is iets voor de toekomst! Ben al blij dat ik met behulp van jullie platform een website heb kunnen bouwen, a-technisch als ik ben haha.
Bekijk origineel

26 reacties

Reputatie 3
Badge +1
Zo is de homepage te zien op mijn telefoon

Reputatie 7
Badge +11
Hi Mick,

Ik heb een LG G3, Android 6.0 met Chrome browser.

Reputatie 7
Badge +11
Dit is de standaard browser. Alle andere paginas zien er ook zo uit.

Reputatie 3
Badge +1
Dit ziet er inderdaad hartstikke prima uit. Wat raar dat hij dan op mijn telefoon wel zo verschijnt!
Reputatie 7
Badge +11
Hi Mick,

Op een iPhone ziet de website er ook goed uit. Heb je misschien een bepaalde zoomfunctie aan staan?

Reputatie 3
Badge +1
Bij mij staat het nu ook goed!
Reputatie 7
Badge +11
Was het een bepaalde instelling, Mick?
Reputatie 3
Badge +1
Ik heb geen idee eerlijk gezegd, heb verder niks veranderd.
Reputatie 7
Badge +11
Hi Mick,

Je website ziet er weer zo uit als op jouw eerste screenshots. En je raad het misschien wel, die weergave vindt google juist perfect.

Prettig aan deze weergave is toch wel het menu. De afbeeldingen zijn veel te groot. 2 naast elkaar is wellicht beter?

Reputatie 3
Badge +1
Hoi Tim,

Wat raar dat google dat dan juist wel mobiel vriendelijk vindt. Menu is inderdaad perfect. In principe vind ik 4 afbeeldingen naast elkaar het mooist, misschien een idee om de afbeeldingen wat kleiner te maken, of zou dat niets uithalen?
Reputatie 7
Badge +11
Hi Mick,

Een idee is om de 4 afbeeldingen naast elkaar te plakken en er 1 afbeelding van te maken, dan kunnen ze ook niet onder elkaar komen te staan.

Als voorbeeld heb ik de afbeeldingen samengevoegd en toegevoegd aan je sitebuilder. Het resultaat ziet er goed uit, zo zou de mobiele weergave eruit komen te zien:

Mocht je dit willen gebruiken, hoef je in de sitebuilder alleen de 2e rij met afbeeldingen weg te halen :)

Reputatie 7
Badge +11
PS. Het zou kunnen dat de 4 afbeeldingen nog iets verplaatst moeten worden, ofzo 😉
Reputatie 3
Badge +1
Bedankt voor het meedenken en helpen! Ik heb het geprobeerd (staat er nu nog steeds als je via je mobiel kijkt), maar dan krijg je de teksten alsnog onder elkaar en dat ziet er helaas ook slordig uit. Hmm, wat is handig.
Reputatie 7
Badge +11
He Mick,

De afbeeldingen staan in de mobiele weergave nu netjes naast elkaar.
Om de tekst beter / mooier weer te geven weet ik niet direct een trucje. De website vind ik er op mobiel nu uitzien en leest prettig. De tekst kan misschien nog wel wat beter gecentreerd worden.

In sitebuilder heb je de mogelijkheid om tijdens het bewerken te schakelen naar de mobiele weergave. Zo kun je direct zien wat het resultaat van aanpassingen is.

Reputatie 3
Badge +1
Het zou er eigenlijk zo uit moeten zien als hoe het er op een desktop uit ziet en op de print sqreens die jij 9 dagen geleden had gemaakt. (de teksten naast elkaar en de afbeeldingen naast elkaar). De afbeeldingen zijn nu nietszeggend, omdat de teksten verspreid onder elkaar staan, zonder directe link met de afbeelding.
Reputatie 7
Badge +11
Hi Mick, dat gaat misschien een beetje lastig worden.. Het hele punt van een mobile responsive website is dat tekstblokken juist groter worden gemaakt zodat ze makkelijk leesbaar zijn op kleine schermen. Het is mogelijk om hier zelf meer controle over te hebben, al kom je dan wel sneller in de buurt van html of een eigen CSS script.
Reputatie 3
Badge +1
Oke! Daar kijk ik dan later nog wel naar. Heb jij toevallig enig idee hoe ik in ieder geval de teksten op de mobiele weergave wat rechter onder elkaar kan zetten?
Reputatie 7
Badge +11
Mick, ik heb de tekst overal voor je gecentreerd. De weergave is een stukje beter geworden op mobiel.

Het valt nu wel op dat de ruimte tussen de koptekst en de tekst zelf een beetje groot is. Wellicht kun je die witregels weglaten. Met het toevoegen van padding zou je de ruimte tussen de teksten wat ruimer kunnen maken.

Reputatie 3
Badge +1
Dat is al een stuk beter inderdaad 🙂 Van padding heb ik geen verstand haha
Reputatie 3
Badge +1
Wat ik me nog afvroeg, als het eerst wel precies zo verscheen als op een desktop (met de afbeeldingen met tekst mooi onder elkaar), hoe kan het dan dat het nu toch anders uit ziet. Moet het van mezelf gewoon even perfect maken 😛
Reputatie 7
Badge +11
Hi Mick,

Waarom de website een paar weken geleden niet de responsive design weergaf, durf ik niet te zeggen. Op dat moment hadden we aan de leverancier kunnen vragen hoe het kwam. Het valt mij verder op dat er geen mogelijkheid lijkt te zijn om de mobiel responsive design uit te schakelen zodat de desktop weergave ook op mobiel actief is. Indien je nieuwsgierig bent, kunnen we dit aan de leverancier vragen,

Ik heb de winkel ook even op mobiel bekeken. Daar moet ook nog een beetje aan gesleuteld worden. Er is wederom padding aanwezig waardoor de winkel erg smal is. De padding heb ik weggehaald en alle onderdelen iets geoptimaliseerd. Nu is de winkel ook prettig weer te geven op mobiel.

Met padding:


Zonder padding:


Het idee van responsive mobile design wil ik je graag toelichten. Bij een responsive desgin is de website opgedeeld in blokken. Deze blokken worden op mobiel onder elkaar gezet. Dit zodat je niet hoeft in te zoomen om de inhoud te kunnen lezen. Onderstaande afbeelding maakt dit duidelijker:


Als ik wat tijd over heb, kijk ik graag nog eens naar je website zodat ik je advies kan geven.
Reputatie 3
Badge +1
Hoi Tim,

Aha, het is me nu een stuk duidelijker. Heel fijn dat je de winkel hebt geoptimaliseerd, dit ziet er inderdaad een stuk beter uit 🙂.

Wat betreft de homepage, dat komt dan inderdaad nog wel!
Reputatie 3
Badge +1
Ik ga even zeuren.

Wat zouden jullie adviseren bij het volgende? Tim had voor mij de bestel pagina op mobiel aangepast, echter had ik toen nog maar 1 product. Nu ik 3 producten heb, verschijnen de producten onder elkaar in plaats van naast elkaar op mobiel. Ik heb al 2 klanten gehad die vroegen waarom er alleen maar verpakkingen verkrijgbaar waren met 10 capsules en die daardoor dus 10 ipv 30 capsules kochten.

Bestaat er de mogelijkheid om het naast elkaar te krijgen en er ook nog mooi uit te laten zien?
Reputatie 7
Badge +11
Hi Mick, ondanks dat je denkt te zeuren, is het wel een leuke uitdagende vraag.

Het antwoord is ja en nee. Volgens mij heb jij nu bijna alles gezien wat je met WebsiteMaker en in de winkel met simpele drukken op de knop kunt aanpassen. Zoals je hebt gezien valt niet alles aan te passen, voornamelijk is de winkel (nog) niet volledig bewerkbaar. Voor dit soort aanpassingen zijn nog geen (eenvoudige) hulpmiddelen beschikbaar.

Als je de winkel opent, kun je bij de instellingen - Ontwerp - CSS thema's, het complete CSS thema bewerken! Hier heb ik zelf nog niet aan gezeten maar je lijkt bijna alles te kunnen bewerken. CSS is een stijl/code voor websites. Wellicht een idee om eens snel cursus te volgen of iemand met ervaring te vragen om erbij te helpen?

Meer over CSS styles: http://www.w3schools.com/css/

Persoonlijk is mijn CSS kennis niet super, anders had ik graag even willen een voorproefje willen geven. Als ik in het thema kijk kom ik bijvoorbeeld de volgende code tegen:

code:
html#ecwid_html body#ecwid_body .horizontal-menu-item--back {
background: #ededed;
margin: -10px -10px 10px;
}

Dit element staat voor de "terug" knop in het menu. De achtergrond kleur van dit element zou deze kleur moeten hebben (#ededed). Verander de kleurcode om een andere kleur te krijgen. "Margin" is de ruimte om het element heen. Op deze manier zou het mogelijk zijn om de winkel er volledig anders uit te laten zien.
Reputatie 3
Badge +1
Hoi Tim,

Bedankt voor je reactie! Inderdaad, zal het in mijn achterhoofd houden. Wellicht dat als ik iets zie, het toch aan kan dragen zodat jullie er misschien iets aan hebben voor de toekomst 🙂.

Ik heb er al wat op gevonden, simpelweg het product met 30 capsules het eerste artikelnummer geven, hierdoor verschijnt die nu als eerst in beeld. Met CSS ben ik zelf ook totaal niet bekend, dat is iets voor de toekomst! Ben al blij dat ik met behulp van jullie platform een website heb kunnen bouwen, a-technisch als ik ben haha.

Reageer