Comment faire un mini-site responsive

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par marabout-agile, 7 Juillet 2020.

  1. marabout-agile
    marabout-agile Nouveau WRInaute
    Inscrit:
    24 Juin 2020
    Messages:
    5
    J'aime reçus:
    1
    Bonjour,
    Je suis encore étudiant en e-commerce. J'ai de bonnes bases de HTML, CSS et PHP. Je connais un peu de Javascript grâce à mes études, mais je n'ai jamais poussé plus loin. Mais j'ai bien envie de tester mes compétences en créant mon site CV from scratch... Du coup, avant même de commencer, j'ai réfléchi au fait que je souhaiterais qu'il soit dispo sur mobile aussi. Je voulais savoir si, avec les langages cités précédemment, il était possible de faire un site 100% responsive ? Si oui, quels attributs/outils/balises utiliser ? Si non, quel outils puis-je utiliser ?
    Merci d'avance !
     
  2. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 487
    J'aime reçus:
    195
    Le responsive c'est du CSS et du HTML.
    Dans le CSS on utilise @media screen pour indiquer la condition de taille d'écran, cherche de ce côté.

    Mais de nos jours faire "from scratch" est de moins en moins ce que les recruteurs cherchent, ils aiment bien qu'on utilise 36 frameworks, 256 librairies... Aussi bien pour PHP, JS que le responsive.
    Moi j'utilise Bootstrap pour le responsive, il y en a d'autres plus légers mais c'est très populaire alors tant pis pour les 300 Ko que ça ajoute...
     
  3. emualliug
    emualliug WRInaute discret
    Inscrit:
    1 Février 2020
    Messages:
    167
    J'aime reçus:
    32
    Utilise bootstrap. C'est une très bonne base qui contient le css et le js pour faire un site responsif et élégant. Il est très aisé d'y ajouter des règles dans un css dédié pour personnaliser le rendu.

    édit : je vois que @rick38 propose la même chose. Je suis d'accord avec lui sur la question du poids, Bootstrap est "un peu" lourd, dans le sens où on en utilise que le 10e la plupart du temps. Il est possible de faire un bootstrap "sur "mesure" en ne sélectionnant que les composants que l'on souhaite… mais je ne trouve pas que le gain vaille la peine. Le poids total reste très raisonnable sur un chargement global, d'autant plus que c'est du statique que l'on peut mettre en cache. Et rien ne sert de vouloir économiser sur le poids d'un composant si c'est pour, à côté, faire 15 appels à divers script, styles, fonts, etc.
     
    #3 emualliug, 7 Juillet 2020
    Dernière édition: 7 Juillet 2020
    marabout-agile apprécie ceci.
  4. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 158
    J'aime reçus:
    173
    Il existe un générateur de sites basé sur bootstrap qui s'appelle Lauyan Toweb
     
  5. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 487
    J'aime reçus:
    195
    Un générateur c'est pas son but je pense, c'est pour mettre en pratique et acquérir de la compétence qu'il veut...
     
  6. indigene
    indigene WRInaute accro
    Inscrit:
    7 Septembre 2003
    Messages:
    4 158
    J'aime reçus:
    173
    mais comme tu le disais plus haut, faire du from scratch n'est pas un but en soi.

    En utilisant un générateur, la structure est créée et après il possible de reprendre des briques, les déplacer, faire autre chose avec, etc. Il ne s'agit pas de réinventer la roue mais d'assembler des engrenages pour en faire un moteur.

    Le générateur permet de générer tous les éléments de base qui ne représentent pas une réelle plus-value s'ils doivent être reconstruits en partant de zéro. Un maçon qui construit une maison ne fabrique pas lui-même ses moellons.

    Et le générateur produit un préview en pur html. Après tout le travail consiste à intégrer ce html au cœur de scripts PHP. Le vrai travail qui vise à mettre en pratique des compétences est la réalisation de ces pages php qui accèdent à des bases de données. Le html/css n'est qu'une mise en forme des pages. Si des modèles (templates) existent déjà pourquoi s'en priver ? Même en entreprise, quand on doit réaliser un document word ou un powerpoint, on repart toujours d'un modèle officiel qui correspond à une certaine charte graphique. On ne recrée pas un modèle/charte graphique à chaque nouveau document. C'est à cela que sert un générateur.
     
  7. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 029
    J'aime reçus:
    291
  8. marabout-agile
    marabout-agile Nouveau WRInaute
    Inscrit:
    24 Juin 2020
    Messages:
    5
    J'aime reçus:
    1
    Merci :) Oui, j'ai déjà utilisé Bootstrap mais je n'arrive pas à me rendre compte si c'est très utilisé ou pas, selon toi, c'est donc l'un des plus populaire ?
     
  9. marabout-agile
    marabout-agile Nouveau WRInaute
    Inscrit:
    24 Juin 2020
    Messages:
    5
    J'aime reçus:
    1
    Merci pour toutes vos réponses :) Je vais aller explorer tous vos conseils :D
     
  10. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 487
    J'aime reçus:
    195
    C'est probablement le plus répandu oui. Pas parce que c'est le meilleur (depuis il en existe plein d'autres, cherche Responsive CSS Framework dans Google), mais par son ancienneté (mais il est toujours bien maintenu et en est à sa version 4).
     
  11. emualliug
    emualliug WRInaute discret
    Inscrit:
    1 Février 2020
    Messages:
    167
    J'aime reçus:
    32
    C'est actuellement, et de très loin, le plus utilisé d'après builtwith.
     
  12. Buddyweb
    Buddyweb Nouveau WRInaute
    Inscrit:
    22 Juillet 2020
    Messages:
    1
    J'aime reçus:
    1
    Bootstrap et le plus utilisé mais peut être pas le plus simple pour quelqu'un qui pose cette question. Il y a des framework moins complets mais plus simples du coup. Autre chose, tu peux utiliser une solution comme aerobatic pour pousser ton code directement sur un serveur en ligne sans payer le nom de domaine. L'url ne sera pas géniale mais ca répond à ta demande.
     
    marabout-agile apprécie ceci.
  13. baboulinetbcn
    baboulinetbcn Nouveau WRInaute
    Inscrit:
    23 Novembre 2014
    Messages:
    19
    J'aime reçus:
    0
    Dans le genre facile aussi, à une époque, j'ai utilisé Mobirise
     
Chargement...
Similar Threads - mini responsive Forum Date
Administrateur récalcitrant Droit du web (juridique, fiscalité...) 6 Mai 2020
SEO des pages administratives (gare au copiage?) Débuter en référencement 3 Avril 2020
Astuce Transférer l'administration d'un compte Google Analytics 2 Avril 2020
WordPress Améliorer la vitesse: Minimize request size Développement d'un site Web ou d'une appli mobile 1 Mars 2020
système de notation par étoiles : dimensions mini ? Administration d'un site Web 9 Octobre 2019
Quid des règles de bonnes pratiques SEO pour l'administration d'un forum Référencement Google 10 Août 2019
L'administratif, une autre raison d'aimer Adsense AdSense 24 Juillet 2019
Capturer miniature image soundcloud Développement d'un site Web ou d'une appli mobile 1 Juillet 2019
Capture miniature Youtube YouTube, Google Images et Google Maps 26 Juin 2019
Temps de réponse et minimisation CSS et JS Débuter en référencement 30 Novembre 2018
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice