Maak je website geschikt voor mobiel

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

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

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