PAO + responsive design

M

magarno

Membre confirmé
23 Janvier 2006
27
1
54
Bonjour,


Je suis infographiste et travaille essentiellement sur la suite Adobe. Je fabrique des maquettes destinées à des étudiants et je m'intéresse énormément au responsive design. En fait je souhaiterai que mes maquettes soient lisibles sur les autres supports comme smartphone, tablettes… Avez vous des pistes techniques sur lesquelles je pourrai me pencher ?
D'avance merci.
 
Ouille, je ne sais même pas la signification de « Responsive Design » !

Mais ceux qui connaissent devraient pouvoir te répondre, s'il y en a.
 
Responsive design, c'est du politiquement correct ? Bon, normalement dans la suite Adobe complète (donc avec web design), tu devras faire le pont entre Indesign (avec imports Photoshop + Illustrator éventuellement) et Dreamweaver. Mais là, ça demande quand même pas mal d'entraînement (en résumé savoir basculer du mode print vers le HTML, ce qui n'est pas du simple copier-coller) :p
 
Donc en gros c'est simplement du multimedia/multi-supports ;):siffle:
 
Responsive design, c'est une expression à la mode mais qui désigne quelque chose de précis. Et cette chose précise ce n'est pas du multi-support, c'est du web pur jus !

Un responsive design, c'est, pour un site web, un design qui s'adapte automatiquement (sans faire un site mobile, un site tablettes, un site PC, etc.) à toutes les tailles d'écran (avec aussi la notion d'horizontalité/verticalité). Exemple (amusez-vous à réduire la fenêtre de votre navigateur progressivement jusqu'à la taille d'écran d'un smartphone. En fait au delà d'être à la mode, c'est juste une nécessité aujourd'hui : on ne peut plus se lancer dans un projet web sans gérer cet aspect.

Du coup la question est un peu bizarre : si on veut travailler sur du responsive-design, c'est purement une affaire de graphiste en webdesign.

S'il s'agit de travail sur plusieurs support (print et web), soit on cherche du côté des gros éditeurs une éventuelle solution clé en main, soit on met en place, en amont, un flux de donnée cohérent du type : textes et images gérés par une base de donnée (mysql fait très bien l'affaire) et on en tire, vie un langage de programmation type PHP (très suffisant), d'un côté du web, de l'autre du texte balisé inDesign ou du XML, par exemple.

Personnellement, j'ai toujours bricolé ça par moi-même (d'abord sur FileMaker et maintenant en PHP-MYSQL) sur mesure et je n'ai pas fait le tour des solutions existantes. Mais ça a, peut-être au moins le mérite d'éclaircir certains termes et les pistes de recherches…
 
Dernière édition:
magarno a dit:
Bonjour,


Je suis infographiste et travaille essentiellement sur la suite Adobe. Je fabrique des maquettes destinées à des étudiants et je m'intéresse énormément au responsive design. En fait je souhaiterai que mes maquettes soient lisibles sur les autres supports comme smartphone, tablettes… Avez vous des pistes techniques sur lesquelles je pourrai me pencher ?
D'avance merci.
Cliquez pour agrandir...

Hello

ResponsiveDesign = siteweb.
Le principe est d'adapter un contenu html à la taille de ton écran grâce aux CSS et éventuellement AJAX+JAVASCRIPT.
Il faut savoir coder (et bien) pour arriver à un contenu correcte.
Une piste plus "facile" est de passer par des templates responsive sur un CMS type WordPress.
 
ccciolll a dit:
Impressionnant, ça va bien au delà de juste adapter la taille des fenêtres en gardant un contenu identique.
Cliquez pour agrandir...

Tu gardes le contenu mais tu le réadaptes.
Exemple typique monté sur WordPress avec le thème générique "Twenty Ten".
Avec très peu de connaissance on arrive facilement à ce genre de résultat.

Moi qui ne connais pas beaucoup le WEB j'ai réussi facilement à faire mon site en "responsive"


http://www.enel-rehel.com
 
Comme M. Jourdain qui faisait en parlant de la prose sans le savoir :D
 
Dernière édition par un modérateur:
magicPDF a dit:
Dire que mon site est "responsive-design" et que je ne le savais pas…
:)
Cliquez pour agrandir...

Non : :D désolé, il est juste "élastique".

C'est un bon début mais il n'est plus du tout "responsif" en dessous de 1000 px, ce qui exlue les tablettes verticales et tous les smartphones qui passent alors en mode zoom (site réduit).

Respnsif, ça veut dire qu'on gère tous les cas.

En fait il faudrait au moins, dans ton cas :
un style pour les écrans en dessous de 1024px (variante adaptée de ta feuille principale)
un style pour les écrans en dessous de 769px (tout le site sur une seule colonne)

