Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie
Toon posts:

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

Pagina: 1
Acties:

  • thunder7
  • Registratie: januari 2003
  • Laatst online: 14:38

thunder7

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


  • RobIII
  • Registratie: december 2001
  • Laatst online: 11:08

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.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij


  • Boelie-Boelie
  • Registratie: november 2004
  • Laatst online: 08-09-2018
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


  • André
  • Registratie: maart 2002
  • Laatst online: 14:17

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.

  • BramVroy
  • Registratie: november 2009
  • Laatst online: 18-09 16:14
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

  • DJMaze
  • Registratie: juni 2002
  • Niet online
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


  • deathgrunt
  • Registratie: maart 2009
  • Niet online
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 deathgrunt op 24-04-2015 15:12]


  • thunder7
  • Registratie: januari 2003
  • Laatst online: 14:38

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


  • Wiebeltje
  • Registratie: maart 2013
  • Laatst online: 14:56
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.

  • thunder7
  • Registratie: januari 2003
  • Laatst online: 14:38

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


  • Caelorum
  • Registratie: april 2005
  • Laatst online: 14:31
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]


  • Spinal
  • Registratie: februari 2001
  • Laatst online: 13:31
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


  • gitaarwerk
  • Registratie: augustus 2001
  • Niet online
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.

  • BramVroy
  • Registratie: november 2009
  • Laatst online: 18-09 16:14
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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.

  • gitaarwerk
  • Registratie: augustus 2001
  • Niet online
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 ;-)
Pagina: 1


Apple iPhone SE (2020) Microsoft Xbox Series X LG CX Google Pixel 4a CES 2020 Samsung Galaxy S20 4G Sony PlayStation 5 Nintendo Switch Lite

'14 '15 '16 '17 2018

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2020 Hosting door True