Liste des liens
Designing systems of reusable components that adapt to responsive layouts, containers, work with different content states and adapt to user needs, behaviour and context.
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #222;
max-width: 40rem;
padding: 2rem;
margin: auto;
background: #fafafa;
}
img { max-width: 100%; }
a { color: #2ECC40; }
h1, h2, strong { color: #111; }Via cochise et erase
Des templates responsives.
Sans vouloir te vexer, il n'est pas terrible, terrible (voir mon commentaire sur la version de démo).
This navigation aims at progressively collapsing navigation links into an off-screen navigation instead of doing it for all the links at the same time.
Une autre manière de faire et nécessitant de connaître les entêtes du tableau, trouvée ici : http://css-tricks.com/responsive-data-tables/
/ ------------Responsive tables----------------- /
/
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Porn Name"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }*/
td.nbphotos:nth-of-type(1):before { content: "Nombre"; }
td.optionphotos:nth-of-type(2):before { content: "Options"; }
td.prixphotos:nth-of-type(3):before { content: "Prix"; }
td.bon:nth-of-type(4):before { content: "Bon"; }
td.ancien:nth-of-type(1):before { content: "Ancien"; }
td.nouveau:nth-of-type(2):before { content: "Nouveau"; }}
/ ------------Responsive tables----------------- /
via SebSauvage : http://sebsauvage.net/links/?cMa5jw
Méthode css pour afficher des données tabulaires de manière adaptative.
Si on a plusieurs tableaux sur le site, il suffit d'ajouter une classe pour chaque cellule de chaque colonne pour pouvoir ensuite étiqueter les données.
Par exemple :
td.maPremiereClasse:nth-of-type(1):before { content: "First Name"; }
td.maDeuxiemeClasse:nth-of-type(2):before { content: "Last Name"; }
Long article, très intéressant sur le design adaptatif.
Y a du boulot...
Tout est dans le titre
La taille de l'écran est détectée via une ligne de javascript qui la stocke dans un cookie.
Un fichier .htaccess redirige les demandes d'affichage d'images (jpg, gif et png) vers un script php qui utilise le cookie précédent pour envoyer une image adaptée à la taille de l'écran.
Si l'image n'existe pas dans un dossier cache, le script php la génère pour les prochaines requêtes.
Limitations identifiées par l'auteur :
- c'est du php
- ne fonctionne pas si le site est délivré par un CDN (Content Delivery Networks) pour qui le cache n'est pas utilisé
- il n'y a pas de garantie que le cookie soit envoyé avant la requête pour une image, même via javascript. Si c'est le cas, c'est la plus petite image qui sera envoyée pour les mobiles et la plus grosse pour les bureaux. Une solution sans javascript existe mais elle est beaucoup moins rapide.
Je n'ai pas encore testé ce script mais il me semble très prometteur.