Vous avez dit
responsive design ?
Colonne 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan aliquam sem sed fringilla. Vivamus consequat purus est, ac luctus augue pretium elementum. Phasellus ultrices nunc vitae orci blandit, a vulputate erat tristique. Pellentesque gravida convallis nulla sed commodo. Integer id sagittis nibh. Aliquam a porttitor tortor, vitae venenatis nunc. Aliquam erat volutpat. Suspendisse tempus semper finibus. Vivamus pretium mattis neque, quis sollicitudin ligula fringilla eu. Phasellus blandit tempor tellus id sodales. Etiam et nibh est. Aenean sed mi euismod, aliquet lorem feugiat, luctus odio. Ut laoreet mi in metus porttitor fringilla.
Sed quis fringilla urna. Etiam non nisl vel dolor ullamcorper posuere. Aliquam tortor erat, consequat a elit sit amet, mollis laoreet est. Duis non luctus arcu. Mauris finibus id ante in suscipit. Vivamus scelerisque non sapien vel malesuada. Donec condimentum orci at metus sagittis, et maximus sem feugiat.
Duis eget libero sem. Pellentesque at sem tristique, iaculis odio vel, iaculis eros. Phasellus hendrerit, eros sed rutrum blandit, urna mi gravida lectus, eget pellentesque orci neque id ipsum. In enim odio, hendrerit ut condimentum vel, mattis et nisl. Nulla erat ipsum, posuere sit amet nisi aliquam, dictum iaculis purus. Aenean dui orci, efficitur bibendum vehicula vel, consectetur ut nulla. Suspendisse nunc nunc, consequat et quam ac, vestibulum lacinia nibh. In sit amet lectus ac purus ultrices facilisis vel ut enim. Morbi hendrerit interdum metus a scelerisque. Vivamus tempor facilisis velit vel feugiat. Fusce lobortis velit sed leo finibus, a lobortis ligula auctor.
Présentation adaptative
De manière à éviter un affichage approximatif, la solution peut consister à adapter le contenu à chaque type d’écran que l’on rencontre aujourd’hui (bureau, tablette et téléphone mobile).
Principe : on conçoit différents états statiques du site pour afficher le plus adapté en détectant la largeur du navigateur. Si on referme l’écran de son navigateur de bureau, on voit nettement plusieurs présentations fixes et un saut de présentation à chaque changement d’état.
Inconvénient : cela nécessite plus de temps pour développer les différents états et les maintenir ensuite. Compte tenu du nombre important de largeurs et de résolutions d’écrans existant sur le marché, les quelques largeurs fixes choisies à la conception ne pourront pas être optimales pour tous les appareils utilisés.
Colonne 2a
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan aliquam sem sed fringilla. Vivamus consequat purus est, ac luctus augue pretium elementum. Phasellus ultrices nunc vitae orci blandit, a vulputate erat tristique. Pellentesque gravida convallis nulla sed commodo. Integer id sagittis nibh. Aliquam a porttitor tortor, vitae venenatis nunc. Aliquam erat volutpat. Suspendisse tempus semper finibus. Vivamus pretium mattis neque, quis sollicitudin ligula fringilla eu. Phasellus blandit tempor tellus id sodales. Etiam et nibh est. Aenean sed mi euismod, aliquet lorem feugiat, luctus odio. Ut laoreet mi in metus porttitor fringilla.
Colonne 2b
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan aliquam sem sed fringilla. Vivamus consequat purus est, ac luctus augue pretium elementum. Phasellus ultrices nunc vitae orci blandit, a vulputate erat tristique. Pellentesque gravida convallis nulla sed commodo. Integer id sagittis nibh. Aliquam a porttitor tortor, vitae venenatis nunc. Aliquam erat volutpat. Suspendisse tempus semper finibus. Vivamus pretium mattis neque, quis sollicitudin ligula fringilla eu. Phasellus blandit tempor tellus id sodales. Etiam et nibh est. Aenean sed mi euismod, aliquet lorem feugiat, luctus odio. Ut laoreet mi in metus porttitor fringilla.
Colonne 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan aliquam sem sed fringilla. Vivamus consequat purus est, ac luctus augue pretium elementum. Phasellus ultrices nunc vitae orci blandit, a vulputate erat tristique. Pellentesque gravida convallis nulla sed commodo. Integer id sagittis nibh. Aliquam a porttitor tortor, vitae venenatis nunc. Aliquam erat volutpat. Suspendisse tempus semper finibus. Vivamus pretium mattis neque, quis sollicitudin ligula fringilla eu. Phasellus blandit tempor tellus id sodales. Etiam et nibh est. Aenean sed mi euismod, aliquet lorem feugiat, luctus odio. Ut laoreet mi in metus porttitor fringilla.
Sed quis fringilla urna. Etiam non nisl vel dolor ullamcorper posuere. Aliquam tortor erat, consequat a elit sit amet, mollis laoreet est. Duis non luctus arcu. Mauris finibus id ante in suscipit. Vivamus scelerisque non sapien vel malesuada. Donec condimentum orci at metus sagittis, et maximus sem feugiat.
Duis eget libero sem. Pellentesque at sem tristique, iaculis odio vel, iaculis eros. Phasellus hendrerit, eros sed rutrum blandit, urna mi gravida lectus, eget pellentesque orci neque id ipsum. In enim odio, hendrerit ut condimentum vel, mattis et nisl. Nulla erat ipsum, posuere sit amet nisi aliquam, dictum iaculis purus. Aenean dui orci, efficitur bibendum vehicula vel, consectetur ut nulla. Suspendisse nunc nunc, consequat et quam ac, vestibulum lacinia nibh. In sit amet lectus ac purus ultrices facilisis vel ut enim. Morbi hendrerit interdum metus a scelerisque. Vivamus tempor facilisis velit vel feugiat. Fusce lobortis velit sed leo finibus, a lobortis ligula auctor.
Réalisation CPorlier-Design sur une idée de Joseph Angelo Todaro
