L'objectif est de créer un site web en Html5 de largeur fixe pour les écrans de "bureau" et étant ensuite rwd (Responsive WebDesign).
D'où l'utilisation d'un certain nombre de scripts ,dont l'appel aux médiaquerries, et de permettre aux anciens navigateurs d'être compatible.
Pour la conception j'utilise une grille de mise en page que je peux afficher par le biais du script hasgrid .Ce script hasgrid est le seul à ne pas figurer dans le head mais à la fin du body. Ainsi lorsque le site ne sera plus en développement, il suffira d’effacer ces dernières lignes.
Vous trouverez le code dans la page publiée à cet effet.
Ce nouvel élément a pour mission de devenir la cible privilégiée du lien « Aller au contenu principal ».
Son utilisation: il va remplacer la <div role=’main’> que nous utilisions jusqu'ici.!
Pour lui appliquer des styles CSS, il suffit de lui faire subir le même sort que les autres balises HTML5 article
, aside
, figcaption
, figure
, footer
, header
, nav
et section
: main { display: block }
.
Cette balise est déjà disponible dans le script html5shiv.js ou dans la dernière version de Rocssti base css de Nicolas Hoffmann, inspirée de Knacss !
Parmi les restrictions, on notera que l’élément main
:
-
Est prévu pour être seul (pas deux
main
dans un document),
-
Ne doit pas être utilisé à l’intérieur des éléments
article
, aside, footer
, header
ou nav
,
-
Se porte mieux avec l’attribut ARIA correspondant
<main role="main"></main>,
-
N’est pas prévu, d’une manière générale, pour servir de contenu principal d’une sous-section.
Aujourd’hui, rendre son site internet utilisable à tous ses utilisateurs ressemble parfois à un challenge ! Aujourd’hui, ce sont dix conseils pour le Responsive Web Design que l’agence Splio nous propose :
Lire la suite de 10 petits conseils en responsive design
La problématique du responsive est bien plus complexe que ce qu'on peut lire sur certains blogs qui essaient de nous faire croire qu'il suffit aujourd'hui, pour optimiser un site pour mobile, d'ajouter 2 Media Queries pour l'iPhone et l'iPad et redimensionner toutes les images.
Lire la suite de Responsive Webdesign – présent et futur de l’adaptation mobile
Comment ce site a pu m'aider dans mon choix de passer dès maintenant au HTM5 et Css3.....
Lire la suite de Can I Use