Maak je website geschikt voor mobiel Hans Kuijpers
A presentation at JoomlaDagen 2016 in April 2016 in by Hans Kuijpers
Maak je website geschikt voor mobiel Hans Kuijpers
Verbeter de vindbaarheid
Mobile-Friendly test https://www.google.com/webmasters/tools/mobile-friendly
Mobile-Friendly test Maar dit is hoe Google de site ziet
Robots blokkeren de content Aanwezigheid van verouderde robots.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/
Joomla! 3.5 robots.txt User-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/
Joomladagen.nl responsive
Responsive Web Design Testing Tool http://mattkersley.com/responsive/
W3C mobileOK Checker http://validator.w3.org/mobile/
Werk aan de winkel Volgend jaar een nieuwe site joomladagen.nl mobiel vriendelijk voor zowel W3C mobileOK Checker als voor Google mobile checker suggesties zijn welkom op hans@joomladagen.nl
Maar nu naar je eigen website Stappenplan Hoe ziet de site er uit op mobiel? Hoe zou je willen dat de site er op mobiel uit ziet? apart design responsive Wijzigen maar… klinkt net zo eenvoudig als het tekenen van een paard
Google Resizer http://design.google.com/resizer/
Google Resizer - mobiel
Multi-device layout patterns Luke Wroblewski http://www.lukew.com/ff/entry.asp?1514
Huidige structuur
Gewenste structuur
Flexbox for the win http://caniuse.com/#search=flexbox
Codepen voor de codevoorbeelden http://codepen.io/team/css-tricks/pen/jqzNZq
Huidige structuur <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>
Gewenste structuur <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>
index.php in huidige template Op je testomgeving met de bestaande template index.php kopieren naar index-orig.php nieuw bestand index-new.php nieuw bestand index.php met de volgend info: <?php defined(‘_JEXEC’) or die; include_once(‘index-new.php’); //include_once(‘index-orig.php’);
Viewport toevoegen voorkom dat device gaat herschalen <meta name=”viewport” content=”width=device-width, user-scalable=yes, initial-scale=1”> voorkom dat user gaat pinchen en zoomen <meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1”> advies: kies voor het eerste
Toevoegen kan ook vanuit Joomla
Begin vanuit mobiel .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%; }
Nu al geweldig op mobiel
Maar minder op desktop
Media-queries bieden de oplossing @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; }
Twee kolommen… nog geen drie
Meer media-queries @media only screen and (min-width: 1024px) { .site__aside.site__aside-2 { flex: 0 240px; } }
Eindresultaat
Maar dan… afbeeldingen die te groot zijn tabellen die niet passen iFrame die niet pas The devil is in the details
Responsive images img {max-width: 100%;}
Tables
Bootstrap gebruikers http://codepen.io/SitePoint/full/raXdwZ/
CSS-Tricks Table Roundup https://css-tricks.com/responsive-data-table-roundup/
iFrame
iFrame
HTML en CSS wijziging Verwijder widht en height uit iFrame html tag plus iframe { border:none; width:100%; height:100%; min-height:600px; } @media only screen and (min-width: 1084px) { iframe { width: 768px; } }
iFrame
iFrame
Eind goed al goed Hoe ziet de site er op mobiel uit? Hoe wil je dat de site er uit komt te zien? Keuze voor responsive of separaat template viewport & media-queries & details :-) flexbox is cool!
Bedankt! Hans Kuijpers @hans2103
