maak je website geschikt voor mobiel
TRANSCRIPT
![Page 1: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/1.jpg)
Maakjewebsitegeschiktvoormobiel
HansKuijpers
![Page 2: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/2.jpg)
Verbeterdevindbaarheid
![Page 3: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/3.jpg)
Mobile-Friendlytesthttps://www.google.com/webmasters/tools/mobile-friendly
![Page 4: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/4.jpg)
Mobile-FriendlytestMaarditishoeGoogledesiteziet
![Page 5: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/5.jpg)
RobotsblokkerendecontentAanwezigheidvanverouderderobots.txt
User-agent: *Disallow: /administrator/Disallow: /cache/Disallow: /cli/Disallow: /components/Disallow: /images/Disallow: /includes/Disallow: /installation/Disallow: /language/Disallow: /libraries/Disallow: /logs/Disallow: /media/Disallow: /modules/Disallow: /plugins/Disallow: /templates/
![Page 6: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/6.jpg)
Joomla!3.5robots.txtUser-agent: *Disallow: /administrator/Disallow: /bin/Disallow: /cache/Disallow: /cli/Disallow: /components/Disallow: /includes/Disallow: /installation/Disallow: /language/Disallow: /layouts/Disallow: /libraries/Disallow: /logs/Disallow: /modules/Disallow: /plugins/Disallow: /tmp/
![Page 7: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/7.jpg)
Joomladagen.nlresponsive
![Page 10: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/10.jpg)
WerkaandewinkelVolgendjaareennieuwesitejoomladagen.nl
mobielvriendelijk
voorzowelW3CmobileOKChecker
alsvoorGooglemobilechecker
![Page 11: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/11.jpg)
MaarnunaarjeeigenwebsiteStappenplan
Hoezietdesiteeruitopmobiel?
Hoezoujewillendatdesiteeropmobieluitziet?
apartdesign
responsive
Wijzigenmaar...
klinktnetzoeenvoudigalshettekenenvaneenpaard
![Page 12: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/12.jpg)
![Page 14: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/14.jpg)
GoogleResizer-mobiel
![Page 15: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/15.jpg)
Multi-devicelayoutpatternsLukeWroblewski
http://www.lukew.com/ff/entry.asp?1514
![Page 16: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/16.jpg)
Huidigestructuur
![Page 17: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/17.jpg)
Gewenstestructuur
![Page 19: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/19.jpg)
Codepenvoordecodevoorbeeldenhttp://codepen.io/team/css-tricks/pen/jqzNZq
![Page 20: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/20.jpg)
Huidigestructuur<body><div class="wrapper"> <div class="header"> <div class="header-image">...</div> <div class="tools">...</div> <table width="100%" border="0" cellpadding="0"> <tbody><tr> <td class="left">...</td> <td class="middle">...</td> <td class="right">...</td> </tr></tbody> </table> <div class="conditions">...</div> <div class="footer">...</div> </div></div></body>
![Page 21: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/21.jpg)
Gewenstestructuur<body><div class="site"> <header class="site__header">...</header> <div class="site__tools">...</div> <div class="site__main">...</div> <aside class="site__aside site__aside-1">...</aside> <aside class="site__aside site__aside-2">...</aside> <div class="site__footer">...</div></body>
![Page 22: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/22.jpg)
index.phpinhuidigetemplateOpjetestomgevingmetdebestaandetemplate
index.phpkopierennaarindex-orig.php
nieuwbestandindex-new.php
nieuwbestandindex.phpmetdevolgendinfo:
<?phpdefined('_JEXEC') or die;
include_once('index-new.php');//include_once('index-orig.php');
![Page 23: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/23.jpg)
Viewporttoevoegenvoorkomdatdevicegaatherschalen
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1">
voorkomdatusergaatpinchenenzoomen
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
advies:kiesvoorheteerste
![Page 24: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/24.jpg)
ToevoegenkanookvanuitJoomla
![Page 25: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/25.jpg)
Beginvanuitmobiel.site { display: flex; flex-flow: row wrap; justify-content: center; max-width:1200px; margin:0 auto; padding:5px;}
.site__header,
.site__tools,
.site__main,
.site__aside,
.site__footer { flex: 1 100%;}
![Page 26: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/26.jpg)
Nualgeweldigopmobiel
![Page 27: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/27.jpg)
Maarminderopdesktop
![Page 28: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/28.jpg)
Media-queriesbiedendeoplossing@media only screen and (min-width: 768px) { .site__main { flex: 1 0px; order: 2; } .site__aside.site__aside-1 { flex: 0 280px; } .site__aside-1 { order: 1; } .site__aside-2 { order: 3; } .site__footer { order: 4; }
![Page 29: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/29.jpg)
Tweekolommen...noggeendrie
![Page 30: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/30.jpg)
Meermedia-queries@media only screen and (min-width: 1024px) { .site__aside.site__aside-2 { flex: 0 240px; }}
![Page 31: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/31.jpg)
Eindresultaat
![Page 32: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/32.jpg)
Maardan...afbeeldingendietegrootzijn
tabellendienietpassen
iFramedienietpas
Thedevilisinthedetails
![Page 33: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/33.jpg)
Responsiveimagesimg {max-width: 100%;}
![Page 34: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/34.jpg)
Tables
![Page 35: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/35.jpg)
Bootstrapgebruikershttp://codepen.io/SitePoint/full/raXdwZ/
![Page 36: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/36.jpg)
CSS-TricksTableRounduphttps://css-tricks.com/responsive-data-table-roundup/
![Page 37: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/37.jpg)
iFrame
![Page 38: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/38.jpg)
iFrame
![Page 39: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/39.jpg)
HTMLenCSSwijzigingVerwijderwidhtenheightuitiFramehtmltagplus
iframe { border:none; width:100%; height:100%; min-height:600px;}@media only screen and (min-width: 1084px) { iframe { width: 768px; }}
![Page 40: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/40.jpg)
iFrame
![Page 41: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/41.jpg)
iFrame
![Page 42: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/42.jpg)
EindgoedalgoedHoezietdesiteeropmobieluit?
Hoewiljedatdesiteeruitkomttezien?
Keuzevoorresponsiveofseparaattemplate
viewport&media-queries&details:-)
flexboxiscool!
![Page 43: Maak je website geschikt voor mobiel](https://reader034.vdocuments.mx/reader034/viewer/2022050614/588b150d1a28abdf3b8b78ed/html5/thumbnails/43.jpg)
Bedankt!HansKuijpers
@hans2103