Nouveau site Responsive Design

Postez un lien vers votre site réalisé avec Contao
Avatar de l’utilisateur
ST WebDesign
Membre
Messages : 291
Inscription : 29 Avr 2009 20:57
Localisation : Vendée
Contact :

Nouveau site Responsive Design

Messagepar ST WebDesign » 21 Juil 2012 11:17

Bonjour,

Nouvelle création iGweb : http://www.coeur-à-coeur.fr (PS : l'adresse est bien avec un accent. Le forum bug sur les adresse avec accents) sinon ce lien doit fonctionner http://www.xn--coeur--coeur-39a.fr
Coeur à Coeur est une agence de rencontre

Gros plus pour ce site :
Il est Responsive Design !

Pour ceux qui ne savent pas ce que cela signifie ?!?

Je vous explique :
La notion de Responsive Web Design (conception de sites web adaptatifs) signifie qu'un site est conçu pour s'adapter aux différentes tailles d'écran et aux différents terminaux permettant d'afficher le site (navigateur, tablette, mobile, télé connectée, ...). Ainsi, les mobinautes et utilisateurs de tablettes pourront avoir une expérience adaptée à leur terminal sans dégradation et sans devoir utiliser les fonctionnalité de zoom (ou un autre type de redimensionnement). Ils pourront consulter la même information, mais organisée différemment selon le type de terminal utilisé.

Le responsive webdesign est une véritable opportunité pour proposer aux internautes une expérience utilisateur adaptée à leur situation d’usage.

Vous pouvez voir quelle présentation a ce site selon le type de terminal utilisé à cette adresse : http://quirktools.com/screenfly/


A bientôt,
www.igweb.fr

Avatar de l’utilisateur
MIMATA
Membre
Messages : 453
Inscription : 23 Avr 2008 08:29
Localisation : France
Contact :

Re: Nouveau site Responsive Design

Messagepar MIMATA » 26 Juil 2012 21:33

Re,

Très bien aussi, j'ai pu jouer un peu et ça marche impec. Par contre, ce genre de design doit être pensé dès le début, il faut penser à rester simple dans la mise en forme et dans le contenu.
Un design fluide multi-plateforme c'est un peu prise de tête quand même non ?
MIMATA - Votre Site Pro : http://www.votresitepro.com - Planète Astronomie : http://www.planete-astronomie.eu (NEW) et http://www.planete-astronomie.com - Forum de Planète Astronomie : http://forum.planete-astronomie.com - Jeu de questions Planète Astronomie : http://astroquiz.planete-astronomie.com - Vidéos de Planète Astronomie : http://videos.planete-astronomie.com

FiX'
Membre
Messages : 399
Inscription : 02 Jan 2009 01:04

Re: Nouveau site Responsive Design

Messagepar FiX' » 27 Juil 2012 10:24

MIMATA a écrit :Re,

Très bien aussi, j'ai pu jouer un peu et ça marche impec. Par contre, ce genre de design doit être pensé dès le début, il faut penser à rester simple dans la mise en forme et dans le contenu.
Un design fluide multi-plateforme c'est un peu prise de tête quand même non ?


Prise tête... peut-être... quoi que c'est pas si compliqué que ça !

Dans mon agence, cette technique est très utilisée. Ça nous permet de proposer plusieurs versions d'un même site à partir d'une seule base.

C'est plus optimisé que la création d'une version iPhone/iPad (etc...) distincte... surtout au niveau du référencement.

Au final le client est satisfait et nous aussi (budget plus important... largement, même) !

Avatar de l’utilisateur
ST WebDesign
Membre
Messages : 291
Inscription : 29 Avr 2009 20:57
Localisation : Vendée
Contact :

Re: Nouveau site Responsive Design

Messagepar ST WebDesign » 27 Juil 2012 10:26

MIMATA a écrit :Par contre, ce genre de design doit être pensé dès le début, il faut penser à rester simple dans la mise en forme et dans le contenu.

Oui, très juste.
Un site responsive implique quelques réflexions/contraintes.
Ce type de site est en général, épuré effectivement... mais j'ai remarqué que nous revenons de plus en plus vers des design épuré et moderne.

MIMATA a écrit :Un design fluide multi-plateforme c'est un peu prise de tête quand même non ?

