Google mobile-friendly, doen of niet doen? Hoe? - Softwareontwikkeling

maandag 20 april 2015 16:57

Acties:

0 Henk 'm!

houten vaas/schaal nodig?

Topicstarter

Ik leeshttp://www.heise.de/newst...ung-abwerten-2613323.html dat Google mogelijk sites die (volgens Google) niet voor gebruik op een mobiel geoptimaliseerd zijn lager wil plaatsen.

Mijn site is opgebouwd uit houtje-touwtje html, met allerlei plekken op het schem in 'in' eenheden.
Google keurt hem af, maar het beeld op het scherm lijkt me nog niet eens zo onaardig:

https://www.google.com/we...2Fwww.houtenschalen.nl%2F

Dus ik nijver aan de slag om alle absolute eenheden in vw en vh te veranderen, fonts in im i.p.v. pt etc., en ik zie verheugd dat google hem nu 'mobile friendly' noemt. Maar het plaatje is afzichtelijk, alle tekst loopt over elkaar.

https://www.google.com/we...nschalen.nl%2Findex2.html

Een test op een 5" FHD smartphone met Android 4.2 op de standaard browser bevestigt dat wat Google denkt dat mobile friendly is, onleesbaar is, terwijl wat Google denkt dat slecht is, best te lezen is.

Iemand een tip?

hout-nerd - www.hetmooistehout.nl of www.houtenschalen.nl

maandag 20 april 2015 17:01

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

"Mobile friendly" houdt (véél) meer in dan je eenheden veranderen. Google eens op "responsive web design"