En fait c'est assez facile à faire techniquement.
La difficulté vient seulement du fait qu'on ne fait plus une CSS par site mais 4 ou 5 et que toutes doivent être aussi travaillées.
Cela dit on ne refait pas tout mais juste des hack des divs principaux de la CSS par défaut (à l'intérieur de balises media queries à la fin de la CSS).

Du coup on a intérêt à utiliser un maximum des dimensions en % et en em. Pour que la modification d'une div influe, sur tous les textes et divs contenus dedans. Ça donne moins de boulot.
 
Dernière édition:
Je viens d'apprendre que :

Did you know that you can get Adobe Edge Animate, Adobe Reflow (Preview), Edge Code (Preview) and Edge Inspect for FREE? Members of the Creative Cloud (including the FREE membership) can download the applications from the Creative Cloud website.

These tools are designed for the modern web and allow you to create interactive and timeline based animated content using HTML, CSS, and JavaScript, create responsive layouts for different screen sizes and much more!



Autrement dit :

Saviez-vous que vous pouvez obtenir Adobe Edge Animate, Adobe Reflow (Preview), Edge Code (Preview) et Edge Inspect gratuitement ?
Les membres de la Creative Cloud (y compris l'adhésion gratuite) peuvent télécharger les applications à partir du site Web de Creative Cloud.

Ces outils sont conçus pour le web moderne et vous permettent de créer interactive et un calendrier basé sur le contenu animé à l'aide HTML, CSS et JavaScript pour créer des mises en pages répondant à différentes tailles d'écran et bien plus encore!

:up:

---------- Nouveau message ajouté à 14h39 ---------- Le message précédent a été envoyé à 14h35 ----------
Niconemo a dit:
Non : :D désolé, il est juste "élastique".
Cliquez pour agrandir...
Et ça c'est juste élastique ?
;) :D

==> http://abracadabrapdf.net/mobile/
 
Dernière édition:
magicPDF a dit:
Et ça c'est juste élastique ?
;) :D

==> http://abracadabrapdf.net/mobile/
Cliquez pour agrandir...

image1hj.png


Bof…

On fait plus élastique.
 
magicPDF a dit:



Et ça c'est juste élastique ?
;) :D

==> http://abracadabrapdf.net/mobile/
Cliquez pour agrandir...

C'est un site mobile.
C'est à dire une version mobile de ton site.

Un site responsive n'a pas besoin de version mobile.
C'est la même page qui s'affichera de façon différente sur des appareils différents.
Et j'ajoute que c'est vraiment simple à faire et qu'il n'y a pratiquement pas à vérifier ce que ça rend sur tel ou tel appareil.
Ça peut s'adapter à n'importe quel site correctement structuré sans développement supplémentaire (à part pour le graphiste)

Bloc de code: 
/* ici la feuille de style par défaut */

body {
   font-size:14px;
}

#main-wrapper {
    margin : 10px auto;
    width:900px;
    font-size:1em;
}

/* et en dessous les hacks correspondant à différentes tailles d'écran */


/*--------------------------------------------------------*/
/*        Plus petit que le format standard 960 px        */
/*--------------------------------------------------------*/
@media only screen and (max-width: 959px) 
{
    #main-wrapper {
        margin : 0;
        width:auto;
        font-size:0.9em;
    }
}

/*--------------------------------------------------------*/
/*       Tablette verticale jusqu'au standard 960px       */
/*--------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) 
{
}

/*--------------------------------------------------------*/
/*               Toutes tailles de mobiles                */
/*--------------------------------------------------------*/
@media only screen and (max-width: 767px) 
{
}

/*--------------------------------------------------------*/
/*      Mobile horizontal (jusqu'à Tablette verticale)      */
/*--------------------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) 
{
}

/*--------------------------------------------------------*/
/*         Mobile vertical (jusqu'à Mobile Paysage)         */
/*--------------------------------------------------------*/
@media only screen and (max-width: 479px) 
{
}
Il faut aussi ajouter ça dans le <head></head> des pages (dans les balises meta) pour empêcher l'appareil de faire à sa sauce et le forcer à utiliser nos feuilles de style (ça désactive le zoom automatique des mobiles) :

Bloc de code: 
<meta name="viewport" content="user-scalable=no, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, width=device-width">
 
Dernière édition:

Sujets similaires

M
MacBook Pro MacBook Pro reconditionné : quelles séries et configurations choisir pour du design ?
Réponses
20
Affichages
8K
Switch et conseils d’achat Mac
Mi-Milie
M
Floriandash
MacBook Pro Conseil d'achat MP 14 : stockage
Réponses
9
Affichages
2K
Switch et conseils d’achat Mac
Alias
Alias
H
MacBook Air Changer mon Air M1 pour un M2 ?
Réponses
15
Affichages
6K
Switch et conseils d’achat Mac
Macounette
Macounette
A
MacBook Pro Choix mac pour études de design
Réponses
23
Affichages
5K
Switch et conseils d’achat Mac
All56
A
B
  • Fermé
Mac Pro Worksation design 3D et 2D
Réponses
1
Affichages
807
Switch et conseils d’achat Mac
Locke
Locke
Haut Bas