Responsive Images:
CGSmartImage heeft een Responsive Image oplossing die bij het inladen van de website een cookie plaatst met informatie over het schermformaat oid. Afhankelijk van deze cookie kan een afbeelding op een bepaald formaat geschaald worden. Als je tijdens het testen het schermformaat wijzigd moet je deze cookie verwijderen en een reload doen.
Het <picture> element laat het tonen van de juiste afbeelding aan de browser over. Feitelijk komt het erop neer dat je voor ieder schermformaat een afbeelding klaar zet. Smalscherm kleine afbeelding, breedscherm grote afbeelding.
Beide oplossingen zorgen ervoor dat er niet een hele grote plaat ingeladen hoeft te worden, die je vervolgens maar op een klein percentage toond. (Schalen in procenten is iets anders dan de werkelijke afmeetingen van een afbeelding aanpassen minder kb's).
<picture> is een nieuwe standaard voor <img>
Debugging:
FireFox heeft een mooie Responsive Design Mode (CTRL+Shift+m) hiermee kan je een website in verschillende formaten bekijken.
- Voor hele specifieke JavaScript problemen (die alleen op een mobiel apparaat of tablet voorkomen) zou je FireBug Lite kunnen proberen. Door tijdens het testen een script toe te voegen <__script__ src=> kan je zien of er error's in de console verschijnen.
- Ook zal je nog een mobiel apparaat kunnen emuleren. Zowel Android als IOS hebben developer kits. Voor de laatste heb je wel een Mac nodig.
- Dan heb je ook nog Browsersync
http://browsersync.io Hiermee kan je op je desktop testen en worden all interacties gescynchroniseerd naar apparaten die de (development)website open hebben staan. Scoll je naar beneden dan zie je dit ook gebeuren op je mobieltje of tablet.
Dit werkt erg fijn voor een lokale development omgeving. Je moet CMSMS dan wel zodanig configuren dat deze via een ipadres (lokaal net werk) op je mobieltje te openen is. Ook dien er een script toegevoegd te worden.
- Voor het testen van verschillende breakpoints maak ik ook nog gebruik van een $debug switch. Deze zorgt ervoor dat er tijdens het testen aan de bovenkant van de webpagina een gekleurde balk verschijnt met de naam van het breakpoint. Ik doe dit in Sass maar zoiets zou ook kunnen in cms_stylesheet [[$xdebug-mq=true]] kunnen. Heb voor breakpoint testing ook wel eens plugins en andere scripten gezien zoals:
http://breakpointtester.com/
** Tijdens het testen van breakpoints een gekleurde balk en de naam van de breakpoint op het scherm tonen:**
Code: Select all
@media all {
body {
&::before {
@if ($xdebug-mq == 1) {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
padding: .6em;
font-weight: 900;
text-align: center;
z-index: 2000;
opacity: .3;
}
}
}
@media (min-width: 20em) and (max-width: 29.9em) {
.mq-at-s {
background-color: #c2af41;
font-size: 11px;
color: #3d50be;
}
.mq-at-s::before {
content: "at s";
background-color: #999999;
}
}