[ Voor 26% gewijzigd door RobIII op 20-04-2015 17:01 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

maandag 20 april 2015 22:16

Acties:

0 Henk 'm!

Boelie-Boelie

Ik wil er niet een link-topic van maken maar misschien handig om te weten wat volgens Google best practices zijn voor 'multi-device layouts'.

Cogito ergo dubito

maandag 20 april 2015 22:59

Acties:

0 Henk 'm!

André

Analytics dude

Google gaat vanaf morgen de wijziging in het algoritme uitrollen. Over het algemeen gaat dit geleidelijk over de wereld in 4-6 weken. De sites die niet mobielvriendelijk zijn zullen op mobiele apparaten veel minder zichtbaar worden als er concurrenten zijn die dat wel zijn. In enkele gevallen zal je hier niet veel van merken, en op een aantal woorden zul je helemaal uit de top 10 valen op mobiel. De komende dagen zullen we via veel blogs precies de impact kunnen meelezen, en op basis daarvan kun je alsnog bepalen of je als de sodemieter alles mobielvriendelijk moet maken of dat het meevalt.

donderdag 23 april 2015 15:11

Acties:

0 Henk 'm!

BramVroy

Zoals gezegd eens naar responsive design/media queries kijken. Het gaat enkel om het design dat mobile-friendly moet zijn.

Hier vind je trouwens een Google Guide voor SEO op mobiel: https://developers.google...ites/mobile-seo/?hl=nl-NL

vrijdag 24 april 2015 13:04

Acties:

0 Henk 'm!

DJMaze

Jammer dat jouw website niet "mobile friendly" wordt aangemerkt.
Echter kwam ik er achter dat Google van een aantal websites zegt dat ze dat zijn terwijl dat helemaal niet het geval is!
De bug is dat Google niet de breedte/hoogte van elementen op de juiste manier controleert.

Verander eens

code:

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

in

code:

1	<!DOCTYPE html>

Repareer tevens je HTML en hang er een CSS bestand aan.

Maak je niet druk, dat doet de compressor maar

vrijdag 24 april 2015 15:05

Acties:

0 Henk 'm!

b2vjfvj75gjx7

Je site mobile-friendly maken doe je voor je bezoekers met een mobieltje - niet voor een GhostRank van Google...

Overigens heb ik nav. dit bericht gisteren mijn site wel mobile-friendly gemaakt; niet voor Google, maar omdat ik er al een tijd mee liep dat mijn site niet responsive was.

Dit berichtje was 'de druppel', dus na aanpassing van wat CSS (niet de units, maar het responsive gedrag) schaalt nu alles netjes / relatief mee.

VW en VH zou ik niet op terugvallen - Android ondersteunt dat nauwelijks (pas vanaf 4.nogwat). Je kan een polyfill met REM gebruiken, maar dat werkt niet in Safari en bij Android pas vanaf 4.3. Eventueel kan je een polyfill nemen die de 'content:' tag misbruikt en daar met een scriptje zelf een VW/VH van maakt.

Ik gebruik die laatste voor apps - werkt perfect op alle devices, ook van vier jaar terug...

[YouTube: https://www.youtube.com/watch?v=v7oAIoMD268]

Videootje laat zien hoe alles meeschaalt op diverse groottes - ook de switch van landscape naar portrait en vice versa.

[ Voor 17% gewijzigd door b2vjfvj75gjx7 op 24-04-2015 15:12 ]

maandag 27 april 2015 22:05

Acties:

0 Henk 'm!

thunder7

houten vaas/schaal nodig?

Topicstarter

[b][message=44123917,noline]
Verander eens
code:
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
in
code:
1
<!DOCTYPE html>
Repareer tevens je HTML en hang er een CSS bestand aan.

Goede tip, ik heb bv www.houtenschalen.nl/werkplaats3.html omgebouwd - maar voor het uiterlijk en Google's mening maakt dat niet veel uit. Het ziet er wel een stuk cleaner uit, dus ik denk dat ik er mee doorga.

Bedankt!

hout-nerd - www.hetmooistehout.nl of www.houtenschalen.nl

maandag 27 april 2015 22:57

Acties:

0 Henk 'm!

Wiebeltje

Ik heb even gekeken en de hoofdindeling is geplaatst met een position: absolute en een vaste breedte etc. Ik denk dat daar het probleem vooral in zit. Ik noem maar even iets simpels:

Geef je menu links een breedte van 20% en het tekst vlak een breedte van 80% met op beiden een float left zonder die absolute positionering, top, etc. Je header geef je voor het gemak even een 100% breedte. Je zal zien dat je site al een stuk mee gaat schalen. Maak je de site te smal dan zal het nog steeds fout gaan omdat je geen plaats meer hebt voor je menu maar daar zijn andere oplossingen voor.

dinsdag 28 april 2015 11:10

Acties:

0 Henk 'm!

thunder7

houten vaas/schaal nodig?

Topicstarter

Ik kom een eind, maar ik vraag me af hoe veel telefoons er daadwerkelijk nog een breedte van 320 pixels hebben, waar Google mee werkt - het soort telefoons waar mensen daadwerkelijk internet op gebruiken lijkt me toch geen 320 pixels breed te zijn.

hout-nerd - www.hetmooistehout.nl of www.houtenschalen.nl

dinsdag 28 april 2015 11:55

Acties:

0 Henk 'm!

Caelorum

Waarschijnlijk niet veel in de westerse landen, maar het is wel een mooie manier om te kijken of een website fatsoenlijk is gemaakt. Meestal als het goed rendert op 320px breedte gaat het wel goed op alle telefoons.
Al is het wel een beetje grof en hebben ze zeker niet altijd gelijk.

[ Voor 14% gewijzigd door Caelorum op 28-04-2015 11:55 ]

dinsdag 28 april 2015 14:21

Acties:

0 Henk 'm!

Spinal

thunder7 schreef op dinsdag 28 april 2015 @ 11:10:
Ik kom een eind, maar ik vraag me af hoe veel telefoons er daadwerkelijk nog een breedte van 320 pixels hebben, waar Google mee werkt - het soort telefoons waar mensen daadwerkelijk internet op gebruiken lijkt me toch geen 320 pixels breed te zijn.

Jawel

min of meer dan. De Nexus 5 bijvoorbeeld heeft 1080 horizontale pixels, maar de browser krijgt 360 terug, oftewel 1 CSS-pixel is 3 "echte" pixels. Hetzelfde geldt voor andere telefoons.
Een breakpoint op 320 pixels is dus heel normaal

Full-stack webdeveloper in Groningen

dinsdag 28 april 2015 16:41

Acties:

0 Henk 'm!

gitaarwerk

Plays piano,…

Yes. Maar er zijn een hoop uitzonderingen. Vooral als je iets gaat berekenen met de window with en document with tussen chrome browser op android en de stock android browser ;-) Dat is wanneer de hel start.

Daarnaast werkt ook de meta tag voor je device with ook heel anders op android versus ios. Het is wel een flinke tijdsinvestering.

Ontwikkelaar van NPM library Gleamy

dinsdag 28 april 2015 16:45

Acties:

0 Henk 'm!

BramVroy

Spinal schreef op dinsdag 28 april 2015 @ 14:21:
[...]

Jawel min of meer dan. De Nexus 5 bijvoorbeeld heeft 1080 horizontale pixels, maar de browser krijgt 360 terug, oftewel 1 CSS-pixel is 3 "echte" pixels. Hetzelfde geldt voor andere telefoons.
Een breakpoint op 320 pixels is dus heel normaal

Met een mooi woord noemen we zoiets pixel ratio. je kan dat ook targetten in je CSS. Dat is best gemakkelijk. Ik Voor een logo doe ik bijvoorbeeld dit:

Cascading Stylesheet:

a {
    background-image: url('img/logo.png');
    background-position: left center;
    background-repeat: no-repeat;
    overflow: hidden;
    width: 40px;
    @media only screen and ( -webkit-min-device-pixel-ratio: 1.3 ),
        only screen and (min--moz-device-pixel-ratio: 1.3 ),
        only screen and (-o-min-device-pixel-ratio: 2.6/2 ),
        only screen and (min-device-pixel-ratio: 1.3 ),
         only screen and (min-resolution: 124.8dpi ),
        only screen and (min-resolution: 1.3dppx ) {
            background-image: url('img/logo@2x.png');
            background-size: auto 40px;
}

Hopelijk wordt image-set gauw een standaard. Dat samen met scrset zou heel wat zaken moeten vergemakkelijken op het gebied van hi-dpi afbeeldingen.

dinsdag 28 april 2015 16:49

Acties:

0 Henk 'm!

gitaarwerk

Plays piano,…

srcset doet helaas nog niet helemaal wat het moet doen. Inderdaad hopen ;-) maar de device pixel ration is relatief makkelijk op te lossen zonder die brei met data ;-)

Ontwikkelaar van NPM library Gleamy