C'est du travail en plus c'est sur, mais qui doit être chiffré en conséquence. Je pense que tôt ou tard, nous ne pourrons plus passer à côté du responsive design (ce n'est que mon avis :wink: )
Voilà pourquoi aujourd'hui je le propose à mes clients.
www.igweb.fr

Avatar de l’utilisateur
ST WebDesign
Membre
Messages : 291
Inscription : 29 Avr 2009 20:57
Localisation : Vendée
Contact :

Re: Nouveau site Responsive Design

Messagepar ST WebDesign » 27 Juil 2012 10:28

FiX' a écrit :
Prise tête... peut-être... quoi que c'est pas si compliqué que ça !

Dans mon agence, cette technique est très utilisée. Ça nous permet de proposer plusieurs versions d'un même site à partir d'une seule base.

C'est plus optimisé que la création d'une version iPhone/iPad (etc...) distincte... surtout au niveau du référencement.

Au final le client est satisfait et nous aussi (budget plus important... largement, même) !


+1 :wink: :D
www.igweb.fr

FiX'
Membre
Messages : 399
Inscription : 02 Jan 2009 01:04

Re: Nouveau site Responsive Design

Messagepar FiX' » 27 Juil 2012 10:37

Au final on y gagne largement, car on a moins de travail à faire. Il n'est pas nécessaire de créer a chaque fois un site par support... vu qu'on travaille sur la même base !

Après ça reste du travail en plus, avec beaucoup de tests et d'optmisation... c'est sûr.
Dernière édition par FiX' le 27 Juil 2012 12:50, édité 1 fois.

Avatar de l’utilisateur
iankoOol
Membre
Messages : 160
Inscription : 04 Août 2008 10:07
Localisation : Bretagne

Re: Nouveau site Responsive Design

Messagepar iankoOol » 27 Juil 2012 12:08

Bien joué ! (je viens de le montrer en exemple à un ami web-designer) ;)

par l'adresse avec le "à" c pas une bonne idée, le lien sera difficile à partager etc...
Graphiste / Dév - Xhtml/css/javascript/php - Faîtes-vous du bien !

Avatar de l’utilisateur
ST WebDesign
Membre
Messages : 291
Inscription : 29 Avr 2009 20:57
Localisation : Vendée
Contact :

Re: Nouveau site Responsive Design

Messagepar ST WebDesign » 27 Juil 2012 12:16

iankoOol a écrit :Bien joué ! (je viens de le montrer en exemple à un ami web-designer) ;)

Merci

iankoOol a écrit :par l'adresse avec le "à" c pas une bonne idée, le lien sera difficile à partager etc...

Oui, je confirme, c'est pas encore au point les adresses avec accents. Notamment pour les adresse e-mail... ça ne passe pas.
www.igweb.fr

Avatar de l’utilisateur
audrey
Membre
Messages : 282
Inscription : 07 Mars 2011 09:09
Localisation : Perpignan
Contact :

Re: Nouveau site Responsive Design

Messagepar audrey » 27 Juil 2012 20:45

Chouette :)

Bon là où je suis moins d'accord avec le responsive, c'est quand on cache/ajoute des éléments html pour l'une ou l'autre des tailles écrans.

Dans le code source tu as deux fois ton menu, tu le fais charger deux fois !
C'est de la redondance inutile au final.
Pourquoi ne pas simplement avoir fait des boutons à 100% de la largeur de taille écran, comme on voit souvent en responsive, en block ? Comme tu l'as très bien fait pour la liste des annonces.

FiX'
Membre
Messages : 399
Inscription : 02 Jan 2009 01:04

Re: Nouveau site Responsive Design

Messagepar FiX' » 28 Juil 2012 10:44

audrey a écrit :Chouette :)

Bon là où je suis moins d'accord avec le responsive, c'est quand on cache/ajoute des éléments html pour l'une ou l'autre des tailles écrans.

Dans le code source tu as deux fois ton menu, tu le fais charger deux fois !
C'est de la redondance inutile au final.
Pourquoi ne pas simplement avoir fait des boutons à 100% de la largeur de taille écran, comme on voit souvent en responsive, en block ? Comme tu l'as très bien fait pour la liste des annonces.


+1

Normalement, avec le responsive design, on part d'une version (une version pour navigateur standards) que l'on va adapter en plusieurs autres versions (une version pour navigateur iOS (iPhone, iPad), etc...). Tout ne doit-être qu'une question de css.

Il ne doit pas y avoir de changements trop flagrants d'une version à une autre (pour rester cohérent et surtout ne pas perturber le visiteur)... . En gros, si le menu est présent d'une certaine façon, le menu doit rester le même sur les autres versions... mais adapté à sa résolution.

En clair, je ne vois pas non plus l'intérêt d'avoir mis une liste déroulante... sachant que le menu d'origine n'est pas très complexe (pas de sous menu etc...)

Voilà, voilà !

A+

Avatar de l’utilisateur
MIMATA
Membre
Messages : 453
Inscription : 23 Avr 2008 08:29
Localisation : France
Contact :

Re: Nouveau site Responsive Design

Messagepar MIMATA » 30 Oct 2012 17:45

Salut les copains !

Alors, aujourd'hui est un grand jour puisque le messie CONTAO 3 débarque officiellement sur Terre en version stable !

Donc, il est grand temps de se frotter à cette nouvelle mouture et de se convertir le plus rapidement possible à cette nouvelle religion que j'adore déjà :mrgreen: , en particulier avec les possibilités de gestion de responsive design (RD) qui nous sont désormais offertes. :D (vous pensiez que j'allais faire un gros hors sujet hein :wink:) et comme je dois monter mon premier site responsive design avec Contao, je me permets de poster ici.

Alors, dans la configuration des présentations de page il y a une zone "Feuilles de style" avec 4 feuilles disponibles :

  • CSS reset : Retirer les styles par défaut des éléments HTML incohérents dans différents navigateurs.
  • Constructeur de présentation : Génère la présentation CSS basée sur les paramètres de présentations de page. Ce composant est requis pour que le générateur de présentation de page fonctionne !
  • Grille responsive : Ajoute une grille responsive de 12 colonnes qui est déclenchée par les classes CSS "grid1" à grid12" et "offset1" à "offset12".
  • Feuille de style TinyMCE : Inclus la feuille de style tinymce.css.

Savez-vous si cocher les 4 feuilles peut poser un problème ? Les utilisez-vous ?

Pour une fois, je voudrais essayer de gérer mes styles dans Contao (d'habitude je lie ma propre feuille que je modifie directement et mets à jour par FTP).
Avez-vous des conseils à me donner pour montre un site RD avec Contao et pour gérer les styles dans Contao ?

Merci pour vos conseils et retours.
MIMATA - Votre Site Pro : http://www.votresitepro.com - Planète Astronomie : http://www.planete-astronomie.eu (NEW) et http://www.planete-astronomie.com - Forum de Planète Astronomie : http://forum.planete-astronomie.com - Jeu de questions Planète Astronomie : http://astroquiz.planete-astronomie.com - Vidéos de Planète Astronomie : http://videos.planete-astronomie.com

Avatar de l’utilisateur
Bouctoubou
Modérateur
Messages : 143
Inscription : 20 Avr 2008 19:35

Re: Nouveau site Responsive Design

Messagepar Bouctoubou » 30 Oct 2012 19:54

MIMATA a écrit :Pour une fois, je voudrais essayer de gérer mes styles dans Contao (d'habitude je lie ma propre feuille que je modifie directement et mets à jour par FTP).

J'ai essayé aussi pour une fois sur la RC2 de gérer les CSS via Contao, mais je ne sais pas pourquoi, impossible de mettre en place le "Types de média" (projection, screen, etc.). Une fois le CSS généré on a pas les différents types comme on pouvait l'avoir dans les précédentes versions.

PS : c'est pareil sur la dernière version stable...
http://www.telly-d.com

FiX'
Membre
Messages : 399
Inscription : 02 Jan 2009 01:04

Re: Nouveau site Responsive Design

Messagepar FiX' » 31 Oct 2012 17:14

Hello,

Je n'ai pas encore testé la V3 de Contao. Mais ce que tu dis me semble compliqué...

J'ai pas trop compris l'intérêt des 4 feuilles... obligatoires ? Par contre, c'est cool que les grid soient intégrées par défaut !

Idem pour Jquery ?

Je vais tester ça demain, et je reviendrai pour donner mon avis.

A+

Avatar de l’utilisateur
MIMATA
Membre
Messages : 453
Inscription : 23 Avr 2008 08:29
Localisation : France
Contact :

Re: Nouveau site Responsive Design

Messagepar MIMATA » 01 Nov 2012 17:29

Pour info et pour ne pas faire trop de hors sujet ici : modeles-css/contao-feuille-style-css-externe-t2544.html
MIMATA - Votre Site Pro : http://www.votresitepro.com - Planète Astronomie : http://www.planete-astronomie.eu (NEW) et http://www.planete-astronomie.com - Forum de Planète Astronomie : http://forum.planete-astronomie.com - Jeu de questions Planète Astronomie : http://astroquiz.planete-astronomie.com - Vidéos de Planète Astronomie : http://videos.planete-astronomie.com


Revenir vers « Exposition Contao »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité